:root {
  --bg: #f4f6f5;
  --panel: #ffffff;
  --ink: #17202a;
  --muted: #667085;
  --line: #d9e1df;
  --accent: #0f766e;
  --accent-strong: #0b5f59;
  --accent-soft: #e0f2ef;
  --shadow: 0 18px 45px rgba(17, 24, 39, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: #16211f;
  color: #f8fafc;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

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

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #d9f99d;
  color: #17202a;
  font-weight: 800;
}

.brand h1,
.brand p,
.topbar h2,
.topbar p,
.section-heading h3,
.section-heading span {
  margin: 0;
}

.brand h1 {
  font-size: 18px;
}

.brand p {
  margin-top: 4px;
  color: #b7c5c1;
  font-size: 12px;
}

.nav-list {
  display: grid;
  gap: 10px;
}

.utility-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 16px;
}

.nav-item {
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  border-radius: 8px;
  padding: 14px;
  text-align: left;
  display: grid;
  gap: 4px;
}

.nav-item.active {
  background: #f8fafc;
  color: #10201d;
}

.nav-item span {
  font-weight: 700;
}

.nav-item small {
  color: #8aa09b;
}

.nav-item.active small {
  color: #52635f;
}

.side-panel {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 18px;
}

.side-panel h2 {
  margin: 0 0 8px;
  font-size: 14px;
}

.side-panel p {
  margin: 0;
  color: #c9d6d2;
  line-height: 1.7;
  font-size: 13px;
}

.workspace {
  min-width: 0;
  padding: 18px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.topbar h2 {
  margin-top: 4px;
  font-size: 28px;
  letter-spacing: 0;
}

.top-actions,
.output-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.settings-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.credit-pill {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
}

.credit-pill strong {
  color: var(--accent);
  font-size: 16px;
}

.recharge-box {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 6px 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
}

.recharge-box label {
  color: var(--ink);
  font-weight: 700;
}

.recharge-box input {
  width: 86px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.recharge-box span {
  white-space: nowrap;
}

.support-panel,
.recharge-pay-panel,
.admin-recharge-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  margin: 0 0 16px;
  display: grid;
  gap: 12px;
  background: var(--panel);
}

.support-panel[hidden],
.recharge-pay-panel[hidden] {
  display: none;
}

.support-copy,
.recharge-pay-copy {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}

.support-copy strong,
.recharge-pay-copy strong {
  color: var(--ink);
  font-size: 15px;
}

.recharge-pay-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.panel-close-button {
  width: 24px;
  height: 24px;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.panel-close-button:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.recharge-warning {
  border: 1px solid #f5d08a;
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  background: #fff8e6;
  color: #7a4b00;
  font-size: 13px;
  line-height: 1.6;
}

.recharge-warning strong {
  color: #5f3a00;
}

.support-qr,
.recharge-qr {
  width: min(260px, 100%);
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.recharge-code-row,
.admin-recharge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.recharge-code-row input,
.admin-recharge-grid input {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.recharge-code-row input {
  min-width: 260px;
  flex: 1;
}

.admin-recharge-grid input {
  width: 180px;
}

.admin-dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
  padding: 24px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.45);
}

.admin-dialog-card {
  width: min(1080px, 100%);
  max-height: min(760px, 92vh);
  overflow: auto;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 16px;
  display: grid;
  gap: 14px;
}

.admin-dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

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

.admin-dialog-head div {
  display: grid;
  gap: 4px;
}

.admin-dialog-head strong {
  font-size: 18px;
}

.admin-dialog-head span,
.admin-account-row small,
.admin-security-list span {
  color: var(--muted);
  font-size: 12px;
}

.admin-account-table {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.admin-account-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(150px, 1fr) 80px 90px minmax(120px, 0.75fr) 80px minmax(220px, 1.2fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.admin-multiplier-cell {
  display: grid;
  gap: 4px;
}

.admin-multiplier-cell select {
  min-width: 104px;
}

.admin-multiplier-cell[data-cost-risk="true"] small {
  color: #b42318;
}

.admin-account-row span:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.danger-button {
  border-color: rgba(220, 38, 38, 0.3);
  color: #b91c1c;
}

.danger-button:hover {
  border-color: rgba(220, 38, 38, 0.55);
  background: rgba(254, 226, 226, 0.9);
}

.admin-account-row:first-child {
  border-top: 0;
}

.admin-account-head {
  background: #f8fafc;
  color: var(--muted);
  font-weight: 800;
}

.admin-account-row span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-account-row strong,
.admin-account-row small {
  overflow-wrap: anywhere;
}

.admin-account-empty,
.admin-security-list {
  padding: 12px;
  color: var(--muted);
}

.admin-security-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
}

.admin-security-lock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.admin-security-lock-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-security-lock-row b,
.admin-security-lock-row small {
  overflow-wrap: anywhere;
}

.icon-button,
.primary-button,
.secondary-button,
.danger-button {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 16px;
  font-weight: 700;
}

.icon-button {
  width: 42px;
  padding: 0;
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

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

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

.secondary-button {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

.danger-button {
  background: #fff7f7;
  color: #b42318;
  border-color: #f3b8b3;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.wide {
  flex: 1;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(460px, 1.08fr);
  gap: 16px;
  align-items: start;
}

.input-column,
.output-column {
  display: grid;
  gap: 12px;
}

.section-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.service-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fbfa;
  box-shadow: none;
}

.service-notice .service-copy {
  display: grid;
  gap: 3px;
  min-width: 150px;
}

.service-notice strong {
  font-size: 14px;
}

.service-notice span,
.service-notice em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.service-notice em {
  white-space: nowrap;
}

.service-notice[data-tone="success"] em {
  color: #087443;
}

.service-notice[data-tone="error"] {
  border-color: #fecdca;
  background: #fff8f7;
}

.service-notice[data-tone="error"] em {
  color: #b42318;
}

.service-notice[data-tone="neutral"] em {
  color: var(--muted);
}

.model-tier-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(82px, 1fr));
  gap: 6px;
  min-width: 174px;
}

.model-tier-button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 5px 8px;
}

.model-tier-button strong,
.model-tier-button span {
  line-height: 1.2;
}

.model-tier-button strong {
  font-size: 13px;
}

.model-tier-button span {
  color: var(--muted);
  font-size: 11px;
}

.model-tier-button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.model-tier-button.active span {
  color: var(--accent-strong);
}

.model-tier-button[data-ready="false"] {
  border-color: #fecdca;
  background: #fff8f7;
}

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

.section-heading h3 {
  font-size: 16px;
}

.section-heading span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

label {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

label:last-child {
  margin-bottom: 0;
}

.field-hint {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.inline-field-state {
  margin: -2px 0 0;
  line-height: 1.35;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  color: var(--ink);
  background: #fbfcfc;
  outline: none;
  resize: vertical;
  line-height: 1.45;
}

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

input[data-missing="true"],
textarea[data-missing="true"],
select[data-missing="true"],
details[data-missing="true"],
.service-notice[data-missing="true"] {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

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

.current-type-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 10px;
  margin: 0 0 10px;
}

.current-type-panel div {
  display: grid;
  gap: 3px;
}

.current-type-panel strong {
  color: #344054;
  font-size: 13px;
}

.current-type-panel span {
  color: var(--muted);
  font-size: 12px;
}

.current-type-panel em {
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 4px 9px;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.current-type-panel[data-type="video"] {
  border-color: #9bb5d9;
  background: #f7fbff;
}

.current-type-panel[data-type="detailPage"] {
  border-color: var(--accent);
  background: #f3faf8;
}

.video-duration-panel,
.detail-page-prompt-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 10px;
  margin: 0 0 10px;
}

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

.duration-heading strong {
  font-size: 13px;
  color: #344054;
}

.duration-heading span {
  color: var(--muted);
  font-size: 12px;
}

.duration-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.duration-option {
  min-width: 50px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #344054;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.duration-option.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.video-content-model-options {
  display: grid;
  gap: 10px;
}

.video-creative-group {
  display: grid;
  gap: 6px;
  padding: 9px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.video-creative-auto-group {
  padding-block: 7px;
}

.video-creative-group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: #344054;
  font-size: 12px;
}

.video-creative-group-heading span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
}

.video-creative-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.video-content-model-options .duration-option {
  position: relative;
}

.video-content-model-options .duration-option[data-priority] {
  padding-right: 32px;
}

.video-content-model-options .duration-option[data-priority]::after {
  content: attr(data-priority);
  position: absolute;
  top: 50%;
  right: 7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--accent-strong);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.compact-select-label {
  margin: 0;
}

.compact-select-label select {
  min-height: 36px;
  font-size: 12px;
  font-weight: 700;
}

.video-content-model-heading {
  margin-top: 10px;
}

.video-scene-field {
  margin: 10px 0 0;
}

.video-custom-theme-field {
  margin: 10px 0 0;
}

.video-custom-theme-field input {
  min-height: 36px;
  font-size: 12px;
  font-weight: 700;
}

.video-voiceover-script-note {
  display: block;
  margin: -4px 0 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.video-punctuation-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.video-punctuation-guide b {
  color: var(--text);
  font-weight: 800;
}

.main-image-web-reference-toggle {
  min-height: 36px;
  margin: 10px 0 4px;
  font-size: 12px;
}

.detail-page-web-reference-toggle {
  min-height: 36px;
  margin: 10px 0 4px;
  font-size: 12px;
}

.video-scene-field textarea {
  min-height: 62px;
  resize: vertical;
}

.detail-theme-heading {
  margin-top: 10px;
}

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

.detail-theme-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  font-size: 12px;
  color: #344054;
}

.detail-theme-row span {
  color: var(--muted);
  white-space: nowrap;
}

.detail-theme-row select {
  min-width: 0;
  min-height: 34px;
  padding: 0 28px 0 10px;
  font-size: 12px;
}

.assist-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 10px;
  margin-bottom: 10px;
}

.drop-zone[data-dragging="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.assist-panel label {
  margin-bottom: 6px;
}

.assist-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.assist-actions span {
  flex: 1;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.compact-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.product-image-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.video-person-image-panel {
  display: none;
}

body[data-type="video"] .video-person-image-panel,
body[data-type="characterImage"] .video-person-image-panel {
  display: block;
}

.video-person-image-panel[hidden] {
  display: none;
}

.video-person-image-toggle {
  display: none;
  margin-bottom: 10px;
}

body[data-type="video"] .video-person-image-toggle,
body[data-type="characterImage"] .video-person-image-toggle {
  display: inline-flex;
}

.person-image-upload-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.main-image-human-use-panel {
  margin-top: 12px;
}

.main-image-human-use-panel[hidden] {
  display: none;
}

.character-face-fusion-panel {
  border: 1px solid color-mix(in srgb, var(--tech-accent) 20%, #efe0d8);
  border-radius: 18px;
  padding: 14px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--tech-accent) 12%, transparent), transparent 45%),
    rgba(255, 255, 255, 0.68);
}

.character-face-fusion-panel[hidden],
.face-fusion-controls[hidden] {
  display: none;
}

.face-fusion-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 800;
  color: var(--ink);
}

.face-fusion-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--tech-accent);
}

.face-fusion-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}

.face-fusion-controls > strong {
  display: grid;
  place-items: center;
  min-width: 34px;
  min-height: 42px;
  border-radius: 999px;
  color: var(--tech-accent-strong);
  background: color-mix(in srgb, var(--tech-accent) 12%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tech-accent) 24%, transparent);
}

.face-fusion-rule {
  grid-column: 1 / -1;
}

.character-image-prompt-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
}

.character-image-prompt-panel[hidden] {
  display: none;
}

.character-image-prompt-panel textarea {
  min-height: 70px;
}

.product-image-list[data-empty="true"] {
  display: none;
}

.product-image-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.product-image-item img {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  background: #eef2f1;
}

.product-image-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-image-copy strong,
.product-image-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-image-copy strong {
  color: #344054;
  font-size: 12px;
}

.product-image-copy span {
  color: var(--muted);
  font-size: 11px;
}

.person-image-item {
  align-items: start;
}

.person-image-note {
  width: 100%;
  min-height: 42px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 8px;
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  background: #fbfcfc;
}

.person-image-note::placeholder {
  color: #98a2b3;
}

.character-accessory-note {
  background: #fffaf2;
}

.image-remove-button {
  min-height: 30px;
  border: 1px solid #f3b8b3;
  border-radius: 8px;
  background: #fff7f7;
  color: #b42318;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.upload-file-list {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.upload-file-list[data-empty="true"] {
  display: none;
}

.knowledge-file-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 8px;
}

.knowledge-file-item[data-status="success"] {
  border-color: #a7d7be;
  background: #f6fffa;
}

.knowledge-file-item[data-status="error"],
.knowledge-file-item[data-status="skipped"] {
  border-color: #f3b8b3;
  background: #fff8f7;
}

