/* Shared geometry and hierarchy; existing workflow layouts stay intact. */
body { -webkit-font-smoothing:antialiased }
body > .sidebar {background:var(--dz-surface);border-color:var(--dz-border);padding-top:28px}
.brand {letter-spacing:.3px}.brand-mark {border-width:1px;border-radius:8px;background:var(--dz-accent-soft)}
.nav-item {color:var(--dz-secondary);font-weight:500;border-radius:8px}
.nav-item.active {color:var(--dz-accent);font-weight:650}
.page-shell > .topbar {background:var(--dz-page);border-color:var(--dz-border)}
.theme-footer {padding:14px 0 0;border-top:1px solid var(--dz-border);margin-top:10px;flex-shrink:0}
.developer-nav-link svg {flex:0 0 19px}
#isolated-preview-badge {left:auto!important;right:12px}
@media(max-width:720px){#isolated-preview-badge{bottom:76px!important;max-width:calc(100vw - 32px)}}
.topbar h1 {letter-spacing:-.5px;font-weight:700}.topbar p{line-height:1.6}
.primary-button,.secondary-button {border-radius:8px;font-size:13px;transition:background-color .15s,border-color .15s}
.primary-button:hover {background:var(--dz-accent-hover)}
.secondary-button {color:var(--dz-secondary);border-color:var(--dz-border);background:var(--dz-surface)}
.secondary-button:hover {background:var(--dz-hover)}
:where(.card,.panel,.settings,.tasks,.transcript-settings,.transcript-results,.result-card) {border-color:var(--dz-border);border-radius:var(--dz-radius);box-shadow:var(--dz-shadow)}
:where(input,textarea,select) {accent-color:var(--dz-accent)}
input:not([type="checkbox"]):not([type="radio"]),textarea {background:var(--dz-surface);color:var(--dz-text);border-color:var(--dz-border)}
:where(input,textarea)::placeholder {color:var(--dz-muted)}
.app-dialog-ui {background:var(--dz-elevated);color:var(--dz-text);border:1px solid var(--dz-border);border-radius:12px}
.app-dialog-ui::backdrop {background:var(--dz-overlay)}
.app-dialog-accent {background:var(--dz-accent);height:2px}
.app-dialog-ui p,.app-dialog-ui label {color:var(--dz-secondary)}
.app-dialog-confirm {background:var(--dz-accent);color:var(--dz-on-accent);border-color:var(--dz-accent)}
.app-dialog-cancel {background:var(--dz-surface);color:var(--dz-secondary);border-color:var(--dz-border)}
.app-select-menu [role="option"].active,.video-model-menu [role="option"].active,
.app-select-menu [role="option"][aria-selected="true"],.video-model-menu [role="option"][aria-selected="true"]{color:var(--dz-accent)}
.public-announcement {background:var(--dz-accent-soft);color:var(--dz-secondary);border-color:var(--dz-border)}
#asset-workspace-frame {background:var(--dz-surface)}
.storyboard-sidebar {background:var(--dz-surface);border-color:var(--dz-border)}
.storyboard-projectbar {background:var(--dz-page);border-color:var(--dz-border)}
.storyboard-side-item {color:var(--dz-secondary)}
.storyboard-side-item.active {background:var(--dz-accent-soft);color:var(--dz-accent)}
.storyboard-side-count {background:var(--dz-subtle);color:var(--dz-muted)}
/* Documentation participates in the same appearance without losing its editorial layout. */
body:has(.hero) .topbar{background:var(--dz-surface);gap:16px}
body:has(.hero) .layout > .sidebar {display:flex;flex-direction:column;min-height:calc(100dvh - 148px)}
body:has(.hero) .theme-footer {margin-top:auto;padding-top:18px}
body:has(.hero) .card{background:var(--dz-surface);border-color:var(--dz-border)}
body:has(.hero) :where(p,.lead,.caption,.back,th,td){color:var(--dz-secondary)}
body:has(.hero) :where(code,.tag,th){background:var(--dz-subtle);color:var(--dz-secondary);border-color:var(--dz-border)}
body:has(.hero) .button.primary{color:var(--dz-on-accent);background:var(--dz-accent)}
@media(max-width:720px){body>.sidebar .theme-footer{position:fixed;left:16px;bottom:max(16px,env(safe-area-inset-bottom));width:144px;margin:0;padding:0;border:1px solid var(--dz-border);border-radius:8px;background:var(--dz-surface);box-shadow:var(--dz-shadow);z-index:20}body>.sidebar .theme-toggle{font-size:14px}body:has(.hero) .topbar .brand small{display:none}}
@media(max-width:650px){body:has(.hero) .layout > .sidebar{display:block;min-height:0}body:has(.hero) .theme-footer{position:fixed;left:16px;bottom:max(16px,env(safe-area-inset-bottom));width:144px;padding:0;border:1px solid var(--dz-border);border-radius:8px;background:var(--dz-surface);box-shadow:var(--dz-shadow);z-index:20}}

.surface{border-color:var(--dz-border);border-radius:var(--dz-radius);box-shadow:var(--dz-shadow)}
.duration-control button,.duration-input-wrap{background:var(--dz-surface);color:var(--dz-secondary);border-color:var(--dz-border)}
.duration-glyph{color:var(--dz-secondary)}
.duration-control button:hover{color:var(--dz-accent);background:var(--dz-accent-soft)}
.cdk-community{color:var(--dz-secondary);border-color:var(--dz-border);background:var(--dz-surface)}
.community-image-wrap{background:var(--dz-subtle)}
.unit-prompt-editor{background:var(--dz-surface);color:var(--dz-text)}
.task-delete-button{color:var(--dz-danger)!important;background:var(--dz-danger-soft)!important;border-color:var(--dz-border)!important}

body:has(.hero) pre{background:var(--dz-subtle);color:var(--dz-text);border-color:var(--dz-border)}
body:has(.hero) .code-head{background:var(--dz-hover);color:var(--dz-secondary);border-color:var(--dz-border)}
body:has(.hero) :where(td,th,.endpoint b){border-color:var(--dz-border)}
body:has(.hero) .endpoint b{background:var(--dz-accent-soft);color:var(--dz-accent)}