:root { --app-topbar-height:64px; --topbar-ink:var(--brand-ink); --topbar-muted:var(--brand-ink); }
.app-topbar { position:sticky !important; top:0; z-index:1200; height:auto !important; min-height:64px; padding:0 !important; display:block !important; background:#fcfbf8; border-bottom:1px solid var(--surface-recessed); }
.app-topbar-inner { width:calc(100% - 40px); max-width:1600px; margin:auto; min-height:64px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:22px; }
.app-topbar .brand { display:flex; align-items:center; gap:8px; font:650 15px/1.3 Inter,system-ui,sans-serif; letter-spacing:-.025em; color:var(--brand-ink); }
.app-topbar .brand svg,.app-topbar .brand-icon { width:29px; height:29px; flex-shrink:0; }
.app-topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.app-topbar button,.app-topbar a { transition:transform 160ms ease,opacity 160ms ease; }
.app-topbar button:hover:not(:disabled),.app-topbar-actions > a:hover { transform:translateY(-1px); }
.app-topbar button:focus-visible,.app-topbar a:focus-visible { outline:2px solid var(--brand-ink); outline-offset:3px; }
.topbar-home { padding:8px; font:550 12px/1.3 Inter,system-ui,sans-serif; color:var(--brand-ink); border-radius:5px; }
.topbar-home:hover { background:var(--surface-recessed); }
.topbar-create { padding:9px 12px; border:1px solid var(--brand-ink); background:var(--brand-ink); border-radius:6px; color:#fff; font:600 12px/1.3 Inter,system-ui,sans-serif; white-space:nowrap; }
.topbar-create:hover { opacity:.88; }
.topbar-help { display:grid; place-items:center; width:29px; height:29px; padding:0; border:1px solid var(--surface-line); border-radius:50%; background:transparent; color:var(--brand-ink); font:650 13px/1 Inter,system-ui,sans-serif; }
.topbar-dashboard-label { justify-self:start; font:500 12px/1.4 Inter,system-ui,sans-serif; color:var(--brand-ink); }
.compact-modes { position:relative; display:grid; grid-template-columns:repeat(4,1fr); justify-self:center; width:550px; max-width:100%; padding:3px; background:var(--surface-recessed); border:1px solid var(--surface-recessed); border-radius:8px; }
.mode-indicator { position:absolute; top:3px; bottom:3px; left:0; border-radius:5px; background:var(--surface-recessed); box-shadow:0 1px 3px #22222212; pointer-events:none; transition:transform 200ms ease; }
.compact-mode { position:relative; z-index:1; display:flex; flex-wrap:wrap; align-content:center; align-items:center; justify-content:center; gap:2px 4px; min-width:0; min-height:36px; border:0; border-radius:5px; background:transparent; padding:5px 4px; color:var(--brand-ink); font:550 11px/1.35 Inter,system-ui,sans-serif; }
.compact-mode.is-current { color:var(--brand-ink); font-weight:700; }
.compact-mode:disabled { opacity:.65; cursor:default; }
.compact-mode:hover:not(:disabled) { background:#ffffff40; }
.app-topbar .compact-mode:hover:not(:disabled) { transform:none; }
.mode-icon { font-size:14px; line-height:1; }
.app-topbar .profile { display:block; margin:0; position:relative; }
.app-topbar .profile-button { width:32px; height:32px; min-width:0 !important; padding:0 !important; display:grid; place-items:center; border:1px solid var(--surface-line); border-radius:50%; background:var(--surface-recessed); }
.app-topbar .avatar { width:30px; height:30px; border:0; border-radius:50%; background:transparent; font:650 11px/1 Inter,system-ui,sans-serif; color:var(--brand-ink); }
.app-topbar .profile-menu { top:calc(100% + 10px); right:0; width:235px; padding:7px; border:1px solid var(--surface-line); border-radius:9px; box-shadow:0 10px 30px #2222221c; background:#fffefa; z-index:1300; transform-origin:top right; }
.app-topbar .profile-menu:not([hidden]) { animation:topbar-menu-in 180ms ease-out; }
.topbar-identity { padding:10px 10px 12px; margin-bottom:4px; border-bottom:1px solid var(--surface-recessed); }
.topbar-identity #profile-name { display:block; font:650 13px/1.5 Inter,system-ui,sans-serif; color:var(--brand-ink); }
.topbar-identity #profile-email { display:block; font:400 12px/1.5 Inter,system-ui,sans-serif; color:var(--brand-ink); overflow-wrap:anywhere; }
.app-topbar .profile-menu > a,.app-topbar .profile-menu > button { padding:9px 10px; font-size:12px; color:var(--brand-ink); }
.topbar-tip { position:absolute; left:20px; top:calc(100% + 9px); z-index:1250; width:300px; max-width:calc(100vw - 30px); padding:12px; border:1px solid var(--surface-line); border-radius:8px; background:var(--surface-recessed); box-shadow:0 7px 22px #22222214; }
.topbar-tip::before { content:""; position:absolute; top:-5px; left:var(--tip-arrow,50%); width:8px; height:8px; border-left:1px solid var(--surface-line); border-top:1px solid var(--surface-line); background:var(--surface-recessed); transform:rotate(45deg); }
.topbar-tip p { font:12px/1.6 Inter,system-ui,sans-serif; margin:0 0 8px; color:var(--brand-ink); }
.topbar-tip button { border:1px solid var(--surface-line); border-radius:5px; padding:6px 9px; background:white; color:var(--brand-ink); font-size:11px; }
.topbar-tip:not([hidden]) { animation:topbar-content-in 180ms ease-out; }
.topbar-help-dialog { width:min(540px,calc(100vw - 28px)); max-height:85svh; overflow:auto; border:1px solid var(--surface-line); border-radius:12px; padding:22px; background:var(--surface-recessed); color:var(--brand-ink); box-shadow:0 16px 50px #22222233; }
.topbar-help-dialog[open] { animation:topbar-content-in 180ms ease-out; }
.topbar-help-dialog::backdrop { background:#1c304566; animation:topbar-fade-in 150ms ease; }
.topbar-guide-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.topbar-guide-head h2 { margin:0; font:650 21px/1.3 Inter,system-ui,sans-serif; letter-spacing:-.025em; }
.topbar-guide-close { border:0; background:transparent; font-size:25px; color:var(--brand-ink); }
.topbar-help-dialog > p { font-size:12px; line-height:1.7; color:var(--brand-ink); }
.topbar-guide-list { list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.topbar-guide-list li { border:1px solid var(--surface-line); border-radius:7px; padding:12px; background:var(--surface-recessed); }
.topbar-guide-list strong,.topbar-guide-list span { display:block; font:600 12px/1.5 Inter,system-ui,sans-serif; }
.topbar-guide-list span { font-weight:400; margin-top:5px; color:var(--brand-ink); }
.topbar-help-dialog .sample-guide { margin:16px 0 0; padding:10px; font-size:11px; }
/* The former journey band is gone. Only the existing project title and actions sit below. */
body[data-topbar-page="bulk"] .page-main { padding-top:18px; padding-bottom:20px; animation:topbar-content-in 180ms ease-out; }
body[data-topbar-page="bulk"] .heading-row { margin-bottom:16px; gap:16px; }
body[data-topbar-page="bulk"] .heading-row h1 { font-size:clamp(22px,2vw,28px); line-height:1.3; }
body[data-topbar-page="bulk"] .crumb { display:none; }
body[data-topbar-page="bulk"] .save-status { color:var(--brand-ink); font-size:11px; }
body[data-topbar-page="bulk"] .page-main > .workspace { min-height:0; }
body[data-topbar-page="bulk"] .workspace > .panel { height:var(--bulk-panel-height,650px); min-height:0; }
body[data-topbar-page="bulk"] .upload-list:not([hidden]) { flex:1 1 auto; max-height:none; min-height:0; }
body[data-topbar-page="bulk"] .upload-panel > .panel-foot { margin-top:0; flex-shrink:0; }
.mode-footer-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.mode-footer-upload,.preview-stage-action { border:1px solid var(--surface-line); border-radius:6px; padding:9px 10px; background:#fff; color:var(--brand-ink); font:600 11px/1.3 Inter,system-ui,sans-serif; }
.mode-footer-actions .primary { font-size:12px; padding:12px; }
.optional-canvas-card { flex-shrink:0; display:flex; align-items:center; flex-wrap:wrap; gap:5px 12px; padding:11px 20px; background:var(--surface-recessed); border-top:1px solid var(--surface-recessed); color:var(--brand-ink); font:500 11px/1.4 Inter,system-ui,sans-serif; }
.optional-canvas-card[hidden] { display:none; }
.optional-canvas-card small { flex:1; font-size:11px; }
.optional-canvas-card button { border:0; padding:5px 0; background:transparent; color:var(--brand-ink); text-decoration:underline; font:600 11px/1.4 Inter,system-ui,sans-serif; }
.preview-empty > div { max-width:310px; padding:20px; color:var(--brand-ink); }
.preview-empty strong { font-size:17px; color:var(--brand-ink); }
.preview-empty p { font-size:12px; line-height:1.7; margin:12px 0 18px; }
.ll-bulk-studio { top:var(--app-topbar-height) !important; }
.ll-bulk-studio:not([hidden]),.presentation-overlay:not([hidden]) { animation:topbar-content-in 180ms ease-out; }
body[data-topbar-page="canvas"] { display:flex; flex-direction:column; height:100svh; overflow:hidden; }
body[data-topbar-page="canvas"] > .app-topbar { flex-shrink:0; }
body[data-topbar-page="canvas"] > .workspace { flex:1; height:auto; min-height:0; animation:topbar-content-in 180ms ease-out; }
body[data-topbar-page="canvas"] .canvas-bar-left .back-link,body[data-topbar-page="canvas"] .canvas-bar-left .bar-divider,body[data-topbar-page="canvas"] #workspace-caption { display:none; }
body[data-topbar-page="canvas"] .canvas-bar { min-height:44px; height:auto; padding:8px 18px; }
body[data-topbar-page="canvas"] .canvas-bar-left { gap:12px; }
body[data-topbar-page="canvas"] .project-title { max-width:260px; font-size:13px; color:var(--brand-ink); }
body[data-topbar-page="canvas"] .compact-present { background:var(--surface-recessed); color:var(--brand-ink); border:1px solid var(--surface-line); padding:7px 10px; min-height:30px; font-size:11px; }
body[data-topbar-page="canvas"] .save-status { font-size:10px; color:var(--brand-ink); }
body[data-topbar-page="canvas"] #save-status-compact { display:none; }
body[data-topbar-page="canvas"] .presentation-overlay { top:var(--app-topbar-height) !important; }
body[data-topbar-page="canvas"] .inspector,body[data-topbar-page="canvas"] .library-drawer { top:var(--canvas-inspector-top) !important; }
body[data-topbar-page="dashboard"] > main { animation:topbar-content-in 180ms ease-out; }
body[data-topbar-page="dashboard"] .projects-section { padding-top:22px; }
body[data-topbar-page="dashboard"] .projects-title-row { margin-bottom:18px; }
body[data-topbar-page="dashboard"] .projects-title-row h1 { font-size:28px; }
body[data-topbar-page="dashboard"] .dashboard-actions [data-new-project] { display:none; }
body[data-topbar-page="dashboard"] .welcome-section { min-height:calc(100svh - var(--app-topbar-height)); }
@keyframes topbar-menu-in { from {opacity:0;transform:translateY(-5px) scale(.98)} to {opacity:1;transform:translateY(0) scale(1)} }
@keyframes topbar-content-in { from {opacity:0;transform:translateY(4px)} to {opacity:1;transform:translateY(0)} }
@keyframes topbar-fade-in { from {opacity:0} to {opacity:1} }
@media(max-width:1180px) {
 .app-topbar-inner { grid-template-columns:1fr auto; gap:0 12px; padding:9px 0; min-height:60px; }
 .compact-modes { grid-column:1 / 3; grid-row:2; margin-top:6px; }
 .app-topbar-actions { grid-column:2; grid-row:1; }
 .topbar-dashboard-label { display:none; }
 body[data-topbar-page="canvas"] .canvas-bar { flex-wrap:wrap; }
 body[data-topbar-page="canvas"] #save-status { display:none; }
}
@media(max-width:750px) {
 .app-topbar-inner { width:calc(100% - 20px); gap:0 7px; }
 .app-topbar .brand { font-size:13px; gap:6px; }
 .app-topbar .brand svg,.app-topbar .brand-icon { width:26px; height:26px; }
 .app-topbar-actions { gap:5px; }
 .topbar-home { font-size:11px; padding:6px 4px; }
 .topbar-create { font-size:11px; padding:8px; }
 .topbar-help { width:26px; height:26px; }
 .compact-modes { width:100%; }
 .compact-mode { font-size:10px; padding:5px 2px; gap:2px; }
 body[data-topbar-page="bulk"] .workspace > .panel { height:auto; min-height:0; }
 body[data-topbar-page="bulk"] .upload-list:not([hidden]) { flex:initial; max-height:clamp(240px,50svh,480px); }
 body[data-topbar-page="bulk"] .panel-foot { flex-wrap:wrap; }
 .mode-footer-actions { justify-content:flex-start; }
 body[data-topbar-page="canvas"] .canvas-bar { padding:6px 10px; }
 body[data-topbar-page="canvas"] .canvas-bar-right { flex-wrap:wrap; gap:5px; }
 body[data-topbar-page="canvas"] .project-title { max-width:240px; }
 .topbar-guide-list { grid-template-columns:1fr; }
}
@media(max-width:470px) {
 .app-topbar .brand { font-size:12px; }
 .app-topbar .brand svg,.app-topbar .brand-icon { width:24px; height:24px; }
 .app-topbar-actions { gap:4px; }
 .topbar-create { font-size:10px; padding:8px 7px; }
 .app-topbar .profile-button { width:28px; height:28px; }
 .app-topbar .avatar { width:26px; height:26px; font-size:10px; }
 .compact-mode { min-height:46px; font-size:10px; }
 .mode-label { line-height:1.3; }
 .mode-icon { font-size:12px; }
 .mode-footer-actions { width:100%; }
}
@media(max-width:360px) {
 .app-topbar-inner { width:calc(100% - 16px); gap:0 4px; }
 .app-topbar .brand { font-size:11px; gap:4px; }
 .app-topbar .brand svg,.app-topbar .brand-icon { width:22px; height:22px; }
 .app-topbar-actions { gap:3px; }
 .topbar-home { font-size:10px; padding:5px 3px; }
 .topbar-create { font-size:10px; padding:7px 6px; }
 .topbar-help { width:24px; height:24px; }
}
@media(prefers-reduced-motion:reduce) {
 .app-topbar *, .topbar-help-dialog, .topbar-help-dialog::backdrop,
 body[data-topbar-page] > main, body[data-topbar-page] .page-main,
 body[data-topbar-page] .workspace, .ll-bulk-studio, .presentation-overlay { animation:none !important; transition:none !important; }
}