.knowledge-file-item[data-status="loading"] {
  border-color: #9bb5d9;
  background: #f7fbff;
}

.knowledge-file-badge {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent-strong);
  display: grid;
  place-items: center;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.knowledge-file-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.knowledge-file-copy strong,
.knowledge-file-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-file-copy strong {
  color: #344054;
  font-size: 12px;
}

.knowledge-file-copy span {
  color: var(--muted);
  font-size: 11px;
}

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

.skill-stage {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.skill-stage-header {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfa;
  padding: 10px;
  display: grid;
  align-content: start;
  gap: 5px;
}

.skill-stage-header strong {
  color: #344054;
  font-size: 13px;
  line-height: 1.25;
}

.skill-stage-header span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.skill-stage-options {
  display: grid;
  gap: 8px;
}

.skill-option,
.knowledge-option {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfc;
  margin-bottom: 0;
}

.skill-option input,
.knowledge-option input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.skill-option strong,
.knowledge-option strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.skill-option em {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent-strong);
  padding: 2px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.skill-option span span,
.knowledge-option span span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.compact-details {
  padding: 0;
  overflow: hidden;
}

.compact-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.compact-details summary::-webkit-details-marker {
  display: none;
}

.compact-details summary::after {
  content: "展开";
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 10px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.compact-details[open] summary::after {
  content: "收起";
}

.compact-details summary span {
  display: grid;
  gap: 3px;
}

.compact-details summary strong {
  font-size: 15px;
}

.compact-details summary small,
.compact-details summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.compact-details summary em[data-tone="success"] {
  color: #087443;
}

.compact-details summary em[data-tone="error"] {
  color: #b42318;
}

.compact-details summary em[data-tone="neutral"] {
  color: var(--muted);
}

.compact-details > label,
.compact-details > .field-hint,
.compact-details > .settings-actions,
.compact-details > .settings-grid {
  margin-left: 14px;
  margin-right: 14px;
}

.compact-details > .settings-actions {
  margin-bottom: 14px;
}

.character-template-panel {
  border-color: color-mix(in srgb, var(--tech-accent) 28%, #efe0d8);
}

.character-template-panel textarea {
  min-height: 128px;
}

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

.admin-model-config-panel {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.checkbox-field {
  min-height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
}

.checkbox-field input {
  width: 18px;
  height: 18px;
}

.knowledge-list {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow: auto;
}

.knowledge-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.knowledge-tag {
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 2px 8px;
  font-size: 11px;
  font-style: normal;
}

.muted-tag {
  background: #eef2f1;
  color: var(--muted);
}

.output-block textarea {
  min-height: 420px;
  font-family: Consolas, "Microsoft YaHei", monospace;
}

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

.summary-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 8px 10px;
  min-width: 0;
}

.summary-item span,
.summary-item strong {
  display: block;
}

.summary-item span {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.summary-item strong {
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#summaryReadyState[data-tone="success"] {
  color: #087443;
}

#summaryReadyState[data-tone="error"] {
  color: #b42318;
}

.status-line {
  min-height: 22px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.status-line[data-tone="success"] {
  color: #087443;
}

.status-line[data-tone="error"] {
  color: #b42318;
}

.output-actions {
  margin-top: 12px;
}

.prompt-copy-blocks {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.prompt-copy-blocks[hidden] {
  display: none;
}

.prompt-copy-blocks-header {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.prompt-copy-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prompt-copy-block-buttons button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.library-list {
  display: grid;
  gap: 10px;
  max-height: 230px;
  overflow: auto;
}

.library-item,
.asset-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfc;
}

.library-item strong,
.asset-item strong {
  display: block;
  font-size: 13px;
}

.library-item span,
.asset-item span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.asset-item {
  text-align: left;
  cursor: pointer;
}

.asset-item.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.assets-view {
  display: block;
}

.assets-view[hidden],
[hidden] {
  display: none !important;
}

.asset-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.asset-backup-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.asset-backup-actions span {
  color: var(--muted);
  font-size: 12px;
}

.asset-category-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.asset-category-tab {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
}

.asset-category-tab strong {
  font-size: 14px;
}

.asset-category-tab span {
  min-width: 28px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

.asset-category-tab.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.asset-toolbar label {
  margin-bottom: 0;
}

.assets-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.36fr) minmax(420px, 1fr);
  gap: 16px;
  align-items: start;
}

.asset-list {
  display: grid;
  align-content: start;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
}

.asset-detail {
  min-width: 0;
}

.asset-detail textarea {
  min-height: 360px;
  max-height: 520px;
  font-family: Consolas, "Microsoft YaHei", monospace;
}

.asset-detail.empty .section-heading,
.asset-detail.empty textarea,
.asset-detail.empty .output-actions {
  display: none;
}

.asset-empty-state {
  min-height: 260px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
}

.asset-empty-state strong {
  font-size: 16px;
}

.asset-empty-state span {
  max-width: 440px;
  color: var(--muted);
  line-height: 1.6;
}

.security-locked {
  overflow: hidden;
}

.activation-locked {
  overflow: hidden;
}

.activation-locked .app-shell {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

.activation-gate-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(244 246 245 / 72%);
  backdrop-filter: blur(10px);
}

.activation-gate-card {
  width: min(520px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgb(255 255 255 / 94%);
  padding: 24px;
  box-shadow: 0 22px 60px rgb(17 24 39 / 16%);
  display: grid;
  gap: 14px;
}

.activation-gate-card h2 {
  margin: 0;
  font-size: 24px;
}

.activation-gate-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.activation-gate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.activation-gate-row input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
}

.activation-gate-support {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: #f8fafc;
}

.activation-gate-support[hidden] {
  display: none;
}

.activation-gate-support img {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
}

.activation-gate-message {
  min-height: 20px;
  font-size: 13px;
}

.activation-gate-message[data-tone="error"] {
  color: #b42318;
}

.security-lock-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #101418;
  color: #f6f8fb;
}

.security-lock-card {
  width: min(520px, 100%);
  border: 1px solid #2f3945;
  border-radius: 8px;
  background: #171d24;
  padding: 28px;
  box-shadow: 0 18px 46px rgb(0 0 0 / 28%);
}

.security-lock-card h2 {
  margin: 0 0 12px;
  font-size: 24px;
}

.security-lock-card p {
  margin: 0 0 12px;
  line-height: 1.7;
}

.security-lock-muted {
  color: #aebdcb;
}

.security-lock-qr {
  width: 132px;
  height: 132px;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
  }

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

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

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

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

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

@media (max-width: 640px) {
  .workspace,
  .sidebar {
    padding: 16px;
  }

  .topbar,
  .top-actions,
  .output-actions,
  .settings-actions {
    align-items: stretch;
    flex-direction: column;
  }

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

  .product-image-item {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .product-image-item img {
    width: 46px;
    height: 46px;
  }

  .image-remove-button {
    grid-column: 1 / -1;
  }

  .face-fusion-controls {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .face-fusion-controls > strong {
    min-height: 30px;
  }

  .service-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .model-tier-panel {
    min-width: 0;
    width: 100%;
  }

  .topbar h2 {
    font-size: 22px;
  }

  .icon-button,
  .primary-button,
  .secondary-button,
  .danger-button,
  .credit-pill,
  .recharge-box {
    width: 100%;
  }

  .recharge-box {
    flex-wrap: wrap;
  }

  .recharge-box input {
    flex: 1;
    min-width: 0;
  }

  .recharge-code-row,
  .admin-recharge-grid {
    align-items: stretch;
    flex-direction: column;
  }

  .recharge-code-row input,
  .admin-recharge-grid input {
    min-width: 0;
    width: 100%;
  }

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

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

  .current-type-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .detail-theme-list {
    grid-template-columns: 1fr;
  }

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

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

  .skill-list {
    grid-template-columns: 1fr;
  }

  .skill-stage {
    grid-template-columns: 1fr;
  }

  .output-block textarea {
    min-height: 320px;
  }
}

/* 2026-07-08 tech UI pass: visual-only overrides. */
body {
  --tech-bg: #071016;
  --tech-panel: rgb(11 19 27 / 92%);
  --tech-line: rgb(125 211 252 / 18%);
  --tech-ink: #e5f3ff;
  --tech-muted: #90a4b8;
  --tech-accent: #22d3ee;
  --tech-accent-2: #38bdf8;
  --bg: var(--tech-bg);
  --panel: var(--tech-panel);
  --ink: var(--tech-ink);
  --muted: var(--tech-muted);
  --line: var(--tech-line);
  --accent: var(--tech-accent);
  --accent-strong: var(--tech-accent-2);
  --accent-soft: rgb(34 211 238 / 12%);
  --shadow: 0 20px 60px rgb(0 0 0 / 32%);
  background:
    radial-gradient(circle at 14% 0%, rgb(34 211 238 / 13%), transparent 28%),
    radial-gradient(circle at 88% 8%, rgb(124 58 237 / 14%), transparent 26%),
    linear-gradient(135deg, #060b11 0%, #091722 52%, #070d14 100%);
}

body[data-type="mainImage"] {
  --tech-accent: #22d3ee;
  --tech-accent-2: #38bdf8;
}

body[data-type="video"] {
  --tech-accent: #8b5cf6;
  --tech-accent-2: #38bdf8;
}

body[data-type="detailPage"] {
  --tech-accent: #34d399;
  --tech-accent-2: #2dd4bf;
}

body[data-view="assets"] {
  --tech-accent: #f59e0b;
  --tech-accent-2: #94a3b8;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(148 163 184 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(148 163 184 / 6%) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 70%), transparent 92%);
}

.app-shell {
  position: relative;
  z-index: 1;
}

.sidebar {
  background: linear-gradient(180deg, #08111a 0%, #0c1720 52%, #070b10 100%);
  border-right: 1px solid rgb(148 163 184 / 16%);
}

.brand-mark {
  background: linear-gradient(135deg, var(--tech-accent), var(--tech-accent-2));
  color: #031016;
  box-shadow: 0 0 26px rgb(34 211 238 / 25%);
}

.nav-item,
.credit-pill,
.recharge-box,
.support-panel,
.recharge-pay-panel,
.admin-recharge-panel,
.section-block,
.current-type-panel,
.video-duration-panel,
.detail-page-prompt-panel,
.assist-panel,
.settings-panel,
.asset-card,
.asset-preview-panel,
.empty-assets,
.service-notice {
  background: linear-gradient(180deg, rgb(15 23 42 / 90%), rgb(8 14 22 / 92%));
  border-color: var(--tech-line);
  color: var(--tech-ink);
  box-shadow: var(--shadow);
}

.section-block,
.current-type-panel,
.video-duration-panel,
.detail-page-prompt-panel,
.assist-panel,
.settings-panel,
.support-panel,
.recharge-pay-panel,
.admin-recharge-panel {
  position: relative;
  overflow: hidden;
}

.section-block::before,
.current-type-panel::before,
.video-duration-panel::before,
.detail-page-prompt-panel::before,
.assist-panel::before,
.settings-panel::before,
.support-panel::before,
.recharge-pay-panel::before,
.admin-recharge-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgb(255 255 255 / 4%);
  opacity: 0.65;
  transition: opacity 160ms ease, box-shadow 160ms ease;
}

.section-block:hover::before,
.section-block:focus-within::before,
.current-type-panel:hover::before,
.current-type-panel:focus-within::before,
.video-duration-panel:hover::before,
.video-duration-panel:focus-within::before,
.detail-page-prompt-panel:hover::before,
.detail-page-prompt-panel:focus-within::before,
.assist-panel:hover::before,
.assist-panel:focus-within::before,
.settings-panel:hover::before,
.settings-panel:focus-within::before {
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tech-accent) 42%, transparent),
    0 0 24px color-mix(in srgb, var(--tech-accent) 16%, transparent);
  animation: techBorderSweep 900ms ease-out both;
}

@keyframes techBorderSweep {
  from {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tech-accent) 22%, transparent), transparent) -120% 0 / 60% 100% no-repeat;
  }
  to {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tech-accent) 22%, transparent), transparent) 220% 0 / 60% 100% no-repeat;
  }
}

.topbar h2,
.section-heading h3,
.section-title p,
.brand h1 {
  color: var(--tech-ink);
}

.brand p,
.side-panel p,
.nav-item small,
.section-heading span,
.field-hint,
.status-line,
.support-copy span {
  color: var(--tech-muted);
}

.eyebrow,
.credit-pill strong {
  color: var(--tech-accent);
}

.nav-item.active,
.type-card.active,
.segment-button.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tech-accent) 22%, transparent), color-mix(in srgb, var(--tech-accent-2) 16%, transparent));
  border-color: color-mix(in srgb, var(--tech-accent) 52%, transparent);
  color: #f8fbff;
}

input,
textarea,
select {
  background: rgb(2 8 14 / 72%);
  border-color: rgb(148 163 184 / 22%);
  color: var(--tech-ink);
}

