:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #182435;
  background: #f3f5f8;
  --ink: #182435;
  --ink-soft: #516074;
  --muted: #7b8798;
  --navy: #132238;
  --navy-2: #1b304c;
  --coral: #f56543;
  --coral-deep: #dd4f30;
  --mint: #38a98c;
  --sky: #4c76e7;
  --paper: #ffffff;
  --canvas: #f3f5f8;
  --line: #dfe4eb;
  --line-soft: #ebeff4;
  --shadow: 0 18px 60px rgba(25, 42, 65, .09);
  --radius: 18px;
}

* { box-sizing: border-box; }
[hidden] { display: none!important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--canvas); }
body.dialog-open { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select, input[type="checkbox"], input[type="radio"] { cursor: pointer; }
button { border: 0; }
input, textarea, select { accent-color: var(--coral); }
textarea { resize: vertical; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(76, 118, 231, .32); outline-offset: 3px; }
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 10px 16px; border-radius: 8px; color: white; background: var(--coral); transition: top .18s ease; }
.skip-link:focus { top: 16px; }

.studio-header { position: relative; z-index: 30; height: 76px; display: flex; align-items: center; gap: 28px; padding: 0 max(28px, calc((100vw - 1440px) / 2)); color: white; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.08); }
.studio-brand { display: flex; align-items: center; gap: 12px; min-width: 215px; color: white; text-decoration: none; }
.brand-mark { width: 39px; height: 39px; flex: 0 0 auto; }
.brand-mark rect { fill: #223b5b; }
.brand-mark .brand-disc { fill: var(--coral); }
.brand-mark .brand-play { fill: white; }
.studio-brand span { display: grid; line-height: 1.15; }
.studio-brand strong { font-size: 16px; letter-spacing: .01em; }
.studio-brand small { margin-top: 4px; color: #9fb0c5; font-size: 10px; letter-spacing: .12em; }
.header-context { display: flex; align-items: center; gap: 12px; min-width: 0; }
.account-summary { position: relative; display: flex; min-width: 0; align-items: center; gap: 9px; padding: 5px 7px 5px 5px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.06); }
.account-summary[hidden], .account-switch-trigger[hidden], .account-switch-menu[hidden], .demo-data-badge[hidden], .persona-brief[hidden], .persona-profile-guide[hidden] { display: none!important; }
.account-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; color: white; background: hsl(var(--account-hue, 18) 70% 52%); border-radius: 9px; font-size: 12px; font-weight: 800; }
.account-summary-copy { display: grid; min-width: 82px; max-width: 170px; line-height: 1.2; }
.account-summary-copy small { overflow: hidden; color: #94a8bf; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.account-summary-copy strong { margin-top: 3px; overflow: hidden; color: white; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.demo-data-badge, .synthetic-label { display: inline-flex; width: fit-content; align-items: center; min-height: 21px; padding: 3px 7px; color: #ffd7c9; background: rgba(245,101,67,.18); border: 1px solid rgba(255,152,123,.28); border-radius: 999px; font-size: 8px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.account-switch-trigger { display: flex; flex-shrink: 0; min-height: 36px; align-items: center; gap: 5px; padding: 7px 8px; color: #dce6f2; background: rgba(255,255,255,.07); border-radius: 8px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.account-switch-trigger:hover, .account-switch-trigger[aria-expanded="true"] { color: white; background: rgba(255,255,255,.13); }
.account-switch-trigger i { color: #8fa3b9; font-style: normal; }
.account-switch-menu { position: absolute; top: calc(100% + 14px); left: 0; z-index: 70; width: min(660px, calc(100vw - 40px)); max-height: min(680px, calc(100vh - 110px)); overflow: auto; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 26px 80px rgba(5,17,30,.34); }
.account-switch-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line-soft); backdrop-filter: blur(12px); }
.account-switch-head > div { display: grid; gap: 3px; }
.account-switch-head strong { font-size: 13px; }
.account-switch-head span { color: var(--muted); font-size: 9px; }
.account-switch-head button { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; color: #607087; background: #f0f3f6; border-radius: 50%; font-size: 18px; }
.account-switch-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 14px; }
.account-switch-card { display: grid; gap: 10px; min-height: 142px; padding: 13px; color: var(--ink); background: #f8fafc; border: 1px solid #e1e6ed; border-radius: 12px; text-align: left; }
.account-switch-card:hover { background: white; border-color: #9baec2; box-shadow: 0 10px 24px rgba(24,43,66,.08); }
.account-switch-card.is-current { background: #fff7f3; border-color: #efaa98; box-shadow: inset 0 0 0 1px #efaa98; }
.account-switch-card:disabled { cursor: default; }
.account-switch-card-head { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.account-switch-card-head .account-avatar { width: 36px; height: 36px; }
.account-switch-card-head > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.account-switch-card-head strong, .account-switch-card-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-switch-card-head strong { font-size: 11px; }
.account-switch-card-head small { color: #7b8899; font-size: 8px; }
.account-switch-card-head em { padding: 3px 6px; color: #ad4934; background: #ffe7df; border-radius: 999px; font-size: 7px; font-style: normal; font-weight: 800; }
.account-switch-card p { min-height: 32px; margin: 0; overflow: hidden; color: #6e7b8d; font-size: 9px; line-height: 1.7; }
.account-load-label { align-self: end; color: #365773; font-size: 9px; font-weight: 800; }
.account-switch-card.is-current .account-load-label { color: #c45339; }
.business-picker { display: grid; grid-template-columns: auto minmax(130px, 250px); align-items: center; gap: 10px; height: 42px; padding: 0 10px 0 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(255,255,255,.06); }
.business-picker span { color: #9fb0c5; font-size: 11px; white-space: nowrap; }
.business-picker select { min-width: 0; border: 0; color: white; background: transparent; font-size: 13px; font-weight: 650; }
.business-picker option { color: var(--ink); background: white; }
.private-badge { display: flex; align-items: center; gap: 7px; color: #99aabd; font-size: 11px; white-space: nowrap; }
.private-badge span { color: #56c39f; font-size: 8px; }
.header-actions { display: flex; flex-shrink: 0; align-items: center; gap: 14px; margin-left: auto; }
.header-actions .button { flex-shrink: 0; white-space: nowrap; }
.connection-state { display: flex; align-items: center; gap: 7px; color: #a8b6c7; font-size: 11px; white-space: nowrap; }
.connection-state i { width: 7px; height: 7px; border-radius: 50%; background: #e9b64c; box-shadow: 0 0 0 4px rgba(233,182,76,.1); }
.connection-state.is-online i { background: #51c39f; box-shadow: 0 0 0 4px rgba(81,195,159,.1); }
.connection-state.is-local i { background: #e9b64c; }

.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 9px; padding: 10px 18px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 720; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: white; background: var(--coral); box-shadow: 0 9px 24px rgba(245,101,67,.22); }
.button-primary:hover { background: var(--coral-deep); box-shadow: 0 12px 28px rgba(245,101,67,.28); }
.button-primary:disabled { cursor: not-allowed; opacity: .48; transform: none; box-shadow: none; }
.button-secondary { color: #26374c; background: white; border-color: #cfd6df; }
.button-secondary:hover { background: #f8fafc; }
.button-ghost { color: #dce6f3; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.button-ghost:hover { background: rgba(255,255,255,.11); }
.button.compact { min-height: 38px; padding: 8px 14px; font-size: 11px; box-shadow: none; }
.button.full { width: 100%; }
.text-button { padding: 4px; color: #45627f; background: transparent; font-size: 12px; font-weight: 650; }
.text-button:hover { color: var(--coral); }

.studio-nav { position: sticky; top: 0; z-index: 20; display: flex; justify-content: center; gap: 7px; height: 72px; padding: 10px 24px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.studio-nav button { position: relative; display: flex; min-width: 0; flex: 1 1 0; max-width: 180px; align-items: center; justify-content: center; gap: 9px; padding: 0 17px; color: #637185; background: transparent; border-radius: 11px; font-size: 12px; font-weight: 650; }
.studio-nav button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.studio-nav button:first-child svg path { fill: currentColor; stroke: none; }
.studio-nav button:hover { color: var(--ink); background: #f4f6f9; }
.studio-nav button[aria-current="page"] { color: #17324e; background: #eef2f7; }
.studio-nav button[aria-current="page"]::after { content: ""; position: absolute; right: 16px; bottom: 4px; left: 16px; height: 2px; border-radius: 2px; background: var(--coral); }
.studio-nav .production-nav { color: #f15b3c; background: #fff4f0; }
.studio-nav .remix-nav { color: #326382; background: #edf6fc; }
.studio-nav em { display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 5px; color: #607087; background: #e5eaf0; border-radius: 999px; font-size: 9px; font-style: normal; }

.studio-notice { position: fixed; top: 162px; right: 24px; z-index: 50; max-width: min(380px, calc(100vw - 40px)); padding: 13px 16px; color: #22483d; background: #eaf8f3; border: 1px solid #bfe7da; border-radius: 11px; box-shadow: var(--shadow); font-size: 12px; }
.studio-notice.is-error { color: #7a3628; background: #fff1ed; border-color: #f3c9be; }
.studio-main { width: min(1384px, calc(100% - 64px)); margin: 0 auto; padding: 32px 0 80px; }
.studio-page[hidden] { display: none!important; }
.studio-page.is-active { animation: page-in .22s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.plaza-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 34px; min-height: 360px; overflow: hidden; padding: 46px 48px; color: white; background: var(--navy); border-radius: 24px; box-shadow: 0 24px 70px rgba(19,34,56,.16); }
.hero-copy { align-self: center; max-width: 710px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #9fb0c5; font-size: 10px; letter-spacing: .15em; }
.eyebrow i { width: 22px; height: 2px; background: var(--coral); }
.hero-copy h1 { margin: 18px 0 16px; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.16; letter-spacing: -.055em; font-weight: 760; }
.hero-copy p { max-width: 590px; margin: 0; color: #aebdce; font-size: 14px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.hero-board { align-self: center; padding: 25px; background: #1b304c; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; }
.board-top { display: flex; justify-content: space-between; align-items: center; padding: 0 0 16px; border-bottom: 1px solid rgba(255,255,255,.08); color: #94a8bf; font-size: 11px; }
.board-top strong { color: #fff; font-size: 12px; }
.hero-board ol { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.hero-board li { display: grid; grid-template-columns: 30px minmax(0,1fr) 9px; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; }
.hero-board li.is-ready { background: rgba(56,169,140,.08); }
.hero-board li > span { color: #778da5; font-size: 9px; font-weight: 750; letter-spacing: .08em; }
.hero-board li div { display: grid; }
.hero-board li strong { font-size: 12px; }
.hero-board li small { margin-top: 2px; color: #8093aa; font-size: 9px; }
.hero-board li i { width: 8px; height: 8px; border: 1px solid #5f748e; border-radius: 50%; }
.hero-board li.is-ready i { background: #4fc19e; border-color: #4fc19e; box-shadow: 0 0 0 4px rgba(79,193,158,.1); }

.persona-brief { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(320px,1.2fr) minmax(210px,.65fr); align-items: center; gap: 24px; margin-top: 20px; padding: 20px 22px; background: #fff8f5; border: 1px solid #f3c9bd; border-radius: 16px; box-shadow: 0 9px 30px rgba(116,57,42,.05); }
.persona-brief .synthetic-label, .persona-profile-guide .synthetic-label { color: #a8442e; background: #ffe5dc; border-color: #f1b6a6; }
.persona-brief-copy { display: grid; gap: 5px; }
.persona-brief-copy small { color: #ae5d48; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.persona-brief-copy h2 { margin: 2px 0 0; font-size: 18px; line-height: 1.35; }
.persona-brief-copy p { margin: 0; color: #7d625b; font-size: 9px; line-height: 1.7; }
.persona-needs, .persona-recommendation { display: grid; gap: 8px; min-width: 0; }
.persona-needs > span, .persona-recommendation > span { color: #9a756b; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.persona-needs > div { display: flex; flex-wrap: wrap; gap: 7px; }
.persona-needs em { padding: 6px 9px; color: #4f5f72; background: white; border: 1px solid #ead9d3; border-radius: 999px; font-size: 9px; font-style: normal; }
.persona-recommendation { padding-left: 20px; border-left: 1px solid #efd7cf; }
.persona-recommendation strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.persona-recommendation .button { justify-self: start; }
.persona-profile-guide { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding: 14px 16px; background: #fff7f3; border: 1px solid #f1cbbf; border-radius: 12px; }
.persona-profile-guide > div { display: grid; min-width: 0; gap: 2px; }
.persona-profile-guide strong { font-size: 11px; }
.persona-profile-guide p { margin: 0; color: #7c6c67; font-size: 9px; }
.persona-profile-guide .text-button { margin-left: auto; white-space: nowrap; }

.section-heading, .page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.section-heading { margin: 46px 0 20px; }
.section-heading > div:first-child, .page-heading > div:first-child { display: flex; align-items: flex-start; gap: 15px; }
.section-index { display: inline-flex; min-width: 34px; height: 24px; align-items: center; justify-content: center; padding: 0 8px; color: var(--coral); background: #fff0ec; border-radius: 7px; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.section-heading h2, .page-heading h1 { margin: -5px 0 4px; color: var(--ink); font-size: 25px; line-height: 1.3; letter-spacing: -.03em; }
.section-heading p, .page-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.page-heading { min-height: 100px; padding: 14px 3px 26px; border-bottom: 1px solid var(--line); }
.page-heading h1 { font-size: 30px; }
.plaza-tools, .library-toolbar { display: flex; align-items: center; gap: 10px; }
.search-field { display: flex; min-width: 255px; height: 40px; align-items: center; gap: 8px; padding: 0 12px; background: white; border: 1px solid var(--line); border-radius: 10px; }
.search-field svg { width: 16px; height: 16px; fill: none; stroke: #8c98a8; stroke-width: 1.7; }
.search-field input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 11px; }
.plaza-tools select { height: 40px; padding: 0 30px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: white; font-size: 11px; }
.plaza-tools select[hidden] { display: none; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-row button { min-height: 35px; padding: 7px 14px; color: #67768a; background: white; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 650; }
.filter-row button:hover, .filter-row button.is-active { color: #17324e; background: #e9eef5; border-color: #cbd5e2; }

.reference-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin-top: 20px; }
.topic-list { margin-top: 20px; overflow: hidden; background: white; border: 1px solid var(--line-soft); border-radius: 15px; box-shadow: 0 8px 26px rgba(27,45,67,.05); }
.topic-list-items { margin: 0; padding: 0; list-style: none; }
.topic-row + .topic-row { border-top: 1px solid var(--line-soft); }
.topic-row button { display: grid; width: 100%; min-height: 58px; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 18px; color: var(--ink); background: white; text-align: left; transition: color .16s ease, background .16s ease; }
.topic-row button:hover { color: #c94f37; background: #fff8f5; }
.topic-row button:focus-visible { position: relative; z-index: 1; outline: 2px solid #ef987e; outline-offset: -2px; }
.topic-row.is-persona-recommended button { background: linear-gradient(90deg,#fff8f5 0,#fff 62%); box-shadow: inset 3px 0 #ef765d; }
.topic-index { color: #8793a1; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.topic-row:nth-child(-n+3) .topic-index { color: #ef4f55; }
.topic-title { font-size: 14px; line-height: 1.55; }
.topic-title em { display: inline-flex; margin-left: 8px; padding: 2px 7px; color: #a43f2d; background: #fff0eb; border: 1px solid #f3c6ba; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 800; vertical-align: middle; }
.topic-copy-status { justify-self: end; padding: 4px 8px; color: #7d8794; background: #f3f5f7; border: 1px solid #e0e5ea; border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.topic-copy-status.is-ready { color: #147450; background: #eaf8f1; border-color: #bde5d2; }
.topic-copy-status.is-generating { color: #245f96; background: #edf6ff; border-color: #c6ddf4; }
.topic-copy-status.is-failed { color: #a83c32; background: #fff0ef; border-color: #f0c7c2; }
.topic-list > .empty-state { border: 0; border-radius: 0; }
.hotspot-status { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 17px 20px; background: #edf5f3; border: 1px solid #d5e8e1; border-radius: 13px; }
.hotspot-status[hidden], .hotspot-admin[hidden], #refreshHotspots[hidden], #cancelHotspotIndustry[hidden] { display: none!important; }
.hotspot-status > div { display: flex; align-items: flex-start; gap: 11px; }
.hotspot-status-dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 7px; background: #269476; border-radius: 50%; box-shadow: 0 0 0 4px #dceee7; }
.hotspot-status strong { color: #245c4c; font-size: 13px; }
.hotspot-status p { margin: 4px 0 0; color: #597669; font-size: 11px; }
.hotspot-status .button { flex: 0 0 auto; background: white; }
.hotspot-status.is-stale { background: #fff8ed; border-color: #eadcc2; }
.hotspot-status.is-stale strong { color: #7b592a; }
.hotspot-status.is-stale p { color: #89775c; }
.hotspot-status.is-stale .hotspot-status-dot { background: #be8f40; box-shadow: 0 0 0 4px #f6ead3; }
.hotspot-status.is-refreshing .hotspot-status-dot { background: var(--sky); box-shadow: 0 0 0 4px #e1e9fc; }
.hotspot-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 20px; }
.hotspot-grid > .empty-state { grid-column: 1 / -1; }
.hotspot-card { display: flex; flex-direction: column; min-width: 0; padding: 23px 24px 0; background: white; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 8px 24px rgba(27,45,67,.035); }
.hotspot-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #7b8798; font-size: 10px; }
.hotspot-eyebrow > span { color: #b85336; font-weight: 750; letter-spacing: .03em; }
.hotspot-eyebrow time { flex: 0 0 auto; }
.hotspot-platform-evidence { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 15px; color: #995137; font-size: 11px; }
.hotspot-platform-evidence > span { padding: 4px 8px; background: #fff3ed; border-radius: 5px; font-variant-numeric: tabular-nums; }
.hotspot-original-link { color: #bd5038; font-weight: 750; text-decoration: none; }
.hotspot-original-link:hover { text-decoration: underline; }
.hotspot-event-title { margin: 13px 0 11px; color: #6e7a88; font-size: 12px; line-height: 1.65; }
.hotspot-hook { display: flex; align-items: flex-start; gap: 11px; padding: 0; background: none; text-align: left; }
.hotspot-hook > span { padding-top: 3px; color: #df654a; font-size: 12px; font-weight: 800; }
.hotspot-hook h3 { margin: 0; color: var(--ink); font-size: 19px; line-height: 1.55; font-weight: 750; letter-spacing: -.025em; }
.hotspot-hook:hover h3 { color: #c94f37; }
.hotspot-angle { margin: 13px 0 17px; color: var(--ink-soft); font-size: 12px; line-height: 1.85; }
.hotspot-relevance { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 9px; margin-top: auto; padding: 12px 13px; border-radius: 9px; background: #f4f6f9; }
.hotspot-relevance > span { padding: 2px 7px; color: #526985; background: white; border-radius: 5px; font-size: 9px; font-weight: 700; }
.hotspot-relevance p { margin: 0; color: #667386; font-size: 11px; line-height: 1.75; }
.hotspot-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 19px -24px 0; padding: 14px 24px; border-top: 1px solid var(--line-soft); }
.hotspot-card-foot small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hotspot-card-foot button { flex: 0 0 auto; padding: 0; color: #c75a3d; background: none; font-size: 11px; font-weight: 750; }
.hotspot-preview-context { grid-column: 1 / -1; width: 100%; margin-bottom: 20px; padding: 18px 20px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 12px; }
.hotspot-preview-context h3 { margin: 11px 0 9px; font-size: 18px; line-height: 1.55; }
.hotspot-preview-context > p { margin: 0 0 15px; color: var(--ink-soft); font-size: 12px; line-height: 1.85; }
.hotspot-preview-context dl { display: grid; gap: 12px; margin: 18px 0; }
.hotspot-preview-context dl > div { display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 13px; }
.hotspot-preview-context dt { color: #7d8999; font-size: 11px; }
.hotspot-preview-context dd { margin: 0; color: #40536b; font-size: 12px; line-height: 1.75; }
.hotspot-profile-anchors { margin: 0; padding-left: 16px; }
.hotspot-profile-anchors li + li { margin-top: 6px; }
.hotspot-profile-anchors strong { font-weight: 650; }
.hotspot-sources { padding-top: 12px; border-top: 1px solid var(--line); }
.hotspot-sources summary { width: fit-content; color: #496798; cursor: pointer; font-size: 11px; font-weight: 700; }
.hotspot-sources ul { display: grid; gap: 11px; margin: 13px 0; padding-left: 18px; color: var(--muted); font-size: 11px; }
.hotspot-sources a { color: #496798; overflow-wrap: anywhere; }
.hotspot-sources small { display: block; margin-top: 3px; font-size: 10px; }
.hotspot-source-note { display: block; margin-top: 15px!important; color: var(--muted); font-size: 10px!important; line-height: 1.7; }
.hotspot-admin { margin-top: 12px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.hotspot-admin > summary { padding: 14px 18px; color: var(--ink-soft); cursor: pointer; font-size: 12px; font-weight: 750; }
.hotspot-admin > summary span { margin-left: 10px; color: var(--muted); font-size: 10px; font-weight: 400; }
.hotspot-admin-body { padding: 0 18px 18px; }
.hotspot-admin-body > p { margin: 0 0 14px; color: var(--muted); font-size: 11px; }
.hotspot-industry-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.hotspot-industry-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 12px 13px; background: #f7f9fc; border-radius: 9px; }
.hotspot-industry-row > div:first-child { min-width: 0; }
.hotspot-industry-row > div:last-child { display: flex; flex: 0 0 auto; gap: 9px; }
.hotspot-industry-row strong { font-size: 12px; }
.hotspot-industry-row small { margin-left: 8px; color: var(--muted); font-size: 9px; }
.hotspot-industry-row p { margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hotspot-industry-row button { padding: 3px 0; color: #46658e; background: none; font-size: 10px; }
.hotspot-industry-row.is-archived { background: #fafafa; }
.hotspot-industry-row.is-archived strong { color: var(--muted); }
.hotspot-industry-form { display: grid; grid-template-columns: minmax(120px,1fr) minmax(180px,2fr) auto; align-items: end; gap: 12px; margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.hotspot-industry-form > strong { grid-column: 1 / -1; font-size: 12px; }
.hotspot-industry-form .field > span { font-size: 10px; }
.hotspot-industry-form .field input { min-height: 38px; padding: 8px 10px; font-size: 11px; }
.hotspot-enabled { display: flex; align-items: center; gap: 5px; min-height: 38px; font-size: 10px; }
.hotspot-industry-form-actions { display: flex; grid-column: 1 / -1; gap: 8px; }
.hotspot-admin #hotspotIndustryMessage { margin: 12px 0 0; }
@media (max-width: 760px) {
  .hotspot-grid { grid-template-columns: 1fr; gap: 13px; }
  .hotspot-card { padding: 18px 18px 0; }
  .hotspot-card-foot { margin-right: -18px; margin-left: -18px; padding-right: 18px; padding-left: 18px; }
  .hotspot-hook h3 { font-size: 18px; }
  .hotspot-eyebrow { flex-wrap: wrap; gap: 6px 12px; }
  .hotspot-status { align-items: flex-start; padding: 14px 15px; }
  .hotspot-status strong { font-size: 12px; }
  .hotspot-status p { font-size: 10px; }
  .hotspot-status .button { padding: 7px 10px; font-size: 10px; }
  .hotspot-industry-list { grid-template-columns: 1fr; }
  .hotspot-industry-form { grid-template-columns: 1fr; }
  .hotspot-admin > summary span { display: block; margin: 4px 0 0 15px; }
  .hotspot-preview-context { padding: 15px; }
  .hotspot-preview-context dl > div { grid-template-columns: 1fr; gap: 3px; }
}
.topic-preview-button { min-width: 52px; min-height: 30px; padding: 0 10px; color: white; background: rgba(19,34,56,.78); border: 1px solid rgba(255,255,255,.48); border-radius: 999px; font-size: 10px; font-weight: 800; }
.topic-preview { display: grid; width: 100%; height: 100%; min-height: 280px; align-content: stretch; }
.topic-preview .cover-art { min-height: 230px; }
.topic-preview p { margin: 0; padding: 12px 16px; color: var(--muted); background: #fff8f5; font-size: 12px; text-align: center; }
.plaza-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 24px 0 4px; color: var(--muted); font-size: 12px; }
.plaza-pagination[hidden] { display: none; }
.reference-card { overflow: hidden; background: white; border: 1px solid var(--line-soft); border-radius: 15px; box-shadow: 0 8px 26px rgba(27,45,67,.05); transition: transform .18s ease, box-shadow .18s ease; }
.reference-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(27,45,67,.1); }
.reference-card.is-persona-recommended { outline: 2px solid #ef987e; outline-offset: 2px; }
.reference-cover { position: relative; aspect-ratio: 9 / 12; overflow: hidden; color: white; background: #ced5dd; }
.cover-art { position: absolute; inset: 0; padding: 22px; background: linear-gradient(150deg, #2f536d, #172b43); }
.cover-art::before, .cover-art::after { content: ""; position: absolute; border-radius: 999px; background: rgba(255,255,255,.12); }
.cover-art::before { width: 140px; height: 140px; right: -50px; top: -40px; }
.cover-art::after { width: 90px; height: 90px; left: -30px; bottom: 26px; }
.cover-art.tone-coral { background: linear-gradient(145deg, #e55f45, #812f2c); }
.cover-art.tone-mint { background: linear-gradient(145deg, #277b72, #153d48); }
.cover-art.tone-violet { background: linear-gradient(145deg, #6c5bae, #273251); }
.cover-art.tone-gold { background: linear-gradient(145deg, #bd7a35, #4e382e); }
.cover-art.tone-blue { background: linear-gradient(145deg, #3c6fbc, #142b4a); }
.cover-art.tone-slate { background: linear-gradient(145deg, #526476, #182839); }
.cover-art span { position: relative; z-index: 1; display: inline-block; color: rgba(255,255,255,.66); font-size: 9px; letter-spacing: .12em; }
.cover-art strong { position: absolute; z-index: 1; right: 21px; bottom: 29px; left: 21px; font-size: 26px; line-height: 1.22; letter-spacing: -.06em; }
.reference-cover img, .reference-cover video { width: 100%; height: 100%; object-fit: cover; }
.cover-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 14px; background: linear-gradient(transparent 55%, rgba(7,18,30,.7)); }
.play-button { display: grid; width: 38px; height: 38px; place-items: center; color: white; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.36); border-radius: 50%; backdrop-filter: blur(8px); }
.play-button::before { content: ""; margin-left: 2px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid white; }
.duration { padding: 4px 7px; color: white; background: rgba(10,20,30,.58); border-radius: 6px; font-size: 9px; }
.persona-match { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 5px 8px; color: #7d2e1d; background: #ffe5dc; border-radius: 999px; box-shadow: 0 4px 12px rgba(30,20,16,.12); font-size: 8px; font-weight: 800; }
.reference-info { padding: 15px; }
.reference-meta { display: flex; justify-content: space-between; gap: 8px; color: #8a96a5; font-size: 9px; }
.reference-meta span:first-child { color: #d8573b; }
.reference-info h3 { min-height: 42px; margin: 9px 0 12px; font-size: 14px; line-height: 1.5; }
.reference-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.reference-tags span { padding: 4px 7px; color: #68768a; background: #f2f4f7; border-radius: 5px; font-size: 9px; }
.reference-actions { display: flex; gap: 8px; margin-top: 13px; }
.reference-actions button { flex: 1; min-height: 34px; color: #54657a; background: #f7f9fb; border-radius: 8px; font-size: 10px; font-weight: 700; }
.reference-actions button:last-child { color: white; background: #253b55; }

.panel { background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 32px rgba(30,47,68,.045); }
.panel-heading { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 22px; border-bottom: 1px solid var(--line-soft); }
.panel-heading > div:first-child { display: flex; align-items: center; gap: 10px; }
.panel-heading h2 { margin: 0; font-size: 15px; }
.panel-heading > span { color: var(--muted); font-size: 10px; }
.step-token { display: grid; width: 25px; height: 25px; place-items: center; color: #39607e; background: #e7eff7; border-radius: 7px; font-size: 9px; font-weight: 800; }
.step-token.warm { color: #c34e35; background: #fff0eb; }
.profile-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.65fr); gap: 20px; margin-top: 24px; }
.profile-fields { overflow: hidden; }
.profile-fields .form-grid { padding: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.field { display: grid; gap: 8px; }
.field > span { color: #5f6c7d; font-size: 10px; font-weight: 700; }
.field > span b { color: var(--coral); }
.field input, .field textarea, .field select { width: 100%; padding: 11px 12px; color: #23354a; background: #fbfcfd; border: 1px solid #d8dfe7; border-radius: 9px; outline: 0; font-size: 12px; line-height: 1.65; }
.field input:focus, .field textarea:focus, .field select:focus { background: white; border-color: #85a4d0; box-shadow: 0 0 0 3px rgba(76,118,231,.09); }
.field small { color: #8995a4; font-size: 9px; }
.span-2 { grid-column: span 2; }
.profile-images { overflow: hidden; }
.profile-images > p { margin: 18px 20px 12px; color: var(--muted); font-size: 10px; }
.image-drop { display: grid; min-height: 128px; place-items: center; align-content: center; gap: 4px; margin: 0 20px 14px; color: #6f7f92; background: #f8fafc; border: 1px dashed #c9d2de; border-radius: 12px; text-align: center; cursor: pointer; }
.image-drop:hover { color: #335a7a; border-color: #8fa8c3; background: #f2f6fa; }
.image-drop svg { width: 27px; height: 27px; margin-bottom: 3px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.image-drop strong { font-size: 11px; }
.image-drop small { font-size: 8px; }
.image-drop input, .file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.profile-image-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 0 20px; }
.profile-image { position: relative; aspect-ratio: 1; overflow: hidden; background: #edf1f5; border-radius: 9px; }
.profile-image img { width: 100%; height: 100%; object-fit: cover; }
.profile-image button { position: absolute; top: 5px; right: 5px; display: grid; width: 22px; height: 22px; place-items: center; color: white; background: rgba(10,20,32,.68); border-radius: 50%; font-size: 13px; }
.profile-image label { position: absolute; right: 5px; bottom: 5px; left: 5px; }
.profile-image select { width: 100%; min-height: 28px; padding: 4px 22px 4px 7px; color: #294057; background: rgba(255,255,255,.94); border: 0; border-radius: 6px; font-size: 8px; }
.profile-hint { display: grid; gap: 4px; margin: 16px 20px 20px; padding: 12px; color: #647185; background: #f3f6f9; border-radius: 9px; font-size: 9px; }
.profile-hint strong { color: #364b63; font-size: 10px; }
.profile-hint span.is-ready { color: #2f7d67; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.form-error { margin-right: auto; color: #bf4d36; font-size: 11px; }
.completion { display: grid; grid-template-columns: auto auto; align-items: center; gap: 5px 12px; color: var(--muted); font-size: 9px; }
.completion strong { justify-self: end; color: var(--ink); font-size: 12px; }
.completion i { grid-column: 1 / -1; width: 180px; height: 5px; overflow: hidden; background: #dfe5ec; border-radius: 9px; }
.completion b { display: block; width: 0; height: 100%; background: var(--mint); transition: width .2s ease; }

.material-upload { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,.45fr) auto; align-items: end; gap: 22px; margin-top: 24px; padding: 22px; background: #e9eff6; border: 1px solid #d6e0eb; border-radius: 15px; }
.upload-copy { display: flex; align-items: center; gap: 14px; align-self: center; }
.upload-copy h2 { margin: 0 0 3px; font-size: 14px; }
.upload-copy p { margin: 0; color: #6f7c8e; font-size: 9px; }
.upload-icon { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; color: white; background: #456d92; border-radius: 11px; font-size: 19px; }
.compact-field { gap: 5px; }
.compact-field input { background: white; }
.file-button { position: relative; background: white; }
.upload-queue { grid-column: 1 / -1; display: grid; gap: 6px; }
.upload-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 8px 11px; background: rgba(255,255,255,.7); border-radius: 7px; font-size: 10px; }
.upload-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-row strong { color: #52705f; font-size: 9px; }
.upload-row.is-error strong { color: #bc503a; }
.library-toolbar { justify-content: space-between; margin: 24px 0 16px; }
.material-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 15px; }
.material-card { overflow: hidden; background: white; border: 1px solid var(--line-soft); border-radius: 13px; }
.material-preview { position: relative; display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; color: #66809b; background: #edf2f7; }
.material-preview img, .material-preview video { width: 100%; height: 100%; object-fit: cover; }
.material-preview .file-glyph { font-size: 34px; font-weight: 300; }
.material-type { position: absolute; top: 9px; left: 9px; padding: 3px 6px; color: white; background: rgba(17,31,49,.7); border-radius: 5px; font-size: 8px; }
.material-info { padding: 12px; }
.material-info strong { display: block; overflow: hidden; color: #2a3a4d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.material-info span { display: block; margin-top: 4px; overflow: hidden; color: #8995a4; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.material-actions { display: flex; gap: 6px; padding: 0 12px 12px; }
.material-actions button { flex: 1; min-height: 30px; color: #52667c; background: #f4f6f9; border-radius: 7px; font-size: 9px; }

.script-workspace { display: grid; grid-template-columns: minmax(300px,.7fr) minmax(0,1.3fr); gap: 20px; margin-top: 24px; }
.script-brief, .script-editor { overflow: hidden; }
.script-brief > .field, .script-brief > .form-grid, .reference-summary, .script-brief > .button { margin-right: 22px; margin-left: 22px; }
.script-brief > .field { margin-top: 18px; }
.script-brief > .form-grid { margin-top: 18px; gap: 10px; }
.reference-summary { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin-top: 18px; padding: 12px; background: #f2f5f8; border-radius: 9px; }
.reference-summary span { color: #8190a2; font-size: 8px; }
.reference-summary strong { grid-row: 2; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.reference-summary button { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: 5px; color: #446480; background: transparent; font-size: 9px; }
.script-brief > .button { width: calc(100% - 44px); margin-top: 20px; margin-bottom: 22px; }
.script-editor .panel-heading { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.editor-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-left: auto; }
.editor-tools button { padding: 5px 9px; color: #58708a; background: #f2f5f8; border-radius: 6px; font-size: 9px; }
.script-editor > .field { margin: 20px 22px 0; }
.script-body { min-height: 405px; padding: 20px!important; background: #fdfdfd!important; border: 0!important; font-size: 13px!important; line-height: 2!important; }
.script-foot { display: flex; justify-content: space-between; padding: 12px 22px 18px; color: #8a96a5; font-size: 9px; }
.saved-scripts { margin-top: 34px; }
.compact-heading { margin-bottom: 13px; }
.compact-heading h2 { font-size: 18px; }
.script-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.script-version { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 15px; padding: 16px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.script-version strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.script-version p { grid-column: 1 / -1; min-height: 34px; margin: 0; overflow: hidden; color: #7c8999; font-size: 9px; line-height: 1.8; }
.script-version span { color: #929dac; font-size: 8px; }
.script-version button { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: 7px 10px; color: #486780; background: #eff4f7; border-radius: 7px; font-size: 9px; }
.script-history { grid-column: 1 / -1; color: #7c8999; font-size: 10px; }
.script-history summary { cursor: pointer; }
.script-history p { min-height: 0; margin-top: 8px; }
.script-version .script-history button { margin-top: 4px; }


.production-heading { align-items: center; }
.stepper { display: flex; gap: 0; margin: 0; padding: 0; color: #8a96a5; list-style: none; font-size: 9px; }
.stepper li { display: flex; align-items: center; gap: 6px; }
.stepper li:not(:last-child)::after { content: ""; width: 34px; height: 1px; margin: 0 8px; background: #d4dbe4; }
.stepper span { display: grid; width: 22px; height: 22px; place-items: center; background: #e5e9ee; border-radius: 50%; font-size: 8px; }
.stepper li.is-active { color: #314d67; font-weight: 700; }
.stepper li.is-active span { color: white; background: var(--coral); }
.production-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; align-items: start; gap: 20px; margin-top: 24px; }
.production-main { display: grid; gap: 20px; }
.mode-panel, .production-content { overflow: hidden; }
.mode-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 18px 22px 22px; }
.mode-card { position: relative; display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: center; gap: 17px; min-height: 128px; padding: 15px; background: #f8fafc; border: 1px solid #dde3ea; border-radius: 13px; cursor: pointer; }
.mode-card:has(input:checked) { background: #fff8f5; border-color: #ef9a84; box-shadow: inset 0 0 0 1px #ef9a84; }
.mode-card input { position: absolute; top: 13px; right: 13px; }
.mode-card > span:nth-of-type(2) { display: grid; gap: 7px; }
.mode-card strong { font-size: 14px; }
.mode-card small { max-width: 220px; color: #7c8999; font-size: 9px; line-height: 1.7; }
.mode-card > em { position: absolute; top: 11px; left: 11px; padding: 3px 6px; color: #b64a32; background: #ffded4; border-radius: 5px; font-size: 8px; font-style: normal; }
.mode-visual { position: relative; display: block!important; width: 100px; height: 78px; overflow: hidden; background: #1f344d; border-radius: 9px; }
.remix-visual i { position: absolute; top: 12px; width: 38px; height: 52px; background: #587894; border-radius: 5px; transform: rotate(-8deg); }
.remix-visual i:nth-child(1) { left: 11px; background: #e36b50; }
.remix-visual i:nth-child(2) { left: 31px; z-index: 1; background: #4c9a8c; transform: rotate(0); }
.remix-visual i:nth-child(3) { right: 10px; background: #6684b4; transform: rotate(8deg); }
.remix-visual b { position: absolute; z-index: 2; right: 6px; bottom: 6px; display: grid; width: 21px; height: 21px; place-items: center; color: #18304b; background: white; border-radius: 50%; font-size: 12px; }
.avatar-visual { background: linear-gradient(145deg,#476e96,#213954); }
.avatar-visual i { position: absolute; top: 13px; left: 36px; width: 28px; height: 28px; background: #f2b69c; border-radius: 50%; }
.avatar-visual b { position: absolute; right: 21px; bottom: -10px; left: 21px; height: 48px; background: #edf2f6; border-radius: 50% 50% 0 0; }
.production-content { padding-bottom: 22px; }
.production-content > :not(.panel-heading) { margin-right: 22px; margin-left: 22px; }
.selected-reference { margin-top: 18px; }
.reference-choice { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px; background: #f3f6f9; border-radius: 10px; }
.reference-choice .mini-cover { width: 54px; aspect-ratio: 4 / 5; color: white; background: #304f6a; border-radius: 7px; }
.reference-choice div { display: grid; gap: 3px; }
.reference-choice .reference-choice-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.reference-choice strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.reference-choice span { color: #8190a0; font-size: 8px; }
.reference-choice button { padding: 7px 9px; color: #526a81; background: white; border-radius: 7px; font-size: 9px; }
.reference-choice button.mini-cover { position: relative; display: block; width: 54px; padding: 0; overflow: hidden; background: #304f6a; }
.reference-choice .mini-cover img, .reference-choice .mini-cover video { display: block; width: 100%; height: 100%; object-fit: cover; }
.reference-choice .mini-cover .reference-preview-icon { display: grid; height: 100%; place-items: center; color: white; font-size: 11px; }
.reference-choice strong { color: #24384b; }
.reference-choice > div > span { color: #53677b; }

.no-reference { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px; color: #69798d; background: #fff7ed; border: 1px solid #f3ddc6; border-radius: 10px; font-size: 10px; }
.no-reference button { padding: 6px 9px; color: #ac5f24; background: #ffe7c9; border-radius: 7px; font-size: 9px; }
.field-group { margin-top: 21px; }
.field-group-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.field-group-head > div { display: grid; gap: 3px; }
.field-group-head strong { font-size: 10px; }
.field-group-head span { color: #8a96a6; font-size: 8px; }
.production-materials { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.production-material { position: relative; overflow: hidden; aspect-ratio: 1; background: #edf2f6; border: 2px solid transparent; border-radius: 9px; cursor: pointer; }
.production-material:has(input:checked) { border-color: var(--coral); }
.production-material input { position: absolute; z-index: 2; top: 6px; right: 6px; }
.material-order { position: absolute; z-index: 3; top: 6px; left: 6px; display: grid; width: 22px; height: 22px; place-items: center; color: white; background: var(--coral); border: 2px solid white; border-radius: 50%; font-size: 9px; }
.production-material img, .production-material video { width: 100%; height: 100%; object-fit: cover; }
.production-material span { position: absolute; right: 0; bottom: 0; left: 0; padding: 15px 6px 5px; overflow: hidden; color: white; background: linear-gradient(transparent,rgba(10,20,32,.78)); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.avatar-options { margin-top: 20px; padding: 18px; background: #f3f7fa; border-radius: 11px; }
.avatar-options .product-fields, .avatar-options .avatar-fields { gap: 12px; }
.avatar-options .avatar-fields { margin-top: 15px; padding-top: 15px; border-top: 1px solid #dfe7ee; }
.avatar-options select:disabled { color: #536a80; opacity: 1; cursor: not-allowed; }
.avatar-provider-limit { margin: 12px 0 0; padding: 9px 11px; color: #6a7788; background: white; border: 1px solid #dfe6ed; border-radius: 8px; font-size: 8px; line-height: 1.65; }
.avatar-input-limit { margin: 12px 0 0; color: #647487; font-size: 8px; text-align: right; }
.avatar-input-limit.is-over, #productionScriptCount.is-over { color: #b54834; font-weight: 800; }
.selected-reference.is-optional { opacity: 1; }
.script-selection { margin-top: 21px; }
.script-selection > small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 12px; }
.production-summary { position: sticky; top: 92px; overflow: hidden; }
.summary-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: var(--navy); color: white; }
.summary-head span { font-size: 12px; font-weight: 700; }
.summary-head strong { color: #f8a58f; font-size: 9px; }
.production-summary ul { display: grid; gap: 0; margin: 0; padding: 10px 20px; list-style: none; }
.production-summary li { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 40px; border-bottom: 1px solid #eef1f4; font-size: 10px; }
.production-summary li i { width: 7px; height: 7px; background: #d5dce4; border-radius: 50%; }
.production-summary li strong { color: #9aa4b1; font-size: 8px; }
.production-summary li.is-ready i { background: var(--mint); }
.production-summary li.is-ready strong { color: #338a73; }
.profile-quality-note { margin: 0 20px 14px; padding: 9px 11px; color: #7f6a3e; background: #fff8e6; border-radius: 8px; font-size: 8px; line-height: 1.6; }
.profile-quality-note.is-ready { color: #347763; background: #e9f7f2; }
.rights-confirm { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 9px; margin: 10px 20px 18px; color: #6e7a8b; font-size: 8px; line-height: 1.65; cursor: pointer; }
.rights-confirm input { margin: 2px 0 0; }
.production-rights-note { margin: 10px 20px 18px; color: #6e7a8b; font-size: 8px; line-height: 1.65; }
.provider-note { display: flex; gap: 10px; margin: 0 20px 16px; padding: 12px; background: #f1f4f7; border-radius: 9px; }
.provider-select { margin: 0 20px 12px; }
.provider-note > span { width: 7px; height: 7px; margin-top: 4px; background: #d9a846; border-radius: 50%; }
.provider-note > span.is-ready { background: var(--mint); }
.provider-note div { display: grid; gap: 3px; }
.provider-note strong { font-size: 9px; }
.provider-note small { color: #8390a1; font-size: 8px; line-height: 1.5; }
.provider-cost { margin: -5px 20px 14px; padding: 9px 11px; color: #8b6030; background: #fff6e7; border: 1px solid #f2dfbf; border-radius: 8px; font-size: 8px; line-height: 1.55; }
.provider-cost.is-known { color: #2f6e5d; background: #eaf7f2; border-color: #cce8dd; }
.generation-plan { margin: 0 20px 15px; padding: 12px; background: #f6f8fa; border-radius: 9px; }
.generation-plan > strong { display: block; margin-bottom: 9px; color: #40566d; font-size: 9px; }
.generation-plan ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 12px; margin: 0; padding: 0; list-style: none; counter-reset: generation-stage; }
.generation-plan li { display: flex; align-items: center; gap: 6px; min-height: auto; padding: 0; border: 0; color: #738195; font-size: 8px; counter-increment: generation-stage; }
.generation-plan li::before { content: counter(generation-stage); display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; color: white; background: #718399; border-radius: 50%; font-size: 7px; }
.production-summary > .button { width: calc(100% - 40px); margin: 0 20px 10px; }
.submit-help { min-height: 14px; margin: 0 20px 16px; color: #b94b34; font-size: 8px; text-align: center; }

/* AI capability concept center */
.studio-nav .capabilities-nav { color: #2d725f; background: #eef8f4; }
.studio-nav .capabilities-nav:hover, .studio-nav .capabilities-nav[aria-current="page"] { color: #173d36; background: #e4f3ed; }
.studio-nav .capabilities-nav .preview-badge { min-width: auto; height: 19px; padding: 0 7px; color: #a7422d; background: #ffe2d9; border: 1px solid #f5b8a8; font-size: 8px; letter-spacing: .06em; }

.capability-hero { position: relative; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); gap: 44px; min-height: 430px; overflow: hidden; padding: 48px; color: white; background: radial-gradient(circle at 9% 14%, rgba(245,101,67,.19), transparent 30%), radial-gradient(circle at 86% 82%, rgba(56,169,140,.18), transparent 30%), linear-gradient(138deg,#101f34 0%,#172b45 54%,#1a3549 100%); border: 1px solid rgba(255,255,255,.06); border-radius: 24px; box-shadow: 0 24px 70px rgba(19,34,56,.18); }
.capability-hero::before { content: ""; position: absolute; top: -115px; right: -70px; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.025), 0 0 0 92px rgba(255,255,255,.018); pointer-events: none; }
.capability-hero-copy, .capability-pipeline { position: relative; z-index: 1; }
.capability-hero-copy { align-self: center; max-width: 720px; }
.concept-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 29px; padding: 5px 11px; color: #ffd8cd; background: rgba(245,101,67,.12); border: 1px solid rgba(255,152,123,.3); border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.concept-pill i { width: 7px; height: 7px; background: #ff8062; border-radius: 50%; box-shadow: 0 0 0 4px rgba(245,101,67,.14); }
.capability-hero-copy h1 { max-width: 720px; margin: 21px 0 16px; font-size: clamp(36px,4vw,57px); font-weight: 770; line-height: 1.16; letter-spacing: -.055em; }
.capability-hero-copy > p { max-width: 650px; margin: 0; color: #adbdcf; font-size: 14px; line-height: 1.9; }
.capability-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 27px; }
.capability-hero-tags span { padding: 7px 11px; color: #c6d5e4; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; font-size: 9px; font-weight: 700; }
.capability-pipeline { align-self: center; display: grid; gap: 7px; margin: 0; padding: 14px; background: rgba(7,19,33,.28); border: 1px solid rgba(255,255,255,.09); border-radius: 19px; list-style: none; backdrop-filter: blur(10px); }
.capability-pipeline li { display: grid; grid-template-columns: 43px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: 13px; min-height: 65px; padding: 9px 13px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.045); border-radius: 11px; }
.capability-pipeline li:nth-child(2), .capability-pipeline li:nth-child(4) { background: rgba(255,255,255,.055); }
.capability-pipeline li > span { grid-row: 1 / 3; display: grid; width: 38px; height: 38px; place-items: center; color: #ffb5a2; background: rgba(245,101,67,.14); border: 1px solid rgba(245,101,67,.2); border-radius: 10px; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.capability-pipeline li:nth-child(n+3) > span { color: #a4dfcf; background: rgba(56,169,140,.13); border-color: rgba(56,169,140,.2); }
.capability-pipeline strong { align-self: end; font-size: 12px; }
.capability-pipeline small { align-self: start; color: #8fa4ba; font-size: 9px; }

.concept-disclosure { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 16px; margin-top: 16px; padding: 14px 17px; color: #6f5148; background: #fff7f3; border: 1px solid #efc7ba; border-radius: 12px; box-shadow: 0 7px 24px rgba(116,57,42,.04); }
.concept-disclosure strong { color: #a54530; font-size: 10px; white-space: nowrap; }
.concept-disclosure span { padding-left: 16px; border-left: 1px solid #edcec5; font-size: 10px; line-height: 1.7; }
.capability-heading { align-items: center; }
.capability-filters { justify-content: flex-end; }
.capability-filters button.is-active { color: #245e50; background: #e7f5f0; border-color: #b8ded2; }

.capability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.capability-card { --capability-accent: #f56543; --capability-tint: #fff1ed; position: relative; display: flex; min-width: 0; min-height: 318px; flex-direction: column; overflow: hidden; padding: 22px; color: var(--ink); background: white; border: 1px solid #dfe5eb; border-radius: 16px; box-shadow: 0 9px 28px rgba(25,42,65,.055); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.capability-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--capability-accent); }
.capability-card::after { content: ""; position: absolute; top: -62px; right: -54px; width: 140px; height: 140px; background: var(--capability-tint); border-radius: 50%; opacity: .66; pointer-events: none; }
.capability-card:hover { z-index: 1; transform: translateY(-3px); border-color: color-mix(in srgb,var(--capability-accent) 36%,#dfe5eb); box-shadow: 0 18px 42px rgba(25,42,65,.11); }
.capability-card.tone-violet { --capability-accent: #7563c8; --capability-tint: #f0edff; }
.capability-card.tone-blue { --capability-accent: #4c76e7; --capability-tint: #edf2ff; }
.capability-card.tone-mint { --capability-accent: #38a98c; --capability-tint: #e9f8f3; }
.capability-card.tone-gold { --capability-accent: #c68a3d; --capability-tint: #fff5e7; }
.capability-card.tone-coral { --capability-accent: #f56543; --capability-tint: #fff0ec; }
.capability-card-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.capability-mark { order: 1; display: grid; width: 47px; height: 47px; place-items: center; color: var(--capability-accent); background: var(--capability-tint); border: 1px solid color-mix(in srgb,var(--capability-accent) 22%,transparent); border-radius: 13px; font-size: 17px; font-weight: 800; }
.capability-status { order: 2; display: inline-flex; min-height: 23px; align-items: center; gap: 5px; padding: 3px 8px; color: #a23f2a; background: #ffe6de; border: 1px solid #f4c0b2; border-radius: 999px; font-size: 8px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
.capability-status i { width: 5px; height: 5px; flex: 0 0 auto; background: #e85d3f; border-radius: 50%; }
.capability-source { position: relative; z-index: 1; display: block; width: fit-content; margin-top: 18px; color: #798799; font-size: 8px; font-weight: 700; letter-spacing: .04em; }
.capability-card > h3 { position: relative; z-index: 1; margin: 8px 0 7px; font-size: 18px; line-height: 1.35; letter-spacing: -.025em; }
.capability-card > p { position: relative; z-index: 1; min-height: 44px; margin: 0; color: #718094; font-size: 10px; line-height: 1.75; }
.capability-highlights { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin: 15px 0 18px; padding: 0; list-style: none; }
.capability-highlights li, .capability-highlights span { padding: 5px 7px; color: #637286; background: #f3f6f8; border-radius: 6px; font-size: 8px; font-weight: 650; }
.capability-card-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 15px; border-top: 1px solid #edf0f3; }
.capability-outcome { display: grid; min-width: 0; gap: 2px; color: #8a96a5; font-size: 8px; }
.capability-outcome strong { overflow: hidden; color: #41566d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.capability-open { min-width: 84px; min-height: 34px; padding: 7px 11px; color: white; background: #223a54; border-radius: 8px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.capability-open:hover { background: var(--capability-accent); }

.capability-loop { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr); align-items: center; gap: 38px; margin-top: 22px; overflow: hidden; padding: 33px 37px; color: white; background: linear-gradient(135deg,#14263c,#1d3850); border-radius: 19px; box-shadow: 0 18px 48px rgba(19,34,56,.12); }
.capability-loop > div > span { color: #f98a70; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.capability-loop h2 { max-width: 420px; margin: 8px 0 0; font-size: 22px; line-height: 1.45; letter-spacing: -.035em; }
.capability-loop ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.capability-loop li { position: relative; display: grid; align-content: start; min-height: 119px; padding: 13px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; }
.capability-loop li:not(:last-child)::after { content: "›"; position: absolute; z-index: 1; top: 50%; right: -9px; display: grid; width: 18px; height: 18px; place-items: center; color: #93a8bc; background: #1b334b; border-radius: 50%; transform: translateY(-50%); }
.capability-loop li i { display: grid; width: 25px; height: 25px; place-items: center; margin-bottom: 12px; color: #ffae99; background: rgba(245,101,67,.13); border-radius: 7px; font-size: 8px; font-style: normal; font-weight: 800; }
.capability-loop li:nth-child(n+3) i { color: #99d8c7; background: rgba(56,169,140,.13); }
.capability-loop li strong { font-size: 10px; }
.capability-loop li small { margin-top: 5px; color: #8ea2b6; font-size: 8px; line-height: 1.6; }

.capability-dialog { width: min(940px,calc(100vw - 32px)); }
.capability-dialog .dialog-head { color: white; background: #14263c; border-bottom-color: rgba(255,255,255,.08); }
.capability-dialog .dialog-head span { color: #ff9c84; }
.capability-dialog .dialog-head h2 { color: white; }
.dialog-close-button { display: grid; width: 36px; height: 36px; place-items: center; color: #c6d3e0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 50%; font-size: 20px; }
.dialog-close-button:hover { color: white; background: rgba(255,255,255,.15); }
.capability-dialog-note { display: flex; align-items: center; gap: 13px; padding: 11px 22px; color: #745348; background: #fff4ef; border-bottom: 1px solid #f0d2c8; font-size: 9px; line-height: 1.65; }
.capability-dialog-note strong { flex: 0 0 auto; padding: 4px 8px; color: #a43d28; background: #ffded5; border: 1px solid #f2b9aa; border-radius: 999px; font-size: 8px; letter-spacing: .05em; }
.capability-demo-body { padding: 22px; }
.capability-demo-intro { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 15px; margin-bottom: 15px; }
.capability-demo-intro > .capability-status { order: initial; }
.capability-demo-intro h3 { margin: 0 0 5px; font-size: 16px; }
.capability-demo-intro p { max-width: 610px; margin: 0; color: #758295; font-size: 10px; line-height: 1.75; }
.capability-demo-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.capability-demo-meta span { padding: 5px 8px; color: #50677d; background: #edf2f6; border-radius: 6px; font-size: 8px; font-weight: 700; white-space: nowrap; }
.capability-demo-shell { overflow: hidden; background: #f6f8fa; border: 1px solid #dfe5eb; border-radius: 13px; }
.capability-demo-head { display: flex; min-height: 45px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 15px; background: white; border-bottom: 1px solid #e2e7ed; }
.capability-demo-head > div { display: grid; min-width: 0; gap: 2px; }
.capability-demo-head > div span { color: #8995a4; font-size: 7px; }
.capability-demo-head > div strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.capability-run-state { display: inline-flex; min-height: 23px; align-items: center; gap: 6px; padding: 3px 8px; color: #7b6128; background: #fff3ce; border-radius: 999px; font-size: 8px; font-weight: 750; }
.capability-run-state i { width: 6px; height: 6px; flex: 0 0 auto; background: #d8a934; border-radius: 50%; }
.capability-run-state.is-running i, .capability-run-state[data-state="running"] i { animation: capability-pulse 1s ease infinite; }
.capability-run-state.is-complete, .capability-run-state[data-state="complete"] { color: #2e765f; background: #dcf4ec; }
.capability-run-state.is-complete i, .capability-run-state[data-state="complete"] i { background: #38a98c; }
@keyframes capability-pulse { 50% { opacity: .35; transform: scale(.75); } }
.capability-demo-stage { min-height: 255px; padding: 18px; }
.capability-demo-stage.is-complete { box-shadow: inset 0 3px 0 rgba(56,169,140,.7); }

.demo-step-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.demo-step { position: relative; display: grid; align-content: start; min-height: 176px; padding: 14px; background: white; border: 1px solid #e1e6ec; border-radius: 10px; }
.demo-step:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 28px; right: -12px; color: #98a5b4; font-size: 13px; }
.demo-step > span { width: fit-content; padding: 4px 7px; color: #a84934; background: #ffe9e2; border-radius: 5px; font-size: 8px; font-weight: 800; }
.demo-step > div { display: grid; gap: 5px; margin-top: 13px; }
.demo-step strong { font-size: 10px; line-height: 1.55; }
.demo-step p, .demo-step small { margin: 0; color: #7a8797; font-size: 8px; line-height: 1.65; }
.demo-step > em { width: fit-content; margin-top: auto; padding: 4px 7px; color: #347661; background: #e7f5f0; border-radius: 999px; font-size: 7px; font-style: normal; }

.demo-poster-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.demo-poster { position: relative; display: grid; min-height: 240px; align-content: end; overflow: hidden; padding: 18px; color: white; background: radial-gradient(circle at 78% 16%,rgba(255,255,255,.2),transparent 26%), linear-gradient(145deg,#e2664c,#7d302d); border-radius: 11px; box-shadow: 0 8px 20px rgba(30,45,62,.12); }
.demo-poster:nth-child(2) { background: radial-gradient(circle at 25% 22%,rgba(255,255,255,.18),transparent 25%), linear-gradient(145deg,#357e73,#173c49); }
.demo-poster:nth-child(3) { background: radial-gradient(circle at 76% 20%,rgba(255,255,255,.17),transparent 25%), linear-gradient(145deg,#6774bb,#283452); }
.demo-poster span { color: rgba(255,255,255,.7); font-size: 8px; letter-spacing: .08em; }
.demo-poster strong { margin-top: 7px; font-size: 19px; line-height: 1.25; letter-spacing: -.04em; }
.demo-poster small { margin-top: 10px; color: rgba(255,255,255,.66); font-size: 8px; }

.demo-version-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.demo-version { position: relative; display: grid; align-content: start; min-height: 154px; padding: 14px; overflow: hidden; background: white; border: 1px solid #e0e6ec; border-radius: 10px; }
.demo-version > b { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 20px; color: white; background: linear-gradient(145deg,#365d7d,#1b3148); border-radius: 9px; font-size: 12px; }
.demo-version > span { display: grid; gap: 4px; }
.demo-version strong { font-size: 10px; }
.demo-version small { color: #8591a0; font-size: 8px; line-height: 1.5; }
.demo-version > em { width: fit-content; margin-top: 11px; padding: 4px 7px; color: #4d667d; background: #edf2f6; border-radius: 999px; font-size: 7px; font-style: normal; }

.demo-channel-row { display: grid; gap: 8px; }
.demo-channel { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 55px; padding: 9px 12px; background: white; border: 1px solid #e1e6ec; border-radius: 9px; }
.demo-channel > i { display: grid; width: 35px; height: 35px; place-items: center; color: white; background: #263e58; border-radius: 9px; font-size: 10px; font-style: normal; font-weight: 800; }
.demo-channel:nth-child(2) > i { background: #e45d43; }
.demo-channel:nth-child(3) > i { background: #38a98c; }
.demo-channel > span { display: grid; min-width: 0; gap: 2px; }
.demo-channel strong { font-size: 10px; }
.demo-channel small { color: #8894a3; font-size: 8px; }
.demo-channel > em { padding: 5px 8px; color: #526b80; background: #eef3f7; border-radius: 999px; font-size: 8px; font-style: normal; white-space: nowrap; }

.demo-dashboard { display: grid; gap: 12px; }
.demo-dashboard-label { width: fit-content; padding: 4px 8px; color: #a33f2b; background: #ffe5dc; border-radius: 999px; font-size: 8px; font-weight: 800; }
.demo-kpi-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.demo-kpi { display: grid; gap: 4px; padding: 13px; background: white; border: 1px solid #e1e6ec; border-radius: 9px; }
.demo-kpi span { color: #8793a2; font-size: 8px; }
.demo-kpi strong { font-size: 18px; }
.demo-kpi small { color: #3c9279; font-size: 8px; }
.demo-bars { display: grid; gap: 9px; padding: 15px; background: white; border: 1px solid #e1e6ec; border-radius: 10px; }
.demo-bar { display: grid; grid-template-columns: 82px minmax(0,1fr) 36px; align-items: center; gap: 9px; color: #68778b; font-size: 8px; }
.demo-bar i { position: relative; height: 7px; overflow: hidden; background: #e8edf1; border-radius: 999px; }
.demo-bar i::after { content: ""; position: absolute; inset: 0; width: var(--bar,72%); background: linear-gradient(90deg,#f56543,#f89176); border-radius: inherit; }
.demo-bar:nth-child(even) i::after { background: linear-gradient(90deg,#38a98c,#73cbb3); }
.demo-bar em { color: #43586e; font-size: 8px; font-style: normal; text-align: right; }

.demo-conversation { display: grid; gap: 10px; padding: 14px; background: white; border: 1px solid #e1e6ec; border-radius: 11px; }
.demo-message, .demo-reply { max-width: 78%; padding: 11px 13px; border-radius: 10px 10px 10px 3px; font-size: 9px; line-height: 1.7; }
.demo-message { color: #55667a; background: #edf2f6; }
.demo-reply { justify-self: end; color: #255e50; background: #e4f5ef; border-radius: 10px 10px 3px 10px; }
.demo-message > span, .demo-reply > span { display: block; margin-bottom: 4px; font-size: 8px; font-weight: 800; }
.demo-message p, .demo-reply p { margin: 0; }
.demo-message small { display: block; margin-top: 6px; color: #8190a0; font-size: 7px; }
.demo-reply > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.demo-reply em { padding: 3px 6px; color: #347661; background: rgba(255,255,255,.62); border-radius: 999px; font-size: 7px; font-style: normal; }

.demo-store-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.demo-store { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 9px 11px; padding: 14px; background: white; border: 1px solid #e1e6ec; border-radius: 10px; }
.demo-store > b { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: #456d92; border-radius: 9px; font-size: 9px; }
.demo-store > span { display: grid; min-width: 0; gap: 3px; }
.demo-store strong { font-size: 10px; }
.demo-store small { color: #8390a0; font-size: 8px; line-height: 1.6; }
.demo-store em { grid-column: 2; width: fit-content; padding: 4px 7px; color: #347661; background: #e5f5ef; border-radius: 999px; font-size: 8px; font-style: normal; }

.demo-agents { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.demo-agent { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 73px; padding: 11px; background: white; border: 1px solid #e1e6ec; border-radius: 10px; }
.demo-agent > i { display: grid; width: 42px; height: 42px; place-items: center; color: white; background: linear-gradient(145deg,#7563c8,#4c76e7); border-radius: 12px; font-size: 13px; font-style: normal; font-weight: 800; }
.demo-agent > span { display: grid; min-width: 0; gap: 3px; }
.demo-agent strong { font-size: 10px; }
.demo-agent small { color: #8491a1; font-size: 8px; }
.demo-agent em { color: #3a806b; font-size: 8px; font-style: normal; font-weight: 750; }

.demo-touch-flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px; margin: 0; padding: 0; }
.demo-touch-node { position: relative; display: grid; min-height: 148px; align-content: center; justify-items: center; padding: 14px; color: #3c5268; background: white; border: 1px solid #e0e6ec; border-radius: 11px; text-align: center; }
.demo-touch-flow > b { color: #92a0af; font-size: 15px; }
.demo-touch-node > i { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 11px; color: white; background: #c78a3c; border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 800; }
.demo-touch-node > span { display: grid; gap: 4px; }
.demo-touch-node strong { font-size: 10px; }
.demo-touch-node small { margin-top: 5px; color: #8592a2; font-size: 8px; line-height: 1.55; }

/* AI capability workspaces */
.studio-page[data-view^="capabilities"] { --capability-navy: #12243a; --capability-coral: #f56543; --capability-mint: #38a98c; min-width: 0; }
.capability-tool-tabs { position: sticky; top: 84px; z-index: 12; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-bottom: 20px; padding: 5px; overflow: hidden; background: rgba(255,255,255,.93); border: 1px solid #dce3ea; border-radius: 14px; box-shadow: 0 10px 30px rgba(25,42,65,.075); backdrop-filter: blur(16px); }
.capability-tool-tabs button { display: grid; min-width: 0; min-height: 52px; align-content: center; gap: 2px; padding: 7px 15px; color: #708094; background: transparent; border: 1px solid transparent; border-radius: 10px; text-align: left; transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.capability-tool-tabs button:hover { color: #233b54; background: #f1f5f8; }
.capability-tool-tabs button[aria-current="page"] { color: #173d36; background: #e8f5f0; border-color: #c6e3da; box-shadow: 0 4px 12px rgba(27,102,81,.08); }
.capability-tool-tabs button span { overflow: hidden; font-size: 11px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.capability-tool-tabs button small { overflow: hidden; color: #63758a; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.capability-tool-tabs button[aria-current="page"] small { color: #5e8e80; }

.capability-launch-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.capability-launch-card { --launch-accent: #f56543; --launch-tint: #fff0ec; position: relative; display: flex; min-width: 0; min-height: 365px; flex-direction: column; overflow: hidden; padding: 26px; background: white; border: 1px solid #dde4eb; border-radius: 18px; box-shadow: 0 10px 32px rgba(27,45,67,.055); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.capability-launch-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--launch-accent); }
.capability-launch-card::after { content: ""; position: absolute; top: -60px; right: -58px; width: 170px; height: 170px; background: var(--launch-tint); border-radius: 50%; opacity: .72; pointer-events: none; }
.capability-launch-card.matrix { --launch-accent: #4c76e7; --launch-tint: #edf2ff; }
.capability-launch-card.analytics { --launch-accent: #38a98c; --launch-tint: #e9f8f3; }
.capability-launch-card:hover { z-index: 1; transform: translateY(-4px); border-color: color-mix(in srgb,var(--launch-accent) 32%,#dde4eb); box-shadow: 0 20px 45px rgba(27,45,67,.11); }
.launch-card-icon { position: relative; z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 24px; color: var(--launch-accent); background: var(--launch-tint); border: 1px solid color-mix(in srgb,var(--launch-accent) 20%,transparent); border-radius: 13px; font-size: 16px; font-weight: 850; }
.capability-launch-card > span { position: relative; z-index: 1; color: var(--launch-accent); font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.capability-launch-card h2 { position: relative; z-index: 1; margin: 8px 0; font-size: 21px; letter-spacing: -.035em; }
.capability-launch-card p { position: relative; z-index: 1; margin: 0; color: #718094; font-size: 11px; line-height: 1.8; }
.capability-launch-card ul { position: relative; z-index: 1; display: grid; gap: 7px; margin: 18px 0 24px; padding: 0; color: #50647a; font-size: 9px; list-style: none; }
.capability-launch-card li { display: flex; align-items: center; gap: 8px; }
.capability-launch-card li::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; background: var(--launch-accent); border-radius: 50%; box-shadow: 0 0 0 4px var(--launch-tint); }
.capability-launch-card > button { position: relative; z-index: 1; display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; margin-top: auto; padding: 9px 13px; color: #253e57; background: #f5f7fa; border: 1px solid #e1e6ec; border-radius: 9px; font-size: 10px; font-weight: 780; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.capability-launch-card > button:hover { color: white; background: var(--launch-accent); border-color: var(--launch-accent); }
.capability-launch-card > button span { font-size: 17px; transition: transform .16s ease; }
.capability-launch-card > button:hover span { transform: translateX(3px); }

.capability-foundation { display: grid; grid-template-columns: minmax(240px,.7fr) minmax(0,1.3fr); align-items: center; gap: 38px; margin-top: 20px; padding: 31px 35px; color: white; background: linear-gradient(135deg,#14263c,#1b354d); border-radius: 18px; box-shadow: 0 16px 44px rgba(19,34,56,.12); }
.capability-foundation > div > span { color: #fb8d73; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.capability-foundation h2 { margin: 7px 0 0; font-size: 20px; line-height: 1.45; letter-spacing: -.03em; }
.capability-foundation ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.capability-foundation li { display: grid; min-width: 0; min-height: 112px; align-content: start; gap: 4px; padding: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.075); border-radius: 10px; }
.capability-foundation li b { width: fit-content; margin-bottom: 9px; color: #ff9f88; font-size: 8px; }
.capability-foundation li strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.capability-foundation li small { color: #8ca0b4; font-size: 8px; line-height: 1.5; }

.capability-tool-page { min-width: 0; }
.tool-page-heading { display: flex; min-height: 132px; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 24px 4px 27px; border-bottom: 1px solid var(--line); }
.tool-page-heading > div:first-child { min-width: 0; }
.tool-breadcrumb { display: block; margin-bottom: 7px; color: #5d7c92; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.tool-page-heading h1 { margin: 0; font-size: clamp(27px,3vw,36px); line-height: 1.25; letter-spacing: -.045em; }
.tool-page-heading p { max-width: 740px; margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.demo-mode-badge { display: inline-flex; min-height: 29px; align-items: center; gap: 7px; padding: 5px 10px; color: #88402f; background: #fff0eb; border: 1px solid #f1c5ba; border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.demo-mode-badge::before { content: ""; width: 6px; height: 6px; background: #f56543; border-radius: 50%; box-shadow: 0 0 0 3px rgba(245,101,67,.12); }

.breakdown-workspace { display: grid; grid-template-columns: minmax(330px,.72fr) minmax(0,1.28fr); align-items: start; gap: 18px; margin-top: 20px; }
.breakdown-input-panel, .breakdown-report-panel, .matrix-composer, .matrix-calendar, .dashboard-layout > .panel { min-width: 0; overflow: hidden; }
.breakdown-input-panel { position: sticky; top: 166px; }
.breakdown-dropzone { display: grid; min-height: 190px; place-items: center; align-content: center; gap: 6px; margin: 20px; padding: 24px; color: #5d7085; background: linear-gradient(145deg,#fbfcfd,#f3f7f9); border: 1.5px dashed #bdc9d5; border-radius: 13px; text-align: center; cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.breakdown-dropzone:hover, .breakdown-dropzone.is-dragover, .breakdown-dropzone:focus-within { color: #2b6757; background: #f0faf6; border-color: #4d9f89; box-shadow: 0 0 0 3px rgba(76,118,231,.22), inset 0 0 0 3px rgba(56,169,140,.07); }
.breakdown-dropzone svg { width: 36px; height: 36px; margin-bottom: 7px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.breakdown-dropzone strong { font-size: 12px; }
.breakdown-dropzone small { color: #91a0af; font-size: 9px; }
.breakdown-dropzone input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.breakdown-input-panel > .field { margin: 0 20px 16px; }
.local-process-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; color: #2c6554; background: #e7f5f0; border-radius: 999px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.local-process-badge::before { content: ""; width: 6px; height: 6px; background: #38a98c; border-radius: 50%; }
.input-divider { display: flex; align-items: center; gap: 9px; margin: 0 20px 15px; color: #9aa5b2; font-size: 8px; }
.input-divider::before, .input-divider::after { content: ""; height: 1px; flex: 1; background: #e8ecf0; }
.url-input-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.url-input-row .button { min-height: 43px; padding-inline: 13px; white-space: nowrap; }
.breakdown-source-card { min-width: 0; margin: 0 20px 14px; overflow: hidden; background: #f6f8fa; border: 1px solid #e0e6ec; border-radius: 11px; }
.breakdown-source-card:has(.breakdown-source-meta) { display: grid; grid-template-columns: 112px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px; background: white; }
.breakdown-empty { display: grid; min-height: 88px; align-content: center; gap: 4px; padding: 15px; text-align: center; }
.breakdown-empty span { color: #50657b; font-size: 10px; font-weight: 750; }
.breakdown-empty p { margin: 0; color: #8b97a6; font-size: 8px; line-height: 1.6; }
.breakdown-preview { width: 112px; aspect-ratio: 16/10; object-fit: cover; background: #101c29; border-radius: 8px; }
.breakdown-preview-icon { display: grid; width: 112px; aspect-ratio: 16/10; place-items: center; color: white; background: linear-gradient(145deg,#335b7a,#192e45); border-radius: 8px; }
.breakdown-preview-icon svg { width: 26px; height: 26px; fill: currentColor; }
.breakdown-source-meta { display: grid; min-width: 0; gap: 3px; }
.breakdown-source-meta > span { color: #65768a; font-size: 9px; font-weight: 750; letter-spacing: .04em; }
.breakdown-source-meta strong, .breakdown-source-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breakdown-source-meta strong { color: #34495f; font-size: 10px; }
.breakdown-source-meta small { color: #65768a; font-size: 9px; }
.breakdown-preview-copy, .breakdown-source-details { display: grid; min-width: 0; gap: 4px; }
.breakdown-preview-copy strong, .breakdown-source-details strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.breakdown-preview-copy span, .breakdown-preview-copy small, .breakdown-source-details span, .breakdown-source-details small { overflow: hidden; color: #8390a0; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.breakdown-preview button, .breakdown-source-actions button, [data-remove-breakdown] { width: fit-content; min-height: 30px; margin-top: 3px; padding: 5px 8px; color: #9c4836; background: #fff0eb; border-radius: 7px; font-size: 8px; font-weight: 750; }
.breakdown-rights { margin-bottom: 13px; font-size: 9px; }
.breakdown-rights input { width: 15px; height: 15px; }
.breakdown-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--line-soft); }
.breakdown-actions .button { min-height: 40px; padding: 8px 13px; font-size: 10px; }
.breakdown-input-panel > .form-error { min-height: 16px; margin: -10px 20px 16px; }
.analysis-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; color: #556678; background: #f0f3f6; border-radius: 999px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.analysis-status i { width: 6px; height: 6px; flex: 0 0 auto; background: #a8b3c0; border-radius: 50%; }
.analysis-status.is-running i, .analysis-status[data-state="running"] i { background: #e5a62f; animation: capability-pulse 1s ease infinite; }
.analysis-status.is-complete, .analysis-status[data-state="complete"] { color: #2d715e; background: #e4f5ef; }
.analysis-status.is-complete i, .analysis-status[data-state="complete"] i { background: #38a98c; }
.breakdown-report-empty, .report-empty { display: grid; min-height: 470px; align-content: center; justify-items: center; padding: 38px; color: #718094; text-align: center; }
.report-empty[hidden] { display: none; }
.breakdown-report-empty > span { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 13px; color: #597187; background: #edf2f6; border-radius: 15px; font-size: 17px; font-weight: 800; }
.report-empty-visual { display: flex; width: 82px; height: 58px; align-items: flex-end; justify-content: center; gap: 6px; margin-bottom: 15px; padding: 11px; background: #edf2f6; border-radius: 15px; }
.report-empty-visual span { width: 7px; height: 45%; background: #9cb0c2; border-radius: 5px; }
.report-empty-visual span:nth-child(2) { height: 78%; background: #6b879f; }
.report-empty-visual span:nth-child(3) { height: 58%; background: #f07a5e; }
.report-empty-visual span:nth-child(4) { height: 88%; background: #3ba88c; }
.breakdown-report-empty h3, .report-empty h3 { margin: 0; color: #31465c; font-size: 14px; }
.breakdown-report-empty p, .report-empty p { max-width: 380px; margin: 7px 0 0; font-size: 9px; line-height: 1.75; }
.report-body { padding: 18px; }
.breakdown-progress { display: grid; min-height: 470px; align-content: center; justify-items: center; color: #65758a; text-align: center; }
.analysis-spinner { width: 42px; height: 42px; margin-bottom: 15px; border: 3px solid #dfe7eb; border-top-color: #38a98c; border-radius: 50%; animation: analysis-spin .8s linear infinite; }
@keyframes analysis-spin { to { transform: rotate(360deg); } }
.breakdown-progress h3 { margin: 0; color: #30485e; font-size: 14px; }
.breakdown-progress p { max-width: 390px; margin: 10px 0 0; font-size: 8px; line-height: 1.7; }
.analysis-progress { width: min(360px,80%); height: 6px; margin-top: 18px; overflow: hidden; background: #e7ecef; border-radius: 999px; }
.analysis-progress i { display: block; height: 100%; background: linear-gradient(90deg,#38a98c,#72cbb3); border-radius: inherit; transition: width .25s ease; }
.report-complete-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; margin-bottom: 13px; padding: 18px; color: white; background: linear-gradient(135deg,#183049,#1c4a4d); border-radius: 13px; }
.report-complete-head h3 { margin: 10px 0 3px; font-size: 16px; line-height: 1.4; }
.report-complete-head p { margin: 0; color: #a9bfca; font-size: 8px; line-height: 1.65; }
.report-complete-head > strong { padding: 8px 10px; color: #ffd1c5; background: rgba(245,101,67,.15); border: 1px solid rgba(255,160,137,.25); border-radius: 9px; font-size: 9px; white-space: nowrap; }
.breakdown-report-content { display: grid; gap: 13px; padding: 18px; }
.breakdown-report-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 18px; color: white; background: linear-gradient(135deg,#183049,#1c4a4d); border-radius: 13px; }
.breakdown-report-summary span { color: #8dc5b6; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.breakdown-report-summary h3 { margin: 5px 0 0; font-size: 17px; line-height: 1.42; }
.breakdown-report-summary em { padding: 6px 9px; color: #ffd0c4; background: rgba(245,101,67,.16); border: 1px solid rgba(255,159,136,.24); border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.report-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.report-section { min-width: 0; padding: 16px; background: #f7f9fb; border: 1px solid #e2e7ed; border-radius: 11px; }
.report-section > span, .report-label { color: #8a96a5; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.report-section h3, .report-section h4 { margin: 6px 0 5px; color: #31475d; font-size: 11px; line-height: 1.5; }
.report-section p { margin: 0; color: #718094; font-size: 9px; line-height: 1.75; }
.report-hook { background: #fff5f1; border-color: #f1d2c9; }
.report-hook > span { color: #c95b43; }
.report-section ul { display: grid; gap: 6px; margin: 9px 0 0; padding: 0; color: #65768a; font-size: 8px; line-height: 1.6; list-style: none; }
.report-section li { position: relative; padding-left: 12px; }
.report-section li::before { content: ""; position: absolute; top: .65em; left: 0; width: 5px; height: 5px; background: #38a98c; border-radius: 50%; }
.report-timeline { display: grid; gap: 8px; margin-top: 10px; }
.report-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report-section-title small { color: #8390a0; font-size: 8px; }
.report-timeline ol { display: grid; margin: 0; padding: 0; list-style: none; }
.report-timeline li { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 10px; padding: 9px 0; border-top: 1px solid #e3e8ed; }
.report-timeline time, .report-timeline b { color: #e05d40; font-size: 8px; }
.report-timeline span, .report-timeline p { margin: 0; color: #596d82; font-size: 8px; line-height: 1.6; }
.report-timeline li strong { display: block; margin-bottom: 2px; color: #3f566d; font-size: 9px; }
.report-adaptation { margin-top: 10px; background: #eef7f4; border-color: #d3eae2; }
.report-adaptation .button { margin-top: 13px; min-height: 40px; font-size: 10px; }
.breakdown-report-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px 18px; border-top: 1px solid var(--line-soft); }
.breakdown-report-actions span { color: #8491a1; font-size: 8px; }

.platform-account-section { margin-top: 22px; padding: 20px; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 32px rgba(30,47,68,.045); }
.platform-account-section .compact-heading { margin: 0 0 16px; }
.compact-heading h2 { font-size: 17px; }
.platform-account-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.platform-account-card { --platform-color: #456d92; --platform-bg: #edf3f8; position: relative; display: grid; grid-template-columns: 18px 38px minmax(0,1fr); align-items: center; gap: 9px; min-width: 0; min-height: 98px; padding: 12px; color: #3e5268; background: #fbfcfd; border: 1px solid #e0e5eb; border-radius: 11px; cursor: pointer; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.platform-account-card:hover { transform: translateY(-2px); background: white; border-color: color-mix(in srgb,var(--platform-color) 35%,#dfe5eb); box-shadow: 0 10px 24px rgba(27,45,67,.08); }
.platform-account-card.is-selected, .platform-account-card:has(input:checked) { background: color-mix(in srgb,var(--platform-bg) 72%,white); border-color: color-mix(in srgb,var(--platform-color) 46%,#dfe5eb); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--platform-color) 18%,transparent); }
.platform-account-card input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.platform-account-card:focus-within { outline: 3px solid rgba(76,118,231,.24); outline-offset: 2px; }
.platform-select-indicator { display: grid; width: 18px; height: 18px; place-items: center; background: white; border: 1px solid #cbd4dd; border-radius: 5px; }
.platform-select-indicator i { display: block; width: 8px; height: 5px; border-bottom: 2px solid white; border-left: 2px solid white; transform: rotate(-45deg) translateY(-1px); opacity: 0; }
.platform-account-card.is-selected .platform-select-indicator, .platform-account-card:has(input:checked) .platform-select-indicator { background: var(--platform-color); border-color: var(--platform-color); }
.platform-account-card.is-selected .platform-select-indicator i, .platform-account-card:has(input:checked) .platform-select-indicator i { opacity: 1; }
.platform-logo { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: var(--platform-color); background: var(--platform-bg); border-radius: 10px; }
.platform-logo svg { width: 24px; height: 24px; overflow: visible; }
.platform-logo svg > * { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.platform-logo .platform-logo-fill { fill: currentColor; stroke: none; }
.platform-logo .platform-logo-light { fill: none; stroke: white; stroke-width: 1.35; }
.platform-logo.is-compact { width: 32px; height: 32px; border-radius: 8px; }
.platform-logo.is-compact svg { width: 20px; height: 20px; }
.platform-account-meta { display: grid; min-width: 0; gap: 2px; padding-right: 13px; }
.platform-account-meta strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.platform-account-meta small { overflow: hidden; color: #65768a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.platform-account-meta em { width: fit-content; padding: 2px 5px; color: #715b2f; background: #fff3d9; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 700; }
.platform-status { grid-column: 2 / -1; display: inline-flex; width: fit-content; align-items: center; gap: 6px; color: #306b59; font-size: 9px; font-weight: 700; }
.platform-status i { width: 6px; height: 6px; background: #45b18f; border-radius: 50%; box-shadow: 0 0 0 3px rgba(69,177,143,.1); }
.matrix-workspace { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(320px,.88fr); align-items: start; gap: 18px; margin-top: 18px; }
.matrix-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 20px; }
.matrix-form .span-2 { grid-column: 1 / -1; }
.matrix-form textarea { min-height: 122px; }
.matrix-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; border-top: 1px solid var(--line-soft); }
.matrix-composer-actions > span { max-width: 480px; color: #607286; font-size: 9px; line-height: 1.6; }
.matrix-composer-actions .button { flex: 0 0 auto; }
.matrix-composer > .form-error { min-height: 16px; margin: -9px 20px 13px; }
.matrix-calendar { position: sticky; top: 166px; }
.matrix-queue { display: grid; gap: 9px; min-height: 298px; align-content: start; padding: 15px; background: #f8fafb; }
.matrix-queue-empty { display: grid; min-height: 260px; align-content: center; justify-items: center; padding: 24px; color: #8390a0; text-align: center; }
.matrix-queue-empty strong { color: #50647a; font-size: 11px; }
.matrix-queue-empty p { max-width: 290px; margin: 6px 0 0; font-size: 8px; line-height: 1.7; }
.matrix-queue-item { --platform-color: #456d92; display: grid; grid-template-columns: 46px 32px minmax(0,1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 11px; background: white; border: 1px solid #e0e5eb; border-radius: 10px; box-shadow: 0 4px 12px rgba(27,45,67,.035); }
.matrix-queue-item > time { display: grid; justify-items: center; gap: 1px; padding-right: 9px; border-right: 1px solid #e6eaee; color: #718094; font-size: 8px; }
.matrix-queue-item > time strong { color: #344b62; font-size: 9px; }
.matrix-queue-item .platform-logo { width: 38px; height: 38px; }
.matrix-queue-meta { display: grid; min-width: 0; gap: 3px; }
.matrix-queue-meta strong { overflow: hidden; color: #344a60; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.matrix-queue-meta span, .matrix-queue-meta small { color: #607286; font-size: 9px; }
.matrix-queue-meta em { width: fit-content; padding: 3px 6px; color: #745026; background: #fff2d8; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 750; }
.matrix-queue-actions { display: grid; justify-items: end; gap: 5px; }
.matrix-queue-actions em { display: inline-flex; align-items: center; gap: 5px; color: #765723; font-size: 9px; font-style: normal; font-weight: 700; white-space: nowrap; }
.matrix-queue-actions em i { width: 5px; height: 5px; background: #d8a33c; border-radius: 50%; }
.matrix-queue-actions button { min-height: 30px; padding: 5px 8px; color: #8c5360; background: #fff1f3; border-radius: 7px; font-size: 8px; font-weight: 700; }
.matrix-queue-actions button:hover { color: #a53049; background: #ffe2e7; }

.dashboard-heading { align-items: center; }
.dashboard-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 9px; }
.dashboard-controls label { display: grid; gap: 4px; }
.dashboard-controls label > span { color: #5f7083; font-size: 9px; font-weight: 700; }
.dashboard-controls select { min-width: 126px; min-height: 37px; padding: 7px 30px 7px 10px; background: white; border: 1px solid #d5dce4; border-radius: 8px; font-size: 9px; }
.dashboard-update-row { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 9px 13px; color: #5f7184; background: #edf6f3; border: 1px solid #d1e8e0; border-radius: 9px; font-size: 9px; }
.dashboard-update-row > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dashboard-update-row i { width: 7px; height: 7px; background: #38a98c; border-radius: 50%; box-shadow: 0 0 0 4px rgba(56,169,140,.1); }
.dashboard-update-row small { color: #526f65; font-size: 9px; text-align: right; }
.dashboard-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 11px; margin-top: 14px; }
.dashboard-kpi { position: relative; min-width: 0; overflow: hidden; padding: 16px; background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 7px 22px rgba(27,45,67,.045); }
.dashboard-kpi::after { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 2px; background: var(--kpi-color,#38a98c); }
.dashboard-kpi[data-metric="published"] { --kpi-color: #4c76e7; }
.dashboard-kpi[data-metric="views"] { --kpi-color: #7563c8; }
.dashboard-kpi[data-metric="interactions"] { --kpi-color: #f56543; }
.dashboard-kpi[data-metric="leads"] { --kpi-color: #c68a3d; }
.dashboard-kpi[data-metric="followers"] { --kpi-color: #38a98c; }
.dashboard-kpi > span { display: block; color: #5f7083; font-size: 9px; font-weight: 650; }
.dashboard-kpi > strong { display: block; margin-top: 7px; overflow: hidden; color: #23384d; font-size: clamp(19px,2vw,26px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-kpi > strong small { margin-left: 4px; color: #8491a1; font-size: 8px; font-weight: 600; }
.dashboard-kpi > div { display: flex; min-width: 0; align-items: center; gap: 6px; margin-top: 8px; }
.dashboard-kpi > div em { color: #2d745f; font-size: 9px; font-style: normal; font-weight: 750; }
.dashboard-kpi > div small { overflow: hidden; color: #65768a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(260px,.45fr); align-items: stretch; gap: 14px; margin-top: 14px; }
.dashboard-layout.lower { grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); }
.dashboard-trend, .dashboard-funnel { min-height: 350px; }
.trend-chart { min-height: 270px; padding: 15px 18px 18px; overflow: hidden; }
.trend-chart-svg { display: block; width: 100%; min-width: 0; height: 245px; overflow: visible; }
.trend-chart svg { display: block; width: 100%; height: 100%; min-height: 238px; overflow: visible; }
.trend-chart text { fill: #607286; font-size: 9px; }
.trend-chart .grid-line { stroke: #e7ebef; stroke-width: 1; }
.trend-grid line { stroke: #e7ebef; stroke-width: 1; }
.trend-chart .trend-area { opacity: .12; }
.trend-chart .trend-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.trend-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 13px; margin-top: 8px; color: #586a7e; font-size: 9px; }
.trend-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.trend-chart-legend i { width: 7px; height: 7px; border-radius: 50%; }
.dashboard-funnel > #dashboardFunnel { display: grid; gap: 11px; padding: 20px; }
.dashboard-funnel-list { display: grid; gap: 18px; }
.funnel-row { display: grid; gap: 6px; }
.funnel-row > div:first-child, .funnel-row > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #65758a; font-size: 9px; }
.funnel-row strong { color: #31475d; }
.funnel-row i, .funnel-bar { position: relative; display: block; width: 100%; height: 8px; overflow: hidden; background: #e8edf1; border-radius: 999px; }
.funnel-row i::after, .funnel-bar::after { content: ""; position: absolute; inset: 0; width: var(--funnel-width,var(--value,var(--bar,70%))); min-width: 3px; background: linear-gradient(90deg,#38a98c,#68c6ac); border-radius: inherit; }
.funnel-row:nth-child(even) i::after, .funnel-row:nth-child(even) .funnel-bar::after { background: linear-gradient(90deg,#4c76e7,#7a99ec); }
.funnel-row > small { color: #607286; font-size: 9px; }
.dashboard-table-panel, .platform-performance { margin-top: 14px; overflow: hidden; }
.dashboard-table-wrap { width: 100%; overflow-x: auto; }
.dashboard-table, .dashboard-table-wrap table { width: 100%; min-width: 760px; border-collapse: collapse; }
.dashboard-table th, .dashboard-table td, .dashboard-table-wrap th, .dashboard-table-wrap td { padding: 13px 18px; border-bottom: 1px solid #edf0f3; font-size: 9px; text-align: right; white-space: nowrap; }
.dashboard-table th, .dashboard-table-wrap th { color: #8290a0; background: #fafbfc; font-size: 8px; font-weight: 750; }
.dashboard-table th:first-child, .dashboard-table td:first-child, .dashboard-table-wrap th:first-child, .dashboard-table-wrap td:first-child { text-align: left; }
.dashboard-table tbody tr:last-child td, .dashboard-table-wrap tbody tr:last-child td { border-bottom: 0; }
.dashboard-table tbody tr:hover, .dashboard-table-wrap tbody tr:hover { background: #fafcfd; }
.dashboard-table td, .dashboard-table-wrap td { color: #506378; }
.dashboard-table td strong, .dashboard-table-wrap td strong { color: #2e445a; }
.positive-trend { color: #2f8169; font-size: 8px; font-style: normal; font-weight: 750; }
.platform-table-account { display: inline-flex; min-width: 0; align-items: center; gap: 9px; text-align: left; }
.platform-table-account .platform-logo { width: 31px; height: 31px; border-radius: 8px; }
.platform-table-account .platform-logo svg { width: 20px; height: 20px; }
.platform-table-account span { display: grid; gap: 1px; }
.platform-table-account small { color: #8c98a7; font-size: 7px; }
.dashboard-top-list { display: grid; gap: 8px; padding: 15px; }
.top-content-item { display: grid; grid-template-columns: 28px 34px minmax(0,1fr) auto; align-items: center; gap: 9px; min-width: 0; padding: 10px; background: #f8fafb; border: 1px solid #e7ebef; border-radius: 9px; }
.top-content-item > b { display: grid; width: 25px; height: 25px; place-items: center; color: #708094; background: white; border: 1px solid #e1e6eb; border-radius: 7px; font-size: 8px; }
.top-content-item .platform-logo { width: 34px; height: 34px; border-radius: 9px; }
.top-content-item .platform-logo svg { width: 21px; height: 21px; }
.top-content-item > div, .top-content-item > span { display: grid; min-width: 0; gap: 2px; }
.top-content-item > div > span { color: #8290a0; font-size: 7px; font-weight: 700; }
.top-content-item strong { overflow: hidden; color: #3a5066; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.top-content-item small { color: #8a96a5; font-size: 8px; }
.top-content-item > em { color: #377d68; font-size: 8px; font-style: normal; font-weight: 750; white-space: nowrap; }
.insight-panel { position: relative; display: grid; align-content: start; overflow: hidden; padding: 25px; color: white; background: radial-gradient(circle at 90% 8%,rgba(56,169,140,.22),transparent 28%),linear-gradient(140deg,#13283f,#193d4a); border: 0; }
.insight-panel::after { content: ""; position: absolute; right: -45px; bottom: -55px; width: 160px; height: 160px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 33px rgba(255,255,255,.025); }
.insight-panel > * { position: relative; z-index: 1; }
.insight-label { width: fit-content; padding: 5px 8px; color: #aee5d6; background: rgba(56,169,140,.14); border: 1px solid rgba(105,204,177,.2); border-radius: 999px; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.insight-panel h2 { margin: 17px 0 8px; color: white; font-size: 19px; line-height: 1.4; }
.insight-panel p { margin: 0; color: #a9bbc9; font-size: 9px; line-height: 1.8; }
.insight-evidence { display: grid; gap: 7px; margin: 17px 0; padding: 12px; color: #bdd0db; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; font-size: 8px; }
.insight-panel .button { width: fit-content; margin-top: auto; }

.history-overview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.history-overview div { display: grid; gap: 5px; padding: 17px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.history-overview span { color: #8592a2; font-size: 9px; }
.history-overview strong { font-size: 22px; }
.history-filter-selects { display: flex; align-items: center; gap: 8px; }
.atlas-work .panel-heading { padding: 0 0 12px; }
.atlas-work .panel-heading > span { white-space: nowrap; }
.atlas-work .history-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.atlas-work .history-detail a { color: #45627f; overflow-wrap: anywhere; }
.history-filter-selects select { min-height: 35px; padding: 7px 30px 7px 10px; color: #526579; background: white; border: 1px solid var(--line); border-radius: 8px; font-size: 9px; }
.history-list { display: grid; gap: 11px; }
.history-card { display: grid; grid-template-columns: 90px minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 13px; background: white; border: 1px solid var(--line); border-radius: 13px; }
.history-thumb { position: relative; display: grid; width: 90px; aspect-ratio: 16 / 10; place-items: center; overflow: hidden; color: white; background: linear-gradient(145deg,#355b7c,#182b41); border-radius: 8px; font-size: 20px; }
.history-thumb video, .history-thumb img { width: 100%; height: 100%; object-fit: cover; }
.history-info { min-width: 0; }
.history-title { display: flex; align-items: center; gap: 8px; }
.history-title h3 { overflow: hidden; margin: 0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.status-pill { padding: 3px 7px; color: #776128; background: #fff3ce; border-radius: 999px; font-size: 8px; white-space: nowrap; }
.status-pill.completed { color: #2b765f; background: #dcf4ec; }
.status-pill.attention { color: #a24734; background: #ffe6df; }
.history-info p { margin: 6px 0 7px; overflow: hidden; color: #7d8999; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.history-meta { display: flex; flex-wrap: wrap; gap: 12px; color: #929dab; font-size: 8px; }
.history-actions { display: flex; gap: 7px; }
.history-actions button, .history-actions a { min-height: 32px; padding: 7px 10px; color: #4e667d; background: #f1f4f7; border-radius: 7px; font-size: 9px; font-weight: 700; text-decoration: none; }
.history-actions .primary-action { color: white; background: #263e58; }
.history-actions button:disabled { color: #8b96a2; background: #e7ebef; cursor: not-allowed; }
.progress-track { width: min(280px,100%); height: 4px; margin-top: 9px; overflow: hidden; background: #e9edf1; border-radius: 9px; }
.progress-track span { display: block; height: 100%; background: var(--coral); }
.job-production-flow { margin-top: 11px; padding: 11px; background: #f6f8fa; border-radius: 9px; }
.job-production-flow ol { display: grid; grid-template-columns: repeat(6,minmax(72px,1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.job-production-flow li { display: grid; justify-items: center; gap: 5px; color: #8d98a6; font-size: 7px; text-align: center; }
.job-production-flow li i { display: grid; width: 21px; height: 21px; place-items: center; background: #dfe5eb; border-radius: 50%; font-style: normal; }
.job-production-flow li.is-done { color: #397863; }
.job-production-flow li.is-done i { color: white; background: var(--mint); }
.job-production-flow li.is-current { color: #354f68; font-weight: 700; }
.job-production-flow li.is-current i { color: white; background: var(--coral); box-shadow: 0 0 0 3px #ffe1d9; }
.job-production-flow li.is-blocked { color: #a24734; }
.job-production-flow li.is-blocked i { background: #b85640; box-shadow: 0 0 0 3px #ffe2db; }
.worker-state { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #e1e6eb; color: #768397; font-size: 8px; }
.worker-state code { color: #435970; font: inherit; font-weight: 700; }
.worker-state strong { color: #aa4c38; font-size: 8px; }
.provider-quote { display: grid; gap: 9px; margin-top: 10px; padding: 12px; color: #315f53; background: #ebf7f3; border: 1px solid #c9e6dc; border-radius: 9px; }
.provider-quote.is-pending { color: #52677d; background: #f3f6f9; border-color: #dce3e9; }
.provider-quote.is-blocked { color: #8f4939; background: #fff2ee; border-color: #f0d1c8; }
.provider-quote > div:first-child:not(.provider-quote-head) { display: grid; gap: 4px; }
.provider-quote > div:first-child:not(.provider-quote-head) span { color: #758498; font-size: 8px; line-height: 1.6; }
.provider-quote-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.provider-quote-head strong { font-size: 10px; }
.provider-quote-head span { color: #768697; font-size: 8px; }
.provider-quote dl { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: 0; }
.provider-quote dl div { min-width: 0; padding: 8px; background: rgba(255,255,255,.7); border-radius: 7px; }
.provider-quote dt { color: #7c8997; font-size: 7px; }
.provider-quote dd { margin: 3px 0 0; overflow-wrap: anywhere; color: inherit; font-size: 9px; font-weight: 750; }
.provider-quote p { margin: 0; font-size: 8px; line-height: 1.6; }
.provider-quote > a { width: fit-content; color: inherit; font-size: 8px; font-weight: 800; }
.history-output { width: min(520px,100%); margin-top: 12px; overflow: hidden; background: #111d2a; border-radius: 9px; }
.history-output video { display: block; width: 100%; max-height: 360px; background: #111d2a; }
.history-detail { margin-top: 10px; }
.history-detail summary { width: fit-content; min-height: 28px; color: #526d86; font-size: 9px; cursor: pointer; }
.history-detail[open] { padding: 11px 0 3px; border-top: 1px solid var(--line-soft); }
.history-detail dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 10px 0; }
.history-detail dl div { min-width: 0; padding: 9px; background: #f5f7f9; border-radius: 7px; }
.history-detail dt { color: #8a96a5; font-size: 8px; }
.history-detail dd { margin: 3px 0 0; overflow: hidden; color: #405368; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.record-script, .record-block { margin-top: 9px; padding: 10px; background: #f5f7f9; border-radius: 8px; }
.record-script > strong, .record-block > strong { color: #52657b; font-size: 9px; }
.record-script pre { max-height: 150px; margin: 7px 0 0; overflow: auto; color: #59687a; white-space: pre-wrap; font: inherit; font-size: 9px; line-height: 1.7; }
.record-block ol { display: grid; gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; }
.record-block li { display: flex; justify-content: space-between; gap: 10px; color: #536579; font-size: 8px; }
.record-block em { max-width: 72%; color: #8793a1; font-style: normal; text-align: right; overflow-wrap: anywhere; }

.empty-state { grid-column: 1 / -1; display: grid; place-items: center; padding: 54px 22px; color: #8a96a5; background: white; border: 1px dashed #ccd5df; border-radius: 14px; text-align: center; }
.empty-state > span { display: grid; width: 43px; height: 43px; place-items: center; margin-bottom: 8px; color: #67819a; background: #edf2f6; border-radius: 50%; font-size: 18px; }
.empty-state h3 { margin: 4px 0; color: #3c4c60; font-size: 13px; }
.empty-state p { max-width: 430px; margin: 0; font-size: 10px; line-height: 1.8; }

.preview-dialog { width: min(820px, calc(100vw - 32px)); max-height: min(820px, calc(100vh - 32px)); padding: 0; overflow: auto; color: var(--ink); background: white; border: 0; border-radius: 18px; box-shadow: 0 30px 100px rgba(5,17,30,.35); }
.preview-dialog::backdrop { background: rgba(12,23,37,.7); backdrop-filter: blur(6px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 19px 22px; border-bottom: 1px solid var(--line); }
.dialog-head > div { display: grid; gap: 3px; }
.dialog-head span { color: var(--coral); font-size: 8px; letter-spacing: .1em; }
.dialog-head h2 { margin: 0; font-size: 17px; }
.dialog-head .dialog-close { display: grid; width: 34px; height: 34px; place-items: center; color: #627084; background: #f1f4f7; border-radius: 50%; font-size: 20px; }
.preview-media { display: grid; min-height: 330px; place-items: center; overflow: hidden; color: white; background: #17293e; }
.preview-media video { width: 100%; max-height: 490px; }
.preview-media .cover-art { position: relative; width: 100%; min-height: 330px; }
.preview-media .cover-art strong { font-size: 42px; }
.preview-body { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 20px 22px; }
.preview-detail { padding: 14px; background: #f5f7fa; border-radius: 10px; }
.preview-detail span { color: #8491a1; font-size: 8px; }
.preview-detail strong { display: block; margin-top: 4px; font-size: 11px; }
.preview-long-copy { max-height: 220px; overflow: auto; white-space: pre-wrap; line-height: 1.75; }
.preview-dialog.is-topic { width: min(760px, calc(100vw - 32px)); }
.preview-dialog.is-topic .preview-media { display: none; }
.preview-dialog.is-topic .preview-body { grid-template-columns: 1fr 1fr; }
.topic-copy-block { grid-column: 1 / -1; padding: 18px; background: #fff8f5; border: 1px solid #f3d8cf; border-radius: 12px; }
.topic-copy-block > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.topic-copy-block > div > span:last-child { display: inline-flex; gap: 7px; }
.topic-copy-block span { color: #c94f37; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.topic-copy-block button { min-height: 32px; padding: 0 11px; color: #8d3b2a; background: white; border: 1px solid #efc7bc; border-radius: 8px; font-size: 10px; font-weight: 750; }
.topic-copy-block p { margin: 0; color: #2e3b4c; font-size: 13px; line-height: 1.85; white-space: pre-wrap; }
.topic-copy-block.is-pending { background: #f6f8fa; border-color: #dce2e8; }
.topic-copy-block.is-pending span { color: #667486; }
.topic-copy-block.is-pending p { color: #536173; }
.preview-dialog.is-topic-composer { overflow: auto; background: white; }
.preview-dialog.is-topic-composer .preview-body { display: block; }
.topic-copy-composer { display: grid; gap: 14px; }
.topic-brief-row, .topic-style-field { display: grid; grid-template-columns: 82px minmax(0,1fr); align-items: start; gap: 12px; }
.topic-brief-row > span, .topic-style-field > span { padding-top: 3px; color: #5f6c7d; font-size: 10px; font-weight: 700; }
.topic-brief-row strong { color: #2f4054; font-size: 12px; font-weight: 650; line-height: 1.65; }
.topic-brief-project { padding: 12px 14px; background: #f8fafc; border: 1px solid var(--line-soft); border-radius: 10px; }
.topic-brief-project p { max-height: 168px; margin: 0; overflow: auto; color: #405166; font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.topic-style-field { align-items: center; }
.topic-style-field > span { padding-top: 0; }
.topic-style-field select { width: min(240px,100%); min-height: 42px; padding: 0 34px 0 12px; color: #23354a; background: #fbfcfd; border: 1px solid #d8dfe7; border-radius: 9px; font: inherit; font-size: 12px; }
.topic-requirements-field { display: grid; gap: 6px; }
.topic-requirements-field textarea { width: 100%; min-height: 134px; resize: vertical; padding: 12px; color: #23354a; background: #fbfcfd; border: 1px solid #d8dfe7; border-radius: 9px; font: inherit; font-size: 12px; line-height: 1.7; }
.topic-requirements-field textarea:focus, .topic-style-field select:focus { outline: 0; background: white; border-color: #85a4d0; box-shadow: 0 0 0 3px rgba(76,118,231,.09); }
.topic-requirements-field textarea::placeholder { color: #a9b3bf; }
.topic-requirements-field small { color: #8995a4; font-size: 9px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 0 22px 22px; }
.dialog-actions .button[hidden] { display: none; }

@media (max-width: 1180px) {
  .studio-header { gap: 16px; padding-right: 22px; padding-left: 22px; }
  .header-context { flex: 1 1 auto; }
  .studio-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); justify-content: stretch; height: auto; padding: 6px 9px; gap: 3px; overflow: visible; }
  .studio-nav button { min-width: 0; max-width: none; min-height: 48px; padding: 6px; }
  .reference-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .material-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .plaza-hero { grid-template-columns: 1fr 330px; padding: 40px; }
  .private-badge, .connection-state { display: none; }
  .account-summary-copy { max-width: 130px; }
  .persona-brief { grid-template-columns: minmax(210px,.8fr) minmax(280px,1.2fr); }
  .persona-recommendation { grid-column: 1 / -1; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; padding: 13px 0 0; border-top: 1px solid #efd7cf; border-left: 0; }
}

@media (min-width: 641px) and (max-width: 1100px) {
  .studio-page[data-view=plaza] .section-heading:has(.plaza-tools) { flex-direction: column; align-items: stretch; gap: 16px; }
  .studio-page[data-view=plaza] .section-heading > div:first-child { min-width: 0; }
  .plaza-tools { display: grid; grid-template-columns: minmax(0,1fr) minmax(120px,150px) minmax(130px,160px); width: 100%; }
  .plaza-tools .search-field { width: 100%; min-width: 0; }
  .plaza-tools select { width: 100%; min-width: 0; }
}

@media (max-width: 900px) {
  .studio-header { gap: 14px; padding: 0 22px; }
  .studio-brand { min-width: auto; }
  .studio-brand small { display: none; }
  .business-picker { grid-template-columns: minmax(120px,210px); }
  .business-picker span { display: none; }
  .account-summary-copy small, .demo-data-badge { display: none; }
  .account-summary-copy { min-width: 64px; max-width: 94px; }
  .account-switch-trigger span { display: none; }
  .plaza-hero { grid-template-columns: 1fr; }
  .hero-board { display: none; }
  .profile-layout, .production-layout { grid-template-columns: 1fr; }
  .production-summary { position: static; }
  .profile-images { grid-row: 2; }
  .form-actions { grid-row: 3; }
  .script-workspace { grid-template-columns: 1fr; }
  .reference-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .material-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .script-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .material-upload { grid-template-columns: 1fr auto; }
  .material-upload .compact-field { grid-column: 1; }
  .capability-hero { grid-template-columns: 1fr; gap: 28px; min-height: auto; padding: 40px; }
  .capability-pipeline { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .capability-pipeline li { grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-content: start; min-height: 142px; padding: 11px; }
  .capability-pipeline li > span { grid-row: auto; width: 32px; height: 32px; margin-bottom: 13px; }
  .capability-pipeline strong { align-self: auto; }
  .capability-pipeline small { margin-top: 4px; line-height: 1.5; }
  .capability-heading { align-items: flex-start; flex-direction: column; }
  .capability-filters { justify-content: flex-start; }
  .capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .capability-loop { grid-template-columns: 1fr; gap: 24px; }
  .capability-loop ol { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .capability-loop li:not(:last-child)::after { display: none; }
  .demo-step-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .demo-step:not(:last-child)::after { display: none; }
  .demo-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
  :root { font-size: 14px; }
  .studio-header { height: 64px; gap: 8px; padding: 0 10px; }
  .brand-mark { width: 34px; height: 34px; }
  .studio-brand strong { font-size: 14px; }
  .header-context { flex: 1; gap: 6px; }
  .account-summary { flex: 1 1 104px; gap: 6px; padding: 3px; }
  .account-avatar { width: 30px; height: 30px; border-radius: 8px; }
  .account-summary-copy { min-width: 0; max-width: 78px; }
  .account-summary-copy strong { font-size: 9px; }
  .account-switch-trigger { min-width: 34px; min-height: 34px; justify-content: center; padding: 5px; }
  .account-switch-menu { position: fixed; top: 70px; right: 10px; left: 10px; width: auto; max-height: calc(100vh - 82px); }
  .account-switch-head { padding: 13px 14px; }
  .account-switch-head span { max-width: 230px; line-height: 1.5; }
  .account-switch-list { grid-template-columns: 1fr; padding: 10px; }
  .account-switch-card { min-height: 126px; }
  .business-picker { flex: 1 1 90px; width: auto; grid-template-columns: minmax(0,1fr); height: 37px; padding: 0 7px; }
  .business-picker select { width: 100%; font-size: 10px; }
  .header-actions .button { width: 36px; min-height: 36px; padding: 0; font-size: 0; border-radius: 9px; }
  .header-actions .button span { font-size: 19px; }
  .studio-nav { height: auto; padding: 4px; gap: 2px; }
  .studio-nav button { min-width: 0; min-height: 52px; flex-direction: column; gap: 3px; padding: 4px 3px; font-size: 10px; }
  .studio-nav button svg { width: 16px; height: 16px; }
  .studio-nav button[aria-current="page"]::after { right: 9px; bottom: 1px; left: 9px; }
  .studio-nav em { position: absolute; top: 4px; right: 8px; min-width: 15px; height: 15px; font-size: 7px; }
  .studio-main { width: calc(100% - 28px); padding: 18px 0 70px; }
  .studio-notice { top: 136px; right: 14px; }
  .plaza-hero { min-height: auto; padding: 30px 24px; border-radius: 18px; }
  .hero-copy h1 { margin: 14px 0; font-size: 34px; line-height: 1.2; }
  .hero-copy p { font-size: 11px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-actions .button { min-width: 0; padding: 9px; font-size: 10px; }
  .persona-brief { grid-template-columns: 1fr; gap: 16px; padding: 17px; }
  .persona-recommendation { grid-column: auto; grid-template-columns: 1fr; align-items: start; padding: 14px 0 0; }
  .persona-recommendation .button { width: 100%; min-height: 44px; }
  .persona-profile-guide { align-items: flex-start; flex-wrap: wrap; }
  .persona-profile-guide .text-button { width: 100%; margin: 2px 0 0; text-align: left; }
  .section-heading, .page-heading { display: block; }
  .section-heading { margin-top: 31px; }
  .section-heading h2, .page-heading h1 { font-size: 22px; }
  .page-heading { min-height: 0; padding: 8px 1px 20px; }
  .page-heading > .button, .page-heading > .completion, .stepper { margin-top: 16px; }
  .completion i { width: 100%; }
  .plaza-tools { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; }
  .search-field { min-width: 0; width: 100%; grid-column: 1 / -1; }
  .plaza-tools select { width: 100%; }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .filter-row button { min-height: 44px; white-space: nowrap; }
  .reference-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .topic-row button { min-height: 54px; grid-template-columns: 32px minmax(0,1fr) auto; gap: 7px; padding: 10px 13px; }
  .topic-title { font-size: 12px; }
  .topic-title em { display: table; margin: 4px 0 0; }
  .topic-copy-status { padding: 3px 6px; font-size: 8px; }
  .reference-info { padding: 11px; }
  .reference-info h3 { font-size: 11px; }
  .cover-art { padding: 15px; }
  .cover-art strong { right: 14px; bottom: 20px; left: 14px; font-size: 18px; }
  .reference-actions { display: grid; }
  .reference-actions button, .material-actions button, .history-actions button, .history-actions a, .text-button, .editor-tools button, .reference-summary button, .no-reference button, .dialog-head .dialog-close { min-height: 44px; }
  .play-button { width: 44px; height: 44px; }
  .field input, .field select { min-height: 44px; }
  .reference-meta, .reference-tags span, .material-info span, .script-foot, .history-meta, .profile-images > p, .field small, .provider-note small, .submit-help { font-size: 10px; }
  .material-info strong, .field > span, .provider-note strong, .history-detail summary { font-size: 11px; }
  .panel { border-radius: 14px; }
  .profile-layout { gap: 14px; }
  .profile-fields .form-grid { padding: 18px; }
  .profile-image select { min-height: 44px; font-size: 10px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .span-2 { grid-column: 1; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .button { width: 100%; }
  .material-upload { grid-template-columns: 1fr; gap: 14px; }
  .material-upload .compact-field { grid-column: auto; }
  .file-button { width: 100%; }
  .library-toolbar { align-items: stretch; flex-direction: column; }
  .history-filter-selects { flex-wrap: wrap; }
  .history-filter-selects label { flex: 1; min-width: 120px; }
  .history-filter-selects select { width: 100%; min-height: 44px; font-size: 10px; }
  .material-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .script-workspace { gap: 14px; }
  .script-body { min-height: 350px; }
  .script-list { grid-template-columns: 1fr; }
  .mode-grid { grid-template-columns: 1fr; padding: 14px; }
  .mode-card { grid-template-columns: 90px minmax(0,1fr); }
  .mode-visual { width: 90px; }
  .production-content > :not(.panel-heading), .script-brief > .field, .script-brief > .form-grid, .reference-summary, .script-brief > .button { margin-right: 16px; margin-left: 16px; }
  .production-materials { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .history-overview { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .history-card { grid-template-columns: 68px minmax(0,1fr); gap: 12px; }
  .history-thumb { width: 68px; }
  .history-actions { grid-column: 1 / -1; }
  .history-actions button, .history-actions a { flex: 1; text-align: center; }
  .job-production-flow ol { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 5px; }
  .worker-state { display: grid; }
  .provider-quote dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .history-output { width: 100%; }
  .history-detail summary { min-height: 44px; padding-top: 10px; }
  .history-detail dl { grid-template-columns: 1fr; }
  .history-detail dt, .history-detail dd, .record-script pre, .record-block li, .record-script > strong, .record-block > strong { font-size: 10px; }
  .studio-nav .capabilities-nav .preview-badge { top: 2px; right: 2px; }
  .capability-hero { gap: 23px; padding: 28px 22px; border-radius: 18px; }
  .capability-hero-copy h1 { margin: 17px 0 13px; font-size: 32px; line-height: 1.2; }
  .capability-hero-copy > p { font-size: 11px; line-height: 1.8; }
  .capability-hero-tags { margin-top: 20px; }
  .capability-hero-tags span { font-size: 8px; }
  .capability-pipeline { grid-template-columns: 1fr; padding: 11px; }
  .capability-pipeline li { grid-template-columns: 37px minmax(0,1fr); grid-template-rows: auto auto; min-height: 60px; }
  .capability-pipeline li > span { grid-row: 1 / 3; width: 32px; height: 32px; margin: 0; }
  .concept-disclosure { grid-template-columns: 1fr; gap: 8px; padding: 13px; }
  .concept-disclosure strong { white-space: normal; }
  .concept-disclosure span { padding: 8px 0 0; border-top: 1px solid #edcec5; border-left: 0; }
  .capability-heading { display: flex; gap: 15px; }
  .capability-filters { width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .capability-grid { grid-template-columns: 1fr; gap: 12px; }
  .capability-card { min-height: 0; padding: 19px; }
  .capability-card > h3 { font-size: 17px; }
  .capability-card > p { min-height: 0; font-size: 10px; }
  .capability-open { min-height: 44px; }
  .capability-loop { gap: 20px; padding: 25px 21px; border-radius: 16px; }
  .capability-loop h2 { font-size: 19px; }
  .capability-loop ol { grid-template-columns: 1fr; }
  .capability-loop li { min-height: 0; }
  .preview-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); border-radius: 14px; }
  .preview-media { min-height: 260px; }
  .preview-body { grid-template-columns: 1fr; gap: 9px; }
  .preview-dialog.is-topic .preview-body { grid-template-columns: 1fr; }
  .preview-dialog.is-topic-composer { overflow-y: auto; }
  .preview-dialog.is-topic-composer .dialog-head > div { display: grid; gap: 3px; }
  .topic-brief-row, .topic-style-field { grid-template-columns: 1fr; gap: 4px; }
  .topic-brief-row > span, .topic-style-field > span { padding-top: 0; }
  .topic-brief-project p { max-height: 210px; font-size: 11px; }
  .topic-style-field select { width: 100%; min-height: 44px; }
  .topic-requirements-field textarea { min-height: 150px; }
  .preview-dialog.is-topic-composer .dialog-actions .button { width: 100%; }
  .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dialog-close-button { width: 44px; height: 44px; }
  .capability-dialog-note { align-items: flex-start; flex-direction: column; gap: 7px; padding: 11px 15px; }
  .capability-demo-body { padding: 15px; }
  .capability-demo-intro { grid-template-columns: 1fr; align-items: start; gap: 10px; }
  .capability-demo-meta { justify-content: flex-start; }
  .capability-demo-head { align-items: flex-start; flex-direction: column; padding: 11px 13px; }
  .capability-demo-stage { min-height: 0; padding: 12px; }
  .demo-step-list, .demo-touch-flow { grid-template-columns: 1fr; }
  .demo-step { min-height: 0; }
  .demo-poster-grid, .demo-version-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .demo-poster { min-height: 210px; }
  .demo-store-grid, .demo-agents { grid-template-columns: 1fr; }
  .demo-channel { grid-template-columns: 36px minmax(0,1fr); }
  .demo-channel > em { grid-column: 2; justify-self: start; }
  .demo-bar { grid-template-columns: 64px minmax(0,1fr) 30px; }
  .demo-touch-flow > b { justify-self: center; transform: rotate(90deg); }
}

@media (max-width: 390px) {
  .provider-quote dl { grid-template-columns: 1fr; }
  .studio-brand span { display: none; }
  .header-context { min-width: 0; }
  .account-summary-copy { display: none; }
  .account-summary { flex: 0 0 auto; }
  .business-picker { max-width: 120px; }
  .reference-grid { grid-template-columns: 1fr 1fr; }
  .reference-meta { display: grid; }
  .production-materials { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .capability-card-foot { align-items: stretch; flex-direction: column; }
  .capability-open { width: 100%; }
  .demo-poster-grid, .demo-version-grid, .demo-kpi-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .capability-tool-tabs { top: 82px; }
  .capability-launch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .capability-launch-card:last-child { grid-column: 1 / -1; min-height: 300px; }
  .capability-foundation { grid-template-columns: 1fr; gap: 23px; }
  .capability-foundation ol { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .breakdown-workspace, .matrix-workspace { grid-template-columns: 1fr; }
  .breakdown-input-panel, .matrix-calendar { position: static; }
  .platform-account-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-heading { align-items: flex-start; flex-direction: column; }
  .dashboard-controls { justify-content: flex-start; }
  .dashboard-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-layout, .dashboard-layout.lower { grid-template-columns: 1fr; }
  .dashboard-trend, .dashboard-funnel { min-height: 0; }
  .insight-panel { min-height: 280px; }
}

@media (max-width: 640px) {
  .capability-tool-tabs { top: 75px; display: flex; margin: -3px -2px 16px; padding: 5px; overflow-x: auto; overflow-y: hidden; scroll-padding-inline: 5px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .capability-tool-tabs::-webkit-scrollbar { display: none; }
  .capability-tool-tabs button { min-width: 138px; min-height: 50px; flex: 0 0 138px; padding: 7px 11px; scroll-snap-align: start; }
  .capability-launch-grid { grid-template-columns: 1fr; gap: 12px; }
  .capability-launch-card, .capability-launch-card:last-child { grid-column: auto; min-height: 0; padding: 21px; }
  .launch-card-icon { margin-bottom: 18px; }
  .capability-launch-card h2 { font-size: 19px; }
  .capability-launch-card > button { min-height: 46px; }
  .capability-foundation { gap: 19px; margin-top: 14px; padding: 25px 21px; border-radius: 15px; }
  .capability-foundation h2 { font-size: 18px; }
  .capability-foundation ol { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .capability-foundation li { min-height: 102px; }
  .tool-page-heading { display: block; min-height: 0; padding: 13px 1px 21px; }
  .tool-page-heading h1 { font-size: 27px; }
  .tool-page-heading p { font-size: 10px; }
  .tool-page-heading > .demo-mode-badge { margin-top: 14px; }
  .breakdown-workspace { gap: 13px; margin-top: 14px; }
  .breakdown-input-panel .panel-heading, .breakdown-report-panel .panel-heading, .matrix-composer .panel-heading, .matrix-calendar .panel-heading, .dashboard-layout .panel-heading, .dashboard-table-panel .panel-heading { min-height: 58px; padding: 0 16px; }
  .breakdown-dropzone { min-height: 170px; margin: 16px; }
  .breakdown-input-panel > .field { margin-right: 16px; margin-left: 16px; }
  .url-input-row { grid-template-columns: 1fr; }
  .url-input-row .button { width: 100%; min-height: 44px; }
  .breakdown-source-card { margin-right: 16px; margin-left: 16px; }
  .breakdown-source-card:has(.breakdown-source-meta) { grid-template-columns: 92px minmax(0,1fr) auto; }
  .breakdown-preview, .breakdown-preview-icon { width: 92px; }
  .breakdown-actions { display: grid; grid-template-columns: 1fr 1fr; padding-right: 16px; padding-left: 16px; }
  .breakdown-actions .button { width: 100%; min-width: 0; }
  .breakdown-report-empty, .report-empty, .breakdown-progress { min-height: 330px; padding: 28px 20px; }
  .breakdown-report-content { padding: 14px; }
  .breakdown-report-summary { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
  .breakdown-report-summary em { justify-self: start; }
  .report-grid { grid-template-columns: 1fr; }
  .breakdown-report-actions { align-items: stretch; flex-direction: column; }
  .breakdown-report-actions .button { width: 100%; }
  .platform-account-section { margin-top: 15px; padding: 15px; }
  .platform-account-section .compact-heading { display: flex; align-items: flex-start; gap: 12px; }
  .platform-account-section .compact-heading > div:first-child { min-width: 0; }
  .platform-account-section .compact-heading > .button { flex: 0 0 auto; }
  .platform-account-grid { grid-template-columns: 1fr; }
  .platform-account-card { min-height: 88px; }
  .matrix-workspace { gap: 13px; margin-top: 13px; }
  .matrix-form { grid-template-columns: 1fr; gap: 13px; padding: 16px; }
  .matrix-form .span-2 { grid-column: auto; }
  .matrix-composer-actions { align-items: stretch; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
  .matrix-composer-actions .button { width: 100%; }
  .matrix-queue { min-height: 240px; padding: 11px; }
  .matrix-queue-empty { min-height: 215px; }
  .dashboard-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; margin-top: 16px; }
  .dashboard-controls .demo-mode-badge { grid-column: 1 / -1; }
  .dashboard-controls select { width: 100%; min-height: 44px; }
  .dashboard-update-row { align-items: flex-start; flex-direction: column; }
  .dashboard-update-row small { text-align: left; }
  .dashboard-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .dashboard-kpi { padding: 14px; }
  .dashboard-kpi > strong { font-size: 22px; }
  .trend-chart { min-height: 235px; padding: 12px 10px 14px; overflow-x: auto; }
  .trend-chart-svg, .trend-chart svg { min-width: 520px; min-height: 205px; height: 205px; }
  .dashboard-table-panel { margin-top: 11px; }
  .dashboard-table th, .dashboard-table td, .dashboard-table-wrap th, .dashboard-table-wrap td { padding: 12px 14px; }
  .dashboard-top-list { padding: 11px; }
  .top-content-item { grid-template-columns: 25px 32px minmax(0,1fr); }
  .top-content-item > em { grid-column: 3; justify-self: start; }
  .insight-panel { min-height: 265px; padding: 21px; }
}

@media (max-width: 390px) {
  .capability-tool-tabs button { min-width: 126px; flex-basis: 126px; }
  .capability-tool-tabs button span { font-size: 10px; }
  .capability-foundation ol { grid-template-columns: 1fr; }
  .capability-foundation li { min-height: 0; }
  .breakdown-actions { grid-template-columns: 1fr; }
  .breakdown-source-card:has(.breakdown-source-meta) { grid-template-columns: 1fr; }
  .breakdown-preview, .breakdown-preview-icon { width: 100%; }
  .breakdown-source-card:has(.breakdown-source-meta) > .text-button { width: 100%; min-height: 40px; }
  .platform-account-section .compact-heading { display: grid; }
  .platform-account-section .compact-heading > .button { width: 100%; }
  .matrix-queue-item { grid-template-columns: 42px 28px minmax(0,1fr); }
  .matrix-queue-actions { grid-column: 1 / -1; justify-items: stretch; }
  .matrix-queue-actions button { width: 100%; min-height: 40px; }
  .dashboard-controls { grid-template-columns: 1fr; }
  .dashboard-controls .demo-mode-badge { grid-column: auto; }
  .dashboard-kpis { grid-template-columns: 1fr; }
  .top-content-item { grid-template-columns: 25px minmax(0,1fr); }
  .top-content-item .platform-logo { display: none; }
  .top-content-item > em { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto!important; transition: none!important; animation: none!important; }
}

.client-chat-toggle { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; min-width: 112px; height: 52px; align-items: center; justify-content: center; gap: 9px; padding: 0 17px; color: white; background: var(--navy); border: 0; border-radius: 999px; box-shadow: 0 16px 42px rgba(8,24,48,.28); cursor: pointer; }
.client-chat-toggle > span { display: grid; width: 27px; height: 27px; place-items: center; color: var(--navy); background: white; border-radius: 50%; font-size: 11px; font-weight: 850; }
.client-chat-toggle > strong { font-size: 12px; }
.client-chat-toggle > em { position: absolute; top: -4px; right: -3px; display: grid; min-width: 21px; height: 21px; place-items: center; padding: 0 5px; color: white; background: var(--coral); border: 2px solid white; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 800; }
.client-chat-toggle > em[hidden] { display: none; }
.client-chat-panel { position: fixed; right: 24px; bottom: 88px; z-index: 59; width: min(680px,calc(100vw - 48px)); height: min(650px,calc(100vh - 120px)); overflow: hidden; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 28px 80px rgba(8,24,48,.25); }
.client-chat-head { display: flex; height: 68px; align-items: center; justify-content: space-between; padding: 0 18px; color: white; background: var(--navy); }
.client-chat-head small { color: rgba(255,255,255,.62); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.client-chat-head h2 { margin: 3px 0 0; color: white; font-size: 17px; }
.client-chat-head button { display: grid; width: 34px; height: 34px; place-items: center; color: white; background: rgba(255,255,255,.1); border: 0; border-radius: 50%; font-size: 22px; cursor: pointer; }
.client-chat-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); height: calc(100% - 68px); }
.client-chat-sessions { overflow-y: auto; padding: 9px; background: #f6f8fa; border-right: 1px solid var(--line); }
.client-chat-session { display: grid; width: 100%; gap: 5px; margin-bottom: 6px; padding: 12px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
.client-chat-session.is-active { background: white; border-color: #dbe2e9; box-shadow: 0 7px 20px rgba(20,40,65,.07); }
.client-chat-session strong { font-size: 11px; }
.client-chat-session small { overflow: hidden; color: #738194; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.client-chat-session em { color: var(--coral); font-size: 8px; font-style: normal; font-weight: 800; }
.client-chat-thread { display: grid; min-width: 0; grid-template-rows: minmax(0,1fr) auto auto; }
.client-chat-messages { overflow-y: auto; padding: 18px; background: #fbfcfd; }
.client-chat-empty { margin: 70px 20px; color: #8994a2; font-size: 11px; text-align: center; }
.client-chat-message { display: flex; margin-bottom: 12px; }
.client-chat-message.is-owner { justify-content: flex-end; }
.client-chat-message div { max-width: 82%; padding: 10px 12px; background: white; border: 1px solid #e0e6ec; border-radius: 4px 13px 13px 13px; box-shadow: 0 4px 14px rgba(20,40,65,.04); }
.client-chat-message.is-owner div { color: white; background: #1f3b59; border-color: #1f3b59; border-radius: 13px 4px 13px 13px; }
.client-chat-message.is-assistant div { color: #1f3b59; background: #eaf3fb; border-color: #cbddeb; }
.client-chat-message.is-assistant small { display: block; margin-bottom: 5px; color: #42617b; font-size: 9px; font-weight: 800; }
.client-chat-message p { margin: 0; font-size: 11px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.client-chat-message time { display: block; margin-top: 5px; color: #8995a3; font-size: 8px; }
.client-chat-message.is-owner time { color: rgba(255,255,255,.62); }
.client-chat-message.is-assistant time { color: #668197; }
.client-chat-reply-status { margin: 0; padding: 9px 14px; color: #3f6380; background: #eef6fc; border-top: 1px solid #d6e7f2; font-size: 10px; }
.client-chat-reply-status.is-error { color: #9d493a; background: #fff4ef; border-color: #f2d8cc; }
.client-chat-form { padding: 12px; background: white; border-top: 1px solid var(--line); }
.client-chat-form textarea { width: 100%; min-height: 64px; resize: none; padding: 10px 11px; border: 1px solid #dbe2e9; border-radius: 9px; font: inherit; font-size: 11px; line-height: 1.5; }
.client-chat-form > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.client-chat-form small { color: #7d8997; font-size: 8px; }
.client-chat-form .button { min-width: 74px; min-height: 35px; }

@media (max-width: 640px) {
  .client-chat-toggle { right: 14px; bottom: 14px; min-width: 52px; padding: 0 12px; }
  .client-chat-toggle > strong { display: none; }
  .client-chat-panel { right: 10px; bottom: 76px; width: calc(100vw - 20px); height: min(700px,calc(100vh - 92px)); }
  .client-chat-layout { grid-template-columns: 1fr; }
  .client-chat-sessions { display: flex; min-height: 70px; max-height: 92px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .client-chat-session { min-width: 150px; margin: 0 6px 0 0; }
}

/* Public video references */
.social-import-panel{margin:20px 0 24px;padding:22px;border:1px solid #d7e5df;border-radius:16px;background:#f4f8f6}
.social-import-heading{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:16px}
.social-import-heading h3{font-size:17px;margin:0 0 6px;color:#203d32}
.social-import-heading p,.social-import-message{margin:0;color:#60736b;font-size:12px;line-height:1.7}
.social-import-label{font-size:11px;background:#e1ece6;color:#365e4a;border-radius:20px;padding:5px 10px;white-space:nowrap}
.social-import-form{display:flex;gap:10px;align-items:stretch}
.social-import-form input{min-width:0;flex:1;border:1px solid #cbdad1;border-radius:9px;padding:13px 14px;background:white;color:#253b31;font:inherit;font-size:13px}
.social-import-form input:focus{outline:2px solid #4b7860;outline-offset:2px}
.social-import-form button{white-space:nowrap}
.social-import-download-choice{display:flex;align-items:center;gap:8px;margin-top:12px;color:#60736b;font-size:12px;cursor:pointer}
.social-import-download-choice input{width:16px;height:16px;margin:0;accent-color:#f66545}
.social-import-message{margin-top:10px}
.social-import-results:empty{display:none}
.social-import-result{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid #dce6e0;margin-top:10px}
.social-import-result>div{min-width:0;flex:1}
.social-import-result strong{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.social-import-result span{font-size:11px;color:#60736b;display:block;margin-top:3px}
.social-import-result.is-error span{color:#ad482f}
.social-import-spinner{width:16px;height:16px;border:2px solid #d3dfd7;border-top-color:#3b7356;border-radius:50%;animation:social-import-spin 1s linear infinite}
@keyframes social-import-spin{to{transform:rotate(360deg)}}
@media(max-width:600px){.social-import-panel{padding:16px}.social-import-heading{display:block}.social-import-label{display:none}.social-import-form{flex-direction:column}.social-import-form button{width:100%}.social-import-result{flex-wrap:wrap}.social-import-result>div{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.social-import-spinner{animation:none}}

.atlas-image-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.atlas-image-grid .production-materials{max-height:300px;overflow:auto}.atlas-work{margin:16px 0;padding:24px}.atlas-work video{display:block;width:100%;max-width:480px;max-height:560px;margin:16px 0;background:#101827;border-radius:12px}.atlas-image-grid input[type=file]{width:100%}@media(max-width:640px){.atlas-image-grid{grid-template-columns:1fr}}

.atlas-image-grid .empty-hint{grid-column:1/-1;margin:12px 0;color:#64748b}.production-summary>p{padding:0 20px;font-size:14px;line-height:1.6}.atlas-image-grid .production-material img{object-fit:cover}
.portrait-badge { position: absolute; top: 4px; left: 4px; max-width: calc(100% - 28px); overflow: hidden; padding: 3px 5px; color: #734c20; background: #fff1d9; border-radius: 5px; font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.portrait-badge.is-valid { color: #175e46; background: #e0f4e9; }
.portrait-badge.is-expired, .portrait-badge.is-mismatch, .portrait-badge.is-invalid { color: #933c30; background: #ffe9e3; }
.portrait-authorization { margin: 10px 0 0; color: #64748b; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.portrait-authorization.is-valid { color: #246a50; }
.portrait-authorization.is-pending, .portrait-authorization.is-expired, .portrait-authorization.is-mismatch, .portrait-authorization.is-invalid { color: #9c4c34; }
.remix-material-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(135px,1fr)); gap: 10px; max-height: 420px; overflow: auto; }
.remix-material-option { display: grid; position: relative; align-content: start; gap: 6px; min-width: 0; padding: 9px; border: 2px solid #e3eaf0; border-radius: 10px; cursor: pointer; }
.remix-material-option:has(input:checked) { border-color: var(--coral); background: #fff7f3; }
.remix-material-option input { position: absolute; top: 14px; right: 14px; z-index: 1; width: 20px; height: 20px; }
.remix-material-preview { height: 96px; overflow: hidden; border-radius: 6px; background: #edf2f6; }
.remix-material-preview img, .remix-material-preview video { width: 100%; height: 100%; object-fit: cover; }
.remix-material-option strong, .remix-material-option small { overflow-wrap: anywhere; }
.remix-material-option strong { font-size: 12px; line-height: 1.5; }
.remix-material-option small { color: #64748b; font-size: 11px; line-height: 1.5; }
.remix-selected-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.remix-selected-list li { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: start; gap: 8px; padding: 12px; background: #f5f8fb; border-radius: 8px; }
.remix-selected-list li > b { padding-top: 4px; color: #45627f; }
.remix-selected-list strong, .remix-selected-list small { display: block; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; }
.remix-selected-list small { color: #64748b; font-size: 11px; }
.remix-order-actions { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 2; }
.remix-order-actions button { min-height: 36px; padding: 6px 10px; color: #45627f; background: white; border: 1px solid #dbe3ea; border-radius: 6px; font-size: 11px; }
.remix-order-actions button:disabled { opacity: .4; cursor: default; }
.studio-page[data-view=remix] > .page-heading > div { display: block; }
@media (max-width: 640px) { .remix-material-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .remix-order-actions button { min-height: 44px; } .editor-tools { flex-wrap: wrap; } }

.studio-page[data-view=production]>.page-heading>div{display:block;width:100%}.studio-page[data-view=production]>.page-heading h1{margin-bottom:10px}

.generation-workspace, .generation-workspace .production-main, .generation-panel-body, .generation-panel-body > * { min-width: 0; }
.generation-workspace .generation-step { padding-bottom: 0; }
.generation-step .panel-heading { min-height: 68px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.generation-step .panel-heading > div:first-child { min-width: 0; }
.generation-step .step-token { flex: 0 0 28px; width: 28px; height: 28px; }
.generation-step .panel-heading h2 { font-size: 15px; line-height: 1.5; }
.generation-step.production-content > .generation-panel-body { margin: 0; padding: 22px; }
.generation-help { margin: 0 0 18px; color: var(--ink-soft); font-size: 12px; line-height: 1.75; }
.generation-count { padding: 4px 9px; color: #52677d!important; background: #f0f4f8; border-radius: 999px; font-size: 11px!important; font-variant-numeric: tabular-nums; }
.generation-workspace .field > span { font-size: 12px; }
.generation-workspace .field input, .generation-workspace .field select, .generation-workspace .field textarea { min-width: 0; font-size: 14px; }
.generation-workspace .field small { font-size: 11px; line-height: 1.6; }
.generation-workspace .text-button { min-height: 40px; }
.generation-workspace .production-summary > p { margin: 0; padding: 18px 20px; color: var(--ink-soft); font-size: 12px; line-height: 1.75; }
.generation-workspace .production-summary .summary-head { gap: 12px; min-height: 66px; }
.generation-workspace .summary-head strong { max-width: 58%; font-size: 11px; text-align: right; }
.generation-workspace .production-summary li { font-size: 12px; }
.generation-workspace .production-summary li strong { font-size: 11px; }
.generation-summary-note { margin: 0 20px; padding: 14px; background: #f4f7fa; border: 1px solid var(--line-soft); border-radius: 10px; }
.generation-summary-note strong { color: #42586f; font-size: 12px; }
.generation-summary-note p { margin: 6px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.75; }
.generation-workspace .production-summary > .generation-policy { color: var(--muted); font-size: 11px; }
.generation-workspace .production-summary > .generation-feedback { margin: 0 20px 18px; padding: 10px 12px; color: #a24b38; background: #fff2ed; border: 1px solid #f3d8ce; border-radius: 8px; font-size: 12px; }
.generation-workspace .production-summary > .generation-feedback[data-tone=hint] { color: #61738a; background: #f3f6f9; border-color: var(--line-soft); }
.generation-feedback:empty { display: none; }
.generation-image-heading { display: flex; align-items: baseline; justify-content: space-between; min-width: 0; gap: 12px; margin: 0 0 10px; }
.generation-image-heading h3 { flex: 0 0 auto; margin: 0; font-size: 13px; }
.generation-selection { min-width: 0; max-width: 62%; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.generation-selection[data-selected=true] { color: #2d8268; }
.generation-upload { position: relative; display: grid; align-content: center; justify-items: center; gap: 7px; min-height: 136px; margin-bottom: 16px; padding: 18px 12px; color: #52718f; background: #f8fafc; border: 1px dashed #becddb; border-radius: 12px; text-align: center; cursor: pointer; transition: background .15s ease,border-color .15s ease; }
.generation-upload:hover { color: #2f5b7b; background: #f0f5fa; border-color: #819db8; }
.generation-upload:focus-within { outline: 3px solid rgba(76,118,231,.32); outline-offset: 3px; background: #f0f5fa; border-color: #819db8; }
.generation-upload svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.generation-upload strong { font-size: 13px; }
.generation-upload small { color: var(--muted); font-size: 11px; }
.generation-upload[aria-busy=true] { opacity: .65; cursor: progress; }
.generation-workspace .atlas-image-grid { gap: 20px; align-items: start; }
.generation-workspace .atlas-image-grid > section { min-width: 0; }
.generation-workspace .production-materials { grid-template-columns: repeat(auto-fill,minmax(104px,1fr)); max-height: 332px; gap: 10px; padding: 2px; }
.generation-workspace .production-material { border-color: #e1e7ee; background: #eef2f7; }
.generation-workspace .production-material:has(input:checked) { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.generation-workspace .production-material input { width: 18px; height: 18px; top: 7px; right: 7px; }
.generation-workspace .production-material span { padding: 22px 7px 7px; font-size: 11px; }
.generation-workspace .portrait-badge { top: 7px; left: 6px; max-width: calc(100% - 34px); padding: 3px 5px; font-size: 10px; }
.generation-workspace .portrait-authorization { padding: 10px 12px; color: #61738a; background: #f4f7fa; border: 1px solid var(--line-soft); border-radius: 9px; font-size: 11px; }
.generation-workspace .portrait-authorization.is-valid { color: #246a50; background: #eff8f3; border-color: #d6eade; }
.generation-workspace .portrait-authorization.is-pending, .generation-workspace .portrait-authorization.is-expired, .generation-workspace .portrait-authorization.is-invalid, .generation-workspace .portrait-authorization.is-mismatch { color: #9c4c34; background: #fff5ef; border-color: #f1ddcc; }
.generation-workspace .empty-hint { margin: 0; padding: 16px; color: var(--muted); background: #f8fafc; border: 1px dashed var(--line); border-radius: 9px; font-size: 12px; line-height: 1.7; text-align: center; }
.remix-material-grid > .empty-state { padding: 30px 18px; }
.remix-material-option { border-color: var(--line); transition: border-color .15s ease,background .15s ease; }
.remix-material-option:hover { border-color: #aebed0; }
.remix-material-option:focus-within { outline: 3px solid rgba(76,118,231,.25); outline-offset: 1px; }
.remix-material-option:has(input:disabled) { cursor: default; opacity: .6; }
.remix-selected-list li > div { min-width: 0; }
.remix-selected-list li > b { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; color: #bd5137; background: #ffece5; border-radius: 7px; font-size: 12px; }
.remix-selected-list li.remix-selection-empty { display: flex; align-items: center; gap: 14px; padding: 22px 18px; background: #f8fafc; border: 1px dashed var(--line); }
.remix-selection-empty > span { flex: 0 0 38px; display: grid; width: 38px; height: 38px; place-items: center; color: #7891aa; background: #eaf0f6; border-radius: 10px; font-size: 19px; }
.remix-selection-empty p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.remix-order-actions button { min-height: 40px; }
.remix-material-option { grid-template-rows: auto 36px 34px; }
.remix-material-preview { height: auto; aspect-ratio: 4 / 3; }
.remix-material-option > strong, .remix-material-option > small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.remix-material-option > strong { height: 36px; }
.remix-material-option > small { height: 34px; }
.material-preview img, .material-preview video, .remix-material-preview img, .remix-material-preview video { object-fit: contain; }
.material-preview img, .material-preview video, .remix-material-preview img, .remix-material-preview video { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.generation-workspace .production-material img, .generation-workspace .production-material video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.generation-workspace .production-material > span, .generation-workspace .production-material > .portrait-badge { z-index: 1; pointer-events: none; }
.remix-material-preview { position: relative; }
.asset-preview-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px 20px; color: #7a8ea3; background: #edf2f7; font-style: normal; }
.asset-preview-fallback svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.asset-preview-fallback small { color: #7a8ea3; font-size: 10px; line-height: 1.5; }
.remix-source-details { margin-top: 3px; }
.remix-source-details summary { display: list-item; width: fit-content; min-height: 32px; padding: 6px 0; color: #60768d; font-size: 11px; cursor: pointer; }
.remix-source-details small { margin: 3px 0 6px; padding: 10px; color: var(--ink-soft); background: white; border: 1px solid var(--line-soft); border-radius: 7px; }
.history-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: start; }
.history-list > [role=status] { grid-column: 1 / -1; }
.history-list .atlas-work { min-width: 0; margin: 0; padding: 18px; }
.atlas-work .panel-heading { min-height: 0; align-items: flex-start; gap: 12px; padding: 0 0 12px; border: 0; }
.atlas-work .panel-heading h2 { min-width: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.atlas-work .panel-heading > span { flex: 0 0 auto; padding: 4px 8px; color: #47647d; background: #eef4f8; border-radius: 999px; font-size: 11px; }
.atlas-work .panel-heading > .history-status.is-complete { color: #23745b; background: #eaf7ef; }
.atlas-work .panel-heading > .history-status.is-active { color: #94691f; background: #fff5dd; }
.atlas-work .panel-heading > .history-status.is-attention { color: #a14e39; background: #fff0e9; }
.atlas-work > p { margin: 0 0 12px; color: var(--ink-soft); font-size: 12px; line-height: 1.75; overflow-wrap: anywhere; }
.history-list .atlas-work video { width: 100%; max-width: none; height: 320px; max-height: none; margin: 0 0 14px; object-fit: contain; background: var(--navy); border-radius: 10px; }
.atlas-work > .button { min-height: 42px; margin: 0 6px 10px 0; font-size: 12px; }
.atlas-work .history-detail { margin-top: 4px; border-top: 1px solid var(--line-soft); }
.atlas-work .history-detail summary { display: flex; align-items: center; min-height: 44px; padding: 8px 0; color: #4f6982; font-size: 12px; }
.atlas-work .history-detail summary::before { content: "+"; margin-right: 8px; color: #8a9caf; font-size: 16px; }
.atlas-work .history-detail[open] { padding-top: 0; }
.atlas-work .history-detail[open] summary::before { content: "−"; }
.atlas-work .history-detail dt, .atlas-work .history-detail dd { font-size: 11px; }
.atlas-work .history-detail > strong, .atlas-work .history-detail li, .atlas-work .history-detail pre { font-size: 12px; }
.atlas-work .history-detail ul { padding-left: 20px; }
@media (max-width: 700px) { .history-list { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .header-actions #sessionLoginButton { width: auto; min-width: 56px; min-height: 44px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
  .material-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .material-actions button { min-width: 0; min-height: 44px; padding: 7px 4px; font-size: 11px; white-space: nowrap; }
  .material-actions [data-preview-material], .material-actions:has(> button:nth-child(2):last-child) [data-add-remix] { grid-column: 1 / -1; }
  .capability-tool-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); top: 122px; overflow: visible; scroll-snap-type: none; }
  .capability-tool-tabs button { min-width: 0; min-height: 56px; width: 100%; flex: initial; padding: 8px 11px; }
  .capability-tool-tabs button span { font-size: 11px; }
  .capability-tool-tabs button small { font-size: 10px; }
  .remix-source-details summary { min-height: 40px; padding-top: 9px; }
  .generation-step.production-content > .generation-panel-body { padding: 16px; }
  .generation-step .panel-heading { gap: 10px; padding-right: 16px; padding-left: 16px; }
  .generation-step .panel-heading h2 { font-size: 14px; }
  .generation-workspace .text-button, .remix-order-actions button { min-height: 44px; }
  .generation-workspace .atlas-image-grid { gap: 22px; }
  .generation-workspace .production-materials { grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); }
  .generation-panel-body .form-grid { grid-template-columns: 1fr; }
  .generation-panel-body .span-2 { grid-column: auto; }
  .remix-selected-list li.remix-selection-empty { align-items: flex-start; padding: 18px 14px; }
  .history-list .atlas-work { padding: 16px; }
  .history-list .atlas-work video { height: 300px; }
}


.generation-mode-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0 0 24px; }
.generation-mode-tabs button { display: flex; min-width: 0; min-height: 90px; align-items: center; gap: 14px; padding: 18px 20px; color: #53677e; background: white; border: 1px solid var(--line); border-radius: 13px; text-align: left; transition: border-color .15s, background .15s; }
.generation-mode-tabs button > span:last-child { min-width: 0; }
.generation-mode-tabs button:hover { border-color: #e5b2a6; }
.generation-mode-tabs button[aria-selected="true"] { color: #8d3c2b; background: #fff5f1; border-color: #edac99; box-shadow: 0 2px 8px rgba(169,79,49,.05); }
.generation-mode-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; background: #f1f4f8; border-radius: 11px; font-size: 23px; }
.generation-mode-tabs button[aria-selected="true"] .generation-mode-icon { background: #ffdfd3; }
.generation-mode-tabs strong { display: block; font-size: 15px; }
.generation-mode-tabs small { display: block; margin-top: 5px; color: #788698; font-size: 11px; line-height: 1.5; }
.script-apply-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 7px; }
.script-version .script-apply-actions button { grid-row: auto; grid-column: auto; min-height: 40px; margin: 0; padding: 8px 10px; font-size: 11px; }
.script-applied-note { padding: 10px 12px; color: #356855; background: #edf7f1; border-radius: 8px; line-height: 1.7; overflow-wrap: anywhere; }
.script-applied-note[data-tone="warning"] { color: #984b30; background: #fff1e7; }
@media (max-width: 640px) {
  .generation-mode-tabs { gap: 8px; margin-bottom: 20px; }
  .generation-mode-tabs button { min-height: 114px; align-items: flex-start; flex-direction: column; gap: 10px; padding: 13px; }
  .generation-mode-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 8px; font-size: 20px; }
  .generation-mode-tabs strong { font-size: 14px; }
  .generation-mode-tabs small { margin-top: 4px; font-size: 11px; }
  .script-version .script-apply-actions button { min-height: 44px; }
}

.account-workspace,.account-identity{margin:18px auto;padding:18px 24px;max-width:1440px;background:var(--surface,#fff);border:1px solid #e6e8ed;border-radius:14px}.account-row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.account-row .field{flex:1;min-width:150px}.account-workspace p{font-size:13px;line-height:1.7}.account-identity{max-width:640px}.account-identity form{display:grid;gap:14px}.account-identity .account-row{justify-content:space-between;align-items:center}.account-admin-header,.account-admin-content,.account-status{max-width:1200px;margin:24px auto;padding:0 24px}.account-admin-content{display:grid;gap:20px}.account-panel{padding:24px;display:grid;gap:16px}.account-panel form{display:grid;gap:12px}.account-panel .account-row{display:flex}.account-panel pre{max-height:380px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}.account-panel video{max-width:100%;max-height:480px}.account-panel h2{font-size:20px}.account-status{white-space:pre-wrap;overflow-wrap:anywhere}.account-workspace [hidden],.account-identity [hidden],.account-admin-content [hidden],[hidden].account-admin-content{display:none!important}@media(max-width:600px){.account-workspace,.account-identity{margin:12px;padding:16px}.account-row{align-items:stretch;flex-direction:column}.account-row .field{width:100%;min-width:0}.account-admin-header,.account-admin-content,.account-status{padding:0 12px}.account-panel{padding:16px}.header-actions{flex-wrap:wrap}}
.header-actions .text-button{color:#eef3ff}.header-actions .text-button:hover{color:#ffffff;text-decoration:underline}.header-actions .text-button:focus-visible{outline:2px solid #ffd1bd;outline-offset:4px}

@media (max-width: 1180px) {
  .studio-header { display: grid; grid-template-columns: auto minmax(0,1fr); height: auto; min-height: 76px; gap: 10px 16px; padding-top: 12px; padding-bottom: 12px; }
  .header-actions { grid-column: 1 / -1; min-width: 0; margin-left: 0; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
  .header-context { min-width: 0; }
  .business-picker { min-width: 160px; }
}
@media (max-width: 640px) {
  .studio-header { grid-template-columns: minmax(0,1fr); padding: 12px 14px; }
  .studio-brand { min-width: 0; }
  .studio-brand span { display: grid; }
  .header-context { display: grid; grid-template-columns: minmax(0,1fr) minmax(160px,1fr); width: 100%; gap: 8px; }
  .account-summary { width: 100%; min-width: 0; min-height: 48px; }
  .account-summary-copy { display: grid; flex: 1; min-width: 0; max-width: none; }
  .account-summary-copy strong { font-size: 11px; }
  .account-switch-trigger { min-width: 44px; min-height: 44px; }
  .business-picker { width: 100%; min-width: 0; max-width: none; height: 48px; grid-template-columns: minmax(0,1fr); padding: 0 10px; }
  .business-picker select { width: 100%; min-width: 0; min-height: 44px; font-size: 13px; }
  .header-actions { justify-content: flex-start; }
  .header-actions .text-button { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; white-space: nowrap; }
  .header-actions .button { width: 44px; min-height: 44px; }
}

.breakdown-script{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.8}.breakdown-coverage{padding:12px 18px;background:#f5f7fa;border-radius:12px;color:#52647c}.breakdown-gap{color:#985326}.breakdown-history{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-height:260px;overflow:auto}.breakdown-report-panel .report-section{overflow-wrap:anywhere}.breakdown-report-panel .report-section h4{margin:8px 0}

#structuredEditor, #narrationControls { min-width: 0; overflow-wrap: anywhere; }
#structuredEditor { display: grid; gap: 18px; margin: 20px 22px 0; }
#structuredEditor > p { margin: 0; color: #637185; font-size: 12px; line-height: 1.7; }
.structured-scene { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 18px; border: 1px solid var(--line,#dfe3eb); border-radius: 12px; background: #fbfcfe; }
.structured-scene legend { padding: 0 6px; color: #23354a; font-size: 13px; font-weight: 700; }
.script-workspace .field { min-width: 0; }
.script-workspace .field > span { font-size: 12px; line-height: 1.6; }
.script-workspace .field input, .script-workspace .field textarea, .script-workspace .field select { font-size: 13px; }
.structured-scene textarea, #narrationSrt, #spokenCopy { width: 100%; box-sizing: border-box; }
.structured-scene textarea { min-height: 84px; resize: vertical; }
.structured-scene textarea[data-scene-field="on_screen_text"] { min-height: 64px; }
#structuredEditor input, #structuredEditor select, #narrationControls select { max-width: 100%; width: 100%; }
#structuredEditor input[data-scene-field="seconds"] { width: 112px; }
#scriptForm > .field:has(#allowShorterDraft) { display: flex; align-items: flex-start; gap: 10px; color: #5f6c7d; font-size: 12px; line-height: 1.7; }
#scriptForm #allowShorterDraft { flex: 0 0 18px; width: 18px; min-height: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--coral); }
#scriptForm > details { margin: 18px 22px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
#scriptForm > details > summary { cursor: pointer; color: #45627f; font-size: 12px; font-weight: 650; line-height: 1.7; }
#scriptAssetChoices { display: grid; gap: 8px; max-height: 300px; overflow-y: auto; margin-top: 12px; padding: 2px; }
#scriptAssetChoices:empty::before { content: "当前业务暂无可用画面素材，可先到素材库上传。"; color: #637185; font-size: 12px; line-height: 1.7; }
#scriptAssetChoices label { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: start; gap: 10px; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid #d8dfe7; border-radius: 8px; color: #23354a; background: #fff; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; cursor: pointer; }
#scriptAssetChoices label:has(input:checked) { border-color: #efaa98; background: #fff7f3; }
#scriptAssetChoices input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; margin: 1px 0 0; accent-color: var(--coral); }
.script-editor .panel-heading { gap: 12px; align-items: center; }
.script-editor .editor-tools button { min-height: 36px; padding: 8px 10px; font-size: 12px; }
.script-editor #scriptBody[readonly] { min-height: 100px; height: 140px; }
#narrationControls { display: grid; gap: 16px; margin-top: 16px; font-size: 13px; line-height: 1.7; }
#narrationControls > p, #remixScenePlan p, #miniScenePlan p { margin: 0; color: #637185; }
#remixScenePlan, #miniScenePlan { display: grid; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; overflow-wrap: anywhere; font-size: 12px; line-height: 1.7; }
#miniScenePlan:empty { display: none; }
#reuseTranscript { justify-self: start; min-height: 40px; padding: 10px 14px; color: #26374c; background: #fff; border: 1px solid #cfd6df; border-radius: 10px; font-size: 12px; }
#remixForm > .span-2 { grid-column: 1/-1; padding: 20px; }
.storyboard-cover { width: 120px; max-width: 100%; height: auto; border-radius: 8px; }
.structured-history { overflow-wrap: anywhere; }
@media(max-width:600px) {
  #structuredEditor { margin: 18px 16px 0; gap: 16px; }
  .structured-scene { padding: 14px; }
  #scriptForm > details { margin-right: 16px; margin-left: 16px; }
  .script-editor .editor-tools { width: 100%; margin-left: 0; justify-content: flex-start; }
  .script-editor .editor-tools button { flex: 1 1 calc(50% - 8px); min-height: 44px; }
  #remixForm > .span-2 { padding: 16px; }
}

/* Authentication and persistent signed-in identity. */
.account-identity { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; margin: auto; padding: 28px; border: 1px solid var(--line); box-shadow: 0 24px 80px rgba(19,34,56,.2); }
.account-identity::backdrop { background: rgba(19,34,56,.55); backdrop-filter: blur(3px); }
.account-identity h2 { margin: 0; font-size: 24px; }
.account-identity #identityDescription { margin: 12px 0 24px; color: #637185; font-size: 14px; line-height: 1.6; }
.account-identity .account-row { flex-direction: row; align-items: center; }
.account-identity #registrationState { font-size: 13px; line-height: 1.6; }
.identity-password-field { display: grid; gap: 8px; }
.identity-password-input { display: flex; align-items: center; border: 1px solid #cfd6df; border-radius: 10px; overflow: hidden; }
.identity-password-input:focus-within { outline: 2px solid #ffbda9; outline-offset: 2px; }
.identity-password-input input { width: 100%; min-width: 0; border: 0; outline: 0; box-shadow: none; padding: 12px; background: transparent; }
.identity-password-input .text-button { flex-shrink: 0; padding: 0 12px; min-height: 44px; }
.identity-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.identity-links .text-button { min-height: 44px; }
.account-identity #identityMessage { margin: 0; color: #ad382b; font-size: 13px; line-height: 1.6; }
.account-identity #identityMessage:empty { display: none; }
.signed-in-account { position: relative; min-width: 0; max-width: min(250px, 65vw); }
.signed-in-account > summary { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: #eef3ff; cursor: pointer; list-style: none; font-size: 12px; }
.signed-in-account > summary::-webkit-details-marker { display: none; }
.signed-in-account > summary:focus-visible { outline: 2px solid #ffd1bd; outline-offset: 3px; }
#signedInName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signed-in-icon { color: #51c39f; font-size: 9px; }
.signed-in-menu { position: absolute; z-index: 50; right: 0; top: calc(100% + 8px); display: grid; gap: 10px; width: min(300px, calc(100vw - 32px)); padding: 18px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 12px 40px rgba(19,34,56,.18); overflow-wrap: anywhere; }
.signed-in-menu small { color: #637185; font-size: 12px; }
.signed-in-menu strong { font-size: 14px; }
.signed-in-menu p { margin: 0; font-size: 12px; color: #637185; line-height: 1.6; }
.header-actions .signed-in-menu .text-button { color: #26374c; text-align: left; justify-content: flex-start; min-height: 44px; }
.header-actions .signed-in-menu .text-button:hover { color: #ad382b; }
@media(max-width:600px) { .account-identity { margin: auto; padding: 22px; } .signed-in-menu { right: auto; left: 0; } }
.header-actions:has(#identityOpen) #sessionLoginButton { display: none; }

.studio-brand strong { max-width: 190px; line-height: 1.25; }

.identity-product { margin: 0 0 8px; color: #637185; font-size: 12px; font-weight: 600; }
.identity-help { margin: -4px 0 0; color: #637185; font-size: 12px; }
.account-identity #identityClose { align-self: flex-start; }

/* Keep writing surfaces readable at every supported viewport. */
.script-workspace { grid-template-columns: minmax(0,1fr); }
.script-basics, #scriptPromptFields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 22px; }
.script-options-body { display: grid; gap: 18px; padding-top: 18px; }
.script-options-body .field:has(#allowShorterDraft) { display: flex; align-items: flex-start; gap: 10px; }
.script-options-body details { min-width: 0; }
.script-options-body summary { cursor: pointer; }
#scriptForm > p { margin: 12px 22px; font-size: 13px; line-height: 1.7; color: #637185; }
#reloadScriptPrompts { margin-left: 22px; }
#scriptAssetChoices { grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); }
#scriptAssetChoices label { font-size: 14px; }
.script-workspace .field > span { font-size: 14px; }
.script-workspace .field input, .script-workspace .field textarea, .script-workspace .field select { font-size: 15px; }
.structured-scene { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px 24px; padding: 24px; }
.structured-scene > .field:has([data-scene-field="narration"]), .structured-scene > .field:has([data-scene-field="seconds"]), .structured-scene > .field:last-child { grid-column: 1/-1; }
.structured-scene textarea[data-scene-field="narration"] { min-height: 110px; }
.script-editor > details { margin: 20px 22px; font-size: 14px; }
.account-workspace:not(:has(> form:not([hidden]))):not(:has(> p:not([hidden]):not(:empty))):not(:has(> button:not([hidden]))) { display: none; }
.studio-page, .panel, .field, .form-grid > *, .production-main, .breakdown-workspace > *, .matrix-workspace > * { min-width: 0; }
.studio-page input:not([type="checkbox"]):not([type="radio"]), .studio-page select, .studio-page textarea { max-width: 100%; }
@media (max-width: 1200px) {
  .breakdown-workspace, .matrix-workspace, .profile-layout { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 700px) {
  .script-basics, #scriptPromptFields { grid-template-columns: minmax(0,1fr); margin: 18px 16px; }
  .structured-scene { grid-template-columns: minmax(0,1fr); padding: 16px; }
  .script-workspace .field input, .script-workspace .field textarea, .script-workspace .field select { font-size: 16px; }
  #scriptAssetChoices { grid-template-columns: minmax(0,1fr); }
}

.breakdown-input-panel > .field-hint { margin: 0; padding: 16px 22px; font-size: 13px; line-height: 1.7; color: #637185; overflow-wrap: anywhere; }
.breakdown-input-panel > .form-error { margin: 0 22px; font-size: 13px; line-height: 1.6; }
.breakdown-input-panel > .form-error:empty { display: none; }
.breakdown-history-section { margin: 0 22px 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; font-size: 13px; line-height: 1.7; }
.breakdown-history-section > summary { cursor: pointer; font-weight: 600; color: #45627f; min-height: 24px; }
.breakdown-history-section[open] > summary { margin-bottom: 12px; }
.breakdown-history-section .breakdown-history button { max-width: 100%; white-space: normal; text-align: left; overflow-wrap: anywhere; min-height: 44px; }
@media(max-width:600px) {
  .breakdown-input-panel > .field-hint { padding: 16px; }
  .breakdown-history-section { margin: 0 16px 16px; }
}

/* Brief on the left; generated output on the right. */
.script-workspace { grid-template-columns: minmax(360px,.85fr) minmax(0,1.15fr); align-items: start; }
.script-workspace .script-basics, .script-workspace #scriptPromptFields { grid-template-columns: minmax(0,1fr); }
#scriptPromptFields:empty { display: none; }
.script-workspace .structured-scene { grid-template-columns: minmax(0,1fr); }
.script-generation-status { margin: 18px 22px 0; padding: 14px 16px; border-radius: 10px; background: #eef5fb; color: #26374c; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.script-generation-status.is-error { background: #fff1ed; color: #9b321d; }
.script-generation-status[hidden] { display: none; }
.script-result-empty { display: grid; align-content: center; min-height: 320px; padding: 32px; text-align: center; background: #f8fafc; border-radius: 12px; }
.script-result-empty h3 { margin: 0 0 12px; font-size: 20px; color: #26374c; }
.script-result-empty p { max-width: 420px; margin: 0 auto; font-size: 14px; line-height: 1.8; color: #637185; }
.script-editor:has(.script-result-empty) { padding-bottom: 22px; }
.script-editor:has(.script-result-empty) > .field, .script-editor:has(.script-result-empty) > details, .script-editor:has(.script-result-empty) .editor-tools, .script-editor:has(.script-result-empty) .script-foot { display: none; }
@media(max-width:1000px) { .script-workspace { grid-template-columns: minmax(0,1fr); } .script-result-empty { min-height: 220px; padding: 24px 16px; } }

/* Keep the signup label visible in compact headers. */
.header-actions #identitySignup { width: auto; min-height: 44px; padding: 0 14px; font-size: 13px; white-space: nowrap; }

/* Readable customer-facing breakdown, scoped away from other reports. */
#breakdownReport .report-section { margin: 16px 0; padding: 20px; }
#breakdownReport .report-section h3, #breakdownReport .report-section h4,
#breakdownReport .report-complete-head h3 { font-size: 20px; line-height: 1.5; margin: 0 0 14px; }
#breakdownReport .report-section p, #breakdownReport .report-section li,
#breakdownReport .report-section ul, #breakdownReport .report-section textarea,
#breakdownReport .breakdown-script { font-size: 16px; line-height: 1.8; color: #31475d; }
#breakdownReport .report-section p { margin: 12px 0; }
#breakdownReport .report-section summary { font-size: 16px; line-height: 1.6; cursor: pointer; }
#breakdownReport .text-button { font-size: 14px; }
#breakdownReport .report-complete-head h3 { margin: 0; }
#breakdownReport .breakdown-gap { color: #83521f; }
@media(max-width:600px) { #breakdownReport .report-section { padding: 16px; } }