/* PicPlayer's 48px title row, 42px options row and 316px advertising rail. */
:root { --titlebar-height: 48px; --options-height: 42px; --inspector-width: 300px; --ad-width: 0px; }
[hidden], .hidden { display: none !important; }
.app-shell { width: 100%; height: 100%; display: grid; grid-template-rows: var(--titlebar-height) var(--options-height) minmax(0, 1fr) 28px; 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-right: 1px solid #2a3240; }
.brand-logo { display: block; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 8px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; white-space: nowrap; }
.brand-name { color: #f6f7fb; font-size: 13px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.brand-tagline { color: #939dac; font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: .025em; }
.profile-button{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid #414c5f;border-radius:50%;background:#202938;color:#cfdbeb;cursor:pointer;padding:0;transition:background .15s,border-color .15s}

.profile-button:hover,.profile-button.active{background:#33435a;border-color:#6e9bc7}

.profile-button.is-signed-in{border-color:#469b81;background:#153b32;color:#a1eed5}

.profile-initials{font-size:13px;font-weight:750;line-height:1}

.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}

.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;cursor:pointer;color:#d4d9e1;white-space:nowrap}

.menu-bar>button:hover,.menu-bar>button.active{background:#2a313d}

.menu-bar>button:focus-visible,.profile-button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.menu-popovers{position:fixed;inset:0;pointer-events:none;z-index:100}

.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}

.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 button[data-planned=true]{color:#7e8795}

.menu-popover kbd{color:#8994a5;font-family:inherit;font-size:10px}

.menu-separator{height:1px;background:#46505f;margin:5px 5px}

.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;color:#a0adbf}

.profile-popover .profile-join{color:#90ceff}

.profile-popover .profile-legal-link{font-size:11px;color:#adb9ca}


.application-menu { flex: 0 0 auto; }
.network-menu { min-width: 44px; font-size: 12px; }
.profile-area { display: flex; height: 100%; align-items: center; justify-content: flex-end; padding: 0 10px; min-width: 50px; }
.profile-button { flex: 0 0 30px; }
.profile-summary > span { line-height: 1.5; }
.options-bar { display: grid; grid-template-columns: minmax(0, 1fr) var(--inspector-width) var(--ad-width); min-width: 0; background: #1b2029; border-bottom: 1px solid var(--border); }
.options-main { display: grid; grid-template-columns: minmax(0, 1fr) auto 50px; align-items: center; min-width: 0; height: 100%; }
.tool-controls { min-width: 0; height: 100%; overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; padding: 0 9px; scrollbar-width: thin; scrollbar-color: #414c5f transparent; }
.tool-options { flex: 0 0 auto; gap: 8px; font-size: 11px; color: var(--muted); }
.tool-options > * { flex-shrink: 0; }
.tool-options input[type="number"] { width: 56px; }
.tool-options .icon-button { width: 27px; height: 28px; }
.tool-options .button { min-height: 28px; padding: 4px 7px; font-size: 11px; }
.header-transport { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 9px; white-space: nowrap; }
.header-transport .button { min-height: 29px; padding: 4px 9px; font-size: 12px; }
#frameReadout { min-width: 88px; color: #b4bed0; font-size: 11px; font-variant-numeric: tabular-nums; }
.inspector-tabs { height: 100%; border-left: 1px solid var(--border); border-bottom: 0; }
.inspector-tabs .tab { font-size: 11px; }
.ad-header-spacer { display: none; background: #12171e; border-left: 1px solid #303640; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--ad-width); min-width: 0; min-height: 0; }
.editor-content { display: grid; grid-template-rows: minmax(0, 1fr) clamp(140px, 26vh, 230px); min-height: 0; min-width: 0; }
.toolbar { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.toolbar .tool { flex: 0 0 36px; }
.timeline-shell, .timeline-actions, .timeline-scroller { min-width: 0; }
.timeline-actions > * { flex-shrink: 0; }
.shared-ad-rail { display: none; min-height: 0; height: 100%; width: 316px; overflow: hidden; }
.statusbar { min-width: 0; overflow: hidden; white-space: nowrap; gap: 12px; }
.statusbar .project-status { min-width: 75px; max-width: 250px; }
.status-divider { width: 1px; height: 12px; flex: 0 0 1px; background: var(--border); }
.statusbar .view-options { flex: 0 0 auto; gap: 3px; }
.statusbar .mini-button { width: 21px; height: 21px; }
.statusbar .zoom-readout { height: 21px; min-width: 45px; font-size: 10px; }
#statusMessage { overflow: hidden; text-overflow: ellipsis; }
.preferences-card { width: min(570px, calc(100vw - 30px)); }
.preferences-content { padding: 10px 18px; color: var(--muted); line-height: 1.65; }
.preferences-content a { color: #b3a1ff; }
@media (min-width: 1280px) {
  .app-shell:has(.shared-ad-rail:not([hidden])) { --ad-width: 316px; }
  .shared-ad-rail:not([hidden]) { display: block; }
  .app-shell:has(.shared-ad-rail:not([hidden])) .ad-header-spacer { display: block; }
}
@media (min-width: 1700px) {
  .options-main { grid-template-columns: minmax(0, 1fr) auto minmax(50px, 1fr); }
}
@media (max-width: 1280px) {
  .menu-bar > button { padding: 0 6px; font-size: 11px; }
  .network-menu { padding-left: 10px; }
}
@media (max-width: 1050px) {
  :root { --inspector-width: 260px; }
  .timeline-actions { gap: 4px; }
  #storageStatus { display: none; }
}
/* Keep all desktop editing panels accessible, as in the original app. Only the
   editor/options area scrolls on phones; the brand and Network remain on-screen. */
@media (max-width: 759px) {
  .titlebar { padding-right: 5px; }
  .brand { flex-basis: 164px; padding: 0 9px; gap: 8px; }
  .network-menu { padding-left: 7px; }
  .options-bar { overflow-x: auto; grid-template-columns: minmax(500px, 1fr) var(--inspector-width); scrollbar-width: none; }
  .ad-header-spacer { display: none; }
  .editor-layout { display: block; overflow-x: auto; }
  .editor-content { min-width: 760px; height: 100%; }
  #coordinates, .status-divider { display: none; }
  .statusbar .project-status { max-width: 150px; }
  .statusbar { gap: 6px; }
}

.icon-button { white-space: nowrap; }