input::placeholder,
textarea::placeholder {
  color: rgb(148 163 184 / 62%);
}

input:focus,
textarea:focus,
select:focus {
  border-color: color-mix(in srgb, var(--tech-accent) 66%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tech-accent) 12%, transparent);
  outline: none;
}

.primary-button,
.secondary-button,
.danger-button,
.compact-button,
button {
  border-color: color-mix(in srgb, var(--tech-accent) 34%, transparent);
}

.primary-button {
  background: linear-gradient(135deg, var(--tech-accent), var(--tech-accent-2));
  color: #031016;
  box-shadow: 0 0 22px color-mix(in srgb, var(--tech-accent) 20%, transparent);
}

.secondary-button,
.compact-button {
  background: rgb(15 23 42 / 86%);
  color: var(--tech-ink);
}

.primary-button:hover,
.secondary-button:hover,
.compact-button:hover {
  box-shadow: 0 0 18px color-mix(in srgb, var(--tech-accent) 22%, transparent);
}

.sound-toggle-button[aria-pressed="false"] {
  color: var(--tech-muted);
  border-color: rgb(148 163 184 / 24%);
}

.summary-item {
  background: linear-gradient(180deg, rgb(9 18 29 / 96%), rgb(5 12 20 / 96%));
  border-color: color-mix(in srgb, var(--tech-accent) 24%, rgb(148 163 184 / 28%));
}

.summary-item span {
  color: #9fb5c9;
}

.summary-item strong {
  color: #f2f8ff;
  font-weight: 800;
}

#summaryReadyState[data-tone="success"] {
  color: #7dd3fc;
}

#summaryReadyState[data-tone="error"] {
  color: #ff6b6b;
}

input[data-missing="true"],
textarea[data-missing="true"],
select[data-missing="true"],
details[data-missing="true"],
.service-notice[data-missing="true"] {
  border-color: rgb(251 113 133 / 72%);
  box-shadow: 0 0 0 2px rgb(251 113 133 / 12%);
}

.admin-recharge-panel {
  --tech-accent: #fb923c;
  --tech-accent-2: #ef4444;
  border-color: rgb(251 146 60 / 34%);
  background: linear-gradient(180deg, rgb(36 18 14 / 95%), rgb(20 10 12 / 96%));
}

#productInfo,
#output {
  transition: border-color 160ms ease, box-shadow 160ms ease, background-position 240ms ease;
}

body.is-generating-plan #productInfo,
body.is-generating-output #output {
  border-color: color-mix(in srgb, var(--tech-accent) 72%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--tech-accent) 10%, transparent),
    0 0 32px color-mix(in srgb, var(--tech-accent) 18%, transparent);
  background-image:
    linear-gradient(120deg, transparent 0%, color-mix(in srgb, var(--tech-accent) 14%, transparent) 45%, transparent 70%),
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--tech-accent) 8%, transparent) 0 1px, transparent 1px 12px),
    linear-gradient(rgb(2 8 14 / 88%), rgb(2 8 14 / 88%));
  background-size: 180% 100%, 100% 28px, 100% 100%;
  animation: dataCodeFlow 1.05s linear infinite;
}

@keyframes dataCodeFlow {
  from {
    background-position: 160% 0, 0 0, 0 0;
  }
  to {
    background-position: -60% 0, 0 28px, 0 0;
  }
}

.activation-gate-screen {
  background:
    radial-gradient(circle at center, rgb(34 211 238 / 16%), transparent 34%),
    linear-gradient(135deg, rgb(2 6 12 / 88%), rgb(4 12 20 / 96%));
}

.activation-gate-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgb(7 16 24 / 96%), rgb(10 18 28 / 96%));
  border-color: rgb(34 211 238 / 28%);
  color: var(--tech-ink);
  box-shadow: 0 24px 90px rgb(0 0 0 / 48%), 0 0 46px rgb(34 211 238 / 12%);
}

.activation-gate-card::before {
  content: "0101 / AUTH CHECK / KEY SYNC / ACCESS MATRIX / 1100";
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: rgb(34 211 238 / 12%);
  font-family: Consolas, monospace;
  font-size: 12px;
  line-height: 2.2;
  white-space: pre-wrap;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgb(34 211 238 / 7%) 18px 19px),
    repeating-linear-gradient(180deg, transparent 0 28px, rgb(34 211 238 / 6%) 28px 29px);
  opacity: 0.8;
}

.activation-gate-card > * {
  position: relative;
  z-index: 1;
}

.activation-gate-card p,
.activation-gate-support span {
  color: var(--tech-muted);
}

.activation-gate-row input {
  background: rgb(2 8 14 / 80%);
  color: var(--tech-ink);
}

.activation-gate-screen.activation-unlocking::after,
.activation-gate-screen.activation-confirming::after {
  content: "ACCESS GRANTED";
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: rgb(165 243 252 / 88%);
  font: 800 24px/1 Consolas, monospace;
  letter-spacing: 0;
  background:
    radial-gradient(circle at center, transparent 0 18%, rgb(34 211 238 / 14%) 19%, transparent 38%),
    repeating-linear-gradient(90deg, transparent 0 24px, rgb(34 211 238 / 10%) 24px 25px);
  animation: unlockField 1.45s ease forwards;
}

.activation-gate-screen.activation-confirming::after {
  content: "KEY CONFIRMED";
  animation-duration: 420ms;
}

.activation-gate-screen.activation-unlocking .activation-gate-card {
  animation: unlockCard 1.45s ease forwards;
}

.activation-gate-screen.activation-confirming .activation-gate-card {
  animation: unlockCard 420ms ease forwards;
}

@keyframes unlockField {
  0% {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  100% {
    clip-path: circle(78% at 50% 50%);
    opacity: 0;
  }
}

@keyframes unlockCard {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.96);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-block:hover::before,
  .section-block:focus-within::before,
  .current-type-panel:hover::before,
  .current-type-panel:focus-within::before,
  .video-duration-panel:hover::before,
  .video-duration-panel:focus-within::before,
  .detail-page-prompt-panel:hover::before,
  .detail-page-prompt-panel:focus-within::before,
  .assist-panel:hover::before,
  .assist-panel:focus-within::before,
  .settings-panel:hover::before,
  .settings-panel:focus-within::before,
  body.is-generating-plan #productInfo,
  body.is-generating-output #output,
  .activation-gate-screen.activation-unlocking::after,
  .activation-gate-screen.activation-confirming::after,
  .activation-gate-screen.activation-unlocking .activation-gate-card,
  .activation-gate-screen.activation-confirming .activation-gate-card {
    animation: none;
  }
}

/* 2026-07-08 final Web B-end dashboard skin: clean, bright, operational. */
body {
  --tech-bg: #f4f8fb;
  --tech-panel: #ffffff;
  --tech-line: #d8e5ec;
  --tech-ink: #0f2533;
  --tech-muted: #667987;
  --tech-accent: #0e7490;
  --tech-accent-2: #0ea5e9;
  --bg: var(--tech-bg);
  --panel: var(--tech-panel);
  --ink: var(--tech-ink);
  --muted: var(--tech-muted);
  --line: var(--tech-line);
  --accent: var(--tech-accent);
  --accent-strong: var(--tech-accent-2);
  --accent-soft: rgb(14 116 144 / 8%);
  --shadow: 0 8px 24px rgb(15 37 51 / 7%);
  background:
    linear-gradient(180deg, #f7fbfd 0%, #edf6f9 100%);
  color: var(--tech-ink);
}

body[data-type="mainImage"] {
  --tech-accent: #0e7490;
  --tech-accent-2: #0ea5e9;
}

body[data-type="video"] {
  --tech-accent: #2563eb;
  --tech-accent-2: #38bdf8;
}

body[data-type="detailPage"] {
  --tech-accent: #047857;
  --tech-accent-2: #14b8a6;
}

body[data-view="assets"] {
  --tech-accent: #0f766e;
  --tech-accent-2: #64748b;
}

body::before,
body::after,
.topbar::before,
.workspace::before {
  display: none;
}

.topbar::after,
.nav-item::after,
.section-block::after,
.current-type-panel::after,
.video-duration-panel::after,
.detail-page-prompt-panel::after,
.assist-panel::after,
.settings-panel::after,
.summary-item::after,
.output-block::after,
.asset-card::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(
      circle 180px at var(--pointer-x, 50%) var(--pointer-y, 50%),
      color-mix(in srgb, var(--tech-accent) 12%, transparent),
      transparent 64%
    );
  box-shadow: none;
  transform: none;
  transition: opacity 180ms ease;
}

.topbar:hover::after,
.nav-item:hover::after,
.section-block:hover::after,
.current-type-panel:hover::after,
.video-duration-panel:hover::after,
.detail-page-prompt-panel:hover::after,
.assist-panel:hover::after,
.settings-panel:hover::after,
.summary-item:hover::after,
.output-block:hover::after,
.asset-card:hover::after {
  opacity: 1;
}

.app-shell {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

.sidebar {
  min-height: calc(100vh - 32px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.workspace {
  overflow: visible;
}

.brand {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tech-accent), var(--tech-accent-2));
  box-shadow: none;
}

.brand h1,
.topbar h2,
.section-heading h3,
.section-title p,
.summary-item strong {
  color: var(--tech-ink);
  text-shadow: none;
}

.brand p,
.side-panel p,
.nav-item small,
.section-heading span,
.field-hint,
.status-line,
.support-copy span,
.summary-item span {
  color: var(--tech-muted);
}

.nav-list {
  gap: 8px;
}

.nav-item {
  min-height: 62px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid transparent;
  box-shadow: none;
}

.nav-item:hover {
  background: #f5fbfd;
  border-color: #cfe4ec;
}

.nav-item.active {
  color: var(--tech-ink);
  background: #ecf8fb;
  border-color: color-mix(in srgb, var(--tech-accent) 30%, #cfe4ec);
  box-shadow: inset 3px 0 0 var(--tech-accent);
}

.side-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.topbar {
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.topbar h2 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
}

.eyebrow {
  color: var(--tech-accent);
  letter-spacing: 0.14em;
}

.top-actions {
  align-self: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
  box-shadow: none;
  backdrop-filter: none;
}

.content-grid {
  gap: 16px;
}

.input-column {
  gap: 16px;
}

.sidebar,
.topbar,
.credit-pill,
.recharge-box,
.support-panel,
.recharge-pay-panel,
.admin-recharge-panel,
.section-block,
.current-type-panel,
.video-duration-panel,
.detail-page-prompt-panel,
.assist-panel,
.settings-panel,
.asset-card,
.asset-preview-panel,
.empty-assets,
.service-notice,
.summary-item,
.output-block {
  color: var(--tech-ink);
  background: #ffffff;
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: none;
}

.input-column > .section-block:first-child {
  background: #ffffff;
}

.section-block {
  padding: 18px;
}

.section-heading {
  padding-bottom: 10px;
  border-bottom: 1px solid #edf2f5;
}

.section-heading h3 {
  font-size: 20px;
}

input,
textarea,
select,
.output-block textarea,
#productInfo,
#knowledgeBase,
#customerNeeds {
  color: var(--tech-ink);
  background: #f8fbfc;
  border-color: #d6e4eb;
  border-radius: 8px;
  box-shadow: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: color-mix(in srgb, var(--tech-accent) 46%, #d6e4eb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tech-accent) 10%, transparent);
}

input::placeholder,
textarea::placeholder {
  color: #91a2ad;
}

.primary-button {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tech-accent), var(--tech-accent-2));
  border-color: transparent;
  box-shadow: none;
}

.secondary-button,
.compact-button,
.segment-button,
.type-card,
.duration-option {
  color: var(--tech-ink);
  background: #ffffff;
  border-color: #d6e4eb;
  border-radius: 8px;
  box-shadow: none;
}

.secondary-button:hover,
.compact-button:hover,
.segment-button:hover,
.type-card:hover,
.duration-option:hover {
  background: #f1f8fa;
  border-color: color-mix(in srgb, var(--tech-accent) 30%, #d6e4eb);
  box-shadow: none;
}

.type-card.active,
.segment-button.active,
.duration-option.active {
  background: #ecf8fb;
  border-color: color-mix(in srgb, var(--tech-accent) 36%, #d6e4eb);
  color: var(--tech-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tech-accent) 18%, transparent);
}

.summary-grid {
  gap: 10px;
}

.summary-item {
  min-height: 84px;
  padding: 14px;
}

.output-block {
  min-height: 62vh;
}

.output-block textarea {
  min-height: clamp(520px, 58vh, 820px);
}

.section-block::before,
.current-type-panel::before,
.video-duration-panel::before,
.detail-page-prompt-panel::before,
.assist-panel::before,
.settings-panel::before,
.support-panel::before,
.recharge-pay-panel::before,
.admin-recharge-panel::before {
  padding: 1px;
  border: 0;
  background: #d8e5ec;
  opacity: 0;
  box-shadow: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.section-block:hover::before,
.section-block:focus-within::before,
.current-type-panel:hover::before,
.current-type-panel:focus-within::before,
.video-duration-panel:hover::before,
.video-duration-panel:focus-within::before,
.detail-page-prompt-panel:hover::before,
.detail-page-prompt-panel:focus-within::before,
.assist-panel:hover::before,
.assist-panel:focus-within::before,
.settings-panel:hover::before,
.settings-panel:focus-within::before,
.support-panel:hover::before,
.support-panel:focus-within::before,
.recharge-pay-panel:hover::before,
.recharge-pay-panel:focus-within::before,
.admin-recharge-panel:hover::before,
.admin-recharge-panel:focus-within::before {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--tech-accent) 64%, transparent), transparent) 0 0 / 220% 100% no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--tech-accent) 46%, #d8e5ec), #d8e5ec);
  opacity: 1;
  box-shadow: none;
  animation: techBorderFlow 2.2s linear infinite;
}

