/* TopView home fidelity (v22.1), compared with research/homepage-v2.12/topview/state-composer.png (official, 2026-10).
   Additive over the frozen runtime: restyles the hero, composer and skill row; adds the promo pill and model cards. */
.home-topview .banner-card { display: flex; flex-direction: column; gap: 10px; background: none !important; border: 0 !important; padding: 0 !important; text-align: left; }
.home-topview .banner-card img { border-radius: 14px; }
.home-topview .banner-card strong { display: block !important; position: static !important; font-size: 15px; font-weight: 600; color: #fff; text-shadow: none; }

.home-topview .tv-hero {
  margin: 24px 24px 0; padding: 30px 48px 36px !important; border-radius: 28px; border: 1px solid #2a2a2e;
  background: linear-gradient(180deg, #121214 0%, #15131c 45%, #3d1fae 82%, #b9a8f5 100%) !important; text-align: center;
}
.home-topview .tv-fid-promo {
  display: inline-flex; gap: 8px; align-items: center; padding: 4px 14px; border-radius: 999px; background: #6c3cf5; color: #ffd84a;
  font-size: 12px; font-weight: 700; margin: 0 auto 18px;
}
.home-topview .tv-fid-promo b { color: #fff; font-weight: 700; }
.home-topview .tv-hero h1 {
  font-size: 36px !important; letter-spacing: -.02em; text-transform: none !important; font-weight: 800 !important; margin: 0 0 26px !important;
  background: linear-gradient(180deg, #fff 30%, #b9b9c3); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.home-topview .tv-composer { max-width: 1180px; margin: 0 auto !important; border-radius: 18px !important; background: #1d1d20 !important; border: 1px solid #2c2c31 !important; text-align: left; }
.home-topview .composer-tabs { display: flex; gap: 24px; padding: 0 16px; border-bottom: 1px solid #2a2a2e; }
.home-topview .composer-tabs > button {
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 12px 8px 10px !important; color: #9a9aa3 !important; font-size: 13px;
  border-bottom: 2px solid transparent !important; display: inline-flex; align-items: center; gap: 6px;
}
.home-topview .composer-tabs > button.selected { color: #fff !important; border-bottom-color: #fff !important; }
.home-topview .composer-tabs > button > svg { display: none; }
.home-topview .composer-tabs > button[data-production-role="projectSelect"] {   /* "Canvas ⌄" is a small pill next to Video Agent */
  margin-left: -18px; padding: 1px 8px !important; border: 1px solid #44444b !important; border-radius: 999px !important; font-size: 11px; align-self: center; color: #c9c9d1 !important;
}
.home-topview #home-prompt { min-height: 120px; padding: 16px !important; font-size: 14px; }
.home-topview #home-prompt:empty::before { content: 'Ask Topview to make a 30-second launch video'; color: #7a7a83; }
.home-topview .composer-footer { display: flex; align-items: center; gap: 10px; padding: 8px 14px 14px; }
.home-topview .composer-footer [data-action="upload"] { width: 32px; height: 32px; border-radius: 50% !important; font-size: 0 !important; border: 1px solid #3a3a40 !important; background: none !important; padding: 0 !important; justify-content: center; }
.home-topview .composer-footer [data-action="upload"] svg { display: none; }
.home-topview .composer-footer [data-action="upload"]::after { content: '+'; font-size: 18px; color: #cfcfd6; }
.home-topview .composer-footer [data-action="skills"] { display: none !important; }
.home-topview .composer-footer select[data-home-model] {
  height: 32px; padding: 0 28px 0 12px; border-radius: 999px; border: 1px solid #3a3a40; background: #1d1d20; color: #d6d6dc; font-size: 13px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #9a9aa3 50%), linear-gradient(135deg, #9a9aa3 50%, transparent 50%);
  background-position: calc(100% - 14px) 14px, calc(100% - 10px) 14px; background-size: 4px 4px; background-repeat: no-repeat;
}
.home-topview .composer-footer [data-action="agent-model"] { background: none !important; border: 0 !important; color: #b9b9c1 !important; font-size: 13px; }
.home-topview .composer-footer [data-action="agent-model"]::after { content: ' ⌄'; opacity: .7; }
.home-topview .composer-footer .generate {
  width: 34px; height: 34px; min-width: 34px; border-radius: 50% !important; padding: 0 !important; font-size: 0 !important; display: grid !important; place-items: center;
  background: #3a3a40 !important; border: 0 !important;
}
.home-topview .composer-footer .generate:not(:disabled) { background: #fff !important; }
.home-topview .composer-footer .generate svg { display: none; }
.home-topview .composer-footer .generate::after { content: '↑'; font-size: 16px; color: #9a9aa3; }
.home-topview .composer-footer .generate:not(:disabled)::after { color: #111; }
.home-topview .skill-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px !important; }
.home-topview .skill-chips > button {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 4px !important; border-radius: 10px !important;
  background: #1c1c20 !important; border: 1px solid #34343a !important; color: #fff !important; font-size: 13px;
}
.home-topview .skill-chips > button:not([data-action])::before { content: ''; width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #3b2b6e, #8c5cf5 60%, #f2a1c8); }
.home-topview .skill-chips > button[data-action="skills"] { background: #6c3cf5 !important; border-color: #8c6af7 !important; padding: 0 16px !important; }
.home-topview .skill-chips > button[data-action="skills"]::after { content: ' ›'; }
.home-topview .tv-fid-models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px 24px 0; }
.home-topview .tv-fid-models > div { border: 1px solid #2a2a2e; border-radius: 16px; padding: 18px 16px; background: #141416; min-width: 0; }
.home-topview .tv-fid-models > div:first-child { background: linear-gradient(135deg, #2a1d6a, #141416 70%); border-color: #4b38a6; }
.home-topview .tv-fid-models b { display: block; font-size: 16px; margin-bottom: 18px; color: #fff; }
.home-topview .tv-fid-models span { display: block; font-size: 12px; font-weight: 700; color: #ffd84a; letter-spacing: .02em; }
.home-topview .tv-fid-models small { display: block; font-size: 12px; color: #77777f; margin-top: 4px; }
@media (max-width: 900px) { .home-topview .tv-fid-models { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-topview .skill-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; max-width: 1180px; margin-left: auto !important; margin-right: auto !important; scrollbar-width: none; }
.home-topview .skill-chips > button { flex: none; height: 36px; font-size: 12.5px; gap: 8px; }
.home-topview .skill-chips > button:not([data-action])::before { width: 28px; height: 28px; }
.home-topview .tv-composer { max-width: 980px; }

/* ---- Canvas editor (canvas-only-safe-clip.jpg) ---- */
header.canvas-top .canvas-brand{position:relative;width:28px!important;height:28px!important;padding:0!important;border-radius:7px;background:#fff!important;color:#000}
header.canvas-top .canvas-brand svg{display:none}
header.canvas-top .canvas-brand::after{content:"";position:absolute;inset:4px;background:#000;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17l4-5 3 3 3-6 4 4'/%3E%3Cpath d='M15 9l1.5-3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17l4-5 3 3 3-6 4 4'/%3E%3Cpath d='M15 9l1.5-3'/%3E%3C/svg%3E") center/contain no-repeat}
header.canvas-top .project-title{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
header.canvas-top .project-title::after{content:" ⌄";opacity:.6;font-weight:400}
header.canvas-top .tv-fid-cap{align-self:center;flex:none;width:18px;height:18px;margin-left:6px;background:currentColor;opacity:.7;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c3 2 9 2 12 0v-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c3 2 9 2 12 0v-5'/%3E%3C/svg%3E") center/contain no-repeat}
header.canvas-top .tv-fid-host{align-self:center;min-width:1px;min-height:1px;display:inline-flex;align-items:center;margin-left:12px;font-size:12px;opacity:.85}
header.canvas-top > [data-production-account-open]{display:none!important}
header.canvas-top .top-actions [data-boundary="Plugin"]::before{content:"◎ ✳ ";opacity:.85}
header.canvas-top .top-actions [data-boundary="Credits"]{font-size:0!important;opacity:1!important;cursor:default}
header.canvas-top .top-actions [data-boundary="Credits"]::after{content:"+ " attr(data-fid-credits);font-size:13px;font-weight:600}
/* toolbar: distinct icons where the runtime reuses one */
.canvas-tools button:is([title="3D World"],[title="3D Builder"],[title="Assets"],[title="Product"]) svg{display:none}
.canvas-tools button:is([title="3D World"],[title="3D Builder"],[title="Assets"],[title="Product"])::before{content:"";display:block;flex:none;width:20px!important;height:20px!important;margin:auto;background:currentColor;
  -webkit-mask:var(--tv-ico) center/contain no-repeat;mask:var(--tv-ico) center/contain no-repeat}
.canvas-tools button[title="3D World"]{--tv-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E")}
.canvas-tools button[title="3D Builder"]{--tv-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M4 7.5l8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E")}
.canvas-tools button[title="Assets"]{--tv-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='4' height='16'/%3E%3Crect x='9' y='4' width='4' height='16'/%3E%3Cpath d='M14 5l3.5-1 3 15.5-3.5 1z'/%3E%3C/svg%3E")}
.canvas-tools button[title="Product"]{--tv-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='13' rx='2'/%3E%3Cpath d='M9 7V6a3 3 0 0 1 6 0v1M9 11a3 3 0 0 0 6 0'/%3E%3C/svg%3E")}
.board-bottom{gap:14px!important;align-items:center}
.board-bottom [data-action="undo"]{font-size:0!important}
.board-bottom [data-action="undo"]::before{content:"";display:block;width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat}