/* Shared structure; all color roles come from the selected canonical theme. */
body.visual-v1[data-companion]{--opp-on-primary:var(--v-on-action);--opp-primary:var(--v-action);--opp-accent:var(--v-ink);--opp-surface:var(--v-surface);--opp-panel:var(--v-surface);--opp-light:var(--v-ink);--opp-muted:var(--v-muted);--opp-link:var(--v-ink)}
body.visual-v1.art-pass.lagoon-pass[data-companion] :is(.product-workspace,#modal) :is(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:3px solid var(--v-ink)!important;outline-offset:3px!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] :is(.product-workspace,#modal) :is(.generation-status,.pip-pending-row,.pip-instructions,.pip-queue,.onboarding-banner,.empty,.notice,.extension-mock){background:var(--v-surface)!important;color:var(--v-ink)!important;border-color:var(--v-control-line)!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] :is(.product-workspace,#modal) :is(.generation-status,.pip-pending-row,.pip-instructions,.empty,.notice,.extension-mock) :is(p,span,small,strong){color:var(--v-ink)!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace :is(.extension,.extension-mock,.job-search,.board-search,.board-filters) :is(a.text-button,summary){color:var(--v-ink)!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] :is(.product-workspace,#modal) .btn:disabled{opacity:1!important;background:var(--v-shell)!important;color:var(--v-muted)!important;border:1px dashed var(--v-control-line)!important;cursor:not-allowed;filter:none!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] :is(.product-workspace,#modal) .btn:not(:disabled):hover{filter:none!important;box-shadow:inset 0 0 0 2px var(--v-control-line)!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] :is(.product-workspace,#modal) :is([role=alert],.error){background:var(--v-surface)!important;color:var(--v-ink)!important;border:2px solid var(--v-ink)!important;padding:12px;border-radius:12px}
body.visual-v1 .brand .companion-logo{width:40px!important;height:40px!important;flex:0 0 40px}
body.visual-v1 .product-workspace.nav-collapsed .brand .companion-logo{width:32px!important;height:32px!important;flex-basis:32px}
body.visual-v1 .companion-card-art{background:var(--v-hover)!important;border-radius:16px}
body.visual-v1 .companion-cutout{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain!important;filter:none!important}
body.visual-v1 .pip-sprite[data-creature-outfit]{filter:none!important}
body.visual-v1 .creature-room-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px}
body.visual-v1 .creature-room-head>div{flex:1;min-width:200px}
body.visual-v1 .creature-room-head h1{font:clamp(26px,3vw,40px) var(--v-display)!important;margin:8px 0}
body.visual-v1 .creature-room-head p{margin:0}
body.visual-v1 .creature-room-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:stretch}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .creature-stage{height:470px!important;min-height:0!important;margin:0!important;width:100%!important;overflow:hidden;position:relative;background:var(--v-action)!important;border:2px solid var(--v-pink)!important;box-sizing:border-box;border-radius:24px!important;box-shadow:none!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .creature-stage .room-bg{width:100%;height:100%;object-fit:cover!important;opacity:1!important;filter:none!important}
body.visual-v1 .creature-stage .creature{position:absolute!important;width:clamp(130px,24vw,260px)!important;height:220px!important;transform:translate(-50%,-50%)!important;z-index:2;pointer-events:none}
body.visual-v1 .creature-stage .pip-sprite{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;transform:none!important}
body.visual-v1 .creature-stage :is(.pip-facing,.pip-sprite-frame){display:flex!important;position:relative!important;width:100%!important;height:100%!important;align-items:center;justify-content:center;transform:none!important;animation:none!important}
body.visual-v1 .habitat-caption{position:absolute;bottom:10px;left:10px;background:var(--v-surface);color:var(--v-ink);padding:4px 8px;border-radius:8px;font-size:11px;line-height:1.3;z-index:3}
body.visual-v1 .creature-care{display:flex;flex-direction:column;gap:16px;background:var(--v-surface);color:var(--v-ink);border:1px solid var(--v-line);border-radius:24px;padding:24px}
body.visual-v1 .creature-care h2{margin:8px 0;font-size:24px}
body.visual-v1 .creature-care p{font-size:15px;line-height:1.5;margin:8px 0 16px}
body.visual-v1 .creature-care small{display:block;color:var(--v-muted);font-size:13px;line-height:1.5;margin:12px 0 0}
body.visual-v1 .creature-care .btn{width:100%}
body.visual-v1 .creature-growth progress{display:block;width:100%;height:12px;margin-top:16px;accent-color:var(--v-ink)}
body.visual-v1 .creature-demo{margin-top:24px;border:1px solid var(--v-control-line);border-radius:16px;padding:16px}
body.visual-v1 .creature-demo summary{cursor:pointer;min-height:32px}
body.visual-v1 .creature-demo .btn{margin:8px 8px 0 0}
body.visual-v1 .room-caption{font-size:14px;line-height:1.5;padding:8px 0;margin:0}
body.visual-v1 #legacy-root[data-loading]>.app-loading.creature-loading{display:flex!important;position:fixed;inset:0;background:var(--v-paper)!important;color:var(--v-ink)!important;min-height:100dvh;z-index:10000;font:18px var(--v-body);gap:20px}
body.visual-v1 .creature-loading img{width:180px;height:180px;object-fit:contain}
.creature-theme-preview{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;border-radius:24px;background:var(--v-paper);color:var(--v-ink);border:1px solid var(--v-control-line);font:16px OppPlex,Arial,sans-serif}
.creature-theme-preview .preview-resident{width:180px;height:140px}.creature-theme-preview .preview-resident img{width:100%;height:100%;object-fit:contain}
.creature-theme-preview .btn{background:var(--v-action)!important;color:var(--v-ink)!important;border:1px solid var(--v-control-line);padding:12px;opacity:1!important}
@media(max-width:1000px){body.visual-v1 .creature-room-grid{grid-template-columns:minmax(0,1fr)}body.visual-v1 .creature-care{display:grid;grid-template-columns:1fr 1fr}body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .creature-stage{height:380px!important}}
@media(max-width:600px){body.visual-v1 .creature-care{display:flex;padding:20px}body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .creature-stage{height:300px!important}body.visual-v1 .creature-room-grid{gap:16px}body.visual-v1 .creature-stage .creature{width:170px!important;height:170px!important}}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace :is(.avatar,.cloud-status){background:var(--v-surface)!important;color:var(--v-ink)!important;border:1px solid var(--v-control-line)!important;border-radius:12px;min-height:44px;min-width:44px}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .avatar svg{color:var(--v-ink)!important;fill:none}
body.visual-v1[data-companion] #modal .modal-title-icon{background:var(--v-hover)!important;color:var(--v-ink)!important;border:1px solid var(--v-control-line);border-radius:12px}
body.visual-v1[data-companion] #modal .modal-title-icon svg{color:var(--v-ink)!important;stroke:currentColor!important;fill:none!important}

/* Painted world art keeps its own lighting and palette; UI uses calm semantic tokens. */
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .tank-glass{background-blend-mode:normal!important;background-position:center!important}
/* Shared world surfaces for onboarding/landing consumers; no copied theme CSS. */
.creature-world-surface{background:var(--v-action) var(--creature-habitat) center/cover no-repeat}
.creature-world-thumbnail,.creature-theme-preview .preview-resident{background:var(--v-action) var(--creature-habitat-thumbnail) center/cover no-repeat;border-radius:16px;box-sizing:border-box}
.creature-theme-preview .preview-resident{padding:12px}
/* Creature reward accents use the secondary fill, never an unreadable text color. */
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .tank-feed{background:var(--v-pink)!important;color:var(--v-ink)!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .level-pill{background:var(--v-pink)!important;color:var(--v-ink)!important;border-color:var(--v-control-line)!important}
body.visual-v1 .creature-care .creature-snacks{border-top:3px solid var(--v-pink);padding-top:16px}

/* Compact habitat framing keeps labels subordinate to the resident and scenery. */
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .tank-glass{border:2px solid var(--v-pink)!important;box-sizing:border-box}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .tank-label{left:6px!important;right:auto!important;bottom:6px!important;top:auto!important;max-width:calc(100% - 12px);gap:8px;padding:3px 6px!important;border-radius:6px!important;font-size:10px!important;line-height:1.2!important;background:var(--v-surface)!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .tank-label :is(b,span){font-size:inherit!important;line-height:inherit!important}

/* Sidebar care sits below the framed artwork, without a colored container. */
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .sidebar-tank.lagoon-tank{background:transparent!important;border-radius:0!important;overflow:visible!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .sidebar-tank .tank-label{position:static!important;display:flex;justify-content:space-between;align-items:baseline;max-width:none;margin:10px 0 0!important;padding:0!important;border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;font-size:12px!important;line-height:1.4!important;gap:8px}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .sidebar-tank .tank-label b{max-width:none;min-width:0;overflow-wrap:anywhere}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .sidebar-tank .tank-label span{flex-shrink:0}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .sidebar-tank .tank-feed{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 0!important;padding:0!important;background:transparent!important;border:0!important;min-height:44px}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .sidebar-tank .tank-feed .btn{flex-shrink:0;min-height:44px;padding:8px 14px!important;margin:0!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace.nav-collapsed .sidebar-tank :is(.tank-label,.tank-feed){display:none!important}
/* Keep navigation and companion together instead of distributing empty vertical space. */
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .sidebar{gap:0!important;padding-top:16px!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .sidebar .brand{margin-bottom:0!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .side-nav{margin:16px 0 0!important;gap:4px!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .side-bottom{margin-top:12px!important;padding-top:0!important}
body.visual-v1.art-pass.lagoon-pass[data-companion] .product-workspace .sidebar-tank.lagoon-tank{margin-top:8px!important}

/* Larger resident using the existing approved art; stop motion when requested. */
.creature-theme-preview .preview-resident{width:min(100%,360px);height:240px;padding:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.creature-theme-preview .preview-resident>:is(img,.companion-atlas){width:90%!important;height:90%!important;object-fit:contain;animation:activation-resident-wander 9s ease-in-out infinite}
@keyframes activation-resident-wander{0%,45%,100%{transform:translate(-3%,1%) scaleX(1)}50%,95%{transform:translate(3%,-1%) scaleX(-1)}}
@media(prefers-reduced-motion:reduce){.creature-theme-preview .preview-resident>:is(img,.companion-atlas){animation:none!important;transform:none!important}}
body.visual-v1[data-companion],body.visual-v1[data-companion] *{scrollbar-color:var(--content-secondary) var(--surface-panel);scrollbar-width:thin}
body.visual-v1[data-companion] ::-webkit-scrollbar{width:8px;height:8px}
body.visual-v1[data-companion] ::-webkit-scrollbar-thumb{background:var(--content-secondary);border-radius:8px}
body.visual-v1[data-companion] ::-webkit-scrollbar-track{background:var(--surface-panel)}
body.visual-v1[data-companion] .product-workspace :is(.studio-template-list,.studio-tools:first-child,.job-results,.board-detail){scrollbar-color:var(--content-secondary) var(--surface-panel)!important}

/* Audit 4 progression: room and sidebar project the same workspace values. */
body.visual-v1 .creature-room-grid{align-items:start}
body.visual-v1 .creature-care{box-sizing:border-box;height:470px;gap:12px;padding:20px;overflow:auto}
body.visual-v1 .creature-growth progress{margin-top:10px}
body.visual-v1 .creature-care h2{margin:4px 0}
body.visual-v1 .creature-snacks{margin-top:auto}
.creature-feed-help{position:relative}
.creature-feed-help [role="tooltip"]{position:absolute;bottom:calc(100% + 8px);left:0;right:0;padding:12px;border:1px solid var(--v-control-line);border-radius:12px;background:var(--v-surface);color:var(--v-ink);font-size:13px;line-height:1.45;box-shadow:0 4px 12px #0002;opacity:0;pointer-events:none;z-index:5}
.creature-feed-help:hover [role="tooltip"],.creature-feed-help:focus-within [role="tooltip"]{opacity:1}
@media(max-width:1000px){body.visual-v1 .creature-care{height:auto;min-height:0;overflow:visible}body.visual-v1 .creature-snacks{margin-top:0}}

/* A display preference only; the hunting workspace stays mounted. */
body.visual-v1 #room-companion[hidden]{display:none!important}
#room-companion[hidden] *{animation-play-state:paused!important}
body.visual-v1 .companion-collapse-row{display:flex;justify-content:center;margin:6px 0 12px}
body.visual-v1 .companion-collapse-row .btn{background:transparent!important;color:var(--content-secondary);border-color:transparent;font-size:13px;min-height:44px;padding:6px 12px;gap:7px}
body.visual-v1 .companion-collapse-row .btn:hover{background:var(--surface-panel)!important}