/* OpaJonko AI Lab V18.3 — Multi-Page Workspace */
:root{--oj-side-w:274px}
body.ojMultipageBoot .appView{visibility:hidden}
body.ojMultipageReady .appView{visibility:visible}
body.ojMultipageBoot .top{width:var(--oj-side-w)!important}
body.ojMultipageBoot .shell{padding-left:calc(var(--oj-side-w) + 24px)!important}

/* Full tool taxonomy in the left sidebar */
.nav.ojToolNav{gap:7px!important;padding-bottom:8px}
.ojNavGroup{border:1px solid transparent;border-radius:11px;overflow:hidden;background:transparent}
.ojNavGroup[open]{background:rgba(255,255,255,.012);border-color:#1d2530}
.ojNavGroup summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:34px;padding:0 9px;color:#6f7a8b;font-size:9px;font-weight:850;letter-spacing:.11em;text-transform:uppercase;user-select:none}
.ojNavGroup summary::-webkit-details-marker{display:none}
.ojNavGroup summary i{font-style:normal;color:#515d6e;font-size:12px;transition:transform .16s ease}
.ojNavGroup[open] summary i{transform:rotate(180deg);color:#9b8bcf}
.ojNavItems{display:flex;flex-direction:column;gap:2px;padding:0 5px 6px}
.nav .ojSideLink{position:relative;width:100%;min-height:35px;display:flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid transparent;border-radius:8px;color:#929eae;text-decoration:none;font-size:10.5px;font-weight:670;line-height:1.15;transition:.15s ease}
.nav .ojSideLink b{width:23px;height:23px;flex:0 0 23px;display:grid;place-items:center;border-radius:6px;color:#677386;background:transparent;font-size:11px}
.nav .ojSideLink:hover{background:#121821;border-color:#222c39;color:#edf0f5;transform:translateX(1px)}
.nav .ojSideLink:hover b{background:#171e28;color:#c0c9d5}
.nav .ojSideLink.active{background:linear-gradient(90deg,rgba(139,109,246,.15),rgba(139,109,246,.045));border-color:rgba(139,109,246,.28);color:#fff}
.nav .ojSideLink.active:before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:2px;border-radius:3px;background:#8b6df6}
.nav .ojSideLink.active b{color:#d8ceff;background:rgba(139,109,246,.11)}

/* Dedicated page shell */
.ojDedicatedToolPage,.ojNativeToolPage{max-width:1540px!important;margin:0 auto!important}
.ojPageHero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 18px;padding:23px 25px;border:1px solid #242c38;border-radius:16px;background:linear-gradient(145deg,#11161e,#0d1118 65%,rgba(139,109,246,.05));box-shadow:0 16px 42px rgba(0,0,0,.14)}
.ojPageHeroText{max-width:900px}.ojPageEyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:8px;color:#9c8bd6;font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.ojPageHero h1{margin:0;color:#fafbfc;font-size:28px;line-height:1.08;letter-spacing:-.035em}.ojPageHero p{max-width:760px;margin:9px 0 0;color:#8e9aab;font-size:11px;line-height:1.65}.ojPageHeroBadge{flex:0 0 auto;padding:8px 10px;border:1px solid rgba(139,109,246,.25);border-radius:9px;background:rgba(139,109,246,.08);color:#c8bcf3;font-size:9px;font-weight:800;white-space:nowrap}
.ojPageGrid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,.65fr);gap:16px;align-items:start}
.ojToolMain{min-width:0;display:grid;gap:14px}.ojToolMain>.card,.ojToolMain>.studioCard{margin:0!important;width:100%!important;max-width:none!important}.ojToolMain>.studioCard{padding:20px!important}
.ojToolMain .outfitRefMini{min-height:320px!important}.ojToolMain .outfitRefMini img{max-height:360px!important;object-fit:contain!important}
.ojToolWrapped{padding:20px!important}.ojToolWrapped>.ojWrappedTitle{margin-bottom:16px;color:#dce1e8;font-size:10.5px;font-weight:800;letter-spacing:.075em;text-transform:uppercase}
.ojPageRail{position:sticky;top:82px;display:grid;gap:12px}.ojRailCard{padding:15px;border:1px solid #232c38;border-radius:13px;background:linear-gradient(180deg,#10151c,#0d1117)}.ojRailCard h3{margin:0 0 11px;color:#dce1e8;font-size:9px;font-weight:850;letter-spacing:.10em;text-transform:uppercase}.ojRailSteps{display:grid;gap:9px}.ojRailStep{display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;align-items:start;color:#a2adbc;font-size:10px;line-height:1.45}.ojRailStep b{width:23px;height:23px;display:grid;place-items:center;border:1px solid #303948;border-radius:7px;background:#121821;color:#a999e0;font-size:8px}.ojRailLinks{display:grid;gap:6px}.ojRailLink{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid #25303d;border-radius:9px;background:#0c1117;color:#aab5c4;text-decoration:none;font-size:9.5px;font-weight:700}.ojRailLink:hover{border-color:#514775;background:#121722;color:#fff}.ojRailLink:after{content:"→";color:#7465aa}.ojTip{padding:9px 10px;border-left:2px solid #6656a4;border-radius:0 8px 8px 0;background:rgba(139,109,246,.045);color:#8692a3;font-size:9.5px;line-height:1.5}.ojWorkspaceFacts{display:grid;grid-template-columns:1fr 1fr;gap:7px}.ojFact{padding:10px;border:1px solid #242d39;border-radius:9px;background:#0b1016}.ojFact b{display:block;color:#d9dee6;font-size:10px;margin-bottom:3px}.ojFact span{display:block;color:#657183;font-size:8px;line-height:1.3}

/* Native legacy views now become complete pages rather than isolated blocks */
.ojNativeToolPage>.ojNativePageGrid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,.65fr);gap:16px;align-items:start}.ojNativePageMain{min-width:0;display:grid;gap:14px}.ojNativePageMain>.toolPageHero,.ojNativePageMain>.viewTitle,.ojNativePageMain>.studioHead,.ojNativePageMain>.presetHero,.ojNativePageMain>.poseHero{display:none!important}.ojNativePageMain>.standaloneToolGrid,.ojNativePageMain>.settingsGrid,.ojNativePageMain>.adminGrid{margin-top:0!important}.ojNativePageMain>.adminGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.ojNativePageMain .toolPageHero [data-go-dashboard]{display:none!important}

/* Prompt builder now owns the full canvas. Former right-side tool tabs live in the sidebar pages. */
body[data-oj-page="prompt-builder"] #dashboardView.dashboard{grid-template-columns:minmax(300px,.72fr) minmax(560px,1.45fr)!important;max-width:1540px!important;gap:15px!important}
body[data-oj-page="prompt-builder"] .compactToolSidebar{display:none!important}
body[data-oj-page="prompt-builder"] .cleanCommand{grid-column:1/-1!important}
body[data-oj-page="prompt-builder"] .mainAssistant{grid-column:1/-1!important}
body[data-oj-page="prompt-builder"] .projectTopbar{grid-column:1/-1!important}

/* Optimizer overview */
.ojOverviewGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ojOverviewCard{display:flex;flex-direction:column;min-height:160px;padding:17px;border:1px solid #242d39;border-radius:13px;background:linear-gradient(180deg,#10151c,#0d1117);text-decoration:none}.ojOverviewCard b{color:#eceff4;font-size:12px}.ojOverviewCard p{margin:8px 0 14px;color:#7d899a;font-size:9.5px;line-height:1.55}.ojOverviewCard span{margin-top:auto;color:#a999df;font-size:9px;font-weight:800}.ojOverviewCard:hover{border-color:#514775;transform:translateY(-1px)}

/* Remove obsolete internal tool-tab chrome on dedicated pages */
body.ojMultipageReady .toolboxTabs{display:none!important}
body.ojMultipageReady .toolboxHeader{display:none!important}
body:not([data-oj-page="prompt-builder"]) #globalAnnouncements{display:none!important}

@media(max-width:1180px){:root{--oj-side-w:238px}.ojPageGrid,.ojNativeToolPage>.ojNativePageGrid{grid-template-columns:minmax(0,1fr) 270px}.ojPageHero h1{font-size:24px}.ojOverviewGrid{grid-template-columns:1fr}}
@media(max-width:900px){body.ojMultipageBoot .shell{padding-left:14px!important}.top{width:auto!important}.nav.ojToolNav{display:block!important;max-height:48vh;overflow:auto;padding:4px!important}.ojNavGroup{margin-bottom:4px}.ojNavGroup summary{min-height:35px}.ojNavItems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.nav .ojSideLink{min-height:36px}.ojPageGrid,.ojNativeToolPage>.ojNativePageGrid{grid-template-columns:1fr}.ojPageRail{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.ojPageHero{align-items:flex-start}.ojPageHero h1{font-size:22px}body[data-oj-page="prompt-builder"] #dashboardView.dashboard{grid-template-columns:1fr!important}}
@media(max-width:640px){.ojNavItems{grid-template-columns:1fr}.ojPageHero{padding:17px;flex-direction:column}.ojPageHero h1{font-size:20px}.ojPageRail{grid-template-columns:1fr}.ojWorkspaceFacts{grid-template-columns:1fr 1fr}.ojNativePageMain>.adminGrid{grid-template-columns:1fr!important}}


/* ===== V18.3 TRUE MULTIPAGE ISOLATION =====
   The legacy dashboard remains in the DOM as a compatibility engine, but is
   never visible outside Prompt Builder. Dedicated pages own the visible canvas. */
body[data-oj-page]:not([data-oj-page="prompt-builder"]) #dashboardView{
  display:none!important;
  visibility:hidden!important;
}
body[data-oj-page]:not([data-oj-page="prompt-builder"]) #dashboardView.dashboard{
  display:none!important;
}
body[data-oj-page]:not([data-oj-page="prompt-builder"]) .ojDedicatedToolPage,
body[data-oj-page]:not([data-oj-page="prompt-builder"]) .ojNativeToolPage{
  display:block!important;
  visibility:visible!important;
}
body[data-oj-page="prompt-builder"] #dashboardView{
  display:grid!important;
  visibility:visible!important;
}
.ojEngineHidden{display:none!important;visibility:hidden!important}

/* Make every dedicated tool feel like a complete product page. */
.ojToolMain{align-content:start}
.ojToolMain>.card,.ojToolMain>.studioCard,.ojToolMain>.ojToolWrapped{
  min-height:220px;
  box-shadow:0 18px 50px rgba(0,0,0,.13);
}
.ojToolMain>.studioCard{min-height:330px}
body[data-oj-page="reference-hub"] .ojToolMain>#referenceHubCard,
body[data-oj-page="face-identity"] .ojToolMain>#faceDetailerCard,
body[data-oj-page="prompt-intelligence"] .ojToolMain>.v18BrainCard,
body[data-oj-page="grid-director"] .ojToolMain>#gridDirectorCard{
  min-height:520px;
}

/* Synchronized workspace rail */
.ojSyncCard{position:relative;overflow:hidden}
.ojSyncCard:before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(#8b6df6,#5a94ff)}
.ojSyncStatus{display:flex;align-items:center;gap:7px;margin-bottom:9px;color:#b8c3d1;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.ojSyncDot{width:7px;height:7px;border-radius:50%;background:#65d993;box-shadow:0 0 0 4px rgba(101,217,147,.08)}
.ojSyncPrompt{padding:10px;border:1px solid #242d39;border-radius:9px;background:#0a0f15;color:#8d99aa;font-size:9px;line-height:1.55;max-height:96px;overflow:hidden;white-space:pre-wrap;word-break:break-word}
.ojSyncMeta{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0}
.ojSyncChip{padding:5px 7px;border:1px solid #283240;border-radius:7px;background:#0d131b;color:#9eabbc;font-size:8px;font-weight:750}
.ojSyncActions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}
.ojSyncActions a{display:grid;place-items:center;min-height:32px;padding:6px 8px;border:1px solid #2a3442;border-radius:8px;background:#10161e;color:#b8c2d0;text-decoration:none;font-size:8.5px;font-weight:800}
.ojSyncActions a:hover{border-color:#514775;color:#fff;background:#141b25}

@media(max-width:900px){
  body[data-oj-page]:not([data-oj-page="prompt-builder"]) #dashboardView{display:none!important}
  .ojToolMain>.card,.ojToolMain>.studioCard,.ojToolMain>.ojToolWrapped{min-height:0}
}