body.nav-slide-down .topbar,
body.nav-slide-down #generatorView,
body.nav-slide-down #assetsView:not([hidden]) {
  animation: navSlideDown 620ms cubic-bezier(0.18, 0.86, 0.2, 1) both;
}

body.nav-slide-up .topbar,
body.nav-slide-up #generatorView,
body.nav-slide-up #assetsView:not([hidden]) {
  animation: navSlideUp 620ms cubic-bezier(0.18, 0.86, 0.2, 1) both;
}

@keyframes navSlideDown {
  from {
    opacity: 0;
    transform: translateY(-48px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes navSlideUp {
  from {
    opacity: 0;
    transform: translateY(48px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.user-feedback-block {
  margin-top: 18px;
}

.feedback-type-options {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 6px;
  padding: 4px;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f8f7;
}

.feedback-type-button {
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.feedback-type-button[data-feedback-type="good"].active {
  border-color: #8bc6a7;
  background: #e8f5ee;
  color: #166534;
}

.feedback-type-button[data-feedback-type="bad"].active {
  border-color: #e5aaa4;
  background: #fdf0ee;
  color: #a1372c;
}

.feedback-input-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.user-feedback-block textarea {
  width: 100%;
  resize: vertical;
}

.feedback-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.feedback-actions .field-hint {
  margin: 0;
}

@media (max-width: 640px) {
  .feedback-type-options {
    width: 100%;
  }

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

/* 2026-07-09 critical layout fix:
   Keep product inputs, knowledge, skills, and template management in stable
   grid areas. Earlier nth-of-type layout rules could move the template panel
   over product fields when optional panels changed visibility. */
.input-column {
  display: grid;
  grid-template-columns: minmax(420px, 1.12fr) minmax(320px, 0.88fr);
  grid-template-areas:
    "service service"
    "primary knowledge"
    "primary skills"
    "character-template character-template"
    "ecommerce-template ecommerce-template";
  align-items: start;
}

#modelServiceNotice {
  grid-area: service;
}

#primaryInputSection {
  grid-area: primary;
}

#personalKnowledgeSection {
  grid-area: knowledge;
}

#skillSection {
  grid-area: skills;
}

#characterTemplatePanel {
  grid-area: character-template;
}

#ecommerceTemplatePanel {
  grid-area: ecommerce-template;
}

.input-column > [hidden] {
  display: none !important;
}

#primaryInputSection,
#personalKnowledgeSection,
#skillSection,
#characterTemplatePanel,
#ecommerceTemplatePanel {
  position: relative;
  isolation: isolate;
  z-index: 1;
}

.section-block::before,
.section-block::after,
.compact-details::before,
.compact-details::after {
  pointer-events: none;
}

.section-block > *,
.compact-details > * {
  position: relative;
  z-index: 2;
}

#primaryInputSection::before,
#primaryInputSection::after,
#personalKnowledgeSection::before,
#personalKnowledgeSection::after,
#skillSection::before,
#skillSection::after,
#characterTemplatePanel::before,
#characterTemplatePanel::after,
#ecommerceTemplatePanel::before,
#ecommerceTemplatePanel::after {
  z-index: 0;
}

@media (max-width: 1220px) {
  .input-column {
    grid-template-columns: 1fr;
    grid-template-areas:
      "service"
      "primary"
      "knowledge"
      "skills"
      "character-template"
      "ecommerce-template";
  }
}

/* 2026-07-08 activation entrance: 5s ocean-data unlock, visual-only. */
.activation-gate-screen.activation-unlocking {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgb(125 211 252 / 20%), transparent 22%),
    linear-gradient(135deg, rgb(238 250 255 / 92%), rgb(217 242 249 / 94%) 48%, rgb(255 245 238 / 92%));
}

.activation-gate-screen.activation-unlocking::before {
  content: "";
  position: fixed;
  inset: -16%;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at center, transparent 0 34px, rgb(14 165 233 / 18%) 35px 37px, transparent 38px 72px),
    radial-gradient(circle at center, rgb(14 165 233 / 28%) 0 10%, rgb(45 212 191 / 14%) 22%, transparent 58%),
    repeating-linear-gradient(92deg, rgb(14 116 144 / 10%) 0 1px, transparent 1px 24px);
  clip-path: circle(0% at 50% 50%);
  opacity: 0;
  transform: scale(0.92);
  filter: blur(8px);
  animation: activationOceanUnlock 5s cubic-bezier(0.16, 0.84, 0.18, 1) forwards;
}

.activation-gate-screen.activation-unlocking::after {
  content: "0101  KEY  1100  FLOW  0011  AUTH  1010\A 1110  DATA  0101  SYNC  1001  OPEN\A 0010  WAVE  1011  CODE  0110  PASS\A 1010  ACCESS  0101  RIPPLE  1101  OK";
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
  white-space: pre;
  text-align: center;
  color: rgb(8 80 108 / 72%);
  font: 800 13px/2.25 Consolas, monospace;
  letter-spacing: 0.08em;
  text-shadow: 0 0 18px rgb(14 165 233 / 42%);
  background:
    radial-gradient(circle at center, rgb(255 255 255 / 54%) 0 12%, transparent 34%),
    repeating-linear-gradient(0deg, transparent 0 20px, rgb(14 165 233 / 8%) 20px 21px);
  clip-path: circle(0% at 50% 50%);
  opacity: 0;
  transform: scale(0.76);
  animation: activationCodeRipple 5s cubic-bezier(0.16, 0.84, 0.18, 1) forwards;
}

.activation-gate-screen.activation-unlocking .activation-gate-card {
  position: relative;
  z-index: 4;
  animation: activationCardRelease 5s ease forwards;
}

@keyframes activationOceanUnlock {
  0% {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
    transform: scale(0.92);
    filter: blur(9px);
  }
  18% {
    opacity: 0.92;
    filter: blur(3px);
  }
  54% {
    clip-path: circle(44% at 50% 50%);
    opacity: 0.82;
    transform: scale(1.01);
    filter: blur(1px);
  }
  82% {
    opacity: 0.52;
  }
  100% {
    clip-path: circle(142% at 50% 50%);
    opacity: 0;
    transform: scale(1.12);
    filter: blur(12px);
  }
}

@keyframes activationCodeRipple {
  0% {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
    transform: scale(0.76);
  }
  20% {
    opacity: 0.9;
  }
  58% {
    clip-path: circle(52% at 50% 50%);
    opacity: 0.72;
    transform: scale(1.08);
  }
  100% {
    clip-path: circle(138% at 50% 50%);
    opacity: 0;
    transform: scale(1.38);
  }
}

@keyframes activationCardRelease {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  22% {
    opacity: 1;
    transform: translateY(-3px) scale(1.012);
    filter: blur(0);
    box-shadow: 0 28px 84px rgb(14 116 144 / 18%), 0 0 42px rgb(45 212 191 / 16%);
  }
  52% {
    opacity: 0.96;
    transform: translateY(2px) scale(0.998);
    filter: blur(0);
  }
  72% {
    opacity: 0.72;
    transform: scale(0.985);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: scale(0.94);
    filter: blur(8px);
  }
}


/* 2026-07-08 final interaction pass: localized pointer response, not full-panel glow. */
.topbar,
.nav-item,
.section-block,
.current-type-panel,
.video-duration-panel,
.detail-page-prompt-panel,
.assist-panel,
.settings-panel,
.summary-item,
.output-block,
.asset-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.topbar::after,
.nav-item::after,
.section-block::after,
.current-type-panel::after,
.video-duration-panel::after,
.detail-page-prompt-panel::after,
.assist-panel::after,
.settings-panel::after,
.summary-item::after,
.output-block::after,
.asset-card::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(
      circle 180px at var(--pointer-x, 50%) var(--pointer-y, 50%),
      color-mix(in srgb, var(--tech-accent) 12%, transparent),
      transparent 64%
    );
  transition: opacity 180ms ease;
}

.topbar > *,
.nav-item > *,
.section-block > *,
.current-type-panel > *,
.video-duration-panel > *,
.detail-page-prompt-panel > *,
.assist-panel > *,
.settings-panel > *,
.summary-item > *,
.output-block > *,
.asset-card > * {
  position: relative;
  z-index: 1;
}

.topbar:hover::after,
.nav-item:hover::after,
.section-block:hover::after,
.current-type-panel:hover::after,
.video-duration-panel:hover::after,
.detail-page-prompt-panel:hover::after,
.assist-panel:hover::after,
.settings-panel:hover::after,
.summary-item:hover::after,
.output-block:hover::after,
.asset-card:hover::after {
  opacity: 1;
}

.topbar:hover,
.nav-item:hover,
.section-block:hover,
.current-type-panel:hover,
.video-duration-panel:hover,
.detail-page-prompt-panel:hover,
.assist-panel:hover,
.settings-panel:hover,
.summary-item:hover,
.output-block:hover,
.asset-card:hover {
  border-color: color-mix(in srgb, var(--tech-accent) 30%, var(--tech-line));
}

.sound-volume-control {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #d6e4eb;
  border-radius: 8px;
  background: #ffffff;
  color: var(--tech-muted);
  font-size: 12px;
  white-space: nowrap;
}

.sound-volume-control input {
  width: 92px;
  min-height: auto;
  padding: 0;
  border: 0;
  accent-color: var(--tech-accent);
  box-shadow: none;
}

.sound-volume-control strong {
  min-width: 34px;
  color: var(--tech-ink);
  font-size: 12px;
  text-align: right;
}

/* 2026-07-08 restrained solar-style interaction: pointer-follow spotlight for B-end cards. */
.topbar,
.nav-item,
.section-block,
.summary-item,
.output-block,
.asset-card {
  position: relative;
  overflow: hidden;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.topbar::after,
.nav-item::after,
.section-block::after,
.summary-item::after,
.output-block::after,
.asset-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(
      circle 150px at var(--pointer-x, 50%) var(--pointer-y, 50%),
      color-mix(in srgb, var(--tech-accent) 16%, transparent),
      transparent 62%
    );
  transition: opacity 180ms ease;
}

.topbar > *,
.nav-item > *,
.section-block > *,
.summary-item > *,
.output-block > *,
.asset-card > * {
  position: relative;
  z-index: 1;
}

.topbar:hover,
.nav-item:hover,
.section-block:hover,
.summary-item:hover,
.output-block:hover,
.asset-card:hover {
  border-color: color-mix(in srgb, var(--tech-accent) 28%, var(--tech-line));
  box-shadow:
    0 10px 28px rgb(15 37 51 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 78%);
}

.section-block:hover,
.summary-item:hover,
.output-block:hover,
.asset-card:hover {
  transform: translateY(-1px);
}

.topbar:hover::after,
.nav-item:hover::after,
.section-block:hover::after,
.summary-item:hover::after,
.output-block:hover::after,
.asset-card:hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .topbar,
  .nav-item,
  .section-block,
  .summary-item,
  .output-block,
  .asset-card {
    transition: none;
  }

  .section-block:hover,
  .summary-item:hover,
  .output-block:hover,
  .asset-card:hover {
    transform: none;
  }
}

@media (max-width: 1220px) {
  .topbar {
    grid-template-columns: 1fr;
  }
}

