/* PicPlayer geometry and navigation; KitConstructor's existing editor palette. */
.app-shell { display:grid; grid-template-rows:var(--titlebar-height) var(--options-height) minmax(0,1fr); width:100%; height:100%; background:var(--bg); }
.titlebar { display:flex; align-items:stretch; width:100%; min-width:0; padding:0 9px 0 0; background:#10141b; border-bottom:1px solid #252b35; position:relative; z-index:20; user-select:none; }
.brand { display:flex; align-items:center; flex:0 0 174px; gap:10px; padding:0 14px; border:0; border-right:1px solid #2a3240; background:transparent; cursor:pointer; text-align:left; }
.brand-mark { display:grid; place-items:center; flex:0 0 24px; width:24px; height:24px; color:var(--accent); }
.brand-mark svg { width:24px; height:24px; stroke-width:1.65; }
.brand-copy { display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; white-space:nowrap; }
.brand-word { color:#f6f7fb; font-size:13px; font-weight:790; letter-spacing:-.02em; line-height:1; }
.brand-copy small { color:#939dac; font-size:9px; font-weight:600; line-height:1; letter-spacing:.025em; }
.menu-bar { display:flex; align-items:center; flex:0 1 auto; min-width:0; white-space:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.menu-bar::-webkit-scrollbar { display:none; }
.application-menu { padding:0 4px; flex-shrink:0; }
.network-menu { margin-left:auto; padding-left:16px; }
.menu-bar>button { flex:0 0 auto; height:30px; border-radius:5px; border:0; background:transparent; padding:0 8px; font-size:12px; cursor:pointer; color:#d4d9e1; white-space:nowrap; }
.menu-bar>button:hover,.menu-bar>button.active { background:#2a313d; }
.projectbar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; min-width:0; padding:0 9px 0 14px; background:var(--surface); border-bottom:1px solid var(--line); }
.project-controls { display:contents; }
.project-identity { overflow:hidden; max-width:100%; }
.project-name-button { min-width:0; font-size:12px; }
.save-indicator { font-size:10px; }
.mode-switcher { gap:3px; padding:2px; border-radius:8px; }
.mode-button { min-height:30px; padding:0 11px; font-size:11px; white-space:nowrap; }
.top-actions { gap:4px; }
.top-actions .icon-button { width:30px; height:30px; border-radius:5px; }
.profile-button { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; margin-left:5px; border:1px solid #414c5f; border-radius:50%; background:#202938; color:#cfdbeb; cursor:pointer; padding:0; transition:background .15s,border-color .15s; }
.profile-button svg { width:18px; height:18px; }
.profile-button:hover,.profile-button.active { background:#33435a; border-color:#6e9bc7; }
.menu-bar>button:focus-visible,.profile-button:focus-visible,.brand:focus-visible,.projectbar button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.menu-popovers { position:fixed; inset:0; pointer-events:none; z-index:80; }
.menu-popovers .menu-popover { display:none; position:absolute; top:calc(var(--titlebar-height) + 3px); min-width:min(245px,calc(100vw - 16px)); max-width:calc(100vw - 16px); padding:5px; background:#252b35; border:1px solid #3a424f; border-radius:7px; box-shadow:0 18px 50px #000b; pointer-events:auto; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#566274 #252b35; font-size:12px; }
.menu-popovers .menu-popover.open { display:block; }
.menu-popover button,.menu-popover a { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; border:0; background:transparent; padding:7px 9px; border-radius:4px; text-align:left; cursor:pointer; color:inherit; text-decoration:none; white-space:nowrap; line-height:1.35; }
.menu-popover button:hover,.menu-popover a:hover,.menu-popover button:focus-visible,.menu-popover a:focus-visible { background:#3a4656; outline:none; }
.menu-popover button:focus-visible,.menu-popover a:focus-visible { box-shadow:inset 0 0 0 1px #80b7e3; }
.menu-popover kbd { color:#8994a5; font-family:inherit; font-size:10px; }
.menu-separator { height:1px; background:#46505f; margin:5px; }
.menu-popovers .network-popover { min-width:min(215px,calc(100vw - 16px)); }
.current-app-badge { font-size:9px; color:#86c8f7; font-weight:500; }
.profile-popover { width:245px; }
.profile-summary { display:grid; gap:5px; padding:8px 9px 9px; overflow-wrap:anywhere; }
.profile-summary strong { font-size:13px; font-weight:650; }
.profile-summary>span { font-size:11px; line-height:1.5; color:#a0adbf; }
.profile-popover .profile-legal-link { font-size:11px; color:#adb9ca; }
/* Exactly the same outer width and breakpoint as PicPlayer. Internal SDK CSS is unchanged. */
.pp-ad-rail { display:none; min-height:0; height:100%; width:316px; overflow:hidden; }
@media (min-width:1280px) {
  .app-shell:not(.embed-mode) .workspace:has(.pp-ad-rail:not([hidden])) { grid-template-columns:var(--sidebar-left) minmax(0,1fr) var(--sidebar-right) 316px; }
  .app-shell:not(.embed-mode) .pp-ad-rail:not([hidden]) { display:block; }
}
@media (max-width:1280px) {
  .menu-bar>button { padding:0 6px; font-size:11px; }
  .network-menu { padding-left:10px; }
  .save-indicator { display:none; }
}
@media (max-width:760px) {
  .titlebar { padding-right:5px; }
  .brand { flex-basis:164px; padding:0 10px; gap:8px; }
  .network-menu { padding-left:7px; }
  .projectbar { grid-template-columns:minmax(0,1fr) auto; gap:6px; padding:0 5px 0 8px; }
  .project-controls { display:flex; align-items:center; gap:14px; min-width:0; height:100%; overflow:auto hidden; scrollbar-width:none; }
  .project-controls::-webkit-scrollbar { display:none; }
  .project-identity { flex:0 0 auto; max-width:160px; }
  .mode-switcher { flex:0 0 auto; }
  .mode-button { padding:0 8px; }
  .top-actions { gap:2px; }
  .profile-button { width:29px; height:29px; flex-basis:29px; margin-left:2px; }
}
/* Native dialog focus trapping for the SDK's consent preferences entry point. */
.ad-preferences-dialog { width:min(480px,calc(100vw - 32px)); padding:24px; border:1px solid var(--line-strong); border-radius:14px; background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.ad-preferences-dialog::backdrop { background:rgba(3,10,14,.74); backdrop-filter:blur(4px); }
.ad-preferences-dialog h2 { margin:0 0 12px; font-size:20px; }
.ad-preferences-dialog p { color:var(--muted); font-size:13px; line-height:1.6; }
.ad-preferences-dialog a { color:var(--accent); }
.ad-preferences-dialog footer { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }