/* Shared workspace shell and controls; page-specific video layouts remain in their own files. */
:root { --ui-border:#34434f; --ui-surface:#14202b; --ui-text:#eaf1f6; --ui-muted:#b6c4cf; --ui-radius:8px; --ui-accent:#9ee9c6; }
body[data-workspace] .app-shell { width:100%; min-width:0; height:auto; min-height:100vh; display:flex; flex-direction:column; overflow:visible; }
body[data-workspace] .workspace { width:100%; min-width:0; flex:1; overflow:visible; }
body[data-workspace] .topbar { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; height:auto; min-height:68px; padding:12px 20px; }
body[data-workspace] .topbar .brand { flex:0 1 auto; min-width:0; }
body[data-workspace] .topbar .tabs { display:flex; flex:1 1 420px; min-width:0; width:auto; gap:4px; padding:4px; }
body[data-workspace] .topbar .tab { flex:1 1 0; min-width:0; padding:10px 12px; font-size:14px; white-space:normal; line-height:1.3; }
body[data-workspace] .topbar-actions { display:flex; flex:0 1 auto; flex-wrap:wrap; gap:8px; min-width:0; }
body[data-workspace] .topbar-actions .ghost-button { width:auto; min-width:0; min-height:38px; padding:8px 12px; border-radius:var(--ui-radius); font-size:13px; }
body[data-workspace] .topbar-actions .account-pill { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-workspace] :is(#codeView,#libraryView,#annotateView).active { padding:16px 20px 24px; gap:16px; min-width:0; }
body[data-workspace] :is(.code-workbar,.library-workbar,.annotate-workbar) { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
body[data-workspace] :is(.code-workbar-actions,.annotate-workbar-actions) { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
body[data-workspace] :is(.code-match-heading strong,.library-workbar h2,.annotate-workbar h2) { font-size:20px; line-height:1.3; margin:0; }
body[data-workspace] :is(.panel-button,.primary-button,.mini-button), #projectsDialog button, .account-modal button:not(.modal-close) { min-height:38px; border-radius:var(--ui-radius); font-size:14px; line-height:1.3; padding:8px 12px; box-shadow:none; }
body[data-workspace] :is(.panel-button,.mini-button) { color:var(--ui-text); border-color:var(--ui-border); background:var(--ui-surface); }
body[data-workspace] .primary-button { background:var(--ui-accent); color:#10241b; border:1px solid var(--ui-accent); }
body[data-workspace] button:disabled { opacity:.45; cursor:not-allowed; }
body[data-workspace] :is(button,input,select,textarea,summary):focus-visible { outline:2px solid var(--ui-accent); outline-offset:3px; }
body[data-workspace] :is(input[type=checkbox],input[type=radio]) { width:16px; height:16px; min-width:16px; min-height:16px; margin:0; padding:0; accent-color:var(--ui-accent); flex-shrink:0; }
body[data-workspace] :is(.status,.empty-copy,.project-summary) { line-height:1.5; }
body[data-workspace] :is(.danger-button,.panel-button.danger) { color:#ffc1bd; border-color:#734b4b; background:#39282e; }
body[data-workspace] dialog { max-width:calc(100vw - 24px); max-height:90dvh; overflow:auto; box-sizing:border-box; }
body[data-workspace] .modal-backdrop { padding:16px; overflow:auto; }
body[data-workspace] .account-modal { width:min(640px,100%); max-height:90dvh; overflow:auto; }
body[data-workspace] .account-grid { grid-template-columns:minmax(0,1fr); }
body[data-workspace] .modal-close { width:40px; height:40px; min-width:40px; min-height:40px; }
@media(max-width:1100px) {
 body[data-workspace] .topbar .tabs { flex-basis:100%; order:3; }
 body[data-workspace] .topbar .brand { flex:1; }
}
@media(max-width:760px) {
 body[data-workspace] .topbar { padding:12px; gap:10px; }
 body[data-workspace] .topbar .brand p { display:none; }
 body[data-workspace] .topbar-actions .logout-button { display:none; }
 body[data-workspace] .topbar-actions .account-pill { max-width:155px; }
 body[data-workspace] :is(#codeView,#libraryView,#annotateView).active { padding:12px; }
 body[data-workspace] .topbar .tab { font-size:13px; padding:10px 6px; }
 body[data-workspace] :is(.code-workbar-actions,.annotate-workbar-actions) { flex:1 1 100%; }
 body[data-workspace] .project-savebar>div { flex:1; }
 body[data-workspace] .project-savebar strong { max-width:55vw; }
 #annotateView.active #toolGrid { grid-template-columns:repeat(4,minmax(0,1fr)); }
 #annotateView .transport { grid-template-columns:34px 40px 34px minmax(40px,1fr) 68px; }
 #annotateView .transport output { grid-column:1/-1; text-align:right; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }
body[data-workspace] .topbar .topbar-actions .ghost-button { flex:0 0 auto; }
body[data-workspace] :is(#codeView,#libraryView,#annotateView) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea), body[data-workspace] :is(#projectsDialog,.account-modal) :is(input,select,textarea) { border-radius:var(--ui-radius); border:1px solid var(--ui-border); background:var(--ui-surface); color:var(--ui-text); font-size:14px; padding:8px 10px; min-width:0; }
body[data-workspace] :is(#codeView,#libraryView,#annotateView) .icon-button { border-radius:var(--ui-radius); box-shadow:none; }
body[data-workspace] #libraryView .library-preview-controls button { border-radius:var(--ui-radius); }
body[data-workspace] #libraryView .library-preview-controls { display:flex !important; flex-wrap:wrap; align-items:center; gap:8px; }
body[data-workspace] #libraryView .library-preview-controls>* { grid-column:auto; }
body[data-workspace] #libraryView .library-preview-controls button { flex:0 0 38px; width:38px; height:38px; min-width:38px; }
body[data-workspace] #libraryView .library-preview-controls select { flex:0 0 80px; }
body[data-workspace] .account-modal .modal-head p { font-weight:400; line-height:1.5; }
/* A signed-out visitor sees the homepage, never the workspace shell beneath it. */
body[data-workspace]:not(.has-session) .app-shell { display:none; }