/* 2026-07-08 final ocean correction: light sea tone and border-only motion. */
body {
  --tech-bg: #eefbff;
  --tech-panel: rgb(250 254 255 / 90%);
  --tech-line: rgb(8 145 178 / 18%);
  --tech-ink: #073242;
  --tech-muted: #557382;
  --tech-accent: #0891b2;
  --tech-accent-2: #14b8a6;
  --bg: var(--tech-bg);
  --panel: var(--tech-panel);
  --ink: var(--tech-ink);
  --muted: var(--tech-muted);
  --line: var(--tech-line);
  --accent: var(--tech-accent);
  --accent-strong: var(--tech-accent-2);
  --accent-soft: rgb(20 184 166 / 10%);
  --shadow: 0 18px 46px rgb(8 67 86 / 10%);
  background:
    radial-gradient(circle at 14% 0%, rgb(125 211 252 / 42%), transparent 24%),
    radial-gradient(circle at 78% 8%, rgb(45 212 191 / 30%), transparent 22%),
    linear-gradient(135deg, #f5fdff 0%, #d9f5f8 48%, #f9feff 100%);
  color: var(--tech-ink);
}

body[data-type="mainImage"] {
  --tech-accent: #0284c7;
  --tech-accent-2: #06b6d4;
}

body[data-type="video"] {
  --tech-accent: #2563eb;
  --tech-accent-2: #22d3ee;
}

body[data-type="detailPage"] {
  --tech-accent: #059669;
  --tech-accent-2: #2dd4bf;
}

body[data-view="assets"] {
  --tech-accent: #0f766e;
  --tech-accent-2: #f59e0b;
}

body::before {
  opacity: 0.24;
  background-image:
    linear-gradient(rgb(8 145 178 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(20 184 166 / 6%) 1px, transparent 1px);
}

body::after,
.topbar::before,
.topbar::after {
  opacity: 0.12;
  filter: none;
}

.sidebar,
.topbar,
.nav-item,
.credit-pill,
.recharge-box,
.support-panel,
.recharge-pay-panel,
.admin-recharge-panel,
.section-block,
.current-type-panel,
.video-duration-panel,
.detail-page-prompt-panel,
.assist-panel,
.settings-panel,
.asset-card,
.asset-preview-panel,
.empty-assets,
.service-notice,
.summary-item,
.output-block {
  color: var(--tech-ink);
  background:
    linear-gradient(145deg, rgb(250 254 255 / 90%), rgb(224 247 250 / 78%));
  border-color: rgb(8 145 178 / 16%);
  box-shadow:
    0 14px 36px rgb(8 67 86 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 74%);
}

.sidebar {
  background: linear-gradient(180deg, rgb(242 253 255 / 88%), rgb(213 244 248 / 82%));
}

.topbar,
.input-column > .section-block:first-child {
  background: linear-gradient(135deg, rgb(248 254 255 / 90%), rgb(209 241 247 / 80%));
}

.brand h1,
.topbar h2,
.section-heading h3,
.section-title p,
.summary-item strong {
  color: #073242;
  text-shadow: none;
}

.brand p,
.side-panel p,
.nav-item small,
.section-heading span,
.field-hint,
.status-line,
.support-copy span,
.summary-item span {
  color: #557382;
}

.nav-item.active,
.type-card.active,
.segment-button.active {
  color: #053042;
  background: linear-gradient(135deg, rgb(224 247 250 / 96%), rgb(204 251 241 / 86%));
  border-color: color-mix(in srgb, var(--tech-accent) 38%, transparent);
  box-shadow:
    0 10px 24px rgb(8 145 178 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 78%);
}

input,
textarea,
select,
.output-block textarea,
#productInfo,
#knowledgeBase,
#customerNeeds {
  color: #073242;
  background-color: rgb(248 254 255 / 88%);
  border-color: rgb(8 145 178 / 18%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
}

input::placeholder,
textarea::placeholder {
  color: rgb(78 113 128 / 66%);
}

.primary-button {
  color: #f6feff;
  background: linear-gradient(135deg, #0284c7, #14b8a6);
  box-shadow: 0 10px 24px rgb(8 145 178 / 16%);
}

.secondary-button,
.compact-button,
.segment-button,
.type-card {
  color: #063242;
  background: rgb(240 253 255 / 84%);
  border-color: rgb(8 145 178 / 22%);
}

.section-block::before,
.current-type-panel::before,
.video-duration-panel::before,
.detail-page-prompt-panel::before,
.assist-panel::before,
.settings-panel::before,
.support-panel::before,
.recharge-pay-panel::before,
.admin-recharge-panel::before {
  padding: 1px;
  border: 0;
  background: linear-gradient(135deg, rgb(8 145 178 / 18%), rgb(20 184 166 / 12%));
  box-shadow: none;
  opacity: 0.42;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.section-block:hover::before,
.section-block:focus-within::before,
.current-type-panel:hover::before,
.current-type-panel:focus-within::before,
.video-duration-panel:hover::before,
.video-duration-panel:focus-within::before,
.detail-page-prompt-panel:hover::before,
.detail-page-prompt-panel:focus-within::before,
.assist-panel:hover::before,
.assist-panel:focus-within::before,
.settings-panel:hover::before,
.settings-panel:focus-within::before,
.support-panel:hover::before,
.support-panel:focus-within::before,
.recharge-pay-panel:hover::before,
.recharge-pay-panel:focus-within::before,
.admin-recharge-panel:hover::before,
.admin-recharge-panel:focus-within::before {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--tech-accent) 72%, transparent), transparent) 0 0 / 220% 100% no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--tech-accent) 42%, transparent), color-mix(in srgb, var(--tech-accent-2) 26%, transparent));
  box-shadow: none;
  opacity: 0.86;
}

@keyframes techBorderBreath {
  0%,
  100% {
    opacity: 0.48;
    box-shadow: none;
  }
  50% {
    opacity: 0.9;
    box-shadow: none;
  }
}

body.nav-slide-down .topbar,
body.nav-slide-down #generatorView,
body.nav-slide-down #assetsView:not([hidden]) {
  animation: navSlideDown 680ms cubic-bezier(0.18, 0.86, 0.2, 1) both;
}

body.nav-slide-up .topbar,
body.nav-slide-up #generatorView,
body.nav-slide-up #assetsView:not([hidden]) {
  animation: navSlideUp 680ms cubic-bezier(0.18, 0.86, 0.2, 1) both;
}

@keyframes navSlideDown {
  from {
    opacity: 0;
    transform: translateY(-54px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes navSlideUp {
  from {
    opacity: 0;
    transform: translateY(54px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* 2026-07-08 ocean calm correction: border means border, not glowing panels. */
body {
  --tech-bg: #eaf8fb;
  --tech-panel: rgb(248 254 255 / 88%);
  --tech-line: rgb(8 145 178 / 18%);
  --tech-ink: #073242;
  --tech-muted: #557382;
  --tech-accent: #0891b2;
  --tech-accent-2: #14b8a6;
  --bg: var(--tech-bg);
  --panel: var(--tech-panel);
  --ink: var(--tech-ink);
  --muted: var(--tech-muted);
  --line: var(--tech-line);
  --accent: var(--tech-accent);
  --accent-strong: var(--tech-accent-2);
  --accent-soft: rgb(20 184 166 / 10%);
  --shadow: 0 18px 48px rgb(8 67 86 / 10%);
  background:
    radial-gradient(circle at 16% 0%, rgb(125 211 252 / 42%), transparent 24%),
    radial-gradient(circle at 78% 8%, rgb(45 212 191 / 34%), transparent 22%),
    linear-gradient(135deg, #f3fcff 0%, #d7f4f8 48%, #f7fdff 100%);
  color: var(--tech-ink);
}

body[data-type="mainImage"] {
  --tech-accent: #0284c7;
  --tech-accent-2: #06b6d4;
}

body[data-type="video"] {
  --tech-accent: #2563eb;
  --tech-accent-2: #22d3ee;
}

body[data-type="detailPage"] {
  --tech-accent: #059669;
  --tech-accent-2: #2dd4bf;
}

body[data-view="assets"] {
  --tech-accent: #0f766e;
  --tech-accent-2: #f59e0b;
}

body::before {
  opacity: 0.28;
  background-image:
    linear-gradient(rgb(8 145 178 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(20 184 166 / 6%) 1px, transparent 1px);
}

body::after,
.topbar::before,
.topbar::after {
  opacity: 0.16;
  filter: none;
}

.sidebar,
.topbar,
.nav-item,
.credit-pill,
.recharge-box,
.support-panel,
.recharge-pay-panel,
.admin-recharge-panel,
.section-block,
.current-type-panel,
.video-duration-panel,
.detail-page-prompt-panel,
.assist-panel,
.settings-panel,
.asset-card,
.asset-preview-panel,
.empty-assets,
.service-notice {
  color: var(--tech-ink);
  background:
    linear-gradient(145deg, rgb(250 254 255 / 88%), rgb(224 247 250 / 78%));
  border-color: rgb(8 145 178 / 16%);
  box-shadow:
    0 14px 36px rgb(8 67 86 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 72%);
}

.sidebar {
  background:
    linear-gradient(180deg, rgb(242 253 255 / 86%), rgb(213 244 248 / 82%));
}

.topbar,
.input-column > .section-block:first-child {
  background:
    linear-gradient(135deg, rgb(248 254 255 / 88%), rgb(209 241 247 / 80%));
}

.brand h1,
.topbar h2,
.section-heading h3,
.section-title p,
.summary-item strong {
  color: #073242;
  text-shadow: none;
}

.brand p,
.side-panel p,
.nav-item small,
.section-heading span,
.field-hint,
.status-line,
.support-copy span,
.summary-item span {
  color: #557382;
}

.nav-item.active,
.type-card.active,
.segment-button.active {
  color: #053042;
  background:
    linear-gradient(135deg, rgb(224 247 250 / 96%), rgb(204 251 241 / 86%));
  border-color: color-mix(in srgb, var(--tech-accent) 38%, transparent);
  box-shadow:
    0 10px 24px rgb(8 145 178 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 78%);
}

input,
textarea,
select,
.output-block textarea,
#productInfo,
#knowledgeBase,
#customerNeeds {
  color: #073242;
  background-color: rgb(248 254 255 / 88%);
  border-color: rgb(8 145 178 / 18%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
}

input::placeholder,
textarea::placeholder {
  color: rgb(78 113 128 / 66%);
}

.primary-button {
  color: #f6feff;
  background: linear-gradient(135deg, #0284c7, #14b8a6);
  box-shadow: 0 10px 24px rgb(8 145 178 / 16%);
}

.secondary-button,
.compact-button,
.segment-button,
.type-card {
  color: #063242;
  background: rgb(240 253 255 / 84%);
  border-color: rgb(8 145 178 / 22%);
}

.summary-item,
.output-block {
  background:
    linear-gradient(145deg, rgb(250 254 255 / 88%), rgb(224 247 250 / 78%));
  border-color: rgb(8 145 178 / 16%);
  box-shadow:
    0 14px 36px rgb(8 67 86 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 72%);
}

.section-block::before,
.current-type-panel::before,
.video-duration-panel::before,
.detail-page-prompt-panel::before,
.assist-panel::before,
.settings-panel::before,
.support-panel::before,
.recharge-pay-panel::before,
.admin-recharge-panel::before {
  padding: 1px;
  border: 0;
  background: linear-gradient(135deg, rgb(8 145 178 / 18%), rgb(20 184 166 / 12%));
  box-shadow: none;
  opacity: 0.42;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.section-block:hover::before,
.section-block:focus-within::before,
.current-type-panel:hover::before,
.current-type-panel:focus-within::before,
.video-duration-panel:hover::before,
.video-duration-panel:focus-within::before,
.detail-page-prompt-panel:hover::before,
.detail-page-prompt-panel:focus-within::before,
.assist-panel:hover::before,
.assist-panel:focus-within::before,
.settings-panel:hover::before,
.settings-panel:focus-within::before,
.support-panel:hover::before,
.support-panel:focus-within::before,
.recharge-pay-panel:hover::before,
.recharge-pay-panel:focus-within::before,
.admin-recharge-panel:hover::before,
.admin-recharge-panel:focus-within::before {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--tech-accent) 72%, transparent), transparent) 0 0 / 220% 100% no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--tech-accent) 42%, transparent), color-mix(in srgb, var(--tech-accent-2) 26%, transparent));
  box-shadow: none;
  opacity: 0.86;
  animation:
    techBorderFlow 1.9s linear infinite,
    techBorderBreath 2.8s ease-in-out infinite;
}

@keyframes techBorderBreath {
  0%,
  100% {
    opacity: 0.48;
    box-shadow: none;
  }
  50% {
    opacity: 0.9;
    box-shadow: none;
  }
}

body.is-generating-plan #productInfo,
body.is-generating-output #output {
  background-image:
    linear-gradient(120deg, transparent 0%, color-mix(in srgb, var(--tech-accent) 14%, transparent) 45%, transparent 70%),
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--tech-accent) 7%, transparent) 0 1px, transparent 1px 12px),
    linear-gradient(rgb(248 254 255 / 92%), rgb(248 254 255 / 92%));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--tech-accent) 10%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 72%);
}

