/* Calm workspace surfaces, restrained blue actions and consistent component states. */
:root {
  --page: #f7f8fa;
  --surface: #fff;
  --primary: #3267d4;
  --primary-dark: #2454b5;
  --primary-soft: #eff4fd;
  --purple-soft: var(--primary-soft);
  --text: #1e293b;
  --secondary: #536175;
  --muted: #6d798c;
  --border: #e6eaf0;
  --nav: #edf2fb;
  --shadow: none;
}

::selection { background: #dbeaff; color: #183e76; }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible { outline-color: #6c9ff4; }
.sidebar { border-color: var(--border); }
.brand { min-height: 40px; margin-bottom: 26px; }
.brand strong { color: var(--text); font-size: 17px; letter-spacing: .2px; }
.brand-mark { background: #fff; border: 0; box-shadow: none; }
@media (min-width: 768px) and (max-width: 1023px) {
  .brand { display: flex; min-height: 44px; }
}
.new-creation { background: var(--primary); box-shadow: none; border-radius: 10px; }
.new-creation:hover { background: var(--primary-dark); box-shadow: none; filter: none; }
.nav-item { color: var(--secondary); }
.nav-item:hover { color: var(--primary); background: #f3f7fe; }
.nav-item.active { color: var(--primary); background: var(--nav); box-shadow: none; }
.nav-item.active > svg:last-child { opacity: .6; }
.nav-divider { background: var(--border); }
.nav-label, .sidebar-note p { color: var(--muted); }
.note-star { color: #91b6ee; }
.profile-avatar { color: var(--primary); background: var(--primary-soft); }
.workspace-profile { border-color: var(--border); }
.workspace-profile strong { color: var(--text); }
.simple-shell .workspace-profile small, .workspace-profile > svg { color: var(--muted); }
.workspace-profile small i, .local-preview-label i { background: #91add1; }
.topbar { background: #fffffff0; border-color: var(--border); }
.breadcrumb, .breadcrumb > strong { color: var(--secondary); }
.breadcrumb > span { color: #b1bfd0; }
.local-preview-label { color: var(--muted); }
.header-account { color: var(--secondary) !important; background: #fff !important; }
.header-account:hover { color: var(--primary) !important; background: var(--primary-soft) !important; }
.icon-button, .topbar-help { color: var(--muted); }
.icon-button:hover { color: var(--primary); background: var(--primary-soft); }

/* The two creation routes share a quiet, balanced card layout. */
.eyebrow, .page-heading .eyebrow { color: #7388a4; }
.welcome h1, .page-heading h1 { color: var(--text); }
.welcome h1 span { color: var(--primary); }
.welcome > div > p:last-child, .page-heading p { color: var(--muted); }
.studio-page { max-width: 1250px; }
.simple-welcome { margin-top: 5px; margin-bottom: 28px; }
.simple-welcome h1 { font-size: 30px; letter-spacing: -.8px; }
.simple-welcome > div > p:last-child { font-size: 12px; margin-top: 8px; }
.two-mode-grid { gap: 22px; }
.studio-mode-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.mode-preview { height: clamp(150px, 15vw, 190px); background: #eef1f5; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.mode-preview img { width: 100%; height: 100%; object-fit: cover; }
.sample-collage { display: flex; align-items: center; justify-content: center; gap: 14px; background: #edf1f6; }
.sample-collage img { height: calc(100% - 24px); width: auto; aspect-ratio: 4 / 5; max-width: calc((100% - 48px) / 2); border: 3px solid #fff; border-radius: 9px; object-position: 50% 25%; }
.preview-live img { object-position: 50% 53%; }
.mode-preview.is-draft img { object-fit: contain; }
.mode-preview.is-draft { background: #eef1f5; }
.mode-preview-label { position: absolute; top: 14px; left: 14px; border: 1px solid #ffffffa6; border-radius: 6px; padding: 3px 8px; background: #ffffffeb; color: #5d6b80; font-size: 9px; line-height: 1.7; }
.studio-mode-card .mode-preview { height: clamp(220px, 23vw, 300px); }
.studio-photo-pair { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px; background: linear-gradient(135deg, #f1eee8, #e9edf2); }
.studio-photo-pair .studio-reference-image { display: block; position: relative; width: auto; height: 100%; max-width: calc((100% - 14px) / 2); aspect-ratio: 3 / 4; overflow: hidden; border: 3px solid #fff; border-radius: 12px; box-shadow: 0 7px 20px #27344712; }
.studio-photo-pair .studio-reference-image img { display: block; object-position: 50% 35%; }
.studio-live-preview { display: flex; align-items: center; justify-content: center; padding: 14px; isolation: isolate; background: #e5e0d7; }
.studio-live-preview .studio-live-backdrop { position: absolute; inset: -28px; width: calc(100% + 56px); height: calc(100% + 56px); object-fit: cover; object-position: 60% 40%; filter: blur(22px); opacity: .6; z-index: -2; }
.studio-live-backdrop img { display: block; object-position: 60% 40%; }
.studio-live-preview::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, #fbf8f21a, #f6f8fb70); }
.studio-live-video { display: block; height: 100%; width: auto; max-width: 100%; aspect-ratio: 4 / 7; object-fit: contain; border: 3px solid #ffffffed; border-radius: 12px; box-shadow: 0 7px 24px #26334622; }
.studio-mode-card .mode-preview-label { z-index: 2; }
@media (max-width: 767px) { .studio-mode-card .mode-preview { height: clamp(230px, 62vw, 300px); } .studio-photo-pair { gap: 12px; padding: 16px; } }
.mode-card-body { padding: 22px; }
.mode-card-heading { display: flex; align-items: center; gap: 10px; }
.mode-card-icon { width: 32px; height: 32px; border: 1px solid #e0e8f5; border-radius: 9px; background: #f4f7fc; color: #4b76bb; display: grid; place-items: center; }
.mode-card-heading h2 { color: var(--text); font-size: 23px; letter-spacing: -.3px; line-height: 1.4; font-weight: 650; }
.mode-card-description { margin-top: 11px; color: var(--secondary); font-size: 12px; line-height: 1.85; }
.mode-card-footer { margin-top: 19px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mode-card-action { min-height: 36px; padding: 8px 14px; border-radius: 8px; font-size: 11px; gap: 18px; }
.mode-card-footer small { color: var(--muted); font-size: 9px; text-align: right; }
.panel { border-color: var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.panel-heading h2, .route-page .section-title h2 { color: var(--text); }
.text-link, .panel-heading a { color: var(--secondary); }
.text-link:hover, .panel-heading a:hover { color: var(--primary); }
.simple-task-panel { margin-top: 22px; padding: 20px 23px; min-height: 135px; }
.simple-tasks-empty { margin: 20px 0 0; gap: 13px; }
.simple-tasks-empty > span { color: #8594ab; background: #f4f6f9; width: 38px; height: 38px; border-radius: 11px; }
.simple-tasks-empty strong { color: var(--secondary); }
.simple-tasks-empty p { color: var(--muted); }
.page-footer { color: #7b8798; }
.simple-shell .page-footer { margin-top: 20px; }
.page-footer > span:first-child > svg { color: #8c9ab0; }
.page-footer i { background: #a0b7d5; }
@media (max-width: 767px) {
  .simple-welcome { margin-top: 0; margin-bottom: 22px; }
  .simple-welcome h1 { font-size: 25px; }
  .simple-welcome > div > p:last-child { font-size: 11px; }
  .two-mode-grid { gap: 17px; }
  .mode-preview { height: 160px; }
  .mode-card-body { padding: 21px; }
  .mode-card-heading h2 { font-size: 22px; }
  .mode-card-description { font-size: 12px; }
  .mode-card-action { min-height: 39px; }
  .simple-task-panel { min-height: 130px; padding: 20px; }
}

/* Shared controls, readable secondary text and local creation states. */
.button.primary { background: var(--primary); color: #fff; box-shadow: none; }
.button.primary:hover { background: var(--primary-dark); box-shadow: none; }
.button.secondary { color: var(--secondary); border-color: #dce5f1; background: #fff; }
.button.secondary:hover { color: var(--primary); background: #f5f9ff; border-color: #b7cef2; }
.button.ghost { color: #3d669c; background: #f0f5fc; }
.button.ghost:hover { color: var(--primary); background: #e6effe; }
.muted, .field-hint, .hint, .help-text, .label small { color: var(--muted); }
.label, label.label { color: var(--secondary); }
.input, .textarea, .select { color: var(--text); border-color: #dce5f1; background: #fff; }
.input:focus, .textarea:focus, .select:focus { border-color: #76a4f1; box-shadow: 0 0 0 3px #2467e80d; }
.input::placeholder, .textarea::placeholder { color: #8091a7; }
.badge, .badge.purple, .pill, .pill.active { color: #38649f; background: var(--primary-soft); border-color: #dbe8fb; }
.mode-icon, .mode-icon.free { color: #4d80ce; background: #eaf2ff; }
.mode-icon.live { color: #4274b1; background: #e5f0ff; }
.mode-picker-item { background: #f8fbff; border-color: var(--border); }
.mode-picker-item:hover { background: #edf4ff; border-color: #b9cff0; }
.mode-picker-item strong { color: #355982; }
.mode-picker-item small { color: var(--muted); }
.mode-picker-item > svg { color: #8ba6c9; }
.segmented button { color: var(--secondary); background: #f4f7fc; border-color: var(--border); }
.segmented button.active, .segmented button[aria-pressed=true] { color: #205fc5; background: #eaf2ff; border-color: #9ebff2; }
.notice, .notice.subtle { color: #3d669c; background: #f0f6ff; border-color: #dce8fa; }
.notice p { color: var(--secondary); }
.save-status, .draft-status { color: #57769f; }
.upload-zone { color: #7097cb; background: #f8fbff; border-color: #c4d6ee; }
.upload-zone:hover, .upload-zone.dragover, .upload-zone.is-dragging { background: #edf5ff; border-color: #6e9deb; }
.upload-zone strong { color: #3d5e8a; }
.upload-zone small { color: var(--muted); }
.prompt-chip, .prompt-templates button { color: #52729b; background: #f6f9fe; border-color: #dce6f4; }
.prompt-chip:hover, .prompt-templates button:hover { color: var(--primary); background: #eaf2ff; }
.asset-row { background: #f8fbff; border-color: var(--border); }
.asset-thumbnail { color: #799bc9; background: #edf4ff; border-color: #d7e4f6; }
.asset-row-body strong { color: var(--secondary); }
.asset-row-body .select, .asset-row > .icon-button { color: var(--muted); }
.creation-image-frame { background: repeating-conic-gradient(#fff 0 25%, #f0f4fa 0 50%) 50% / 20px 20px; border-color: var(--border); }
.preview-label { color: #4c709e; border-color: #dbe6f5; }
.preview-art { color: #89a1c4; background: #f4f7fc; border-color: #e2e9f3; box-shadow: none; transform: none; }
.preview-art > svg { transform: none; }
.preview-art-dot { display: none; }
.empty-state-icon, .empty-state > .mode-icon, .empty-illustration { color: #7fa3d6; background: #edf4ff; }
.empty-state h2, .empty-state h3, .creation-placeholder h3 { color: #415f88; }
.empty-state p, .empty-state small, .creation-placeholder p, .creation-service-note p { color: var(--muted); }
.creation-service-note h3 { color: var(--secondary); }
.service-note-icon, .route-page .section-title > svg { color: #7b9dcc; }
.search-field { color: #7a91b0; border-color: #dce5f1; }
.works-filter-controls .select { color: var(--secondary); }
.work-card, .guide-card { border-color: var(--border); }
.work-card:hover { border-color: #a9c6ee; box-shadow: 0 5px 20px #2467e80b; }
.work-card > button, .work-card > figure { background: #f3f7fd; }
.work-card h3 { color: var(--text); }
.work-card p, .work-image-missing { color: var(--muted); }
.work-type-badge { color: #4c709e; }

/* Personal centre, email authentication and after-sales top-up. */
.account-avatar { color: #6f8fbd; background: #f0f4fb; }
.account-profile > .badge, .account-page > .page-heading > .badge { color: #597ba8; background: #eff5ff; border-color: #dfe9f8; }
.account-profile h2, .wallet-heading h2 { color: var(--text); }
.account-profile > .muted, .account-registration-note, .account-profile-footnote,
.account-email, .account-notice, .recharge-disclaimer, .recharge-form .field-hint,
.wallet-balance > .muted, .wallet-balance small, .recharge-request-row small { color: var(--muted); }
.account-notice { background: #f4f8ff; border-color: #e0eafa; }
.wallet-heading .eyebrow { color: #7388a4; }
.wallet-icon { color: #6895d4; background: var(--primary-soft); }
.wallet-balance { border-color: var(--border); }
.wallet-balance > span { color: var(--secondary); }
.wallet-balance strong { color: #285da8; }
.recharge-form .label { color: var(--secondary); }
.recharge-form .label .muted { color: var(--muted); }
.recharge-amount-input { border-color: #dce5f1; }
.recharge-amount-input > span { color: #7692b8; }
.recharge-amount-input > .input { color: var(--text); }
.recharge-amount-input:focus-within { border-color: #76a4f1; box-shadow: 0 0 0 3px #2467e80d; }
.recharge-code { background: #f7faff; border-color: #dde7f5; }
.recharge-code code { color: #4b71a5; }
.recharge-request-row { border-color: var(--border); }
.recharge-request-row strong { color: #3e628f; }
.auth-tabs { background: #f0f5fc; }
.auth-tabs button { color: var(--muted); }
.auth-tabs button.active { color: #205fc5; background: #fff; box-shadow: 0 2px 8px #2467e810; }
.auth-intro, .auth-footer, .auth-code-status { color: var(--muted); }
.auth-form .label { color: var(--secondary); }
.auth-form .input { color: var(--text); }
.auth-form .input::placeholder { color: #8091a7; }
.auth-text-button { color: #2467d1; }

/* Help and dialogs share the same neutral blue surfaces. */
.guide-icon, .settings-card-icon, .modal-symbol { color: #749bce; background: var(--primary-soft); }
.guide-number { color: #edf3fc; }
.guide-card p, .guide-card ul, .help-aside p, .help-faq details p { color: var(--muted); }
.guide-example { color: #5a769b; background: #f5f9ff; border-color: #dfe9f8; }
.help-aside h2, .help-aside h3, .help-faq summary { color: var(--secondary); }
.help-faq summary > svg { color: #83a3ce; }
.help-faq details { border-color: var(--border); }
dialog { border-color: var(--border); box-shadow: 0 30px 100px #18345826; }
dialog::backdrop { background: #192f4f57; }
.dialog-header { border-color: var(--border); }
.dialog-header h2, .modal-lead { color: var(--text); }
.dialog-footnote { color: var(--muted); }
.large-image-preview { background: #f5f8fd; border-color: var(--border); }
#toast { color: #f1f6ff; background: #243d60; box-shadow: 0 5px 25px #18345825; }
#toast svg { color: #a9ccff; }
.boot-screen { color: var(--muted); background: var(--page); }
.boot-mark { color: #fff; background: var(--primary); }

/* Reserve semantic colours for actual feedback rather than creation modes. */
.account-notice.success { color: #34745b; border-color: #d7eade; background: #f1faf5; }
.account-profile-heading > .badge, .account-verified { color: #43775b; }
.account-profile-heading > .badge { background: #edf7f0; }
.auth-field-error, .save-status[data-state=error] { color: #b34f60; }
.save-status[data-state=saving], .save-status[data-state=pending] { color: #94702c; }

/* Image generation controls and server-backed results. */
.generation-cost { margin: 16px 0 14px; padding: 14px 15px; background: #f6f8fc; border: 1px solid var(--border); border-radius: 10px; }
.generation-cost-summary { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--secondary); }
.generation-cost-summary small { margin-left: 7px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.generation-cost-total { color: var(--secondary); white-space: nowrap; }
.generation-cost-total strong { margin: 0 3px; color: var(--primary); font-size: 22px; line-height: 1.25; font-weight: 600; font-variant-numeric: tabular-nums; }
.generation-cost p { margin: 8px 0 0; font-size: 10px; line-height: 1.8; color: var(--muted); }
.generation-cost > p:first-child { margin-top: 0; }
.task-state .task-cost { max-width: 180px; text-align: right; line-height: 1.7; }
.generation-options { border-top: 1px solid var(--border); padding-top: 15px; margin-top: 18px; }
.generation-options summary { color: var(--secondary); font-size: 12px; cursor: pointer; margin-bottom: 15px; }
.generation-options .form-grid { margin-top: 12px; }
.generation-job-status { border: 1px solid #dde7f6; background: #f5f8fe; border-radius: 11px; padding: 14px; margin-bottom: 17px; font-size: 11px; }
.generation-job-status > div { display: flex; align-items: center; gap: 15px; justify-content: space-between; }
.generation-job-status strong { color: #3b639a; font-weight: 550; }
.generation-job-status p { color: var(--muted); line-height: 1.9; margin-top: 6px; overflow-wrap: anywhere; }
.generation-job-status .button { min-height: 28px; font-size: 10px; margin-top: 10px; padding: 5px 9px; }
.generation-job-status progress { width: 45%; height: 7px; accent-color: var(--primary); }
.generation-results { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 13px; }
.generated-image { min-width: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.generated-image > button:first-child { padding: 0; width: 100%; background: #f4f6fa; display: grid; place-items: center; min-height: 170px; }
.generated-image img { width: 100%; max-height: 390px; object-fit: contain; }
.generated-image > .button { margin: 10px; font-size: 10px; min-height: 31px; }
.generation-task-row { display: flex; align-items: flex-start; gap: 14px; padding: 19px 0; border-bottom: 1px solid var(--border); }
.generation-task-row:last-child { border-bottom: 0; }
.task-details { flex: 1; min-width: 0; }
.task-details > strong { font-size: 13px; font-weight: 550; }
.task-details .muted { font-size: 10px; }
.task-error { color: #a85c67; font-size: 11px; line-height: 1.8; margin-top: 7px; overflow-wrap: anywhere; }
.task-state { display: flex; align-items: flex-end; flex-direction: column; gap: 7px; }
.task-state small { font-size: 10px; color: var(--muted); }
.task-output-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.task-output-strip button { width: 65px; height: 65px; padding: 0; border-radius: 8px; background: #f3f6fa; overflow: hidden; }
.task-output-strip img { width: 100%; height: 100%; object-fit: cover; }
#task-results .notice { margin-top: 0; align-items: center; }
#task-results .notice > p { flex: 1; margin: 0; }
#task-results .notice > button { font-size: 10px; min-height: 28px; padding: 5px 9px; }
@media(max-width:767px) {
  .generation-results { grid-template-columns: 1fr; }
  .generation-task-row { gap: 10px; }
  .task-state .pill { font-size: 9px; }
  .generation-options .select { font-size: 14px; }
}

.recharge-request-row > div { min-width: 0; }
.recharge-request-row small { overflow-wrap: anywhere; white-space: pre-wrap; }

/* Real image-to-video generation uses native, accessible playback controls. */
.live-generation-settings { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 18px; }
.live-fixed-summary { display: flex; flex-wrap: wrap; gap: 9px 19px; margin-bottom: 17px; color: var(--muted); font-size: 11px; }
.live-fixed-summary strong { color: var(--secondary); margin-left: 5px; font-weight: 550; }
.generated-video > video { display: block; width: 100%; min-height: 170px; max-height: 440px; object-fit: contain; background: #171b24; }
.large-image-preview video { display: block; width: 100%; max-height: 65vh; background: #171b24; }
.work-image-button > video { display: block; width: 100%; height: 220px; object-fit: cover; pointer-events: none; background: #171b24; }
.work-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 43px; height: 43px; padding-left: 3px; border-radius: 50%; background: #202735b3; color: white; font-size: 17px; }
.task-output-strip button { position: relative; }
.task-output-strip video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: #171b24; }
.video-thumb-label { position: absolute; bottom: 4px; right: 4px; padding: 1px 4px; border-radius: 3px; color: white; background: #202735c9; font-size: 9px; }