:root {
  --bg: #f7f8fc;
  --surface: #ffffff;
  --surface-soft: #f8f7ff;
  --ink: #17152b;
  --muted: #706e80;
  --muted-2: #9a98a8;
  --line: #e8e7ef;
  --line-strong: #dcd9ea;
  --primary: #6d56ed;
  --primary-dark: #5540d3;
  --primary-soft: #efecff;
  --cyan: #44c8d7;
  --green: #3ab98a;
  --amber: #f0a54c;
  --danger: #e65a6f;
  --shadow-sm: 0 2px 8px rgba(25, 20, 60, 0.05);
  --shadow-md: 0 18px 50px rgba(35, 25, 85, 0.1);
  --shadow-lg: 0 35px 90px rgba(32, 20, 88, 0.18);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --sidebar: 244px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); }
button, input, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(109, 86, 237, .22); outline-offset: 2px; }
svg { display: block; }
.is-hidden { display: none !important; }

.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.5px; text-decoration: none; }
.brand--light { color: #fff; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #8a78ff, #5e49e6); box-shadow: 0 9px 24px rgba(58, 40, 180, .3); }
.brand-mark svg { width: 27px; height: 27px; fill: currentColor; }
.eyebrow { display: block; margin-bottom: 8px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
.eyebrow--light { color: #c9c1ff; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 17px; border: 1px solid transparent; border-radius: 11px; background: transparent; font-weight: 700; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.button--primary { color: #fff; background: linear-gradient(135deg, #755ff2, #5d47dc); box-shadow: 0 9px 22px rgba(85, 64, 211, .24); }
.button--primary:hover { box-shadow: 0 12px 28px rgba(85, 64, 211, .34); }
.button--soft { color: var(--primary); background: var(--primary-soft); border-color: #e1dcff; }
.button--ghost { color: #666174; border-color: var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.button--outline { min-height: 38px; padding: 0 13px; color: #4d485b; border-color: var(--line-strong); background: #fff; }
.button--wide { width: 100%; min-height: 48px; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: 10px; color: #777384; background: transparent; cursor: pointer; transition: .18s ease; }
.icon-button:hover { color: var(--primary); background: var(--primary-soft); }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.text-button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 0; border: 0; color: var(--primary); background: none; font-size: 13px; font-weight: 700; cursor: pointer; }
.text-button:hover span { transform: translateX(2px); }
.text-button span { transition: transform .18s ease; }

/* Login */
.login-view { display: grid; grid-template-columns: minmax(520px, 1.08fr) minmax(440px, .92fr); min-height: 100vh; background: #fff; }
.login-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 52px 7vw 48px; overflow: hidden; color: #fff; background: radial-gradient(circle at 76% 21%, rgba(94, 224, 227, .18), transparent 24%), linear-gradient(145deg, #171331 0%, #28205b 45%, #5040c7 100%); }
.login-brand > *:not(.orb):not(.grid-glow) { position: relative; z-index: 2; }
.login-brand .brand-mark { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.18); box-shadow: none; backdrop-filter: blur(9px); }
.login-promise { max-width: 650px; margin-top: 5vh; }
.login-promise h1 { margin: 0 0 24px; font-size: clamp(44px, 5.5vw, 76px); line-height: 1.06; letter-spacing: -3.8px; }
.login-promise h1 span { display: inline-block; color: #8ee9e7; }
.login-promise > p { max-width: 565px; margin: 0; color: rgba(255,255,255,.71); font-size: 17px; line-height: 1.8; }
.promise-steps { display: flex; gap: 0; margin-top: 56px; }
.promise-steps div { display: flex; align-items: center; gap: 11px; padding-right: 28px; margin-right: 28px; border-right: 1px solid rgba(255,255,255,.16); }
.promise-steps div:last-child { border-right: 0; }
.promise-steps b { color: #8ee9e7; font-size: 11px; letter-spacing: 1px; }
.promise-steps span { color: rgba(255,255,255,.83); font-size: 13px; }
.login-quote { display: flex; align-items: flex-start; gap: 15px; color: rgba(255,255,255,.56); }
.login-quote > span { color: #8ee9e7; font-size: 18px; }
.login-quote blockquote { margin: 0; font-size: 13px; line-height: 1.8; }
.orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .75; }
.orb-a { right: -130px; bottom: 5%; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.13); box-shadow: inset 0 0 90px rgba(80,225,231,.08); }
.orb-b { right: 80px; bottom: 11%; width: 210px; height: 210px; border: 1px solid rgba(255,255,255,.12); }
.grid-glow { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(to bottom, transparent 0, black 40%, black 100%); }
.login-panel { display: grid; min-width: 0; place-items: center; padding: 50px; background: linear-gradient(160deg, #fff 52%, #f5f3ff 100%); }
.login-card { width: min(100%, 420px); min-width: 0; }
.login-card form { min-width: 0; }
.mobile-brand { display: none; }
.login-card h2 { margin: 0; font-size: 30px; line-height: 1.25; letter-spacing: -1px; }
.login-subtitle { margin: 10px 0 37px; color: var(--muted); font-size: 14px; }
.field-label { display: block; margin: 18px 0 8px; color: #34313f; font-size: 13px; font-weight: 700; }
.input-shell { display: flex; align-items: center; height: 49px; border: 1px solid var(--line-strong); border-radius: 11px; background: #fff; transition: border .18s ease, box-shadow .18s ease; }
.input-shell:focus-within { border-color: #9688f4; box-shadow: 0 0 0 4px rgba(109,86,237,.09); }
.input-shell input { width: 100%; min-width: 0; height: 100%; padding: 0 14px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.input-shell input::placeholder { color: #aaa7b3; }
.phone-field .country-code { padding: 0 13px 0 15px; border-right: 1px solid var(--line); color: #55515e; font-size: 14px; }
.input-shell--icon > svg { width: 18px; height: 18px; margin-left: 14px; fill: none; stroke: #8e899b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) 122px; gap: 10px; }
.code-row .button { height: 49px; }
.form-error { min-height: 2px; margin-top: 4px; color: var(--danger); font-size: 11px; }
.invite-hint { display: flex; align-items: center; gap: 6px; margin: 8px 0 23px; color: #777184; font-size: 11px; }
.invite-hint span { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; background: var(--green); font-size: 10px; }
.login-card .button--wide + .button--wide { margin-top: 10px; }
.legal-copy { margin: 20px 0 0; text-align: center; color: var(--muted-2); font-size: 11px; }

/* Application shell */
.app-view { min-height: 100vh; }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; flex-direction: column; width: var(--sidebar); padding: 24px 16px 18px; border-right: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(16px); }
.sidebar-brand { padding: 0 7px 22px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy small { margin-top: 6px; color: #9a96a9; font-size: 7px; letter-spacing: 2.1px; }
.new-project-button { width: 100%; min-height: 45px; margin-bottom: 18px; }
.new-project-button svg { width: 17px; }
.main-nav { display: grid; gap: 3px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 43px; padding: 0 12px; border: 0; border-radius: 10px; color: #625f6d; background: transparent; font-size: 13px; font-weight: 650; text-align: left; cursor: pointer; transition: .16s ease; }
.nav-item:hover { color: var(--ink); background: #f7f6fb; }
.nav-item.is-active { color: var(--primary); background: var(--primary-soft); }
.nav-item.is-active::before { position: absolute; left: 0; width: 3px; height: 18px; border-radius: 3px; background: var(--primary); content: ""; }
.nav-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav-badge { margin-left: auto; min-width: 21px; height: 19px; padding: 0 6px; border-radius: 20px; color: #777182; background: #eceaf2; font-size: 10px; line-height: 19px; text-align: center; }
.nav-status { margin-left: auto; padding: 3px 6px; border-radius: 20px; color: #9b6b20; background: #fff5dc; font-size: 8px; font-style: normal; font-weight: 800; }
.sidebar-section { min-width: 0; min-height: 0; margin-top: 30px; overflow: hidden; }
.sidebar-label { display: block; padding: 0 11px 9px; color: #a19dab; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.sidebar-projects { display: grid; gap: 1px; }
.sidebar-project { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; min-height: 37px; padding: 0 10px; overflow: hidden; border: 0; border-radius: 8px; color: #696573; background: none; font-size: 12px; cursor: pointer; }
.sidebar-project:hover { color: var(--primary); background: #f7f5ff; }
.sidebar-project i { width: 7px; height: 7px; flex: 0 0 auto; border: 2px solid #b9b4c7; border-radius: 50%; }
.sidebar-project span { display: block; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-empty { padding: 8px 11px; color: #b3afbb; font-size: 11px; line-height: 1.5; }
.sidebar-bottom { display: grid; gap: 6px; margin-top: auto; }
.usage-card { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; padding: 11px; border: 1px solid #e7e3ff; border-radius: 11px; background: linear-gradient(135deg, #f5f2ff, #fbfbff); }
.usage-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: #fff; background: var(--primary); font-size: 12px; }
.usage-card strong, .usage-card span { display: block; }
.usage-card strong { color: #4a4556; font-size: 11px; }
.usage-card span { margin-top: 3px; color: #918b9b; font-size: 9px; }
.user-card { display: grid; grid-template-columns: 34px 1fr 32px; align-items: center; gap: 9px; padding: 10px 7px 0; border-top: 1px solid var(--line); }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #7560ee, #48bac7); font-size: 12px; font-weight: 800; }
.user-card strong, .user-card span { display: block; }
.user-card strong { font-size: 11px; }
.user-card span { margin-top: 3px; color: var(--muted-2); font-size: 9px; }
.user-card .icon-button { width: 30px; height: 30px; }
.user-card .icon-button svg { width: 16px; }

.main-shell { min-height: 100vh; margin-left: var(--sidebar); }
.topbar { position: sticky; z-index: 10; top: 0; display: flex; align-items: center; justify-content: space-between; height: 65px; padding: 0 36px; border-bottom: 1px solid rgba(232,231,239,.85); background: rgba(247,248,252,.87); backdrop-filter: blur(14px); }
.topbar-context { color: #6f6b7b; font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.sync-state { display: flex; align-items: center; gap: 6px; color: #8c8797; font-size: 10px; }
.sync-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(58,185,138,.12); }
.mobile-menu { display: none; }
.screen { width: min(1160px, calc(100% - 70px)); margin: 0 auto; padding: 68px 0 80px; }

/* Home */
.hero-section { position: relative; display: flex; justify-content: space-between; min-height: 245px; }
.greeting { margin-bottom: 15px; color: #716d7a; font-size: 13px; }
.wave { display: inline-block; animation: wave 2.2s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%, 55%, 100% { transform: rotate(0); } 63% { transform: rotate(17deg); } 72% { transform: rotate(-8deg); } 81% { transform: rotate(12deg); } }
.hero-copy h1 { max-width: 720px; margin: 0; font-size: clamp(37px, 4vw, 54px); line-height: 1.13; letter-spacing: -2.5px; }
.gradient-text { display: block; color: transparent; background: linear-gradient(90deg, #6f56e8, #37bbc9); -webkit-background-clip: text; background-clip: text; }
.hero-copy p { max-width: 760px; margin: 19px 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.hero-positioning { display: inline-flex; margin: 0 0 13px; padding: 6px 10px; border: 1px solid #e5dfff; border-radius: 30px; color: #624ecf; background: rgba(255,255,255,.75); font-size: 9px; font-weight: 800; letter-spacing: .8px; }
.hero-actions { display: flex; gap: 10px; margin-top: 25px; }
.hero-actions .button { min-height: 43px; }
.button--destiny { gap: 7px; color: #76551d; border: 1px solid #e5ce9c; background: linear-gradient(145deg, #fffaf0, #f9edcf); box-shadow: 0 9px 22px rgba(130,94,31,.09); }
.button--destiny:hover { border-color: #d5b66f; box-shadow: 0 12px 25px rgba(130,94,31,.14); transform: translateY(-1px); }
.button--destiny i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; color: #fff; background: linear-gradient(145deg, #bc8731, #8e6121); font-size: 9px; font-style: normal; font-weight: 900; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 17px; color: #777180; font-size: 8px; }
.hero-proof span { display: flex; align-items: center; gap: 6px; }
.hero-proof b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; color: #6452cd; background: #eeeaff; font-size: 8px; }
.hero-proof span:nth-child(2) b { color: #97671d; background: #fff2d2; }
.hero-proof span:nth-child(3) b { color: #197963; background: #e4f6f0; }
.hero-decoration { position: relative; width: 260px; height: 160px; margin-right: 20px; }
.idea-core { position: absolute; top: 53px; left: 101px; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid rgba(255,255,255,.7); border-radius: 21px; color: #fff; background: linear-gradient(145deg, #755ff0, #5d46d8); box-shadow: 0 16px 35px rgba(93,70,216,.28); font-size: 23px; transform: rotate(-7deg); }
.idea-orbit { position: absolute; display: grid; place-items: center; width: 48px; height: 29px; border: 1px solid #e3dffd; border-radius: 20px; color: #7669a0; background: rgba(255,255,255,.82); box-shadow: var(--shadow-sm); font-size: 10px; }
.orbit-1 { top: 3px; left: 26px; }
.orbit-2 { top: 27px; right: 5px; }
.orbit-3 { right: 30px; bottom: 1px; }
.hero-decoration::before, .hero-decoration::after { position: absolute; border: 1px dashed #d9d4f5; border-radius: 50%; content: ""; }
.hero-decoration::before { inset: 12px 26px 7px 10px; transform: rotate(-8deg); }
.hero-decoration::after { inset: 35px 55px 23px 40px; transform: rotate(16deg); }
.director-banner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; margin: 36px 0 42px; padding: 23px; overflow: hidden; border: 1px solid rgba(127,108,240,.2); border-radius: 20px; color: #fff; background: radial-gradient(circle at 84% -20%, rgba(99,225,223,.32), transparent 31%), linear-gradient(125deg, #171331, #30246b 62%, #4d36b3); box-shadow: 0 20px 48px rgba(38,29,91,.16); }
.director-banner::after { position: absolute; right: 17%; width: 160px; height: 160px; border: 1px dashed rgba(255,255,255,.17); border-radius: 50%; content: ""; }
.director-banner-mark { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.32); border-radius: 17px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 28px rgba(124,226,232,.1); font-size: 19px; font-weight: 900; }
.director-banner > div:nth-child(2) { position: relative; z-index: 1; }
.director-banner > div > span { color: #9fe6e6; font-size: 7px; font-weight: 900; letter-spacing: 1.5px; }
.director-banner h2 { margin: 6px 0 5px; font-size: 17px; line-height: 1.35; }
.director-banner p { margin: 0; color: rgba(255,255,255,.62); font-size: 10px; }
.director-banner .button { position: relative; z-index: 1; color: #272044; background: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.15); }
.idea-composer { position: relative; padding: 20px 20px 16px; border: 1px solid #e5e2ef; border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: 0 20px 60px rgba(34,25,78,.09), 0 0 0 5px rgba(255,255,255,.6); transition: border .2s ease, box-shadow .2s ease; }
.idea-composer:focus-within { border-color: #c7bef8; box-shadow: 0 23px 70px rgba(63,44,145,.12), 0 0 0 5px rgba(111,86,237,.05); }
.composer-top { display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.composer-spark { padding-top: 6px; color: var(--primary); font-size: 18px; }
.composer-top textarea { width: 100%; min-height: 74px; padding: 3px 0; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 16px; line-height: 1.75; }
.composer-top textarea::placeholder { color: #aaa6b4; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; border-top: 1px solid #f0eef4; }
.category-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.category-chip { min-height: 29px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; color: #807b8b; background: #f6f5f8; font-size: 10px; cursor: pointer; transition: .16s ease; }
.category-chip:hover, .category-chip.is-selected { color: var(--primary); border-color: #ddd7ff; background: var(--primary-soft); }
.start-idea-button { flex: 0 0 auto; min-width: 132px; }
.home-section { margin-top: 62px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.section-heading .eyebrow { margin-bottom: 5px; }
.section-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.7px; }
.section-heading p { max-width: 720px; margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.goal-start-section { margin: 8px 0 0; padding: 27px; border: 1px solid #e6e2f1; border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.95), #f6f4ff); box-shadow: 0 18px 48px rgba(39,28,89,.06); }
.goal-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.goal-card { min-width: 0; min-height: 210px; padding: 18px; border: 1px solid #e5e1ed; border-radius: 17px; background: #fff; box-shadow: 0 9px 28px rgba(38,29,80,.045); cursor: pointer; transition: transform .2s ease, border .2s ease, box-shadow .2s ease; }
.goal-card:hover { transform: translateY(-4px); border-color: #cbc2fb; box-shadow: 0 16px 34px rgba(45,34,100,.09); }
.goal-card-head { display: flex; align-items: center; justify-content: space-between; }
.goal-card-head .template-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; background: var(--template-color, #f1eeff); font-size: 17px; }
.goal-card-head > span { color: #c4bfce; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.goal-card h3 { margin: 19px 0 8px; font-size: 14px; line-height: 1.45; }
.goal-card p { min-height: 47px; margin: 0; color: #888391; font-size: 10px; line-height: 1.65; }
.goal-card button { display: flex; align-items: center; gap: 7px; margin-top: 17px; padding: 0; border: 0; color: var(--primary); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.goal-card button b { transition: transform .2s ease; }
.goal-card:hover button b { transform: translateX(3px); }

/* Agent roles and recommended path */
.agent-path-map { margin: 34px 0 18px; padding: 27px; overflow: hidden; border: 1px solid #dcd7ef; border-radius: 24px; background: radial-gradient(circle at 95% 0, rgba(111,86,237,.13), transparent 28%), linear-gradient(145deg, #17152a, #26213d); color: #fff; box-shadow: 0 20px 48px rgba(32,26,63,.12); }
.agent-path-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.agent-path-heading > span { align-self: flex-start; flex: 0 0 auto; padding: 6px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; color: #bcb1ff; background: rgba(255,255,255,.05); font-size: 7px; font-weight: 900; letter-spacing: .8px; }
.agent-path-heading h2 { margin: 0; font-size: 21px; line-height: 1.35; }
.agent-path-heading p { max-width: 520px; margin: 0; color: rgba(255,255,255,.58); font-size: 9px; line-height: 1.7; }
.agent-path-steps { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; margin-top: 22px; }
.agent-path-steps button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; color: #fff; background: rgba(255,255,255,.055); text-align: left; cursor: pointer; transition: transform .2s ease, border .2s ease, background .2s ease; }
.agent-path-steps button:hover { transform: translateY(-3px); border-color: rgba(181,169,255,.5); background: rgba(255,255,255,.09); }
.agent-path-steps button > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #251e51; background: #b8abff; font-size: 8px; font-style: normal; font-weight: 900; }
.agent-path-steps button:nth-of-type(2) > i { color: #173d42; background: #8be1dc; }
.agent-path-steps button:nth-of-type(3) > i { color: #402620; background: #ffd1bd; }
.agent-path-steps button span { display: grid; min-width: 0; }
.agent-path-steps small { color: rgba(255,255,255,.48); font-size: 7px; font-weight: 800; letter-spacing: .5px; }
.agent-path-steps b { margin-top: 5px; font-size: 13px; }
.agent-path-steps em { margin-top: 5px; overflow: hidden; color: rgba(255,255,255,.6); font-size: 7px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.agent-path-steps strong { grid-column: 2; margin-top: 10px; color: #c9c0ff; font-size: 8px; }
.agent-path-steps button:nth-of-type(2) strong { color: #9de8e4; }
.agent-path-steps button:nth-of-type(3) strong { color: #ffd0bd; }
.agent-path-arrow { align-self: center; color: rgba(255,255,255,.32); font-size: 17px; }

.agent-family { scroll-margin-top: 78px; border-radius: 25px; }
.agent-family--strategy { margin: 18px 0 36px; padding: 27px; border: 1px solid #ddd8f2; background: linear-gradient(145deg, #f7f5ff, #f1effa); }
.agent-family--production { margin: 8px 0 36px; padding: 27px; border: 1px solid #d6e7e4; background: linear-gradient(145deg, #fbfffe, #f0f8f6); }
.agent-family-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 15px; margin-bottom: 22px; }
.agent-family-index { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; color: #fff; background: #6756d5; box-shadow: 0 10px 24px rgba(83,66,178,.2); font-size: 15px; font-weight: 900; }
.agent-family--production .agent-family-index { background: #21806d; box-shadow: 0 10px 24px rgba(33,128,109,.18); }
.agent-family-heading > div:nth-child(2) > span { color: #6b5ac9; font-size: 7px; font-weight: 900; letter-spacing: 1.1px; }
.agent-family--production .agent-family-heading > div:nth-child(2) > span { color: #247864; }
.agent-family-heading h2 { margin: 5px 0 4px; font-size: 20px; line-height: 1.35; }
.agent-family-heading p { max-width: 720px; margin: 0; color: #77717f; font-size: 9px; line-height: 1.65; }
.agent-family-heading > em { padding: 7px 10px; border-radius: 20px; color: #6658a7; background: #e8e3fb; font-size: 8px; font-style: normal; font-weight: 850; white-space: nowrap; }
.agent-family--production .agent-family-heading > em { color: #276e5e; background: #dcefe9; }

/* Dual-lens differentiation */
.destiny-difference { position: relative; margin: 13px 0 38px; padding: 28px; overflow: hidden; border: 1px solid #d9c69d; border-radius: 25px; background: radial-gradient(circle at 92% -10%, rgba(224,181,85,.18), transparent 31%), radial-gradient(circle at 0 100%, rgba(109,86,230,.12), transparent 28%), linear-gradient(145deg, #19162a, #282038 58%, #3b2d32); color: #fff; box-shadow: 0 23px 52px rgba(32,24,52,.16); }
.destiny-difference::before { position: absolute; top: -105px; right: 80px; width: 250px; height: 250px; border: 1px dashed rgba(236,209,154,.12); border-radius: 50%; content: ""; }
.destiny-difference-head { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.destiny-difference-head > div > span { color: #e2c27b; font-size: 7px; font-weight: 900; letter-spacing: 1.4px; }
.destiny-difference-head h2 { max-width: 770px; margin: 8px 0 8px; font-size: 23px; line-height: 1.35; letter-spacing: -.7px; }
.destiny-difference-head p { max-width: 820px; margin: 0; color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.75; }
.destiny-difference-cta { flex: 0 0 auto; color: #302437; background: #fff8e8; box-shadow: 0 11px 25px rgba(0,0,0,.18); }
.dual-lens-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 13px; margin-top: 23px; }
.dual-lens-card { display: flex; gap: 13px; min-width: 0; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background: rgba(255,255,255,.065); backdrop-filter: blur(12px); }
.dual-lens-card--destiny { border-color: rgba(224,191,120,.24); background: rgba(200,148,61,.08); }
.dual-lens-icon { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #7661e7, #5843bb); box-shadow: 0 10px 24px rgba(61,45,150,.28); font-weight: 900; }
.dual-lens-card--destiny .dual-lens-icon { background: linear-gradient(145deg, #c7943c, #906124); box-shadow: 0 10px 24px rgba(119,79,24,.28); }
.dual-lens-card span { color: #aaa0e4; font-size: 7px; font-weight: 900; letter-spacing: .7px; }
.dual-lens-card--destiny span { color: #e3c57e; }
.dual-lens-card h3 { margin: 6px 0 6px; font-size: 14px; }
.dual-lens-card p { min-height: 34px; margin: 0; color: rgba(255,255,255,.55); font-size: 9px; line-height: 1.65; }
.dual-lens-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.dual-lens-tags em { padding: 4px 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: rgba(255,255,255,.65); background: rgba(255,255,255,.045); font-size: 7px; font-style: normal; }
.dual-lens-operator { display: grid; place-content: center; gap: 3px; min-width: 52px; color: #d9cae4; text-align: center; }
.dual-lens-operator b { font-family: Georgia, serif; font-size: 22px; font-weight: 400; }
.dual-lens-operator span { color: rgba(255,255,255,.4); font-size: 7px; white-space: nowrap; }
.destiny-outcome-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.destiny-outcome-row > div { display: flex; align-items: center; gap: 9px; padding: 11px; border-radius: 12px; background: rgba(255,255,255,.055); }
.destiny-outcome-row i { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 9px; color: #ddc27f; background: rgba(220,181,94,.1); font-size: 7px; font-style: normal; font-weight: 900; }
.destiny-outcome-row b, .destiny-outcome-row small { display: block; }
.destiny-outcome-row b { margin-bottom: 3px; font-size: 9px; }
.destiny-outcome-row small { color: rgba(255,255,255,.42); font-size: 7px; line-height: 1.45; }
.destiny-status-line { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.55); font-size: 7px; }
.destiny-status-line b { color: #e6cc8b; }
.destiny-status-line small { flex-basis: 100%; color: rgba(255,255,255,.33); font-size: 7px; }
.destiny-next-step { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 15px; padding: 18px; border: 1px solid #ded1ae; border-radius: 16px; background: linear-gradient(145deg, #fffaf0, #f7efff); }
.destiny-next-step span { color: #a37529; font-size: 7px; font-weight: 900; letter-spacing: .7px; }
.destiny-next-step h4 { margin: 5px 0; font-size: 14px; }
.destiny-next-step p { margin: 0; color: #81798a; font-size: 8px; line-height: 1.6; }
.destiny-next-step .button { flex: 0 0 auto; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.project-card { position: relative; min-width: 0; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border .2s ease; }
.project-card:hover { transform: translateY(-3px); border-color: #d8d2fa; box-shadow: 0 16px 35px rgba(40,30,90,.1); }
.project-card::after { position: absolute; top: -35px; right: -35px; width: 100px; height: 100px; border-radius: 50%; background: var(--card-accent, #f1eeff); content: ""; }
.project-card-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.project-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; background: var(--card-accent, #f1eeff); font-size: 16px; }
.project-menu { position: relative; z-index: 2; width: 28px; height: 28px; color: #aaa5b2; }
.project-menu svg { width: 16px; }
.project-card h3 { position: relative; z-index: 1; margin: 20px 0 7px; overflow: hidden; font-size: 14px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.project-card > p { height: 36px; margin: 0 0 18px; overflow: hidden; color: #8a8594; font-size: 11px; line-height: 1.6; }
.project-progress { display: flex; align-items: center; gap: 9px; }
.mini-progress { flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: #eeecf2; }
.mini-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #53c1ce); }
.project-progress span { color: #9994a3; font-size: 9px; }
.project-meta { display: flex; justify-content: space-between; margin-top: 12px; color: #a19da9; font-size: 9px; }
.empty-state { grid-column: 1 / -1; display: grid; place-items: center; min-height: 210px; padding: 34px; border: 1px dashed #dcd8e7; border-radius: 17px; color: #8d8898; background: rgba(255,255,255,.55); text-align: center; }
.empty-state strong { display: block; margin-bottom: 8px; color: #4b4657; font-size: 15px; }
.empty-state p { margin: 0 0 18px; font-size: 12px; }
.template-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.template-card { position: relative; min-height: 154px; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); cursor: pointer; transition: .2s ease; }
.template-card:hover { transform: translateY(-3px); border-color: #d9d3fa; box-shadow: 0 14px 35px rgba(39,29,87,.08); }
.template-card .template-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; background: var(--template-color, #f1eeff); font-size: 16px; }
.template-card h3 { margin: 17px 0 7px; font-size: 13px; }
.template-card p { margin: 0; color: #8e8997; font-size: 10px; line-height: 1.55; }
.template-card > span { position: absolute; right: 15px; bottom: 14px; color: #a9a4b0; font-size: 15px; transition: .2s ease; }
.template-card:hover > span { color: var(--primary); transform: translateX(3px); }

/* Projects / templates pages */
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 42px; }
.page-heading h1 { margin: 0; font-size: 38px; letter-spacing: -1.6px; }
.page-heading p { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.project-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.search-box { display: flex; align-items: center; width: min(320px, 45vw); height: 42px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.search-box svg { width: 18px; height: 18px; margin-left: 13px; fill: none; stroke: #9d98a7; stroke-width: 1.8; stroke-linecap: round; }
.search-box input { width: 100%; height: 100%; padding: 0 13px; border: 0; outline: 0; background: transparent; font-size: 12px; }
.filter-tabs { display: flex; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.filter-tabs button { min-height: 30px; padding: 0 13px; border: 0; border-radius: 7px; color: #888391; background: transparent; font-size: 10px; cursor: pointer; }
.filter-tabs button.is-active { color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.project-grid--all { grid-template-columns: repeat(3, 1fr); }
.template-grid--all { grid-template-columns: repeat(4, 1fr); }
.templates-screen .template-card { min-height: 190px; }

/* Gravity director */
.director-screen { width: min(1180px, calc(100% - 60px)); }
.director-heading { align-items: center; }
.director-heading-badge { padding: 9px 12px; border: 1px solid #ddd7fb; border-radius: 999px; color: #6d5fc2; background: #f4f1ff; font-size: 9px; font-weight: 800; }
.director-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 18px; }
.director-form { display: grid; gap: 14px; }
.director-form-section { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 17px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.director-section-index { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 900; }
.director-section-body h2 { margin: 0 0 5px; font-size: 17px; }
.director-section-body > p { margin: 0 0 18px; color: #8a8594; font-size: 10px; line-height: 1.65; }
.director-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.director-field-grid label { position: relative; display: grid; gap: 7px; min-width: 0; }
.director-field-grid label > span { color: #514c5b; font-size: 10px; font-weight: 800; }
.director-field-grid input, .director-field-grid select, .director-field-grid textarea { width: 100%; min-width: 0; border: 1px solid #dedbe6; border-radius: 10px; outline: none; color: #302b39; background: #fdfcff; font: inherit; font-size: 12px; transition: border .18s ease, box-shadow .18s ease; }
.director-field-grid input, .director-field-grid select { height: 43px; padding: 0 12px; }
.director-field-grid textarea { min-height: 176px; padding: 13px; resize: vertical; line-height: 1.7; }
.director-field-grid input:focus, .director-field-grid select:focus, .director-field-grid textarea:focus { border-color: #9d8ff0; box-shadow: 0 0 0 3px rgba(111,86,237,.08); }
.director-field-grid label > small { position: absolute; right: 10px; bottom: 9px; color: #a39eac; font-size: 8px; }
.director-field-grid label > small i { font-style: normal; }
.director-field-wide { grid-column: 1 / -1; }
.director-output-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.director-output-grid label { position: relative; cursor: pointer; }
.director-output-grid input { position: absolute; opacity: 0; pointer-events: none; }
.director-output-grid span { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 14px; border: 1px solid #e2dfe8; border-radius: 11px; background: #fbfafe; transition: .18s ease; }
.director-output-grid b { font-size: 11px; }
.director-output-grid small { color: #9993a2; font-size: 9px; }
.director-output-grid input:checked + span { color: var(--primary); border-color: #b9acf7; background: #f1eeff; box-shadow: inset 0 0 0 1px rgba(111,86,237,.05); }
.director-output-grid input:checked + span::before { display: grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--primary); content: "✓"; font-size: 8px; }
.director-output-grid input:checked + span b { margin-right: auto; }
.director-submit { min-height: 50px; font-size: 12px; }
.director-summary { position: sticky; top: 85px; min-height: 520px; padding: 25px; border: 1px solid #ded8fc; border-radius: 18px; background: radial-gradient(circle at 100% 0, rgba(102,219,218,.15), transparent 28%), linear-gradient(155deg, #fff, #f5f2ff); box-shadow: 0 20px 50px rgba(47,34,105,.1); }
.director-summary > h2 { margin: 8px 0 15px; font-size: 20px; }
.director-summary-chain { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; color: #7c7489; font-size: 8px; }
.director-summary-chain span { padding: 6px 7px; border-radius: 6px; background: #fff; }
.director-summary-chain i { color: var(--primary); font-style: normal; }
.director-summary dl { display: grid; gap: 0; margin: 0; border-top: 1px solid #e7e3f2; }
.director-summary dl > div { padding: 13px 0; border-bottom: 1px solid #e7e3f2; }
.director-summary dt { margin-bottom: 5px; color: #9a94a2; font-size: 8px; font-weight: 800; }
.director-summary dd { margin: 0; color: #474150; font-size: 10px; line-height: 1.6; }
.director-empty-hint { margin-top: 20px; padding: 17px; border: 1px dashed #cec7ef; border-radius: 12px; background: rgba(255,255,255,.6); }
.director-empty-hint b { font-size: 11px; }
.director-empty-hint p { margin: 6px 0 0; color: #8b8594; font-size: 9px; line-height: 1.6; }
.director-created { margin-top: 20px; }
.director-created-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.director-created-head > span { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--green); }
.director-created-head strong, .director-created-head small { display: block; }
.director-created-head strong { font-size: 11px; }
.director-created-head small { margin-top: 3px; color: #918b99; font-size: 8px; }
.director-created-list { display: grid; gap: 7px; margin-bottom: 12px; }
.director-created-list button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 48px; padding: 7px 9px; border: 1px solid #e3dfee; border-radius: 10px; color: #4a4552; background: rgba(255,255,255,.8); text-align: left; cursor: pointer; }
.director-created-list button:hover { border-color: #bbb0f5; }
.director-created-list i { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; background: var(--director-accent); font-style: normal; }
.director-created-list span { min-width: 0; flex: 1; }
.director-created-list b, .director-created-list small { display: block; }
.director-created-list b { font-size: 10px; }
.director-created-list small { margin-top: 3px; overflow: hidden; color: #9892a0; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.director-created-list em { color: var(--primary); font-size: 8px; font-style: normal; }

/* Workspace */
.workspace-screen { height: calc(100vh - 65px); overflow: hidden; background: #fff; }
.workspace-header { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.workspace-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.workspace-title > div { min-width: 0; }
.workspace-title h1 { max-width: 560px; margin: 3px 0 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.project-tag { display: inline-block; color: var(--primary); font-size: 8px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.workspace-actions { display: flex; align-items: center; gap: 6px; }
.workspace-layout { display: grid; grid-template-columns: 190px minmax(400px, 1fr) minmax(270px, 340px); height: calc(100% - 72px); }
.journey-panel { display: flex; flex-direction: column; padding: 25px 17px; border-right: 1px solid var(--line); background: #fafafe; }
.journey-heading { display: flex; justify-content: space-between; color: #4a4654; font-size: 11px; font-weight: 800; }
.journey-heading small { color: var(--primary); font-size: 9px; }
.progress-line { height: 4px; margin: 11px 0 24px; overflow: hidden; border-radius: 5px; background: #e9e6f1; }
.progress-line i { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #4dc5cf); transition: width .35s ease; }
.stage-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.stage-list li { position: relative; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; min-height: 61px; padding: 7px 5px; border-radius: 10px; color: #9a96a4; }
.stage-list li::after { position: absolute; top: 43px; bottom: -18px; left: 18px; width: 1px; background: #e3e0e9; content: ""; }
.stage-list li:last-child::after { display: none; }
.stage-list li.is-current { color: var(--primary); background: #f1eeff; }
.stage-list li.is-done { color: #494554; }
.stage-dot { z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid #dedbe6; border-radius: 50%; color: #aaa5b2; background: #fafafe; font-size: 9px; font-weight: 800; }
.stage-list li.is-current .stage-dot { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 4px #e9e5ff; }
.stage-list li.is-done .stage-dot { color: #fff; border-color: var(--green); background: var(--green); }
.stage-list strong, .stage-list small { display: block; }
.stage-list strong { font-size: 11px; }
.stage-list small { margin-top: 4px; color: #aaa6b2; font-size: 8px; }
.journey-tip { display: flex; gap: 7px; margin-top: auto; padding: 11px; border: 1px solid #e5e1f5; border-radius: 11px; background: #f5f2ff; }
.journey-tip span { font-size: 11px; }
.journey-tip p { margin: 0; color: #858091; font-size: 8px; line-height: 1.65; }
.conversation-panel { display: grid; grid-template-rows: 1fr auto; min-width: 0; min-height: 0; background: #fff; }
.conversation-scroll { overflow-y: auto; padding: 33px clamp(28px, 5vw, 74px) 25px; scroll-behavior: smooth; }
.conversation-intro { display: flex; align-items: flex-start; gap: 13px; padding-bottom: 25px; border-bottom: 1px solid #f0eef4; }
.agent-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #755eed, #4abfcb); box-shadow: 0 8px 18px rgba(94,74,210,.2); font-size: 14px; }
.conversation-intro > div > span { color: var(--primary); font-size: 8px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.conversation-intro h2 { margin: 4px 0 4px; font-size: 17px; letter-spacing: -.4px; }
.conversation-intro p { margin: 0; color: #8b8795; font-size: 10px; line-height: 1.5; }
.message-list { display: grid; gap: 22px; padding: 27px 0; }
.message { display: flex; align-items: flex-start; gap: 10px; max-width: 88%; animation: message-in .25s ease both; }
@keyframes message-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.message--user { justify-self: end; flex-direction: row-reverse; }
.message-avatar { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; border-radius: 9px; color: #fff; background: linear-gradient(145deg, #6c56e8, #50bec8); font-size: 9px; font-weight: 800; }
.message--assistant .message-avatar { color: var(--primary); border: 1px solid #e1dcff; background: #f0edff; }
.message-bubble { padding: 12px 14px; border: 1px solid #eceaf0; border-radius: 4px 14px 14px 14px; color: #46424e; background: #faf9fc; font-size: 11px; line-height: 1.75; white-space: pre-wrap; }
.message--user .message-bubble { color: #fff; border: 0; border-radius: 14px 4px 14px 14px; background: linear-gradient(145deg, #7560ed, #6650dc); box-shadow: 0 8px 20px rgba(91,70,200,.16); }
.message-time { display: block; margin-top: 5px; color: #ada9b3; font-size: 7px; }
.message--user .message-time { color: rgba(255,255,255,.65); text-align: right; }
.thinking-indicator { display: flex; align-items: center; gap: 4px; margin: 0 0 20px 38px; color: #9b96a4; }
.thinking-indicator span { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); animation: think 1s ease-in-out infinite; }
.thinking-indicator span:nth-child(2) { animation-delay: .13s; }
.thinking-indicator span:nth-child(3) { animation-delay: .26s; }
.thinking-indicator small { margin-left: 5px; font-size: 8px; }
@keyframes think { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.chat-footer { padding: 12px clamp(28px, 5vw, 74px) 14px; border-top: 1px solid var(--line); background: rgba(255,255,255,.98); }
.suggestion-list { display: flex; gap: 6px; padding-bottom: 8px; overflow-x: auto; }
.suggestion-chip { flex: 0 0 auto; min-height: 27px; padding: 0 10px; border: 1px solid #e3dff1; border-radius: 16px; color: #716b80; background: #faf9fd; font-size: 8px; cursor: pointer; }
.suggestion-chip:hover { color: var(--primary); border-color: #cfc6fb; background: var(--primary-soft); }
.chat-composer { display: grid; grid-template-columns: 1fr 38px; align-items: end; gap: 8px; min-height: 50px; padding: 7px; border: 1px solid #dedbe6; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(28,22,60,.05); }
.chat-composer:focus-within { border-color: #aa9ef1; box-shadow: 0 0 0 4px rgba(109,86,237,.06); }
.chat-composer textarea { max-height: 115px; min-height: 34px; padding: 8px 9px; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 10px; line-height: 1.6; }
.send-button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; color: #fff; background: var(--primary); cursor: pointer; transition: .17s ease; }
.send-button:hover { background: var(--primary-dark); transform: translateY(-1px); }
.send-button:disabled { opacity: .45; cursor: wait; }
.send-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; color: #aaa5b0; font-size: 7px; }
.chat-meta .text-button { padding: 0; font-size: 8px; }
.artifact-panel { min-width: 0; overflow: hidden; border-left: 1px solid var(--line); background: #fcfcfe; }
.artifact-header { display: flex; align-items: center; justify-content: space-between; padding: 25px 21px 17px; }
.artifact-header .eyebrow { margin-bottom: 4px; font-size: 8px; }
.artifact-header h2 { margin: 0; font-size: 15px; }
.count-pill { min-width: 23px; height: 23px; padding: 0 7px; border-radius: 15px; color: var(--primary); background: var(--primary-soft); font-size: 9px; line-height: 23px; text-align: center; }
.artifact-tabs { display: flex; gap: 2px; padding: 0 16px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.artifact-tab { flex: 0 0 auto; padding: 8px 7px 10px; border: 0; border-bottom: 2px solid transparent; color: #9a95a4; background: none; font-size: 8px; cursor: pointer; }
.artifact-tab.is-active { color: var(--primary); border-color: var(--primary); font-weight: 800; }
.artifact-content { height: calc(100% - 88px); padding: 19px; overflow-y: auto; }
.artifact-empty { display: grid; place-items: center; height: 100%; min-height: 300px; text-align: center; }
.artifact-empty-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 15px; border: 1px dashed #cfc8ed; border-radius: 18px; color: var(--primary); background: #f4f1ff; font-size: 20px; }
.artifact-empty strong { display: block; margin-bottom: 7px; color: #635e6e; font-size: 11px; }
.artifact-empty p { max-width: 190px; margin: 0; color: #a29daa; font-size: 8px; line-height: 1.7; }
.artifact-document { animation: message-in .3s ease; }
.artifact-document-head { padding: 14px; border: 1px solid #e4e0f5; border-radius: 12px; background: linear-gradient(135deg, #f3f0ff, #fbfbff); }
.artifact-document-head span { color: var(--primary); font-size: 7px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.artifact-document-head h3 { margin: 6px 0 6px; font-size: 14px; }
.artifact-document-head p { margin: 0; color: #85808f; font-size: 8px; line-height: 1.6; }
.artifact-section { position: relative; padding: 17px 3px; border-bottom: 1px solid #eceaf1; }
.artifact-section:last-child { border-bottom: 0; }
.artifact-section h4 { margin: 0 0 7px; color: #4e4959; font-size: 9px; }
.artifact-section p { margin: 0; color: #75707e; font-size: 8px; line-height: 1.75; white-space: pre-wrap; }
.artifact-copy { position: absolute; top: 12px; right: 0; padding: 3px 5px; border: 0; border-radius: 5px; color: #aaa5b2; background: transparent; font-size: 7px; cursor: pointer; }
.artifact-copy:hover { color: var(--primary); background: var(--primary-soft); }

/* Modal and toast */
.modal { width: min(92vw, 510px); max-height: calc(100dvh - 32px); padding: 0; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 21px; background: transparent; box-shadow: var(--shadow-lg); }
.modal::backdrop { background: rgba(22,17,48,.48); backdrop-filter: blur(5px); }
.modal-card { margin: 0; padding: 27px; border: 1px solid rgba(255,255,255,.5); border-radius: 21px; background: #fff; }
.modal-card--wide { width: min(92vw, 650px); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 23px; }
.modal-header .eyebrow { margin-bottom: 4px; }
.modal-header h2 { margin: 0; font-size: 21px; }
.status-box { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid #e5e1f7; border-radius: 13px; background: #f7f5ff; }
.status-box > i { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px rgba(240,165,76,.12); }
.status-box > i.is-online { background: var(--green); box-shadow: 0 0 0 5px rgba(58,185,138,.12); }
.status-box strong, .status-box span { display: block; }
.status-box strong { font-size: 12px; }
.status-box span { margin-top: 3px; color: #8b8696; font-size: 9px; }
.setting-section { margin: 21px 0; }
.setting-section h3 { margin: 0 0 7px; font-size: 12px; }
.setting-section p { margin: 0; color: #777280; font-size: 10px; line-height: 1.75; }
.setting-section code { color: var(--primary); }
.setting-section pre { margin: 11px 0 0; padding: 12px; overflow-x: auto; border-radius: 10px; color: #5b5664; background: #f6f5f8; font: 9px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; }
.help-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.help-steps div { position: relative; min-height: 115px; padding: 17px 17px 15px 51px; border: 1px solid var(--line); border-radius: 13px; background: #fdfdff; }
.help-steps b { position: absolute; top: 17px; left: 17px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 10px; }
.help-steps strong { display: block; margin-bottom: 7px; font-size: 11px; }
.help-steps p { margin: 0; color: #898492; font-size: 9px; line-height: 1.65; }
.toast-region { position: fixed; z-index: 100; top: 19px; right: 20px; display: grid; gap: 8px; }
.toast { display: flex; align-items: center; gap: 9px; max-width: 360px; min-height: 43px; padding: 10px 14px; border: 1px solid #ded9f5; border-radius: 11px; color: #504a5d; background: rgba(255,255,255,.96); box-shadow: var(--shadow-md); font-size: 10px; animation: toast-in .22s ease both; }
.toast::before { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--green); content: "✓"; font-size: 9px; }
.toast.is-error::before { background: var(--danger); content: "!"; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

/* Multi-agent launchpad */
.agent-launch-section { margin: 8px 0 36px; }

/* Product operating system */
.system-map { margin: 64px 0 42px; padding: 30px; border: 1px solid #e4e0f2; border-radius: 25px; background: linear-gradient(145deg, #fff 60%, #f5f2ff); box-shadow: 0 18px 44px rgba(39,28,89,.07); }
.system-map .section-heading { margin-bottom: 22px; }
.system-map .section-heading p { max-width: 660px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.foundation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.foundation-grid article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px 13px; padding: 15px 17px; border: 1px solid #dfd9fa; border-radius: 15px; background: #faf8ff; }
.foundation-grid article:nth-child(2) { border-color: #e8ddc4; background: #fffbf2; }
.foundation-grid span { grid-column: 1 / -1; color: #7e6ed5; font-size: 7px; font-weight: 900; letter-spacing: 1px; }
.foundation-grid article:nth-child(2) span { color: #9b712e; }
.foundation-grid b { font-size: 15px; }
.foundation-grid p { margin: 0; color: #777180; font-size: 9px; line-height: 1.6; }
.foundation-grid em { padding: 4px 7px; border-radius: 20px; color: #6854cc; background: #eee9ff; font-size: 7px; font-style: normal; font-weight: 800; white-space: nowrap; }
.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trust-grid article { display: flex; align-items: flex-start; gap: 12px; min-height: 120px; padding: 17px; border: 1px solid #e5e1ee; border-radius: 15px; background: rgba(255,255,255,.85); }
.trust-grid i { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; color: #fff; background: #6554db; font-style: normal; font-weight: 900; }
.trust-grid article:nth-child(2) i { background: #a67936; }
.trust-grid article:nth-child(3) i { background: #238c78; }
.trust-grid b { display: block; margin: 3px 0 7px; font-size: 11px; }
.trust-grid p { margin: 0; color: #7d7785; font-size: 9px; line-height: 1.65; }
.system-details { margin-top: 17px; padding-top: 17px; border-top: 1px solid #e9e5f0; }
.system-details summary { display: flex; align-items: center; justify-content: space-between; color: #554a83; font-size: 10px; font-weight: 850; cursor: pointer; list-style: none; }
.system-details summary::-webkit-details-marker { display: none; }
.system-details summary span { color: #887cad; font-size: 8px; }
.system-details[open] summary { margin-bottom: 18px; }
.brain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.brain-card { position: relative; min-height: 230px; padding: 19px; overflow: hidden; border: 1px solid #e6e3ef; border-radius: 18px; background: #fff; }
.brain-card::after { position: absolute; right: -24px; bottom: -35px; width: 105px; height: 105px; border-radius: 50%; background: var(--brain-glow, #eeeaff); opacity: .75; content: ""; }
.brain-card > span { color: #8b8798; font-size: 8px; font-weight: 800; letter-spacing: .8px; }
.brain-card h3 { margin: 13px 0 7px; font-size: 19px; }
.brain-card p { position: relative; z-index: 1; min-height: 65px; margin: 0 0 14px; color: #6f6a79; font-size: 11px; line-height: 1.7; }
.brain-card .text-button { position: relative; z-index: 1; }
.brain-card .text-button b { margin-left: 3px; }
.brain-icon { display: grid; place-items: center; width: 43px; height: 43px; margin-top: 20px; border-radius: 14px; color: #fff; background: var(--brain-color, var(--primary)); box-shadow: 0 9px 20px color-mix(in srgb, var(--brain-color, var(--primary)) 30%, transparent); font-weight: 900; }
.brain-card--fact { --brain-color: #5f50d8; --brain-glow: #e9e4ff; }
.brain-card--destiny { --brain-color: #b58332; --brain-glow: #fff0cc; }
.brain-card--growth { --brain-color: #238f79; --brain-glow: #d8f5ec; }
.gravity-loop { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 19px; padding: 14px 16px; border-radius: 14px; color: #5f5a69; background: #f7f6fb; font-size: 10px; font-weight: 750; }
.gravity-loop i { color: #aaa4b7; font-style: normal; }
.system-principle { margin: 15px 2px 0; color: #756f7f; font-size: 10px; line-height: 1.7; }
.system-principle b { color: #51448f; }

/* Strategy architecture pages */
.strategy-screen { max-width: 1160px; }
.architecture-badge { padding: 8px 12px; border: 1px solid #dcd5ff; border-radius: 30px; color: #6250cc; background: #f4f1ff; font-size: 10px; font-weight: 800; }
.architecture-badge--gold { border-color: #ead7ad; color: #946721; background: #fff8e8; }
.strategy-hero { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 190px; margin-bottom: 28px; padding: 33px; overflow: hidden; border-radius: 24px; color: #fff; box-shadow: var(--shadow-md); }
.strategy-hero--fact { background: radial-gradient(circle at 86% 10%, rgba(125,221,220,.24), transparent 30%), linear-gradient(135deg, #191631, #3b2d85); }
.strategy-hero--destiny { background: radial-gradient(circle at 83% 6%, rgba(255,222,145,.2), transparent 31%), linear-gradient(135deg, #261f28, #5c3d38 62%, #87623f); }
.strategy-hero span { color: #b7eee9; font-size: 9px; font-weight: 850; letter-spacing: 1.3px; }
.strategy-hero--destiny span { color: #f4d79d; }
.strategy-hero h2 { max-width: 690px; margin: 8px 0 9px; font-size: 27px; line-height: 1.3; letter-spacing: -1px; }
.strategy-hero p { max-width: 750px; margin: 0; color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.7; }
.strategy-hero .button { flex: 0 0 auto; color: #302a4f; background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.material-alchemy { margin-bottom: 28px; padding: 25px; border: 1px solid #dfd9f8; border-radius: 21px; background: linear-gradient(145deg, #fff, #f9f7ff); box-shadow: var(--shadow-sm); }
.material-alchemy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.material-alchemy-head h2 { margin: 0; font-size: 21px; }
.material-alchemy-head p { max-width: 760px; margin: 8px 0 0; color: #777180; font-size: 10px; line-height: 1.7; }
.material-alchemy-form { display: grid; gap: 12px; margin-top: 20px; }
.material-alchemy-form label { position: relative; color: #514c5b; font-size: 10px; font-weight: 800; }
.material-alchemy-form textarea { width: 100%; margin-top: 8px; padding: 13px; resize: vertical; border: 1px solid #ddd8e8; border-radius: 12px; outline: 0; color: var(--ink); background: #fff; font-size: 10px; line-height: 1.7; }
.material-alchemy-form textarea:focus { border-color: #9e90ef; box-shadow: 0 0 0 3px rgba(111,86,237,.08); }
.material-alchemy-form label > small { position: absolute; right: 10px; bottom: 9px; color: #aaa4b4; font-size: 8px; }
.material-alchemy-form label > small i { font-style: normal; }
.material-alchemy-form .button { justify-self: end; }
.material-alchemy-result { margin-top: 20px; padding: 17px; border: 1px solid #e4e0ed; border-radius: 15px; background: #fff; }
.material-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.material-result-head strong, .material-result-head span { display: block; }
.material-result-head strong { font-size: 12px; }
.material-result-head span { margin-top: 4px; color: #8e8898; font-size: 8px; }
.material-fact-list { display: grid; gap: 7px; }
.material-fact-list article { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #ebe8f0; border-radius: 10px; background: #fcfbfe; }
.material-fact-list article > span { display: grid; place-items: center; height: 28px; border-radius: 8px; color: #6955cc; background: #eeeaff; font-size: 8px; font-weight: 900; }
.material-fact-list strong, .material-fact-list small { display: block; }
.material-fact-list strong { font-size: 10px; line-height: 1.5; }
.material-fact-list small { margin-top: 3px; color: #9a94a1; font-size: 7px; }
.material-fact-list em { color: #966a21; font-size: 8px; font-style: normal; font-weight: 800; }
.material-alchemy-result > p { margin: 13px 0 0; color: #7b7483; font-size: 8px; line-height: 1.65; }
.ip-module-grid, .destiny-module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.ip-module-grid article, .destiny-module-grid article { min-height: 178px; padding: 18px; border: 1px solid #e7e4ee; border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); }
.ip-module-grid i { display: block; color: #8274dc; font-size: 10px; font-style: normal; font-weight: 900; }
.ip-module-grid h3, .destiny-module-grid h3 { margin: 18px 0 8px; font-size: 16px; }
.ip-module-grid p, .destiny-module-grid p { margin: 0; color: #777180; font-size: 10px; line-height: 1.7; }
.ip-module-grid article > span { display: inline-flex; margin-top: 16px; padding: 4px 7px; border-radius: 20px; color: #6d5ccc; background: #f1eeff; font-size: 8px; font-weight: 800; }
.decision-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.15fr; align-items: center; gap: 10px; margin-top: 26px; padding: 18px; border-radius: 18px; background: #1e1a35; color: #fff; }
.decision-strip > div { padding: 10px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.decision-strip > i { color: rgba(255,255,255,.35); font-style: normal; }
.decision-strip small { display: block; color: rgba(255,255,255,.5); font-size: 8px; }
.decision-strip strong { display: block; margin-top: 4px; font-size: 11px; }
.decision-strip .is-primary { border-color: rgba(150,134,255,.48); background: rgba(111,88,238,.22); }
.destiny-input-preview, .destiny-calculator { margin-bottom: 27px; padding: 25px; border: 1px solid #eadfc9; border-radius: 21px; background: #fffdf8; }
.destiny-input-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 21px; }
.destiny-input-head h2 { margin: 0; font-size: 22px; }
.destiny-input-head > span { padding: 6px 9px; border-radius: 20px; color: #8f6b2e; background: #fff3da; font-size: 9px; font-weight: 800; }
.destiny-field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.destiny-field-grid label { color: #5d554e; font-size: 10px; font-weight: 750; }
.destiny-field-grid input, .destiny-field-grid select { width: 100%; height: 42px; margin-top: 7px; padding: 0 11px; border: 1px solid #e7dcc9; border-radius: 10px; color: #999083; background: #fff; }
.destiny-field-grid input:disabled, .destiny-field-grid select:disabled { opacity: 1; cursor: not-allowed; }
.destiny-field-grid .destiny-wide { grid-column: span 2; }
.destiny-input-preview > p { margin: 17px 0 0; color: #776f64; font-size: 10px; line-height: 1.7; }
.destiny-input-head p { max-width: 720px; margin: 7px 0 0; color: #7c7469; font-size: 10px; line-height: 1.65; }
.destiny-mode-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.destiny-mode-row label { flex: 1; color: #5d554e; font-size: 10px; font-weight: 750; }
.destiny-mode-row select { width: 100%; height: 42px; margin-top: 7px; padding: 0 11px; border: 1px solid #e7dcc9; border-radius: 10px; background: #fff; }
.destiny-fields-panel { margin-bottom: 17px; }
.destiny-check { display: flex !important; align-items: flex-start; gap: 9px; color: #675f55 !important; font-weight: 600 !important; line-height: 1.55; }
.destiny-check input { flex: 0 0 auto; width: 17px !important; height: 17px !important; margin: 1px 0 0 !important; accent-color: #8b6536; }
.destiny-reality { margin: 9px 0 17px; padding: 14px 16px; border: 1px dashed #dfd0b5; border-radius: 13px; background: #fff; }
.destiny-reality summary { color: #745937; cursor: pointer; font-size: 10px; font-weight: 800; }
.destiny-reality .destiny-field-grid { margin-top: 15px; }
.destiny-consent { padding: 13px; border-radius: 12px; background: #f6f0e6; }
.destiny-submit-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.destiny-submit-row small { color: #908574; font-size: 8px; line-height: 1.5; }
.destiny-result { scroll-margin-top: 76px; margin-top: 22px; padding-top: 22px; border-top: 1px solid #eadfc9; }
.destiny-result-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px; border-radius: 15px; color: #fff; background: linear-gradient(130deg, #211b2a, #68493c); }
.destiny-result-head span { color: #e9c77e; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.destiny-result-head h3 { margin: 7px 0 4px; font-size: 20px; }
.destiny-result-head p { margin: 0; color: rgba(255,255,255,.7); font-size: 9px; }
.destiny-result-head > em { padding: 6px 9px; border-radius: 20px; background: rgba(255,255,255,.11); font-size: 8px; font-style: normal; font-weight: 800; }
.destiny-result-grid, .destiny-audit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 13px; }
.destiny-result-grid > section, .destiny-audit-grid > section { padding: 16px; border: 1px solid #e8dfcf; border-radius: 14px; background: #fff; }
.destiny-result h4 { margin: 0 0 13px; font-size: 12px; }
.destiny-power-row { display: grid; grid-template-columns: 22px 1fr 80px; align-items: center; gap: 8px; margin-top: 8px; font-size: 8px; }
.destiny-power-row i, .destiny-dimension > i { height: 7px; overflow: hidden; border-radius: 20px; background: #eee9e1; }
.destiny-power-row i b { display: block; height: 100%; border-radius: inherit; background: var(--element-color); }
.destiny-power-row em { color: #7f766a; font-style: normal; text-align: right; }
.destiny-result dl { display: grid; gap: 8px; margin: 0; }
.destiny-result dl > div { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; }
.destiny-result dt { color: #83796d; font-size: 8px; font-weight: 800; }
.destiny-result dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.element-tag { padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--element-color) 34%, white); border-radius: 20px; color: var(--element-color); background: color-mix(in srgb, var(--element-color) 9%, white); font-size: 8px; font-weight: 850; }
.element-tag.is-caution { opacity: .65; }
.element-tag.is-empty { --element-color:#999; }
.destiny-audit-grid table { width: 100%; border-collapse: collapse; font-size: 8px; }
.destiny-audit-grid th, .destiny-audit-grid td { padding: 7px 5px; border-bottom: 1px solid #eee9e0; text-align: left; }
.destiny-audit-grid th { color: #8c8174; }
.destiny-dimension { margin-top: 9px; }
.destiny-dimension > div { display: flex; justify-content: space-between; font-size: 8px; font-weight: 800; }
.destiny-dimension > i { display: block; margin-top: 4px; }
.destiny-dimension > i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c5b3a, #c59b5e); }
.destiny-dimension small { color: #a09688; font-size: 7px; }
.destiny-rule-foot { margin-top: 13px; padding: 13px; border-radius: 12px; color: #746b60; background: #f4efe7; font-size: 8px; line-height: 1.65; }
.destiny-rule-foot > span { display: inline-flex; margin: 2px 4px; padding: 3px 6px; border-radius: 20px; color: #775a35; background: #fff; font-weight: 800; }
.destiny-rule-foot p { margin: 6px 0 0; }
.destiny-review-alert { padding: 18px; border-radius: 14px; color: #fff; background: #6f4238; }
.destiny-review-alert span { color: #ffd5a6; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.destiny-review-alert h3 { margin: 8px 0; font-size: 16px; }
.destiny-review-alert p { margin: 0; color: rgba(255,255,255,.75); font-size: 9px; }
.destiny-variant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 11px; }
.destiny-variant-grid article { padding: 12px; border: 1px solid #eadfcf; border-radius: 11px; background: #fff; }
.destiny-variant-grid small, .destiny-variant-grid strong, .destiny-variant-grid em { display: block; }
.destiny-variant-grid small { color: #9c876b; font-size: 7px; }
.destiny-variant-grid strong { margin: 6px 0; font-size: 10px; }
.destiny-variant-grid em { color: #8b8175; font-size: 7px; font-style: normal; }
.destiny-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.destiny-module-grid article { position: relative; min-height: 205px; border-color: #eadfc9; background: linear-gradient(150deg, #fff, #fffcf5); }
.destiny-module-grid article > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #fff; background: #9a7140; font-size: 9px; font-weight: 900; }
.destiny-module-grid article > em { display: inline-flex; margin-top: 19px; color: #a47636; font-size: 8px; font-style: normal; font-weight: 800; }
.dual-evidence { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 16px; margin-top: 27px; padding: 23px; border-radius: 20px; background: #f1eff7; }
.dual-evidence > div { padding: 19px; border: 1px solid #dfdbe9; border-radius: 15px; background: #fff; }
.dual-evidence > div span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: #6957cf; font-size: 10px; font-weight: 900; }
.dual-evidence h3 { margin: 13px 0 7px; font-size: 15px; }
.dual-evidence p { margin: 0; color: #746f7b; font-size: 10px; line-height: 1.7; }
.dual-evidence > b { align-self: center; color: #716790; font-size: 10px; white-space: nowrap; }
.agent-launch-heading { margin-bottom: 16px; }
.agent-launch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.agent-launch-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(145px, .85fr); min-height: 260px; padding: 27px; overflow: hidden; border-radius: 22px; cursor: pointer; isolation: isolate; transition: transform .22s ease, box-shadow .22s ease; }
.agent-launch-card:hover { transform: translateY(-4px); }
.agent-launch-card::before { position: absolute; inset: 0; z-index: -2; content: ""; }
.agent-launch-card::after { position: absolute; z-index: -1; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; content: ""; }
.agent-launch-card--avatar { color: #fff; box-shadow: 0 20px 44px rgba(51,35,120,.18); }
.agent-launch-card--avatar::before { background: radial-gradient(circle at 88% 5%, rgba(105,230,228,.24), transparent 32%), linear-gradient(140deg, #201945 0%, #3e2d91 54%, #6046db 100%); }
.agent-launch-card--avatar::after { right: -78px; bottom: -105px; box-shadow: inset 0 0 60px rgba(88,231,227,.09); }
.agent-launch-card--poster { color: #151224; border: 1px solid #ddd6fb; box-shadow: 0 20px 44px rgba(52,36,115,.11); }
.agent-launch-card--poster::before { background: radial-gradient(circle at 100% 0, rgba(193,255,36,.5), transparent 32%), linear-gradient(142deg, #f9f7ff 0%, #eae4ff 55%, #c5b6ff 100%); }
.agent-launch-card--poster::after { right: -90px; top: -90px; border-color: rgba(58,36,130,.12); }
.agent-launch-card--xhs { color: #4b2723; border: 1px solid #f1cbc3; box-shadow: 0 20px 44px rgba(118,51,39,.11); }
.agent-launch-card--xhs::before { background: linear-gradient(145deg, #fff7f2, #f8ded4 60%, #efb9aa); }
.agent-launch-card--xhs::after { right: -88px; bottom: -104px; border-color: rgba(122,54,44,.12); }
.agent-launch-card--wechat { color: #173b2c; border: 1px solid #c8e4d3; box-shadow: 0 20px 44px rgba(22,84,56,.10); }
.agent-launch-card--wechat::before { background: linear-gradient(145deg, #f7fff9, #dcf2e4 58%, #acd9bd); }
.agent-launch-card--wechat::after { right: -62px; top: -100px; border-color: rgba(24,96,61,.12); }
.agent-launch-copy { position: relative; z-index: 2; }
.agent-pill { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border: 1px solid currentColor; border-radius: 20px; font-size: 7px; font-weight: 900; letter-spacing: 1.3px; opacity: .7; }
.agent-launch-copy h3 { margin: 18px 0 9px; font-size: 23px; letter-spacing: -.8px; }
.agent-launch-copy h3 small { display: inline-block; margin-left: 8px; font-size: 9px; font-weight: 700; letter-spacing: 0; opacity: .58; }
.agent-launch-copy > p { max-width: 310px; min-height: 51px; margin: 0; font-size: 11px; line-height: 1.7; opacity: .7; }
.agent-features { display: flex; flex-wrap: wrap; gap: 5px; margin: 17px 0 20px; }
.agent-features span { padding: 5px 8px; border-radius: 6px; font-size: 8px; }
.agent-launch-card--avatar .agent-features span { color: rgba(255,255,255,.78); background: rgba(255,255,255,.1); }
.agent-launch-card--poster .agent-features span { color: #5d5279; background: rgba(255,255,255,.55); }
.agent-launch-card--xhs .agent-features span { color: #7b443a; background: rgba(255,255,255,.58); }
.agent-launch-card--wechat .agent-features span { color: #315f49; background: rgba(255,255,255,.58); }
.agent-enter { min-height: 34px; padding: 0 13px; border-color: rgba(255,255,255,.2); font-size: 9px; }
.agent-launch-card--avatar .agent-enter { color: #272044; background: #fff; }
.agent-launch-card--poster .agent-enter { color: #fff; background: #241b48; }
.agent-launch-card--xhs .agent-enter { color: #fff; background: #773d34; }
.agent-launch-card--wechat .agent-enter { color: #fff; background: #24583f; }
.agent-visual { position: relative; min-width: 0; }
.avatar-frame { position: absolute; right: -2px; bottom: -51px; width: 157px; height: 270px; overflow: hidden; border: 1px solid rgba(255,255,255,.24); border-radius: 80px 80px 25px 25px; background: linear-gradient(180deg, rgba(132,236,229,.17), rgba(28,20,74,.48)); box-shadow: 0 24px 50px rgba(9,5,38,.33); transform: rotate(4deg); }
.avatar-frame::before { position: absolute; inset: 9px; border: 1px dashed rgba(255,255,255,.15); border-radius: inherit; content: ""; }
.avatar-head { position: absolute; top: 39px; left: 51px; width: 59px; height: 70px; border-radius: 48% 48% 44% 44%; background: linear-gradient(160deg, #e5bd9e, #bd8264); box-shadow: inset 8px -4px 0 rgba(67,33,42,.16); }
.avatar-head::before { position: absolute; top: -8px; left: 2px; width: 57px; height: 27px; border-radius: 50% 50% 35% 20%; background: #272037; content: ""; transform: rotate(-5deg); }
.avatar-body { position: absolute; top: 101px; left: 25px; width: 114px; height: 150px; border-radius: 50px 50px 15px 15px; background: linear-gradient(140deg, #f4f4f8, #c4c4d0); }
.avatar-caption { position: absolute; z-index: 2; right: 11px; bottom: 30px; left: 11px; padding: 8px; border-radius: 8px; color: #fff; background: rgba(16,11,42,.76); font-size: 7px; text-align: center; backdrop-filter: blur(7px); }
.play-glyph { position: absolute; z-index: 3; top: 126px; left: 65px; display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; color: #5d47dd; background: #fff; box-shadow: 0 8px 25px rgba(0,0,0,.2); font-size: 9px; font-style: normal; }
.poster-visual { min-height: 205px; }
.mini-poster { position: absolute; top: -4px; right: 7px; display: flex; flex-direction: column; width: 139px; height: 207px; padding: 17px 13px; overflow: hidden; border: 1px solid rgba(255,255,255,.55); border-radius: 10px; color: #fff; background: radial-gradient(circle at 90% 10%, #b9ff36, transparent 29%), linear-gradient(155deg, #160f3d, #4c22b8 65%, #8c4eff); box-shadow: 0 18px 34px rgba(44,24,100,.27); transform: rotate(5deg); }
.mini-poster::after { position: absolute; right: -32px; bottom: 10px; width: 100px; height: 100px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; content: ""; }
.mini-poster small { color: #c5ff3b; font-size: 5px; font-weight: 900; letter-spacing: 1px; }
.mini-poster strong { margin-top: 25px; font-size: 18px; line-height: 1.15; letter-spacing: -.7px; }
.mini-poster em { margin-top: 11px; color: rgba(255,255,255,.66); font-size: 6px; font-style: normal; }
.mini-poster b { align-self: flex-start; margin-top: auto; padding: 6px 9px; border-radius: 5px; color: #27194b; background: #c5ff3b; font-size: 6px; }
.poster-spark { position: absolute; color: #6d3de0; font-size: 16px; }
.poster-spark-a { top: 1px; left: 17px; }
.poster-spark-b { right: -3px; bottom: 18px; font-size: 10px; }
.social-stack-visual { min-height: 205px; }
.social-card-sheet { position: absolute; top: 5px; right: 3px; display: flex; flex-direction: column; width: 130px; height: 174px; padding: 13px; border: 1px solid rgba(105,50,39,.14); color: #4d2822; background: #fff9f4; box-shadow: 0 16px 30px rgba(98,47,38,.17); }
.social-card-sheet--back { top: 29px; right: 39px; color: #6e4d43; background: #ead6c9; transform: rotate(-7deg); }
.social-card-sheet--front { transform: rotate(6deg); }
.social-card-sheet small { font-size: 5px; font-weight: 900; letter-spacing: .8px; opacity: .7; }
.social-card-sheet b, .social-card-sheet strong { margin-top: 29px; font-family: SimSun, serif; font-size: 16px; line-height: 1.18; }
.social-card-sheet span { margin-top: auto; padding-top: 8px; border-top: 1px solid currentColor; font-size: 6px; opacity: .7; }
.wechat-pair-visual { min-height: 205px; }
.wechat-wide-mini { position: absolute; top: 18px; right: -5px; width: 172px; height: 75px; padding: 12px 13px; color: #ecf8ef; background: #193e2e; box-shadow: 0 14px 28px rgba(21,67,44,.18); transform: rotate(3deg); }
.wechat-wide-mini small { display: block; color: #9bd2b3; font-size: 4px; font-weight: 900; letter-spacing: .8px; }
.wechat-wide-mini strong { display: block; width: 115px; margin-top: 14px; font-family: SimSun, serif; font-size: 11px; }
.wechat-wide-mini i { position: absolute; right: 12px; bottom: 12px; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.25); }
.wechat-square-mini { position: absolute; top: 101px; right: 25px; display: flex; flex-direction: column; width: 92px; height: 92px; padding: 13px; color: #234633; background: #f8f3e8; box-shadow: 0 14px 28px rgba(21,67,44,.18); transform: rotate(-5deg); }
.wechat-square-mini strong { font-family: SimSun, serif; font-size: 14px; line-height: 1.15; }
.wechat-square-mini span { margin-top: auto; color: #56846b; font-size: 6px; font-weight: 900; }
.secondary-agent-heading { display: flex; align-items: baseline; gap: 11px; margin: 42px 0 12px; }
.secondary-agent-heading span { font-size: 14px; font-weight: 800; }
.secondary-agent-heading p { margin: 0; color: #918c9b; font-size: 10px; }
.agent-market { margin-bottom: 48px; }
.market-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 21px; color: #8f8a98; font-size: 10px; font-weight: 800; letter-spacing: .5px; }
.market-divider::after { flex: 1; height: 1px; background: var(--line); content: ""; }
.market-divider--first { margin-top: -14px; }

/* OPC strategy agent team */
.strategy-agent-section { margin: 18px 0 36px; }
.strategy-agent-phases { display: grid; gap: 14px; }
.strategy-agent-phases--market { margin-bottom: 48px; }
.strategy-phase { display: grid; grid-template-columns: 154px minmax(0, 1fr); gap: 15px; padding: 14px; border: 1px solid rgba(104,88,193,.13); border-radius: 18px; background: rgba(255,255,255,.65); }
.strategy-phase > header { padding: 9px 7px; }
.strategy-phase > header i { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #fff; background: #292240; font-size: 8px; font-style: normal; font-weight: 900; }
.strategy-phase > header span { display: block; margin-top: 16px; color: #7666d0; font-size: 7px; font-weight: 900; letter-spacing: .7px; }
.strategy-phase > header h3 { margin: 5px 0 7px; font-size: 15px; }
.strategy-phase > header p { margin: 0; color: #898390; font-size: 8px; line-height: 1.65; }
.strategy-agent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.strategy-agent-card { position: relative; min-width: 0; min-height: 245px; padding: 19px; overflow: hidden; border: 1px solid #e3e0e9; border-radius: 18px; background: linear-gradient(155deg, #fff 55%, var(--agent-tint)); cursor: pointer; transition: transform .2s ease, border .2s ease, box-shadow .2s ease; }
.strategy-agent-card::after { position: absolute; right: -30px; bottom: -35px; width: 110px; height: 110px; border-radius: 50%; background: var(--agent-tint); content: ""; }
.strategy-agent-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--agent-accent) 35%, #e3e0e9); box-shadow: 0 17px 38px rgba(36,27,80,.09); }
.strategy-agent-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; }
.strategy-agent-head i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: var(--agent-accent); box-shadow: 0 9px 20px color-mix(in srgb, var(--agent-accent) 25%, transparent); font-size: 12px; font-style: normal; font-weight: 900; }
.strategy-agent-head span { color: var(--agent-accent); font-size: 8px; font-weight: 900; letter-spacing: .5px; }
.strategy-agent-head em { margin-left: auto; color: #bbb5c2; font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .7px; }
.strategy-agent-card h3 { position: relative; z-index: 1; margin: 17px 0 7px; font-size: 16px; }
.strategy-agent-card > p { position: relative; z-index: 1; min-height: 49px; margin: 0; color: #77717f; font-size: 10px; line-height: 1.65; }
.strategy-agent-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
.strategy-agent-tags span { padding: 4px 6px; border-radius: 6px; color: #716b78; background: rgba(255,255,255,.72); font-size: 7px; }
.strategy-agent-card > button { position: absolute; z-index: 2; bottom: 17px; left: 19px; display: flex; gap: 6px; padding: 0; border: 0; color: var(--agent-accent); background: transparent; font-size: 9px; font-weight: 850; cursor: pointer; }
.strategy-agent-card:hover > button b { transform: translateX(3px); }
.strategy-agent-card > button b { transition: transform .2s ease; }

/* Dedicated agent studio */
.studio-screen { height: calc(100vh - 65px); overflow: hidden; background: #f8f8fc; }
.studio-header { display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 24px; border-bottom: 1px solid var(--line); background: #fff; }
.studio-title-row, .studio-header-actions { display: flex; align-items: center; gap: 10px; }
.studio-agent-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #6e57e9, #4fbecb); box-shadow: 0 8px 18px rgba(93,72,204,.19); }
.studio-title-row > div:last-child span { display: block; color: var(--primary); font-size: 7px; font-weight: 900; letter-spacing: 1px; }
.studio-title-row h1 { margin: 2px 0 0; font-size: 14px; }
.studio-save-state { display: flex; align-items: center; gap: 6px; color: #8d8895; font-size: 9px; }
.studio-save-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.studio-progress-wrap { height: 65px; padding: 0 max(32px, calc((100% - 930px) / 2)); border-bottom: 1px solid var(--line); background: #fff; }
.studio-progress { display: flex; justify-content: center; height: 100%; margin: 0; padding: 0; list-style: none; }
.studio-progress li { position: relative; display: flex; align-items: center; gap: 8px; width: 175px; color: #aaa6b1; font-size: 9px; }
.studio-progress li:not(:last-child)::after { position: absolute; top: 32px; right: 12px; left: 118px; height: 1px; background: #e1dfe6; content: ""; }
.studio-progress i { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border: 1px solid #dedbe5; border-radius: 50%; background: #fff; font-size: 8px; font-style: normal; }
.studio-progress li.is-current { color: var(--primary); font-weight: 800; }
.studio-progress li.is-current i { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 4px #ece8ff; }
.studio-progress li.is-done { color: #575260; }
.studio-progress li.is-done i { color: #fff; border-color: var(--green); background: var(--green); }
.studio-progress li.is-done:not(:last-child)::after { background: #9bd7bf; }
.studio-layout { display: grid; grid-template-columns: minmax(460px, 1fr) 365px; gap: 18px; width: min(1050px, calc(100% - 48px)); height: calc(100% - 190px); margin: 0 auto; padding: 19px 0; }
.studio-form, .studio-preview-panel { min-height: 0; overflow-y: auto; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); }
.studio-form { padding: 26px 30px 38px; }
.studio-form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.studio-form-head h2 { margin: 0 0 7px; font-size: 21px; letter-spacing: -.7px; }
.studio-form-head p { margin: 0; color: #8c8795; font-size: 10px; line-height: 1.65; }
.studio-step-badge { flex: 0 0 auto; padding: 7px 10px; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 8px; font-weight: 900; }
.studio-field { margin-top: 18px; }
.studio-field > label, .studio-label-row label { display: block; color: #4e4957; font-size: 10px; font-weight: 800; }
.studio-field > label small { margin-left: 6px; color: #aaa5b1; font-size: 8px; font-weight: 500; }
.studio-field input[type="text"], .studio-field input[type="number"], .studio-field textarea, .studio-field select { width: 100%; margin-top: 8px; border: 1px solid #dedbe6; border-radius: 10px; outline: 0; color: #3d3945; background: #fff; font-size: 10px; transition: .16s ease; }
.studio-field input[type="text"], .studio-field input[type="number"], .studio-field select { height: 42px; padding: 0 12px; }
.studio-field textarea { min-height: 145px; padding: 12px; resize: vertical; line-height: 1.75; }
.studio-field input:focus, .studio-field textarea:focus, .studio-field select:focus { border-color: #a99cf2; box-shadow: 0 0 0 4px rgba(109,86,237,.06); }
.studio-label-row { display: flex; align-items: center; justify-content: space-between; }
.char-count { color: #aaa5b1; font-size: 8px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 9px; }
.choice-grid--two { grid-template-columns: repeat(2, 1fr); }
.choice-grid--three { grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; }
.choice-card { position: relative; min-height: 74px; padding: 13px; border: 1px solid #e1dfe7; border-radius: 11px; background: #fff; cursor: pointer; transition: .16s ease; }
.choice-card:hover { border-color: #bcb2f7; }
.choice-card.is-selected { border-color: var(--primary); background: #f5f2ff; box-shadow: 0 0 0 2px rgba(109,86,237,.07); }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card strong, .choice-card span { display: block; }
.choice-card strong { font-size: 10px; }
.choice-card span { margin-top: 5px; color: #9994a2; font-size: 8px; line-height: 1.45; }
.choice-icon { display: grid !important; place-items: center; width: 28px; height: 28px; margin-bottom: 8px; border-radius: 8px; background: var(--primary-soft); font-size: 12px !important; }
.studio-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.upload-zone { position: relative; display: grid; place-items: center; min-height: 128px; margin-top: 9px; padding: 20px; overflow: hidden; border: 1px dashed #cfc9de; border-radius: 12px; color: #847f8d; background: #faf9fd; text-align: center; cursor: pointer; transition: .16s ease; }
.upload-zone:hover { color: var(--primary); border-color: #9d8fed; background: #f5f2ff; }
.upload-zone input { position: absolute; opacity: 0; }
.upload-zone b { display: grid; place-items: center; width: 37px; height: 37px; margin: 0 auto 8px; border-radius: 11px; color: var(--primary); background: var(--primary-soft); font-size: 17px; }
.upload-zone strong { display: block; color: #55505e; font-size: 10px; }
.upload-zone span { display: block; margin-top: 6px; font-size: 8px; }
.upload-zone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.upload-zone.has-file::after { position: absolute; right: 7px; bottom: 7px; padding: 5px 8px; border-radius: 6px; color: #fff; background: rgba(24,18,52,.72); content: "点击替换"; font-size: 7px; }
.inline-notice { display: flex; gap: 9px; margin: 17px 0; padding: 12px; border: 1px solid #e4e0f5; border-radius: 11px; color: #777181; background: #f7f5ff; font-size: 9px; line-height: 1.6; }
.inline-notice b { color: var(--primary); }
.studio-ai-button { margin-top: 12px; }
.studio-ai-button.is-loading { pointer-events: none; opacity: .7; }
.plan-card { margin-top: 13px; padding: 17px; border: 1px solid #e2ddf7; border-radius: 13px; background: linear-gradient(145deg, #f8f6ff, #fff); }
.plan-card h3 { margin: 0 0 11px; font-size: 13px; }
.plan-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plan-list li { display: flex; gap: 8px; color: #66616e; font-size: 9px; line-height: 1.55; }
.plan-list li::before { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; color: var(--green); background: #e9f8f1; content: "✓"; font-size: 7px; }
.page-plan-editor { display: grid; gap: 10px; margin-top: 18px; }
.page-plan-item { display: grid; grid-template-columns: 64px 1fr; gap: 9px 12px; padding: 12px; border: 1px solid #e5e1eb; border-radius: 12px; background: #fcfbfd; }
.page-plan-item > div { grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 5px; padding: 7px 9px; border-radius: 8px; color: #665e76; background: #f0edf8; }
.page-plan-item > div span { font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.page-plan-item > div strong { font-size: 9px; }
.page-plan-item input, .page-plan-item textarea { width: 100%; border: 1px solid #dedbe6; border-radius: 8px; color: #413c49; background: #fff; font-size: 9px; }
.page-plan-item input { height: 34px; padding: 0 9px; font-weight: 800; }
.page-plan-item textarea { min-height: 65px; padding: 9px; resize: vertical; line-height: 1.55; }
.image-idea-list { display: grid; gap: 8px; margin-top: 18px; }
.image-idea-list > div { display: grid; grid-template-columns: 31px 1fr; gap: 10px; padding: 11px; border: 1px solid #e3e0e8; border-radius: 10px; background: #fcfbfd; }
.image-idea-list span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 8px; font-weight: 900; }
.image-idea-list p { margin: 0; color: #7e7886; font-size: 8px; line-height: 1.55; }
.image-idea-list strong { display: block; margin-bottom: 3px; color: #45404d; font-size: 9px; }
.article-outline { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0; }
.article-outline span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid #e4e0ef; border-radius: 9px; color: #645f6d; background: #fbfaff; font-size: 9px; }
.article-outline i { color: var(--primary); font-size: 7px; font-style: normal; font-weight: 900; }
.article-editor { min-height: 430px !important; line-height: 1.8 !important; }
.image-plan-editor { display: grid; gap: 11px; }
.image-plan-editor article { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 15px; border: 1px solid #e5e1ec; border-radius: 13px; background: #fcfbfd; }
.image-plan-editor article > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--primary); font-size: 9px; font-weight: 900; }
.image-plan-editor article > div { display: grid; gap: 10px; }
.image-plan-editor label { color: #6b6573; font-size: 9px; font-weight: 750; }
.image-plan-editor input, .image-plan-editor textarea { width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px solid #dfdbe6; border-radius: 9px; color: #3d3944; background: #fff; outline: 0; }
.image-plan-editor input:focus, .image-plan-editor textarea:focus { border-color: #9c8ff2; box-shadow: 0 0 0 3px rgba(109,86,237,.08); }
.image-plan-editor em { justify-self: start; padding: 4px 7px; border-radius: 20px; color: #7663d6; background: #f0edff; font-size: 8px; font-style: normal; font-weight: 800; }
.layout-spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 17px 0; }
.layout-spec-grid div { padding: 13px; border: 1px solid #e3dfeb; border-radius: 11px; background: #fbfafe; }
.layout-spec-grid b, .layout-spec-grid span { display: block; }
.layout-spec-grid b { margin-bottom: 5px; font-size: 10px; }
.layout-spec-grid span { color: #7a7482; font-size: 8px; }
.compact-upload { min-height: 94px; padding: 11px; }
.result-status { display: grid; place-items: center; min-height: 290px; padding: 35px; text-align: center; }
.result-orbit { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 24px; border: 1px solid #dcd6fb; border-radius: 50%; color: var(--primary); background: #f4f1ff; font-size: 24px; }
.result-orbit::before { position: absolute; inset: -8px; border: 1px dashed #bfb4f4; border-radius: 50%; content: ""; animation: result-spin 8s linear infinite; }
@keyframes result-spin { to { transform: rotate(360deg); } }
.result-status h2 { margin: 0 0 8px; font-size: 20px; }
.result-status p { max-width: 360px; margin: 0; color: #85808e; font-size: 10px; line-height: 1.7; }
.generation-progress { width: min(340px, 100%); height: 7px; margin: 22px auto 8px; overflow: hidden; border-radius: 9px; background: #ece9f1; }
.generation-progress i { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #4cc4ce, #b8f44c); transition: width .4s ease; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.studio-preview-panel { padding: 20px; background: #fdfdff; }
.studio-preview-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.studio-preview-heading span { color: var(--primary); font-size: 7px; font-weight: 900; letter-spacing: 1px; }
.studio-preview-heading strong { font-size: 10px; }
.studio-preview { display: grid; place-items: center; min-height: 390px; overflow: hidden; border-radius: 15px; background: #f1eff7; }
.studio-checklist { display: grid; gap: 7px; margin-top: 14px; }
.check-row { display: flex; align-items: center; gap: 8px; min-height: 31px; padding: 0 9px; border: 1px solid #eceaf0; border-radius: 8px; color: #827d8a; background: #fff; font-size: 8px; }
.check-row i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; background: #c5c1ca; font-size: 7px; font-style: normal; }
.check-row.is-ready { color: #514b59; }
.check-row.is-ready i { background: var(--green); }
.avatar-live-preview { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 390px; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 22%, #7363b3, transparent 26%), linear-gradient(145deg, #131027, #312467 65%, #14122b); }
.avatar-live-preview.template-warm { background: radial-gradient(circle at 50% 22%, #f2a95b, transparent 27%), linear-gradient(145deg, #2c1516, #7d3527 65%, #211111); }
.avatar-live-preview.template-blue { background: radial-gradient(circle at 50% 22%, #45c9db, transparent 27%), linear-gradient(145deg, #071c31, #164c73 65%, #071523); }
.avatar-live-person { position: absolute; top: 42px; width: 175px; height: 255px; overflow: hidden; border-radius: 90px 90px 22px 22px; background: linear-gradient(180deg, #d2c7d7, #84788c); box-shadow: 0 30px 55px rgba(0,0,0,.35); }
.avatar-live-person img { width: 100%; height: 100%; object-fit: cover; }
.avatar-live-person .person-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.45); font-size: 58px; }
.avatar-live-subtitle { position: absolute; right: 23px; bottom: 49px; left: 23px; padding: 10px 12px; border-radius: 8px; background: rgba(8,7,22,.76); font-size: 9px; line-height: 1.55; text-align: center; backdrop-filter: blur(8px); }
.avatar-live-logo { position: absolute; top: 17px; left: 17px; font-size: 7px; font-weight: 900; letter-spacing: 1px; opacity: .6; }
.poster-live-preview { position: relative; display: flex; flex-direction: column; width: 244px; height: 342px; padding: 25px 22px; overflow: hidden; color: #fff; background: radial-gradient(circle at 92% 8%, rgba(190,255,48,.7), transparent 23%), linear-gradient(150deg, #100a2e, #4e20b5 68%, #813ee6); box-shadow: 0 23px 45px rgba(40,26,91,.28); }
.poster-live-preview.style-tech { background: radial-gradient(circle at 90% 5%, #45d8e4, transparent 25%), linear-gradient(150deg, #051526, #083a67 68%, #0d6b83); }
.poster-live-preview.style-luxury { color: #f8df9b; background: radial-gradient(circle at 90% 8%, rgba(238,191,86,.55), transparent 22%), linear-gradient(150deg, #090909, #39230a 68%, #0b0803); }
.poster-live-preview.style-fresh { color: #173c2d; background: radial-gradient(circle at 90% 8%, #f6ff8d, transparent 24%), linear-gradient(150deg, #f4fff6, #9ee6b8 68%, #5bc394); }
.poster-live-preview::before { position: absolute; right: -65px; bottom: 22px; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; content: ""; }
.poster-live-brand { font-size: 6px; font-weight: 900; letter-spacing: 1.3px; opacity: .7; }
.poster-live-preview h3 { position: relative; z-index: 1; margin: 41px 0 11px; font-size: 27px; line-height: 1.05; letter-spacing: -1px; }
.poster-live-preview > p { position: relative; z-index: 1; margin: 0; font-size: 8px; line-height: 1.6; opacity: .75; }
.poster-live-benefits { position: relative; z-index: 1; display: grid; gap: 6px; margin: 19px 0 0; padding: 0; list-style: none; }
.poster-live-benefits li { display: flex; align-items: center; gap: 6px; font-size: 7px; }
.poster-live-benefits li::before { width: 4px; height: 4px; border-radius: 50%; background: currentColor; content: ""; }
.poster-live-cta { position: relative; z-index: 1; align-self: flex-start; margin-top: auto; padding: 8px 11px; border-radius: 5px; color: #201744; background: #c5ff3b; font-size: 7px; font-weight: 900; }
.poster-live-preview.style-luxury .poster-live-cta { color: #191006; background: #edc265; }
.poster-live-preview.style-tech .poster-live-cta { color: #062132; background: #6bf2f4; }
.poster-live-preview.style-fresh .poster-live-cta { color: #fff; background: #1e7554; }
.social-deck-preview { position: relative; width: 276px; height: 354px; }
.xhs-mini-card { position: absolute; display: flex; flex-direction: column; width: 145px; height: 193px; padding: 16px 14px; overflow: hidden; border: 1px solid rgba(42,35,30,.12); color: #241f1b; background: #f2eee4; box-shadow: 0 18px 32px rgba(51,40,33,.15); }
.xhs-mini-card:nth-child(1) { z-index: 4; top: 63px; left: 65px; transform: rotate(-2deg); }
.xhs-mini-card:nth-child(2) { z-index: 3; top: 21px; left: 7px; transform: rotate(-8deg) scale(.84); }
.xhs-mini-card:nth-child(3) { z-index: 2; top: 10px; right: 3px; transform: rotate(7deg) scale(.82); }
.xhs-mini-card:nth-child(4) { z-index: 1; right: 4px; bottom: 5px; transform: rotate(9deg) scale(.78); }
.xhs-mini-card > span { padding-bottom: 8px; border-bottom: 1px solid currentColor; font-size: 5px; font-weight: 900; letter-spacing: .5px; opacity: .62; }
.xhs-mini-card strong { margin-top: 25px; font-family: SimSun, serif; font-size: 17px; line-height: 1.14; }
.xhs-mini-card p { margin: 10px 0 0; font-size: 7px; line-height: 1.55; opacity: .72; }
.xhs-mini-card i { margin-top: auto; font-size: 5px; font-style: normal; opacity: .55; }
.skin-warm .xhs-mini-card { color: #4b2c21; background: #f7eadc; }
.skin-mist .xhs-mini-card { color: #263a34; background: #e9efea; }
.skin-ink .xhs-mini-card { color: #171713; background: #f1ede3; }
.skin-dark .xhs-mini-card { color: #f0dfb7; background: #151512; }
.skin-pink .xhs-mini-card { color: #6b2c49; background: #fff0f4; }
.skin-otome .xhs-mini-card { color: #eee7ff; background: #171326; }
.skin-ghibli .xhs-mini-card { color: #30412d; background: #eef4dc; }
.wechat-cover-preview { display: grid; grid-template-rows: 150px 170px; gap: 16px; width: 292px; }
.wechat-preview-wide, .wechat-preview-square { position: relative; overflow: hidden; color: #231f1a; background: #eee9dc; box-shadow: 0 16px 34px rgba(35,52,41,.14); }
.wechat-preview-wide { display: flex; flex-direction: column; justify-content: flex-end; padding: 19px 21px; }
.wechat-preview-wide img { position: absolute; z-index: 0; top: 0; right: 0; width: 46%; height: 100%; object-fit: contain; background: #d8ccb7; }
.wechat-preview-wide::after { position: absolute; z-index: 1; inset: 0 42% 0 0; background: linear-gradient(90deg, #eee9dc 84%, transparent); content: ""; }
.wechat-preview-wide span, .wechat-preview-wide strong, .wechat-preview-wide p { position: relative; z-index: 2; max-width: 70%; }
.wechat-preview-wide span, .wechat-preview-square span { font-size: 5px; font-weight: 900; letter-spacing: .8px; }
.wechat-preview-wide strong { font-family: SimSun, serif; font-size: 18px; line-height: 1.12; }
.wechat-preview-wide p { margin: 6px 0 0; font-size: 6px; opacity: .65; }
.wechat-preview-square { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 170px; padding: 22px; justify-self: center; text-align: center; }
.wechat-preview-square strong { margin-top: 20px; font-family: SimSun, serif; font-size: 27px; line-height: 1.05; }
.wechat-preview-square i { margin-top: auto; font-size: 6px; font-style: normal; opacity: .5; }
.mode-swiss .wechat-preview-wide, .mode-swiss .wechat-preview-square { color: #111; background: #f4f4f0; }
.mode-swiss .wechat-preview-wide::after { background: linear-gradient(90deg, #f4f4f0 84%, transparent); }
.mode-swiss .wechat-preview-wide strong, .mode-swiss .wechat-preview-square strong { font-family: Arial, "Microsoft YaHei", sans-serif; font-weight: 300; }
.theme-indigo .wechat-preview-square, .theme-ikb .wechat-preview-square { border-top: 8px solid #234d91; }
.theme-forest .wechat-preview-square { border-top: 8px solid #2f654f; }
.theme-kraft .wechat-preview-square { border-top: 8px solid #9b5d32; }
.theme-safety-orange .wechat-preview-square { border-top: 8px solid #ff5b20; }
.theme-lemon-green .wechat-preview-square { border-top: 8px solid #bfe52d; }
.studio-footer { display: flex; align-items: center; justify-content: space-between; height: 55px; padding: 0 max(24px, calc((100% - 1050px) / 2)); border-top: 1px solid var(--line); background: #fff; }
.studio-footer > span { color: #9a95a2; font-size: 8px; }
.studio-footer .button { min-height: 36px; font-size: 9px; }
.provider-grid { display: grid; gap: 11px; margin: 15px 0 20px; }
.provider-card { padding: 15px; border: 1px solid #e3dff1; border-radius: 12px; background: #faf9ff; }
.provider-card-head { display: flex; align-items: center; justify-content: space-between; }
.provider-card-head strong { font-size: 11px; }
.provider-status { padding: 4px 7px; border-radius: 10px; color: #8c6816; background: #fff0bf; font-size: 7px; }
.provider-status.is-ready { color: #17744f; background: #dcf8eb; }
.provider-card p { margin: 6px 0 11px; color: #8b8694; font-size: 8px; line-height: 1.5; }
.provider-key-row { display: flex; gap: 7px; }
.provider-key-row input { flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #dcd8e6; border-radius: 9px; outline: 0; font-size: 9px; }
.provider-key-row .button { min-height: 38px; font-size: 8px; }
.provider-id-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.provider-id-grid input { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #dcd8e6; border-radius: 9px; outline: 0; font-size: 9px; }
.provider-key-row input:focus, .provider-id-grid input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 22, 201, .08); }
.provider-check-detail { min-height: 0; margin-top: 8px; color: #17744f; font-size: 8px; line-height: 1.55; }
.provider-check-detail:empty { display: none; }
.provider-check-detail.is-error { color: #bd2848; }
.result-provider { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 2px; padding: 5px 9px; border-radius: 999px; background: #efebff; color: var(--primary); font-size: 8px; font-weight: 700; }
.result-provider::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.result-video { width: min(360px, 100%); max-height: 430px; margin: 18px auto 2px; border-radius: 15px; background: #111; box-shadow: 0 16px 38px rgba(20, 12, 45, .18); }
.result-error { color: #bd2848 !important; }
.field-help { margin: -4px 0 14px; color: #8b8694; font-size: 8px; line-height: 1.6; }

@media (max-width: 1180px) {
  :root { --sidebar: 218px; }
  .workspace-layout { grid-template-columns: 165px minmax(390px, 1fr) 280px; }
  .conversation-scroll, .chat-footer { padding-left: 30px; padding-right: 30px; }
  .screen { width: min(1000px, calc(100% - 54px)); }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .template-grid { grid-template-columns: repeat(2, 1fr); }
  .goal-card-grid, .strategy-agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-path-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .strategy-phase { grid-template-columns: 1fr; }
  .strategy-phase > header { display: flex; align-items: center; gap: 12px; padding: 4px; }
  .strategy-phase > header span { margin-top: 0; }
  .strategy-phase > header p { max-width: 460px; }
  .agent-launch-card { grid-template-columns: minmax(0, 1fr) 125px; padding: 23px; }
  .studio-layout { grid-template-columns: minmax(430px, 1fr) 315px; width: calc(100% - 34px); }
}

@media (max-width: 900px) {
  .login-view { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-panel { min-height: 100vh; padding: 35px 24px; }
  .login-card { width: 100%; max-width: 420px; }
  .mobile-brand { display: flex; margin-bottom: 60px; }
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); transition: transform .22s ease; }
  .sidebar.is-open { transform: translateX(0); }
  .main-shell { margin-left: 0; }
  .mobile-menu { display: grid; }
  .topbar { padding: 0 20px; }
  .topbar-context { margin-right: auto; margin-left: 8px; }
  .workspace-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .journey-panel { display: none; }
  .agent-launch-grid { grid-template-columns: 1fr; }
  .agent-launch-card { grid-template-columns: minmax(0, 1.15fr) minmax(145px, .85fr); }
  .brain-grid { grid-template-columns: 1fr; }
  .brain-card { min-height: 190px; }
  .ip-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destiny-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destiny-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decision-strip { grid-template-columns: 1fr 1fr; }
  .decision-strip > i { display: none; }
  .director-layout { grid-template-columns: 1fr; }
  .director-summary { position: static; min-height: 0; }
  .studio-layout { grid-template-columns: minmax(400px, 1fr) 285px; width: calc(100% - 26px); }
  .studio-progress-wrap { padding: 0 20px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .studio-progress-wrap::-webkit-scrollbar { display: none; }
  .studio-progress { justify-content: flex-start; min-width: max-content; }
}

@media (max-width: 680px) {
  .screen { width: calc(100% - 34px); padding-top: 43px; }
  .sync-state { display: none; }
  .hero-section { min-height: auto; }
  .hero-copy h1 { font-size: 36px; }
  .hero-decoration { display: none; }
  .hero-positioning { margin-bottom: 11px; font-size: 8px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-proof { gap: 8px 12px; }
  .destiny-difference { padding: 20px; }
  .destiny-difference-head { align-items: stretch; flex-direction: column; }
  .destiny-difference-head h2 { font-size: 20px; }
  .destiny-difference-cta { width: 100%; }
  .dual-lens-grid { grid-template-columns: 1fr; }
  .dual-lens-operator { display: flex; align-items: center; justify-content: center; min-height: 28px; }
  .dual-lens-operator b { font-size: 18px; }
  .destiny-outcome-row { grid-template-columns: 1fr 1fr; }
  .destiny-next-step { align-items: stretch; flex-direction: column; }
  .destiny-next-step .button { width: 100%; }
  .goal-start-section { margin-top: 34px; padding: 19px; }
  .goal-card-grid, .strategy-agent-grid { grid-template-columns: 1fr; }
  .goal-card { min-height: 190px; }
  .strategy-agent-card { min-height: 235px; }
  .agent-path-map { margin-top: 26px; padding: 20px; }
  .agent-path-heading { display: block; }
  .agent-path-heading > span { display: inline-flex; margin-bottom: 12px; }
  .agent-path-heading h2 { font-size: 19px; }
  .agent-path-heading p { margin-top: 8px; }
  .agent-path-steps { grid-template-columns: 1fr; }
  .agent-path-arrow { justify-self: center; transform: rotate(90deg); }
  .agent-family--strategy, .agent-family--production { padding: 19px; }
  .agent-family-heading { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .agent-family-heading h2 { font-size: 17px; }
  .agent-family-heading > em, .agent-family-heading > button { grid-column: 2; justify-self: start; }
  .strategy-phase > header { align-items: flex-start; }
  .director-banner { grid-template-columns: 1fr; margin-top: 28px; padding: 20px; }
  .director-banner-mark, .director-banner::after { display: none; }
  .director-banner h2 { font-size: 16px; }
  .director-banner p { line-height: 1.6; }
  .director-banner .button { width: 100%; }
  .director-heading-badge { display: none; }
  .director-form-section { grid-template-columns: 1fr; padding: 18px; }
  .director-section-index { width: 34px; height: 34px; }
  .director-field-grid { grid-template-columns: 1fr; }
  .director-field-wide { grid-column: auto; }
  .director-output-grid { grid-template-columns: 1fr 1fr; }
  .director-summary { padding: 20px; }
  .idea-composer { margin-top: 36px; padding: 15px; }
  .composer-footer { align-items: stretch; flex-direction: column; }
  .start-idea-button { width: 100%; }
  .project-grid, .project-grid--all, .template-grid, .template-grid--all { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .project-toolbar { align-items: stretch; flex-direction: column; gap: 12px; }
  .search-box { width: 100%; }
  .filter-tabs { align-self: flex-start; }
  .workspace-layout { grid-template-columns: 1fr; }
  .artifact-panel { display: none; }
  .workspace-header { height: 66px; padding: 0 12px; }
  .workspace-screen { height: calc(100vh - 65px); }
  .workspace-layout { height: calc(100% - 66px); }
  .conversation-scroll { padding: 24px 18px 20px; }
  .chat-footer { padding: 10px 13px 12px; }
  .workspace-actions .button { font-size: 0; }
  .workspace-actions .button svg { margin: 0; }
  .chat-meta > span { display: none; }
  .message { max-width: 96%; }
  .help-steps { grid-template-columns: 1fr; }
  .agent-launch-card { grid-template-columns: 1fr; min-height: 280px; }
  .agent-visual { display: none; }
  .agent-launch-copy > p { min-height: auto; }
  .secondary-agent-heading { align-items: flex-start; flex-direction: column; }
  .system-map { padding: 19px; }
  .foundation-grid { grid-template-columns: 1fr; }
  .foundation-grid article { grid-template-columns: 1fr; }
  .foundation-grid em { justify-self: start; }
  .trust-grid { grid-template-columns: 1fr; }
  .gravity-loop { justify-content: flex-start; overflow-x: auto; white-space: nowrap; }
  .brain-card { min-height: 205px; }
  .architecture-badge { display: none; }
  .strategy-hero { align-items: stretch; flex-direction: column; padding: 23px; }
  .strategy-hero h2 { font-size: 23px; }
  .strategy-hero .button { width: 100%; }
  .material-alchemy { padding: 19px; }
  .material-alchemy-head { flex-direction: column; }
  .material-alchemy-form .button { width: 100%; }
  .material-result-head { align-items: stretch; flex-direction: column; }
  .material-fact-list article { grid-template-columns: 32px minmax(0, 1fr); }
  .material-fact-list em { grid-column: 2; }
  .ip-module-grid, .destiny-module-grid { grid-template-columns: 1fr; }
  .ip-module-grid article, .destiny-module-grid article { min-height: 165px; }
  .decision-strip { grid-template-columns: 1fr; }
  .destiny-input-preview, .destiny-calculator { padding: 19px; }
  .destiny-input-head { flex-direction: column; }
  .destiny-field-grid { grid-template-columns: 1fr; }
  .destiny-field-grid .destiny-wide { grid-column: auto; }
  .destiny-mode-row, .destiny-submit-row { align-items: stretch; flex-direction: column; }
  .destiny-mode-row .button, .destiny-submit-row .button { width: 100%; }
  .destiny-result-grid, .destiny-audit-grid, .destiny-variant-grid { grid-template-columns: 1fr; }
  .destiny-result-head { align-items: flex-start; flex-direction: column; }
  .dual-evidence { grid-template-columns: 1fr; }
  .dual-evidence > b { text-align: center; }
  .studio-screen { height: calc(100vh - 65px); }
  .studio-header { height: 62px; padding: 0 10px; }
  .studio-header-actions .studio-save-state { display: none; }
  .studio-header-actions .button { display: grid; place-items: center; width: 40px; min-height: 40px; padding: 0; }
  .studio-header-actions .button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .studio-header-actions .button svg { width: 18px; margin: 0; }
  .studio-title-row { gap: 6px; }
  .studio-progress-wrap { height: 54px; }
  .studio-progress li { width: 115px; font-size: 8px; }
  .studio-progress li:not(:last-child)::after { left: 90px; }
  .studio-layout { display: block; width: 100%; height: calc(100% - 171px); padding: 0; }
  .studio-form { height: 100%; padding: 21px 17px 35px; border: 0; border-radius: 0; }
  .studio-preview-panel { display: none; }
  .studio-form-grid, .choice-grid { grid-template-columns: 1fr; }
  .choice-grid--two { grid-template-columns: 1fr 1fr; }
  .studio-footer { height: 55px; padding: 0 12px; }
  .studio-footer > span { display: none; }
  .provider-key-row { flex-wrap: wrap; }
  .provider-key-row input { flex-basis: 100%; }
  .provider-id-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}