/* 2026-07-08 ocean tone pass: lighter sea-glass interface, keeps existing layout and logic. */
body {
  --tech-bg: #e7f8fb;
  --tech-panel: rgb(240 252 253 / 84%);
  --tech-line: rgb(15 118 137 / 20%);
  --tech-ink: #073242;
  --tech-muted: #4e7180;
  --tech-accent: #0891b2;
  --tech-accent-2: #14b8a6;
  --bg: var(--tech-bg);
  --panel: var(--tech-panel);
  --ink: var(--tech-ink);
  --muted: var(--tech-muted);
  --line: var(--tech-line);
  --accent: var(--tech-accent);
  --accent-strong: var(--tech-accent-2);
  --accent-soft: rgb(20 184 166 / 12%);
  --shadow: 0 24px 70px rgb(8 67 86 / 14%);
  background:
    radial-gradient(circle at 18% 0%, rgb(125 211 252 / 52%), transparent 26%),
    radial-gradient(circle at 78% 12%, rgb(45 212 191 / 46%), transparent 25%),
    radial-gradient(circle at 62% 72%, rgb(186 230 253 / 58%), transparent 34%),
    linear-gradient(135deg, #e9fbff 0%, #c9f1f5 42%, #f5fdff 100%);
  color: var(--tech-ink);
}

body[data-type="mainImage"] {
  --tech-accent: #0284c7;
  --tech-accent-2: #06b6d4;
}

body[data-type="video"] {
  --tech-accent: #2563eb;
  --tech-accent-2: #22d3ee;
}

body[data-type="detailPage"] {
  --tech-accent: #059669;
  --tech-accent-2: #2dd4bf;
}

body[data-view="assets"] {
  --tech-accent: #0f766e;
  --tech-accent-2: #f59e0b;
}

body::before {
  opacity: 0.42;
  background-image:
    linear-gradient(rgb(8 145 178 / 9%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(20 184 166 / 8%) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 58%), transparent 90%);
}

body::after {
  opacity: 0.28;
  background:
    radial-gradient(circle at 50% 50%, rgb(14 165 233 / 42%), rgb(45 212 191 / 22%) 32%, transparent 62%),
    conic-gradient(from 220deg, transparent 0 18%, rgb(14 165 233 / 34%) 20% 24%, transparent 26% 52%, rgb(20 184 166 / 30%) 54% 58%, transparent 60% 100%);
  filter: blur(0.5px) drop-shadow(0 0 56px rgb(14 165 233 / 22%));
}

.sidebar {
  background:
    linear-gradient(180deg, rgb(235 252 255 / 78%), rgb(213 244 248 / 84%)),
    radial-gradient(circle at 52% 0%, rgb(34 211 238 / 24%), transparent 38%);
  border-color: rgb(8 145 178 / 18%);
  box-shadow: 0 24px 80px rgb(8 67 86 / 12%);
}

.brand h1,
.topbar h2,
.section-heading h3,
.section-title p {
  color: #063242;
  text-shadow: none;
}

.brand p,
.side-panel p,
.nav-item small,
.section-heading span,
.field-hint,
.status-line,
.support-copy span {
  color: #557382;
}

.brand-mark {
  color: #eaffff;
  background: linear-gradient(135deg, #0284c7, #14b8a6);
  box-shadow: 0 0 26px rgb(20 184 166 / 26%);
}

.workspace::before {
  background:
    linear-gradient(120deg, rgb(8 145 178 / 8%) 0 1px, transparent 1px 34px),
    radial-gradient(circle at 76% 10%, rgb(14 165 233 / 18%), transparent 30%);
}

.topbar {
  background:
    linear-gradient(135deg, rgb(240 253 255 / 84%), rgb(204 242 248 / 78%)),
    radial-gradient(circle at 78% 38%, color-mix(in srgb, var(--tech-accent) 22%, transparent), transparent 35%);
  border-color: rgb(8 145 178 / 18%);
  box-shadow:
    0 26px 84px rgb(8 67 86 / 14%),
    inset 0 1px 0 rgb(255 255 255 / 78%);
}

.topbar::before {
  opacity: 0.48;
  background:
    conic-gradient(from 210deg, transparent 0 18%, rgb(14 165 233 / 52%) 19% 21%, transparent 22% 40%, rgb(20 184 166 / 52%) 41% 43%, transparent 44% 100%),
    radial-gradient(circle at 50% 50%, rgb(125 211 252 / 56%), rgb(45 212 191 / 20%) 36%, transparent 64%);
  filter: drop-shadow(0 0 54px rgb(14 165 233 / 24%));
}

.topbar::after {
  opacity: 0.62;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 42%), transparent),
    linear-gradient(135deg, #67e8f9, #0ea5e9);
  box-shadow:
    0 0 42px rgb(14 165 233 / 30%),
    48px 70px 0 -18px rgb(186 230 253 / 60%),
    -52px 92px 0 -26px rgb(45 212 191 / 34%);
}

.nav-item,
.credit-pill,
.recharge-box,
.support-panel,
.recharge-pay-panel,
.admin-recharge-panel,
.section-block,
.current-type-panel,
.video-duration-panel,
.detail-page-prompt-panel,
.assist-panel,
.settings-panel,
.asset-card,
.asset-preview-panel,
.empty-assets,
.service-notice {
  color: var(--tech-ink);
  background:
    linear-gradient(145deg, rgb(248 254 255 / 84%), rgb(219 247 250 / 80%)),
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--tech-accent) 12%, transparent), transparent 42%);
  border-color: rgb(8 145 178 / 16%);
  box-shadow:
    0 22px 62px rgb(8 67 86 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 74%);
}

.nav-item.active,
.type-card.active,
.segment-button.active {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tech-accent) 22%, white), color-mix(in srgb, var(--tech-accent-2) 18%, white));
  border-color: color-mix(in srgb, var(--tech-accent) 42%, transparent);
  color: #053042;
  box-shadow:
    0 18px 40px color-mix(in srgb, var(--tech-accent) 16%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 82%);
}

.input-column > .section-block:first-child {
  background:
    linear-gradient(145deg, rgb(242 253 255 / 88%), rgb(211 243 249 / 86%)),
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--tech-accent) 18%, transparent), transparent 36%);
}

.section-block::before,
.current-type-panel::before,
.video-duration-panel::before,
.detail-page-prompt-panel::before,
.assist-panel::before,
.settings-panel::before,
.support-panel::before,
.recharge-pay-panel::before,
.admin-recharge-panel::before {
  border-color: rgb(255 255 255 / 54%);
}

input,
textarea,
select,
.output-block textarea,
#productInfo,
#knowledgeBase,
#customerNeeds {
  color: #073242;
  background-color: rgb(248 254 255 / 82%);
  border-color: rgb(8 145 178 / 20%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%);
}

input::placeholder,
textarea::placeholder {
  color: rgb(78 113 128 / 68%);
}

.secondary-button,
.compact-button,
.segment-button,
.type-card {
  color: #063242;
  background: rgb(239 253 255 / 82%);
  border-color: rgb(8 145 178 / 24%);
}

.primary-button {
  color: #f4feff;
  background: linear-gradient(135deg, #0284c7, #14b8a6);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 30%) inset,
    0 18px 34px rgb(14 165 233 / 20%);
}

.summary-item {
  background:
    linear-gradient(145deg, rgb(246 254 255 / 88%), rgb(214 243 248 / 84%)),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--tech-accent) 14%, transparent), transparent 48%);
  border-color: color-mix(in srgb, var(--tech-accent) 26%, rgb(8 145 178 / 16%));
}

.summary-item span {
  color: #5c7480;
}

.summary-item strong {
  color: #063242;
}

.output-block {
  border-color: color-mix(in srgb, var(--tech-accent) 32%, rgb(8 145 178 / 14%));
  box-shadow:
    0 28px 90px rgb(8 67 86 / 14%),
    0 0 48px color-mix(in srgb, var(--tech-accent) 10%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 72%);
}

body.is-generating-plan #productInfo,
body.is-generating-output #output {
  background-image:
    linear-gradient(120deg, transparent 0%, color-mix(in srgb, var(--tech-accent) 18%, transparent) 45%, transparent 70%),
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--tech-accent) 10%, transparent) 0 1px, transparent 1px 12px),
    linear-gradient(rgb(248 254 255 / 90%), rgb(248 254 255 / 90%));
}

.activation-gate-screen {
  background:
    radial-gradient(circle at center, rgb(45 212 191 / 20%), transparent 34%),
    linear-gradient(135deg, rgb(224 247 250 / 82%), rgb(246 254 255 / 94%));
}

.activation-gate-card {
  color: #073242;
  background: linear-gradient(180deg, rgb(248 254 255 / 96%), rgb(219 247 250 / 94%));
  border-color: rgb(8 145 178 / 22%);
  box-shadow: 0 24px 86px rgb(8 67 86 / 18%), 0 0 46px rgb(20 184 166 / 16%);
}

.activation-gate-card p,
.activation-gate-support span {
  color: #557382;
}

.activation-gate-row input {
  color: #073242;
  background: rgb(248 254 255 / 86%);
}

.admin-recharge-panel {
  --tech-accent: #0f766e;
  --tech-accent-2: #f59e0b;
  border-color: rgb(15 118 110 / 24%);
  background:
    linear-gradient(145deg, rgb(248 254 255 / 88%), rgb(224 242 241 / 84%)),
    radial-gradient(circle at 100% 0%, rgb(245 158 11 / 12%), transparent 42%);
}

/* 2026-07-08 Pinterest/Web3 reference polish: CSS-only visual layer. */
body {
  background:
    radial-gradient(circle at 72% 12%, rgb(32 132 255 / 28%), transparent 20%),
    radial-gradient(circle at 44% -6%, rgb(108 92 231 / 18%), transparent 28%),
    radial-gradient(circle at 90% 78%, rgb(34 211 238 / 14%), transparent 24%),
    linear-gradient(135deg, #020712 0%, #07162a 44%, #030711 100%);
}

body::after {
  content: "";
  position: fixed;
  right: min(6vw, 80px);
  top: 86px;
  width: min(34vw, 430px);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  opacity: 0.52;
  background:
    linear-gradient(135deg, rgb(130 246 255 / 0%) 20%, rgb(130 246 255 / 34%) 21% 23%, rgb(36 99 235 / 0%) 24%),
    linear-gradient(45deg, rgb(139 92 246 / 0%) 36%, rgb(139 92 246 / 34%) 37% 40%, rgb(139 92 246 / 0%) 41%),
    radial-gradient(circle at 40% 36%, rgb(96 165 250 / 82%), rgb(34 211 238 / 18%) 28%, transparent 58%);
  filter: blur(0.2px) drop-shadow(0 0 56px rgb(56 189 248 / 38%));
  clip-path: polygon(50% 0, 90% 24%, 90% 72%, 50% 100%, 10% 72%, 10% 24%);
}

.app-shell {
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

.sidebar {
  min-height: calc(100vh - 32px);
  border: 1px solid rgb(148 163 184 / 16%);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgb(13 23 42 / 76%), rgb(4 10 20 / 88%)),
    radial-gradient(circle at 50% 0%, rgb(34 211 238 / 14%), transparent 42%);
  box-shadow: 0 24px 80px rgb(0 0 0 / 34%);
  backdrop-filter: blur(18px);
}

.workspace {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.workspace::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 28px;
  background:
    linear-gradient(120deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 32px),
    radial-gradient(circle at 78% 8%, rgb(59 130 246 / 16%), transparent 30%);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 90%), transparent 88%);
}

.workspace > * {
  position: relative;
  z-index: 1;
}

.topbar {
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid rgb(148 163 184 / 16%);
  border-radius: 24px;
  background: linear-gradient(135deg, rgb(9 18 34 / 82%), rgb(6 13 25 / 72%));
  box-shadow: 0 24px 80px rgb(0 0 0 / 28%);
  backdrop-filter: blur(18px);
}

.topbar h2 {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 900;
  color: #f8fbff;
  text-shadow: 0 0 34px rgb(56 189 248 / 22%);
}

.eyebrow {
  color: color-mix(in srgb, var(--tech-accent) 78%, white);
  letter-spacing: 0.16em;
}

.brand-mark {
  border-radius: 16px;
}

.nav-item,
.credit-pill,
.recharge-box,
.support-panel,
.recharge-pay-panel,
.admin-recharge-panel,
.section-block,
.current-type-panel,
.video-duration-panel,
.detail-page-prompt-panel,
.assist-panel,
.settings-panel,
.asset-card,
.asset-preview-panel,
.empty-assets,
.service-notice {
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgb(15 30 55 / 78%), rgb(5 13 26 / 88%)),
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--tech-accent) 12%, transparent), transparent 44%);
  border-color: rgb(148 163 184 / 18%);
  backdrop-filter: blur(16px);
}

.section-block,
.current-type-panel,
.assist-panel,
.settings-panel {
  box-shadow:
    0 24px 70px rgb(0 0 0 / 28%),
    inset 0 1px 0 rgb(255 255 255 / 6%);
}

.section-heading h3,
.section-title p {
  font-weight: 900;
}

.primary-button,
.secondary-button,
.danger-button,
.compact-button,
.nav-item,
.segment-button,
.type-card {
  border-radius: 999px;
}

.primary-button {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tech-accent) 92%, white), var(--tech-accent-2));
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 18%) inset,
    0 0 28px color-mix(in srgb, var(--tech-accent) 26%, transparent);
}

.secondary-button,
.compact-button,
.segment-button,
.type-card {
  background: rgb(8 18 34 / 78%);
}

input,
textarea,
select {
  border-radius: 14px;
  background: rgb(3 10 20 / 82%);
}

.summary-item {
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgb(13 27 50 / 92%), rgb(4 12 24 / 94%)),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--tech-accent) 18%, transparent), transparent 48%);
}

.output-block textarea,
#productInfo,
#knowledgeBase,
#customerNeeds {
  background-color: rgb(2 8 18 / 86%);
}

@media (max-width: 920px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
  }
}

/* 2026-07-08 layout pass: selections on top, generation output full-width below. */
.content-grid {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.input-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.input-column > .section-block:first-child,
.input-column > .compact-details {
  grid-column: 1 / -1;
}

.output-column {
  grid-template-columns: 1fr;
  width: 100%;
}

.generation-summary,
.output-block {
  width: 100%;
}

.output-block textarea {
  min-height: clamp(520px, 58vh, 780px);
}

@media (max-width: 1100px) {
  .input-column {
    grid-template-columns: 1fr;
  }
}

/* 2026-07-08 AI UI reference pass: stronger hero + bento dashboard composition. */
body {
  background:
    radial-gradient(circle at 78% 10%, rgb(46 144 250 / 36%), transparent 18%),
    radial-gradient(circle at 22% 4%, rgb(114 92 255 / 24%), transparent 22%),
    radial-gradient(circle at 56% 58%, rgb(14 165 233 / 12%), transparent 32%),
    linear-gradient(135deg, #01040d 0%, #061226 48%, #02040b 100%);
}

body::before {
  opacity: 0.72;
  background-size: 56px 56px;
}

.app-shell {
  grid-template-columns: 256px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
}

.sidebar {
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgb(13 26 48 / 80%), rgb(3 9 20 / 92%)),
    radial-gradient(circle at 50% 8%, rgb(45 212 191 / 13%), transparent 34%);
}

.workspace {
  overflow: visible;
}

.topbar {
  position: relative;
  min-height: 236px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr);
  align-items: end;
  gap: 24px;
  padding: 34px;
  border-radius: 34px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgb(13 26 52 / 82%), rgb(4 10 23 / 88%)),
    radial-gradient(circle at 72% 40%, color-mix(in srgb, var(--tech-accent) 28%, transparent), transparent 34%);
  border-color: rgb(147 197 253 / 22%);
  box-shadow:
    0 28px 100px rgb(0 0 0 / 38%),
    inset 0 1px 0 rgb(255 255 255 / 10%);
}

.topbar::before {
  content: "";
  position: absolute;
  right: 7%;
  top: 50%;
  width: min(34vw, 420px);
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(-16deg);
  pointer-events: none;
  opacity: 0.82;
  background:
    conic-gradient(from 210deg, transparent 0 18%, rgb(125 211 252 / 72%) 19% 21%, transparent 22% 40%, rgb(99 102 241 / 72%) 41% 43%, transparent 44% 100%),
    radial-gradient(circle at 50% 50%, rgb(34 211 238 / 42%), rgb(37 99 235 / 14%) 34%, transparent 62%);
  border: 1px solid rgb(125 211 252 / 18%);
  border-radius: 34% 66% 42% 58% / 58% 38% 62% 42%;
  filter: drop-shadow(0 0 64px rgb(59 130 246 / 46%));
}

.topbar::after {
  content: "";
  position: absolute;
  right: 13%;
  top: 24%;
  width: 96px;
  height: 96px;
  pointer-events: none;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 22%), transparent),
    linear-gradient(135deg, color-mix(in srgb, var(--tech-accent) 54%, #fff), #2563eb);
  box-shadow:
    0 0 44px color-mix(in srgb, var(--tech-accent) 46%, transparent),
    48px 70px 0 -18px rgb(15 23 42 / 76%),
    -52px 92px 0 -26px rgb(37 99 235 / 42%);
  transform: rotate(16deg);
}

.topbar > div:first-child {
  max-width: 620px;
  z-index: 1;
}

.topbar h2 {
  font-size: clamp(38px, 5vw, 70px);
  line-height: 0.95;
  letter-spacing: 0;
}

.top-actions {
  z-index: 1;
  justify-content: flex-end;
  align-self: start;
  padding: 10px;
  border: 1px solid rgb(148 163 184 / 18%);
  border-radius: 24px;
  background: rgb(2 8 18 / 58%);
  backdrop-filter: blur(18px);
}

.content-grid {
  gap: 20px;
}

.input-column {
  grid-template-columns: minmax(420px, 1.12fr) minmax(320px, 0.88fr);
  gap: 18px;
}

.input-column > .section-block:first-child {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 22px;
  background:
    linear-gradient(145deg, rgb(12 27 55 / 88%), rgb(4 11 24 / 94%)),
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--tech-accent) 24%, transparent), transparent 36%);
}

.input-column > .section-block:nth-of-type(2) {
  grid-column: 1;
  grid-row: 2 / span 2;
  min-height: 100%;
}

.input-column > .section-block:nth-of-type(3) {
  grid-column: 2;
  grid-row: 2;
  min-height: auto;
}

.input-column > .section-block:nth-of-type(4) {
  grid-column: 2;
  grid-row: 3;
  min-height: auto;
}

.input-column > .compact-details {
  grid-column: 1 / -1;
}

.section-block {
  padding: 18px;
}

.section-heading {
  align-items: flex-start;
  padding-bottom: 8px;
}

.section-heading h3 {
  font-size: 23px;
  letter-spacing: 0;
}

.section-heading span {
  padding-top: 4px;
}

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

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

.summary-item {
  min-height: 96px;
  padding: 16px;
  border-color: color-mix(in srgb, var(--tech-accent) 36%, rgb(148 163 184 / 22%));
}

.summary-item span {
  margin-bottom: 10px;
}

.summary-item strong {
  font-size: 16px;
  line-height: 1.35;
}

.output-column {
  margin-top: 8px;
  gap: 18px;
}

.generation-summary {
  padding: 22px 18px 18px;
}

.output-block {
  min-height: 72vh;
  padding: 22px;
  border-color: color-mix(in srgb, var(--tech-accent) 46%, rgb(148 163 184 / 18%));
  box-shadow:
    0 28px 110px rgb(0 0 0 / 36%),
    0 0 48px color-mix(in srgb, var(--tech-accent) 12%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 9%);
}

.output-block textarea {
  min-height: clamp(620px, 64vh, 900px);
  border-radius: 24px;
}

.output-actions {
  gap: 12px;
}

.output-actions .wide {
  min-height: 54px;
  font-size: 17px;
  font-weight: 900;
}

@media (max-width: 1220px) {
  .topbar {
    grid-template-columns: 1fr;
    min-height: 220px;
  }

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

  .input-column,
  .form-grid,
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .input-column > .section-block:first-child,
  .input-column > .section-block:nth-of-type(2),
  .input-column > .section-block:nth-of-type(3),
  .input-column > .section-block:nth-of-type(4),
  .input-column > .compact-details {
    grid-column: 1;
    grid-row: auto;
  }
}

/* 2026-07-08 motion refinement: flowing hover borders, data-water unlock, directional view switch. */
.section-block:hover::before,
.section-block:focus-within::before,
.current-type-panel:hover::before,
.current-type-panel:focus-within::before,
.video-duration-panel:hover::before,
.video-duration-panel:focus-within::before,
.detail-page-prompt-panel:hover::before,
.detail-page-prompt-panel:focus-within::before,
.assist-panel:hover::before,
.assist-panel:focus-within::before,
.settings-panel:hover::before,
.settings-panel:focus-within::before,
.support-panel:hover::before,
.support-panel:focus-within::before,
.recharge-pay-panel:hover::before,
.recharge-pay-panel:focus-within::before,
.admin-recharge-panel:hover::before,
.admin-recharge-panel:focus-within::before {
  opacity: 1;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--tech-accent) 30%, transparent), transparent) 0 0 / 210% 100% no-repeat,
    conic-gradient(from 0deg at 50% 50%, transparent 0deg, color-mix(in srgb, var(--tech-accent) 54%, transparent) 72deg, transparent 144deg, color-mix(in srgb, var(--tech-accent-2) 34%, transparent) 216deg, transparent 360deg);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tech-accent) 50%, transparent),
    0 0 18px color-mix(in srgb, var(--tech-accent) 18%, transparent);
  animation:
    techBorderFlow 1.8s linear infinite,
    techBorderBreath 2.7s ease-in-out infinite;
}

@keyframes techBorderFlow {
  from {
    background-position: 180% 0, 50% 50%;
    filter: hue-rotate(0deg);
  }
  to {
    background-position: -80% 0, 50% 50%;
    filter: hue-rotate(12deg);
  }
}

@keyframes techBorderBreath {
  0%,
  100% {
    opacity: 0.58;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--tech-accent) 38%, transparent),
      0 0 14px color-mix(in srgb, var(--tech-accent) 12%, transparent);
  }
  50% {
    opacity: 1;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--tech-accent) 72%, transparent),
      0 0 34px color-mix(in srgb, var(--tech-accent) 28%, transparent);
  }
}

.activation-gate-screen.activation-unlocking::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at center, transparent 0 28px, rgb(34 211 238 / 16%) 29px 31px, transparent 32px 56px),
    radial-gradient(circle at center, rgb(34 211 238 / 22%), transparent 48%),
    repeating-linear-gradient(90deg, rgb(34 211 238 / 9%) 0 1px, transparent 1px 22px);
  clip-path: circle(0% at 50% 50%);
  opacity: 0;
  animation: dataWaterRipple 3s cubic-bezier(0.18, 0.82, 0.28, 1) forwards;
}

.activation-gate-screen.activation-unlocking::after {
  content: "0101  AUTH  1100  KEY  0011  SYNC  1010\A 1110  ACCESS  0101  DATA  1001  OPEN\A 0010  FLOW  1011  CORE  0110  PASS\A 1010  UNLOCK  0101  WAVE  1101  OK";
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden;
  white-space: pre;
  text-align: center;
  color: rgb(165 243 252 / 82%);
  font: 800 13px/2.1 Consolas, monospace;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 12px rgb(34 211 238 / 74%),
    0 0 34px rgb(59 130 246 / 42%);
  background:
    radial-gradient(circle at center, rgb(34 211 238 / 20%), transparent 20%, rgb(34 211 238 / 8%) 28%, transparent 46%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgb(165 243 252 / 8%) 18px 19px);
  clip-path: circle(0% at 50% 50%);
  opacity: 0;
  animation: dataCodeSpread 3s cubic-bezier(0.18, 0.82, 0.28, 1) forwards;
}

.activation-gate-screen.activation-unlocking .activation-gate-card {
  position: relative;
  z-index: 4;
  animation: unlockCardWater 3s ease forwards;
}

.activation-gate-screen.activation-confirming::after {
  animation-duration: 520ms;
}

.activation-gate-screen.activation-confirming .activation-gate-card {
  animation-duration: 520ms;
}

@keyframes dataWaterRipple {
  0% {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
    transform: scale(0.92);
    filter: blur(5px);
  }
  20% {
    opacity: 1;
  }
  70% {
    opacity: 0.86;
    filter: blur(1px);
  }
  100% {
    clip-path: circle(115% at 50% 50%);
    opacity: 0;
    transform: scale(1.08);
    filter: blur(8px);
  }
}

@keyframes dataCodeSpread {
  0% {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
    transform: scale(0.72);
  }
  16% {
    opacity: 1;
  }
  58% {
    opacity: 0.86;
    transform: scale(1.12);
  }
  100% {
    clip-path: circle(116% at 50% 50%);
    opacity: 0;
    transform: scale(1.42);
  }
}

@keyframes unlockCardWater {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  56% {
    transform: scale(0.985);
    opacity: 0.88;
  }
  100% {
    transform: scale(0.94);
    opacity: 0;
  }
}

body.nav-slide-down #generatorView,
body.nav-slide-down #assetsView:not([hidden]) {
  animation: navSlideDown 420ms cubic-bezier(0.2, 0.78, 0.24, 1) both;
}

body.nav-slide-up #generatorView,
body.nav-slide-up #assetsView:not([hidden]) {
  animation: navSlideUp 420ms cubic-bezier(0.2, 0.78, 0.24, 1) both;
}

@keyframes navSlideDown {
  from {
    opacity: 0.18;
    transform: translateY(-28px);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes navSlideUp {
  from {
    opacity: 0.18;
    transform: translateY(28px);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-block:hover::before,
  .section-block:focus-within::before,
  .current-type-panel:hover::before,
  .current-type-panel:focus-within::before,
  .video-duration-panel:hover::before,
  .video-duration-panel:focus-within::before,
  .detail-page-prompt-panel:hover::before,
  .detail-page-prompt-panel:focus-within::before,
  .assist-panel:hover::before,
  .assist-panel:focus-within::before,
  .settings-panel:hover::before,
  .settings-panel:focus-within::before,
  .support-panel:hover::before,
  .support-panel:focus-within::before,
  .recharge-pay-panel:hover::before,
  .recharge-pay-panel:focus-within::before,
  .admin-recharge-panel:hover::before,
  .admin-recharge-panel:focus-within::before,
  .activation-gate-screen.activation-unlocking::before,
  .activation-gate-screen.activation-unlocking::after,
  .activation-gate-screen.activation-unlocking .activation-gate-card,
  body.nav-slide-down #generatorView,
  body.nav-slide-down #assetsView:not([hidden]),
  body.nav-slide-up #generatorView,
  body.nav-slide-up #assetsView:not([hidden]) {
    animation: none;
  }
}

/* 2026-07-08 final activation override: keep the first unlock as a full 5s ripple. */
.activation-gate-screen.activation-unlocking {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgb(125 211 252 / 20%), transparent 22%),
    linear-gradient(135deg, rgb(238 250 255 / 92%), rgb(217 242 249 / 94%) 48%, rgb(255 245 238 / 92%));
}

.activation-gate-screen.activation-unlocking::before {
  inset: -16%;
  background:
    repeating-radial-gradient(circle at center, transparent 0 34px, rgb(14 165 233 / 18%) 35px 37px, transparent 38px 72px),
    radial-gradient(circle at center, rgb(14 165 233 / 28%) 0 10%, rgb(45 212 191 / 14%) 22%, transparent 58%),
    repeating-linear-gradient(92deg, rgb(14 116 144 / 10%) 0 1px, transparent 1px 24px);
  animation: activationOceanUnlock 5s cubic-bezier(0.16, 0.84, 0.18, 1) forwards !important;
}

.activation-gate-screen.activation-unlocking::after {
  content: "0101  KEY  1100  FLOW  0011  AUTH  1010\A 1110  DATA  0101  SYNC  1001  OPEN\A 0010  WAVE  1011  CODE  0110  PASS\A 1010  ACCESS  0101  RIPPLE  1101  OK";
  color: rgb(8 80 108 / 72%);
  font: 800 13px/2.25 Consolas, monospace;
  text-shadow: 0 0 18px rgb(14 165 233 / 42%);
  background:
    radial-gradient(circle at center, rgb(255 255 255 / 54%) 0 12%, transparent 34%),
    repeating-linear-gradient(0deg, transparent 0 20px, rgb(14 165 233 / 8%) 20px 21px);
  animation: activationCodeRipple 5s cubic-bezier(0.16, 0.84, 0.18, 1) forwards !important;
}

.activation-gate-screen.activation-unlocking .activation-gate-card {
  animation: activationCardRelease 5s ease forwards !important;
}

/* 2026-07-08 EOF Web B-end override: clean SaaS workspace, no panel glow. */
body {
  --tech-bg: #fff7f1;
  --tech-panel: rgb(255 255 255 / 90%);
  --tech-line: #f1d8cc;
  --tech-ink: #24323a;
  --tech-muted: #7b6d67;
  --tech-accent: #e97868;
  --tech-accent-2: #38b2ac;
  --bg: var(--tech-bg);
  --panel: var(--tech-panel);
  --ink: var(--tech-ink);
  --muted: var(--tech-muted);
  --line: var(--tech-line);
  --accent: var(--tech-accent);
  --accent-strong: var(--tech-accent-2);
  --accent-soft: rgb(233 120 104 / 11%);
  --shadow: 0 14px 40px rgb(107 76 62 / 10%);
  background:
    linear-gradient(135deg, rgb(255 247 241 / 96%) 0%, rgb(255 224 211 / 88%) 36%, rgb(218 248 246 / 86%) 100%),
    repeating-linear-gradient(115deg, rgb(255 255 255 / 28%) 0 1px, transparent 1px 38px);
  color: var(--tech-ink);
}

body[data-type="mainImage"] {
  --tech-accent: #e97868;
  --tech-accent-2: #2fb7b0;
}

body[data-type="video"] {
  --tech-accent: #8b7cf6;
  --tech-accent-2: #38bdf8;
}

body[data-type="detailPage"] {
  --tech-accent: #2f9f8f;
  --tech-accent-2: #f2a65a;
}

body[data-type="characterImage"] {
  --tech-accent: #5aa7d8;
  --tech-accent-2: #79c8a8;
}

body[data-view="assets"] {
  --tech-accent: #d98545;
  --tech-accent-2: #5fb3a9;
}

body::before,
body::after,
.topbar::before,
.workspace::before {
  display: none;
}

.topbar::after,
.nav-item::after,
.section-block::after,
.current-type-panel::after,
.video-duration-panel::after,
.detail-page-prompt-panel::after,
.character-image-prompt-panel::after,
.assist-panel::after,
.settings-panel::after,
.summary-item::after,
.output-block::after,
.asset-card::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(
      circle 180px at var(--pointer-x, 50%) var(--pointer-y, 50%),
      color-mix(in srgb, var(--tech-accent) 12%, transparent),
      transparent 64%
    );
  box-shadow: none;
  transform: none;
  transition: opacity 180ms ease;
}

.topbar:hover::after,
.nav-item:hover::after,
.section-block:hover::after,
.current-type-panel:hover::after,
.video-duration-panel:hover::after,
.detail-page-prompt-panel:hover::after,
.character-image-prompt-panel:hover::after,
.assist-panel:hover::after,
.settings-panel:hover::after,
.summary-item:hover::after,
.output-block:hover::after,
.asset-card:hover::after {
  opacity: 1;
}

.app-shell {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

.sidebar,
.topbar,
.credit-pill,
.recharge-box,
.support-panel,
.recharge-pay-panel,
.admin-recharge-panel,
.section-block,
.current-type-panel,
.video-duration-panel,
.detail-page-prompt-panel,
.character-image-prompt-panel,
.assist-panel,
.settings-panel,
.asset-card,
.asset-preview-panel,
.empty-assets,
.service-notice,
.summary-item,
.output-block {
  color: var(--tech-ink);
  background: linear-gradient(145deg, rgb(255 255 255 / 92%), rgb(255 250 247 / 84%));
  border: 1px solid color-mix(in srgb, var(--tech-accent) 18%, #efe0d8);
  border-radius: 8px;
  box-shadow:
    0 14px 40px rgb(107 76 62 / 9%),
    inset 0 1px 0 rgb(255 255 255 / 84%);
  backdrop-filter: none;
}

.sidebar {
  min-height: calc(100vh - 32px);
  background: linear-gradient(180deg, rgb(255 253 250 / 92%), rgb(240 252 250 / 86%));
}

.brand-mark {
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tech-accent), var(--tech-accent-2));
  box-shadow: none;
}

.brand h1,
.topbar h2,
.section-heading h3,
.section-title p,
.summary-item strong {
  color: var(--tech-ink);
  text-shadow: none;
}

.brand p,
.side-panel p,
.nav-item small,
.section-heading span,
.field-hint,
.status-line,
.support-copy span,
.summary-item span {
  color: var(--tech-muted);
}

.nav-item {
  min-height: 62px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid transparent;
  box-shadow: none;
}

.nav-item:hover {
  background: #f5fbfd;
  border-color: #cfe4ec;
}

.nav-item.active {
  color: var(--tech-ink);
  background: #ecf8fb;
  border-color: color-mix(in srgb, var(--tech-accent) 30%, #cfe4ec);
  box-shadow: inset 3px 0 0 var(--tech-accent);
}

.topbar {
  min-height: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 16px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgb(255 255 255 / 92%), rgb(255 234 224 / 80%) 54%, rgb(225 250 248 / 82%));
  border-color: rgb(233 120 104 / 20%);
}

.topbar h2 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
}

.top-actions {
  align-self: center;
  padding: 8px;
  border-radius: 8px;
  background: rgb(255 255 255 / 72%);
  box-shadow: none;
  backdrop-filter: none;
}

.section-block {
  padding: 18px;
}

.input-column > .section-block:first-child {
  background: linear-gradient(145deg, rgb(255 255 255 / 92%), rgb(255 250 247 / 84%));
}

/* 2026-07-09 critical final layout guard:
   Keep ecommerce template management below the normal input blocks. This sits
   after the last visual theme layout rule so older nth-of-type selectors cannot
   move template management over product fields again. */
body:not([data-type="characterImage"]) .input-column {
  display: grid;
  grid-template-columns: minmax(420px, 1.12fr) minmax(320px, 0.88fr);
  grid-template-areas:
    "service service"
    "primary knowledge"
    "primary skills"
    "ecommerce-template ecommerce-template";
  gap: 18px;
  align-items: start;
}

body[data-type="characterImage"] .input-column {
  display: grid;
  grid-template-columns: minmax(420px, 1.12fr) minmax(320px, 0.88fr);
  grid-template-areas:
    "service service"
    "primary skills"
    "character-template character-template";
  gap: 18px;
  align-items: start;
}

#modelServiceNotice {
  grid-area: service !important;
}

#primaryInputSection {
  grid-area: primary !important;
  z-index: 3;
}

#personalKnowledgeSection {
  grid-area: knowledge !important;
}

#skillSection {
  grid-area: skills !important;
}

#characterTemplatePanel {
  grid-area: character-template !important;
}

#ecommerceTemplatePanel {
  grid-area: ecommerce-template !important;
  z-index: 1;
}

#primaryInputSection,
#personalKnowledgeSection,
#skillSection,
#characterTemplatePanel,
#ecommerceTemplatePanel {
  min-width: 0;
  align-self: start;
}

.input-column > [hidden] {
  display: none !important;
}

@media (max-width: 1220px) {
  body:not([data-type="characterImage"]) .input-column,
  body[data-type="characterImage"] .input-column {
    grid-template-columns: 1fr;
    grid-template-areas:
      "service"
      "primary"
      "knowledge"
      "skills"
      "character-template"
      "ecommerce-template";
  }
}

.section-heading {
  padding-bottom: 10px;
  border-bottom: 1px solid #edf2f5;
}

.section-heading h3 {
  font-size: 20px;
}

input,
textarea,
select,
.output-block textarea,
#productInfo,
#knowledgeBase,
#customerNeeds {
  color: var(--tech-ink);
  background: rgb(255 253 251 / 86%);
  border-color: rgb(226 203 192 / 78%);
  border-radius: 8px;
  box-shadow: none;
}

.primary-button {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tech-accent), var(--tech-accent-2));
  border-color: transparent;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tech-accent) 18%, transparent);
}

.secondary-button,
.compact-button,
.segment-button,
.type-card,
.duration-option {
  color: var(--tech-ink);
  background: rgb(255 255 255 / 76%);
  border-color: rgb(226 203 192 / 78%);
  border-radius: 8px;
  box-shadow: none;
}

.section-block::before,
.current-type-panel::before,
.video-duration-panel::before,
.detail-page-prompt-panel::before,
.assist-panel::before,
.settings-panel::before,
.support-panel::before,
.recharge-pay-panel::before,
.admin-recharge-panel::before {
  padding: 1px;
  border: 0;
  background: #d8e5ec;
  opacity: 0;
  box-shadow: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.section-block:hover::before,
.section-block:focus-within::before,
.current-type-panel:hover::before,
.current-type-panel:focus-within::before,
.video-duration-panel:hover::before,
.video-duration-panel:focus-within::before,
.detail-page-prompt-panel:hover::before,
.detail-page-prompt-panel:focus-within::before,
.assist-panel:hover::before,
.assist-panel:focus-within::before,
.settings-panel:hover::before,
.settings-panel:focus-within::before,
.support-panel:hover::before,
.support-panel:focus-within::before,
.recharge-pay-panel:hover::before,
.recharge-pay-panel:focus-within::before,
.admin-recharge-panel:hover::before,
.admin-recharge-panel:focus-within::before {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--tech-accent) 64%, transparent), transparent) 0 0 / 220% 100% no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--tech-accent) 46%, #d8e5ec), #d8e5ec);
  opacity: 1;
  box-shadow: none;
  animation: techBorderFlow 2.2s linear infinite;
}

body.nav-slide-down .topbar,
body.nav-slide-down #generatorView,
body.nav-slide-down #assetsView:not([hidden]) {
  animation: navSlideDown 620ms cubic-bezier(0.18, 0.86, 0.2, 1) both;
}

body.nav-slide-up .topbar,
body.nav-slide-up #generatorView,
body.nav-slide-up #assetsView:not([hidden]) {
  animation: navSlideUp 620ms cubic-bezier(0.18, 0.86, 0.2, 1) both;
}

@keyframes navSlideDown {
  from {
    opacity: 0;
    transform: translateY(-48px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes navSlideUp {
  from {
    opacity: 0;
    transform: translateY(48px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}