/* Admin foundations are deliberately separate from the child learning palette. */
body:has(.admin-shell) { --sidebar-width:216px; --text-page:24px; --radius-card:16px; --radius-control:10px; }
.admin-main .page-eyebrow { display:none; }
.admin-main .page-heading { align-items:center; margin-bottom:24px; }
.admin-main .page-heading p { margin-top:4px; color:var(--color-text-muted); }
.admin-shell .btn { min-height:36px; padding:8px 12px; }
.admin-shell .btn.small { min-height:28px; padding:4px 8px; }
.admin-main>.panel:has(table) { border-inline:0; border-radius:0; box-shadow:none; }
.admin-main :is(th,td) { padding:12px 16px; }
.admin-shell .brand-mark { width:28px; height:28px; border-radius:6px; }
.admin-shell .brand-mark .icon { width:18px; height:18px; }
.admin-shell .brand-name { font-size:14px; }
.admin-shell .brand-sub { font-size:10px; }
.admin-main .group-pill { border-radius:4px; }
.admin-main .p-toolbar { margin-bottom:16px; }
.admin-main .group-filter-tabs .group-pill { border:0; background:transparent; border-bottom:2px solid transparent; border-radius:0; }
.admin-main .group-filter-tabs .group-pill.active { border-bottom-color:var(--color-primary); background:transparent; }
.admin-main .search-box { height:36px; width:240px; }
.admin-shell .avatar { width:28px; height:28px; border-radius:50%; }
.admin-shell { display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); min-height:100dvh; }
.sidebar { position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; min-width:0; background:#fafafa; border-right:1px solid var(--color-border); z-index:30; }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-6) var(--space-4); }
.sidebar-header .brand { gap:var(--space-3); }
.brand-name { display:block; font-size:16px; font-weight:var(--weight-semibold); }
.brand-sub { margin-top:4px; }
.sidebar-scroll { flex:1; overflow-y:auto; padding:var(--space-4) var(--space-3); }
.nav-group+.nav-group { margin-top:var(--space-6); }
.nav-caption { padding:0 var(--space-3) var(--space-3); font-size:11px; color:var(--color-text-muted); }
.side-nav { display:grid; gap:var(--space-1); }
.side-nav-item { display:flex; align-items:center; gap:var(--space-2); height:36px; padding:0 var(--space-3); border-radius:var(--radius-sm); color:var(--color-text-secondary); font-size:var(--text-sm); transition:background var(--duration-fast),color var(--duration-fast); }
.side-nav-item:hover { background:#f0f2f4; color:var(--color-text); }
.side-nav-item.active { background:var(--color-primary-soft); color:var(--color-primary); font-weight:var(--weight-semibold); }
.nav-icon-box { display:flex; flex-shrink:0; } .nav-icon-box .icon { width:18px; height:18px; }
.nav-count-badge { margin-left:auto; font-size:11px; color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.sidebar-footer { padding:var(--space-4) var(--space-3); }
.sidebar-shortcuts { padding-bottom:var(--space-4); }
.sidebar-shortcut-link { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); color:var(--color-text-muted); font-size:var(--text-xs); border-radius:var(--radius-sm); }
.sidebar-shortcut-link:hover { background:#f0f2f4; color:var(--color-text); }
.shortcut-icon,.shortcut-arrow { display:flex; } .shortcut-icon .icon,.shortcut-arrow .icon { width:16px; height:16px; } .shortcut-arrow { margin-left:auto; }
.sidebar-user-card { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-2) 0; border-top:1px solid var(--color-border); }
.user-meta { flex:1; min-width:0; } .user-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-sm); font-weight:var(--weight-medium); }
.user-role-badge { display:block; margin-top:2px; font-size:11px; color:var(--color-text-muted); }
.logout-action { width:28px; flex-shrink:0; }
.admin-right { min-width:0; }
.admin-top { position:sticky; top:0; height:48px; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:0 var(--space-8); border-bottom:1px solid var(--color-border); background:#fff; z-index:20; }
.top-breadcrumb { display:flex; align-items:center; gap:var(--space-3); margin-right:auto; font-size:var(--text-xs); color:var(--color-text-muted); }
.bc-item:hover { color:var(--color-text); } .bc-item.active { color:var(--color-text-secondary); font-weight:var(--weight-medium); } .bc-divider { color:#c2c9cf; }
.top-right-bar { display:flex; align-items:center; gap:var(--space-4); }
.top-child-btn { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs); color:var(--color-text-secondary); border-radius:var(--radius-sm); padding:var(--space-2); }
.top-child-btn:hover { background:var(--color-primary-soft); color:var(--color-primary); } .top-child-btn .icon { width:16px; height:16px; }
.top-download-btn { display:inline-flex; align-items:center; gap:8px; padding:8px; border-radius:6px; color:var(--color-text-muted); font-size:12px; }
.top-download-btn:hover { color:var(--color-text); background:var(--color-primary-soft); }
.top-download-btn .icon { width:16px; height:16px; }
.settings-section { display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px; padding:32px 0; border-top:1px solid var(--color-border); }
.admin-main>.settings-section { margin-bottom:0; }
.settings-section-heading h2 { font-size:16px; letter-spacing:-.02em; }
.settings-section-heading p { margin-top:8px; color:var(--color-text-muted); font-size:13px; line-height:1.8; }
.settings-section-content { min-width:0; }
.settings-security-form { max-width:480px; }
.settings-security-form .p-field:first-child { margin-top:0; }
.settings-security-form>.btn { margin-top:16px; }
.settings-section .settings-fact { margin-top:0; padding-top:0; }
.settings-section .release-facts { padding-top:0; }
.settings-section .release-help { margin-top:24px; }
@media(max-width:1000px) { .settings-section { grid-template-columns:180px minmax(0,1fr); gap:32px; } .settings-section .release-facts { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
 .top-right-bar { gap:4px; } .top-download-btn { justify-content:center; min-height:40px; min-width:40px; }
 .top-download-btn span { display:none; }
 .settings-section { grid-template-columns:minmax(0,1fr); gap:24px; padding:24px 0; }
 .admin-shell .btn,.admin-shell .btn.small { min-height:40px; }
 .admin-shell .icon-btn { min-width:40px; min-height:40px; }
 .admin-main .table-wrap tr>:first-child { position:sticky; left:0; background:var(--color-surface); border-right:1px solid var(--color-border); z-index:1; }
 .admin-main .table-wrap thead tr>:first-child { background:var(--color-surface-subtle); z-index:2; }
 .admin-main .table-wrap tbody tr:hover>:first-child { background:var(--color-surface-subtle); }
}
.admin-main { width:100%; max-width:1280px; margin:auto; padding:var(--space-8) var(--space-12) var(--space-12); }
.admin-main>section,.admin-main>details.panel { margin-bottom:var(--space-6); }
.admin-main .panel h3 { font-size:var(--text-lg); }
.p-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:var(--space-8); padding:var(--space-6) 0; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.p-metrics.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.p-metrics .metric { background:transparent; border:0; border-right:1px solid var(--color-border); border-radius:0; box-shadow:none; padding:0 var(--space-6); }
.p-metrics .metric:first-child { padding-left:0; } .p-metrics .metric:last-child { border:0; }
.metric-label { color:var(--color-text-secondary); font-size:var(--text-xs); }
.metric-num { font-size:var(--text-number); font-weight:var(--weight-semibold); line-height:1.3; margin:var(--space-2) 0; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.metric .small { color:var(--color-text-muted); font-size:11px; }
.metric-title,.metric-num,.metric-desc { display:block; }
.metric-title { font-size:var(--text-xs); color:var(--color-text-secondary); }
.metric-desc { font-size:11px; color:var(--color-text-muted); }
.course-table-title { display:flex; gap:var(--space-3); align-items:center; min-width:240px; }
.course-table-title img { width:48px; height:40px; flex-shrink:0; object-fit:cover; border:0; border-radius:var(--radius-sm); }
.course-table-title strong { display:block; font-size:var(--text-sm); color:var(--color-text); }
.course-table-title p { max-width:360px; margin-top:var(--space-1); color:var(--color-text-muted); font-size:var(--text-xs); }
.group-filter-tabs { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-1); }
.progress-matrix-section .panel-head { border:0; } .matrix-table td,.matrix-table th { padding:var(--space-3) var(--space-4); white-space:nowrap; }
.matrix-table { min-width:620px; } .matrix-table th:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.p-history>summary { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; cursor:pointer; }
.p-history[open]>summary { margin-bottom:var(--space-6); }
.p-audit { display:flex; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) 0; border-bottom:1px solid var(--color-border); font-size:var(--text-sm); }
.p-audit small { color:var(--color-text-muted); }
.p-danger { color:var(--color-error); margin-top:var(--space-8); padding-top:var(--space-4); border-top:1px solid var(--color-border); } .p-danger summary { cursor:pointer; font-size:var(--text-xs); } .p-danger .btn { margin-top:var(--space-4); }
/* Course studio: one page at a time, with persistent context and save actions. */
.studio-heading { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.studio-toolbar { position:sticky; top:48px; z-index:15; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 24px; background:var(--color-surface); border:0; border-radius:20px; box-shadow:var(--shadow-card); }
.studio-title { flex:1; min-width:0; }
.studio-title input { width:100%; min-width:0; border:1px solid transparent; border-radius:10px; padding:8px 0; font-size:24px; font-weight:600; color:var(--color-text); background:transparent; }
.studio-title input:is(:hover,:focus) { border-color:var(--color-border-strong); outline:0; }
.studio-body { display:grid; grid-template-columns:200px minmax(0,1fr); gap:32px; padding:24px 0; align-items:start; }
.studio-outline { position:sticky; top:140px; max-height:calc(100dvh - 240px); overflow:auto; padding-right:8px; border:0; scrollbar-width:thin; }
.studio-outline nav { display:grid; gap:4px; }
.studio-outline nav { min-width:0; grid-template-columns:minmax(0,1fr); }
.studio-outline button { font-size:12px; }
.studio-settings-link { display:block; width:100%; padding:14px 12px; margin-bottom:20px; border:0; border-radius:12px; background:transparent; text-align:left; color:var(--color-text); }
.studio-settings-link span { display:block; margin-top:4px; color:var(--color-text-muted); font-size:11px; }
.studio-settings-link:hover,.studio-page-link:hover { background:#edf3fa; }
.studio-outline-label { display:flex; justify-content:space-between; padding:0 12px 12px; color:var(--color-text-muted); font-size:11px; }
.studio-page-link { display:flex; align-items:center; gap:12px; width:100%; padding:12px; text-align:left; border:0; border-radius:12px; background:transparent; color:var(--color-text-secondary); }
.studio-page-link { min-width:0; overflow:hidden; }
.studio-page-link.active,.studio-settings-link.active { background:var(--color-primary-soft); color:var(--color-primary); font-weight:600; }
.studio-page-link.active .studio-page-number,.studio-settings-link.active span { color:var(--color-primary); }
.studio-page-number { color:var(--color-text-muted); font-size:10px; font-variant-numeric:tabular-nums; }
.studio-page-name { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.studio-add { margin-top:12px; width:100%; justify-content:flex-start; }
.studio-canvas,.studio-settings { min-width:0; padding:24px; border:0; border-radius:20px; background:var(--color-surface); box-shadow:var(--shadow-card); }
.studio-settings h2 { font-size:20px; margin:4px 0 8px; }
.studio-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin-top:24px; }
.studio-settings-grid>.p-field:has([name=context]),.studio-settings-grid>.course-inline-upload-box { grid-column:1/-1; }
.studio-settings-grid #p-course-video { align-self:center; }
.p-question { border:0; background:transparent; margin:0; padding:0; }
.p-question>summary { display:flex; align-items:center; gap:12px; padding:0 0 16px; border-bottom:1px solid var(--color-border); cursor:default; }
.p-question>summary::marker,.p-question>summary::-webkit-details-marker { display:none; }
.p-question-badge { font-size:11px; color:var(--color-text-muted); flex-shrink:0; }
.page-editor-title { font-size:18px; font-weight:500; }
.p-question-head { display:flex; justify-content:flex-end; padding-top:8px; }
.studio-question-tabs { display:flex; gap:24px; border-bottom:1px solid var(--color-border); margin-bottom:20px; }
.studio-question-tabs button { padding:12px 0; border:0; border-bottom:2px solid transparent; background:transparent; font-size:12px; color:var(--color-text-muted); }
.studio-question-tabs button.active { color:var(--color-primary); border-bottom-color:var(--color-primary); }
.studio-question-pane>.p-question-divider:first-child { margin-top:0; padding-top:0; border:0; }
.studio-explanation { margin-top:16px; }
.studio-explanation>summary { color:var(--color-text-muted); font-size:12px; cursor:pointer; }
.studio-explanation[open]>summary { color:var(--color-text-secondary); }
.p-question-grid .p-field { margin:12px 0; }
.p-question .p-field { font-size:12px; gap:8px; }
.p-question .p-field :is(input,select,textarea) { font-size:13px; min-height:36px; }
.p-question .p-field textarea { min-height:64px; }
.p-question-divider { margin-top:24px; padding-top:20px; border-top:1px solid var(--color-border); font-size:12px; font-weight:500; }
.option-image-editor summary { padding:12px 0; font-size:12px; cursor:pointer; color:var(--color-text-muted); }
.studio-page-nav { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--color-border); margin-top:24px; padding-top:16px; }
.studio-publish { position:sticky; bottom:0; z-index:16; display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; background:var(--color-surface); padding:16px 24px; border:0; border-radius:20px; box-shadow:var(--shadow-card); }
.studio-publish-status .p-field { flex-direction:row; align-items:center; margin:0; font-size:12px; }
.studio-publish-status select { width:150px; min-height:36px; font-size:12px; }
.studio-distribution { margin-left:auto; position:relative; font-size:12px; color:var(--color-text-secondary); }
.studio-distribution summary { cursor:pointer; }
.studio-distribution>div { position:absolute; bottom:28px; right:0; width:240px; padding:20px; border:1px solid var(--color-border); border-radius:8px; background:#fff; box-shadow:var(--shadow-overlay); display:grid; gap:16px; }
.studio-voice { margin-left:0; }
.studio-voice>div { width:320px; max-width:calc(100vw - 48px); gap:12px; }
.studio-voice>div>p { margin:0; }
.studio-voice .actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.editor-status-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 4px; color:var(--color-text-muted); font-size:11px; }
@media(min-width:761px) {
 .admin-main:has(.studio-editor) { height:calc(100dvh - 48px); display:flex; flex-direction:column; padding-top:24px; padding-bottom:12px; }
 .studio-heading { flex-shrink:0; margin-bottom:12px; }
 .studio-editor { display:flex; flex-direction:column; flex:1; min-height:0; }
 .studio-toolbar { position:static; flex-shrink:0; }
 .studio-body { flex:1; min-height:0; overflow:hidden; grid-template-rows:minmax(0,1fr); padding:20px 0; }
 .studio-outline { position:static; height:100%; max-height:none; }
 .studio-canvas,.studio-settings { height:100%; overflow:auto; scrollbar-width:thin; overscroll-behavior:contain; }
 .studio-publish,.editor-status-bar { position:static; flex-shrink:0; }
 .editor-status-bar { padding:8px 4px 0; }
}
.p-upload-inline { position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:var(--space-2); min-height:80px; padding:var(--space-4); border:1px dashed var(--color-border-strong); border-radius:var(--radius-control); background:var(--color-surface-subtle); color:var(--color-primary); cursor:pointer; font-size:var(--text-xs); }
.p-upload-inline input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.p-upload-inline:focus-within,.upload-header-btn:focus-within { outline:2px solid var(--color-primary); outline-offset:3px; }
.course-inline-upload-box { margin-top:var(--space-4); }
.course-cover-preview { width:100%; border-radius:var(--radius-control); aspect-ratio:16/10; object-fit:cover; border:1px solid var(--color-border); }
.course-cover-controls .row { flex-wrap:wrap; } .course-cover-controls .small { margin-top:var(--space-2); }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); margin-bottom:var(--space-6); }
.settings-grid h3+p { margin:var(--space-2) 0 var(--space-6); }
.settings-fact { display:flex; flex-direction:column; gap:var(--space-1); margin:var(--space-8) 0; }
.settings-fact strong { font-size:var(--text-number); font-weight:var(--weight-semibold); letter-spacing:-.04em; } .settings-fact span { color:var(--color-text-muted); font-size:var(--text-xs); }
.release-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); }
.release-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-6); padding:var(--space-6) 0; margin:0; }
.release-facts dt { color:var(--color-text-muted); font-size:var(--text-xs); margin-bottom:var(--space-2); }
.release-facts dd { font-size:24px; margin:0; font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } .release-facts small { font-size:var(--text-xs); }
.release-facts .release-date { font-size:var(--text-base); line-height:2; }
.release-help { border-top:1px solid var(--color-border); padding-top:var(--space-4); font-size:var(--text-xs); color:var(--color-text-muted); overflow-wrap:anywhere; } .release-help summary { cursor:pointer; } .release-help p { margin-top:var(--space-3); }
.assets-stats-pill { color:var(--color-text-muted); font-size:var(--text-xs); }
.upload-header-btn { position:relative; cursor:pointer; } .upload-header-btn input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.assets-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); padding-bottom:var(--space-4); margin-bottom:var(--space-6); border-bottom:1px solid var(--color-border); }
.assets-filter-pills { display:flex; flex-wrap:wrap; gap:var(--space-1); }
.assets-tools-right { display:flex; align-items:center; gap:var(--space-3); min-width:0; }
.assets-search-wrap { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-control); min-width:0; width:224px; }
.assets-search-wrap:focus-within { border-color:var(--color-primary); box-shadow:var(--focus-ring); }
.assets-search-icon { display:flex; color:var(--color-text-muted); } .assets-search-input { width:100%; min-width:0; font-size:var(--text-sm); border:0; outline:0; background:transparent; }
.assets-view-toggle { display:flex; padding:var(--space-1); background:#eef1f3; border-radius:var(--radius-control); }
.view-toggle-btn { min-height:28px; padding:var(--space-1) var(--space-2); border:0; border-radius:var(--radius-sm); background:transparent; color:var(--color-text-muted); font-size:var(--text-xs); white-space:nowrap; }
.view-toggle-btn.active { background:#fff; color:var(--color-text); box-shadow:var(--shadow-sm); }
.assets-gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(224px,1fr)); gap:var(--space-6); }
.asset-card { min-width:0; border:0; border-radius:var(--radius-card); background:#fff; overflow:hidden; cursor:pointer; box-shadow:var(--shadow-card); transition:background var(--duration-fast),box-shadow var(--duration-fast); }
.asset-card:hover { box-shadow:var(--shadow-card-hover); background:#fafdff; } .asset-thumb-box { position:relative; aspect-ratio:16/10; background:#f0f3f4; }
.asset-thumb-media { display:block; width:100%; height:100%; object-fit:cover; } .asset-type-badge { position:absolute; top:var(--space-3); left:var(--space-3); padding:var(--space-1) var(--space-2); border-radius:4px; background:#ffffffed; font-size:11px; color:var(--color-text-secondary); }
.asset-thumb-fallback { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3); height:100%; color:var(--color-text-muted); } .fallback-icon .icon { width:32px; height:32px; } .fallback-text { font-size:var(--text-xs); }
.asset-hover-overlay { position:absolute; bottom:var(--space-3); left:var(--space-3); right:var(--space-3); display:flex; gap:var(--space-1); opacity:0; transition:opacity var(--duration-fast); }
.asset-card:is(:hover,:focus-within) .asset-hover-overlay { opacity:1; }
.asset-hover-btn { flex:1; min-height:32px; border:1px solid #ffffffb3; border-radius:var(--radius-sm); background:#fffffff2; color:var(--color-text-secondary); font-size:var(--text-xs); }
.asset-hover-btn:hover { background:#fff; color:var(--color-primary); } .asset-hover-btn.danger { color:var(--color-error); }
.asset-info-box { padding:var(--space-4); } .asset-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-sm); font-weight:var(--weight-medium); }
.asset-meta-row { display:flex; justify-content:space-between; gap:var(--space-2); margin-top:var(--space-2); font-size:11px; color:var(--color-text-muted); }
.asset-play-badge { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#202a3299; color:#fff; }
.asset-uploading-card { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-4); padding:var(--space-4); margin-bottom:var(--space-6); border:1px solid var(--color-info-border); border-radius:var(--radius-control); background:var(--color-info-soft); }
.asset-upload-info { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); } .upload-status-dot { width:8px; height:8px; background:var(--color-primary); border-radius:50%; }
.asset-upload-progress { height:4px; width:160px; border-radius:2px; overflow:hidden; background:var(--color-border); } .asset-upload-fill { height:100%; background:var(--color-primary); }
.asset-drag-overlay { display:none; position:fixed; inset:0; background:#202a3280; z-index:400; align-items:center; justify-content:center; }
body.asset-drag-active .asset-drag-overlay { display:flex; }
.asset-drag-modal { padding:var(--space-8); margin:var(--space-4); background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-card); text-align:center; } .asset-drag-modal>.icon { margin-bottom:var(--space-4); width:32px; height:32px; color:var(--color-primary); }
.asset-preview-container { width:100%; padding:var(--space-4); border-radius:var(--radius-control); background:var(--color-surface-subtle); text-align:center; }
.asset-preview-container img,.asset-preview-container video { display:block; max-width:100%; max-height:55dvh; margin:auto; } .asset-preview-container audio { width:100%; }
.devices-summary-bar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); margin-bottom:var(--space-8); padding:var(--space-6) 0; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.dev-summary-col { display:flex; align-items:center; gap:var(--space-3); min-width:0; }
.dev-summary-icon { display:flex; color:var(--color-text-muted); } .dev-summary-icon .icon { width:24px; height:24px; } .dev-summary-label { display:block; margin-bottom:var(--space-1); font-size:11px; color:var(--color-text-muted); } .dev-summary-val { font-size:var(--text-sm); font-weight:var(--weight-medium); }
.devices-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--space-6); margin-bottom:var(--space-8); }
.device-modern-card { border:0; border-radius:var(--radius-card); background:#fff; min-width:0; box-shadow:var(--shadow-card); }
.device-card-top { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-6); border-bottom:1px solid var(--color-border); }
.dev-name-row { display:flex; align-items:center; gap:var(--space-2); } .dev-name { font-size:var(--text-base); } .dev-pulse-dot { display:block; width:6px; height:6px; border-radius:50%; background:#a1abb3; } .dev-pulse-dot.live { background:var(--color-success); }
.dev-id-tag { display:block; margin-top:var(--space-2); font-size:10px; color:var(--color-text-muted); overflow-wrap:anywhere; }
.device-card-body { padding:var(--space-6); } .dev-kv-row { display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); font-size:var(--text-xs); color:var(--color-text-secondary); }
.dev-settings-form { margin-top:var(--space-6); border-top:1px solid var(--color-border); padding-top:var(--space-4); } .dev-form-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); } .dev-form-fields .p-field { margin-top:0; font-size:var(--text-xs); } .dev-form-fields select { font-size:var(--text-sm); }
.dev-card-buttons { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.terminal-header-bar,.terminal-header-title { display:flex; align-items:center; gap:var(--space-3); } .terminal-header-bar { justify-content:space-between; margin-bottom:var(--space-6); } .terminal-badge-icon { display:flex; color:var(--color-text-muted); }
.device-command-log-terminal { padding:var(--space-4); background:var(--color-surface-subtle); border:1px solid var(--color-border); border-radius:var(--radius-control); font-family:var(--font-mono); font-size:var(--text-xs); overflow-wrap:anywhere; } .terminal-empty-text { color:var(--color-text-muted); }
.logs-page-modern { min-width:0; } .logs-segmented-tabs { display:inline-flex; gap:var(--space-1); padding:var(--space-1); margin-bottom:var(--space-6); border-radius:var(--radius-control); background:#edf0f2; }
.logs-seg-tab { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); min-height:36px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--color-text-secondary); font-size:var(--text-sm); }
.logs-seg-tab.active { background:#fff; color:var(--color-text); box-shadow:var(--shadow-sm); } .log-tab-count { font-size:11px; color:var(--color-text-muted); }
.logs-filter-row,.logs-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-bottom:var(--space-4); }
.log-filter-btn,.logs-filter-btn { border:1px solid var(--color-border); border-radius:var(--radius-sm); background:#fff; color:var(--color-text-secondary); padding:var(--space-1) var(--space-3); min-height:32px; font-size:var(--text-xs); }
.log-filter-btn.active,.logs-filter-btn.active { border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-soft); }
.p-log-detail { display:block; min-width:220px; max-width:480px; white-space:normal; overflow-wrap:anywhere; font-size:var(--text-xs); line-height:1.7; color:var(--color-text-secondary); }
.p-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); }
.poster-field-group { margin:var(--space-6) 0; }
.p-field-label { font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--color-text-secondary); }
.poster-editor-card { margin-top:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-control); overflow:hidden; }
.poster-preview-box { position:relative; background:var(--color-surface-subtle); }
.poster-preview-box img { width:100%; height:176px; object-fit:cover; }
.poster-overlay-status { position:absolute; bottom:var(--space-2); left:var(--space-2); padding:var(--space-1) var(--space-2); border-radius:4px; background:#ffffffed; font-size:10px; color:var(--color-text-secondary); }
.poster-controls { padding:var(--space-3); }
.poster-btn-group { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-4); }
.upload-label-btn { position:relative; cursor:pointer; } .upload-label-btn:focus-within { outline:2px solid var(--color-primary); outline-offset:2px; }
.poster-select-group { display:grid; gap:var(--space-2); margin-bottom:var(--space-3); }
.poster-dropdown { width:100%; min-height:40px; padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-sm); background-color:#fff; font-size:var(--text-sm); }
#p-course-video { width:100%; max-height:240px; margin-top:var(--space-4); background:#202a32; border-radius:var(--radius-control); }
.logs-filter-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.logs-chips-row { display:flex; flex-wrap:wrap; gap:var(--space-1); }
.tab-icon { display:flex; } .tab-count-badge { color:var(--color-text-muted); font-size:11px; }
.log-user-meta { display:grid; gap:var(--space-1); }
.admin-menu-toggle,.admin-menu-close,.admin-nav-backdrop { display:none; }
.sidebar-collapsed { grid-template-columns:80px minmax(0,1fr); }
.sidebar-collapsed .sidebar-header { padding:var(--space-8) var(--space-6) var(--space-6); }
.sidebar-collapsed :is(.brand-meta,.nav-item-title,.nav-count-badge,.nav-caption,.user-meta,.logout-action,.shortcut-arrow,.sidebar-shortcut-link>span:not(.shortcut-icon)) { display:none; }
.sidebar-collapsed .side-nav-item,.sidebar-collapsed .sidebar-shortcut-link { justify-content:center; }
.sidebar-collapsed .sidebar-user-card { justify-content:center; padding-inline:0; }
.sidebar-collapsed .side-nav-item:is(:hover,:focus-visible)::after { content:attr(aria-label); position:fixed; left:76px; padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-sm); background:#fff; color:var(--color-text); box-shadow:var(--shadow-sm); font-size:var(--text-xs); z-index:50; }
@media(max-width:1100px) { .admin-main { padding-inline:24px; } .studio-body { grid-template-columns:176px minmax(0,1fr); gap:24px; } .assets-tools-right { flex-wrap:wrap; } }
@media(max-width:760px) {
 .admin-shell,.sidebar-collapsed { grid-template-columns:minmax(0,1fr); }
 .sidebar { position:fixed; inset:0 auto 0 0; width:264px; height:100dvh; visibility:hidden; transform:translateX(-100%); z-index:300; transition:transform var(--duration-normal),visibility var(--duration-normal); }
 .admin-shell.navigation-open .sidebar { visibility:visible; transform:translateX(0); box-shadow:var(--shadow-overlay); }
 .navigation-open .admin-nav-backdrop { display:block; position:fixed; inset:0; border:0; z-index:290; background:#202a3277; }
 body:has(.navigation-open) { overflow:hidden; }
 .admin-menu-toggle { display:inline-flex; min-height:32px; } .admin-menu-close { display:grid; place-items:center; position:absolute; right:var(--space-3); top:var(--space-8); font-size:24px; }
 .sidebar-header { padding-right:var(--space-12); }
 .sidebar-collapsed .sidebar-header { padding-right:var(--space-12); }
 .sidebar-collapsed :is(.brand-meta,.nav-item-title,.nav-count-badge,.nav-caption,.user-meta,.logout-action,.shortcut-arrow,.sidebar-shortcut-link>span:not(.shortcut-icon)) { display:revert; }
 .sidebar-collapsed .side-nav-item,.sidebar-collapsed .sidebar-shortcut-link,.sidebar-collapsed .sidebar-user-card { justify-content:flex-start; }
 .sidebar-collapsed .side-nav-item::after { display:none; }
 .collapse-sidebar { display:none; } .admin-top { height:60px; padding:0 var(--space-4); gap:var(--space-2); }
 .top-breadcrumb .bc-item:first-child,.bc-divider { display:none; } .top-child-btn { font-size:11px; padding:var(--space-1); } .top-child-btn .icon { display:none; }
 .admin-main { padding:var(--space-6) var(--space-4) var(--space-12); }
 .p-metrics,.p-metrics.four { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6) 0; }
 .p-metrics .metric:nth-child(odd) { padding-left:0; } .p-metrics .metric:nth-child(even) { border:0; } .metric-num { font-size:32px; }
 .p-two,.settings-grid { grid-template-columns:minmax(0,1fr); }
 .admin-main th,.admin-main td { white-space:nowrap; }
 .course-table-title p { white-space:normal; } .course-table-title img { width:64px; height:48px; }
 .studio-toolbar { top:60px; flex-wrap:wrap; gap:12px; padding:16px 20px; } .studio-title { flex-basis:100%; } .studio-title input { font-size:20px; }
 .studio-canvas,.studio-settings { padding:20px; }
 .studio-body { grid-template-columns:minmax(0,1fr); gap:20px; padding:16px 0; }
 .studio-outline { position:static; padding:0 0 16px; border-right:0; border-bottom:1px solid var(--color-border); max-height:none; }
 .studio-outline nav { display:flex; overflow:auto; padding-bottom:4px; } .studio-page-link { width:auto; flex-shrink:0; max-width:200px; }
 .studio-settings-link { padding:8px 12px; margin-bottom:12px; } .studio-settings-link span { display:none; } .studio-outline-label { padding-bottom:8px; }
 .studio-add { margin-top:8px; width:auto; } .studio-settings-grid { grid-template-columns:minmax(0,1fr); }
 .studio-publish { position:static; gap:12px; padding:20px; } .studio-distribution { margin-left:0; } .studio-distribution>div { left:0; right:auto; }
 .editor-status-bar { align-items:flex-start; } .page-editor-title { font-size:16px; }
 .editor-status-bar { align-items:flex-start; } .editor-status-bar>.btn { flex-shrink:0; }
 .page-editor-title { overflow-wrap:anywhere; } .p-question-badge { padding-right:var(--space-2); }
 .assets-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); } .asset-meta-row { flex-wrap:wrap; font-size:10px; } .asset-info-box { padding:var(--space-3); }
 .asset-hover-overlay { opacity:1; position:static; padding:var(--space-2); background:#fff; } .asset-thumb-box { aspect-ratio:auto; } .asset-thumb-media,.asset-thumb-fallback { height:112px; } .asset-hover-btn { min-width:0; font-size:11px; padding:0; }
 .assets-tools-right { width:100%; } .assets-search-wrap { flex:1; } .assets-stats-pill { display:none; }
 .devices-summary-bar { grid-template-columns:minmax(0,1fr); } .devices-cards-grid { grid-template-columns:minmax(0,1fr); }
 .device-card-top,.device-card-body { padding:var(--space-4); } .dev-form-fields { grid-template-columns:minmax(0,1fr); gap:0; }
 .terminal-header-bar { align-items:flex-start; flex-wrap:wrap; } .terminal-badge-icon { display:none; }
 .release-heading { flex-wrap:wrap; } .release-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .logs-segmented-tabs { display:flex; flex-wrap:wrap; } .logs-seg-tab { font-size:var(--text-xs); padding:var(--space-2); }
}
@media(hover:none) { .asset-hover-overlay { opacity:1; } }
/* A quiet writing surface, rather than an AI dashboard or chat interface. */
.composer-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:24px; border-bottom:1px solid var(--color-border); }
.course-composer { max-width:720px; margin:48px auto 0; }
.composer-kicker { display:block; font-size:11px; color:var(--color-text-muted); margin-bottom:12px; }
.composer-intro { margin-bottom:32px; }
.composer-intro h1 { font-size:28px; font-weight:600; letter-spacing:-.04em; line-height:1.4; }
.composer-intro p { margin-top:12px; font-size:13px; color:var(--color-text-muted); line-height:1.8; }
#course-composer-form .p-field { font-size:12px; margin:24px 0; }
#course-composer-form :is(input,textarea) { background:#fcfcfc; border-color:var(--color-border); font-size:14px; padding:12px 16px; }
#course-composer-form textarea { min-height:224px; line-height:1.9; }
.composer-options { display:flex; justify-content:space-between; align-items:center; gap:16px; }
#course-composer-form .composer-options .p-field { flex-direction:row; align-items:center; margin:0; }
.composer-options select { width:100px; min-height:36px; font-size:12px; }
.composer-data-note { margin:20px 0; font-size:11px; color:var(--color-text-muted); line-height:1.8; }
.composer-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding-top:20px; border-top:1px solid var(--color-border); }
.composer-actions [type=submit] { margin-left:auto; }
#composer-result { margin-top:40px; padding-top:32px; border-top:1px solid var(--color-border); }
.composer-result-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.composer-result-head h2 { font-size:20px; margin-bottom:8px; }
.composer-outline { list-style:none; padding:0; margin:24px 0; }
.composer-outline li { display:flex; gap:20px; padding:16px 0; border-bottom:1px solid var(--color-border); }
.composer-outline li>span { font-size:11px; color:var(--color-text-muted); padding-top:3px; font-variant-numeric:tabular-nums; }
.composer-outline strong { font-size:13px; font-weight:500; }
.composer-outline p { margin-top:4px; font-size:11px; color:var(--color-text-muted); }
@media(max-width:760px) { .course-composer { margin-top:32px; } .composer-intro h1 { font-size:24px; } .composer-actions { align-items:flex-start; } .composer-actions #composer-service { flex-basis:100%; } .composer-actions [type=submit] { margin-left:0; } }
/* Video creation shares the workspace typography and surfaces. */
.create-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); padding:var(--space-8) var(--space-8) var(--space-6); }
.create-dialog-header .composer-kicker { margin-bottom:var(--space-2); }
.create-dialog-header h2 { font-size:var(--text-xl); font-weight:var(--weight-semibold); }
.create-dialog-header p { color:var(--color-text-muted); font-size:var(--text-sm); line-height:1.8; margin-top:var(--space-2); }
.create-dialog-header>.icon-btn { margin-top:var(--space-1); font-size:24px; }
.create-methods { display:grid; gap:var(--space-3); }
#course-create-dialog .create-methods { padding:0 var(--space-8) var(--space-8); }
.create-method { display:flex; align-items:flex-start; gap:var(--space-4); width:100%; padding:var(--space-6); border:1px solid var(--color-border); border-radius:var(--radius-control); background:var(--color-surface); text-align:left; color:var(--color-text); transition:background var(--duration-fast),border-color var(--duration-fast); }
.create-method:is(:hover,:focus-visible) { border-color:var(--color-primary); background:var(--color-surface-subtle); }
.create-method.featured-method { background:var(--color-primary-soft); border-color:var(--color-primary-soft); }
.create-method.featured-method:is(:hover,:focus-visible) { border-color:var(--color-primary); }
.create-method strong { display:block; margin-bottom:var(--space-2); font-size:var(--text-base); font-weight:var(--weight-semibold); }
.create-method strong+span { display:block; color:var(--color-text-secondary); font-size:var(--text-sm); line-height:1.8; }
.create-method-icon { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; color:var(--color-primary); }
.create-method-icon .icon { width:24px; height:24px; }
.create-method-arrow { align-self:center; margin-left:auto; font-size:20px; color:var(--color-text-muted); }
.create-other-method { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); padding-top:var(--space-4); color:var(--color-text-muted); font-size:var(--text-xs); }
.video-course-composer { max-width:960px; margin:var(--space-8) auto 0; }
.video-course-composer .composer-intro { margin-bottom:var(--space-6); }
.video-composer-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--space-12); }
.video-composer-grid h2 { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); font-weight:var(--weight-semibold); margin-bottom:var(--space-4); }
.video-composer-grid h2>span { font-size:var(--text-xs); font-variant-numeric:tabular-nums; color:var(--color-text-muted); font-weight:var(--weight-normal); }
.video-composer-brief { border-left:1px solid var(--color-border); padding-left:var(--space-8); }
#video-course-form .p-field { position:relative; margin:0 0 var(--space-4); font-size:var(--text-xs); }
#video-course-form :is(input,textarea,select) { padding:var(--space-3); background:var(--color-surface); font-size:var(--text-sm); }
#video-course-form textarea { min-height:120px; line-height:1.8; resize:vertical; }
.field-optional { position:absolute; right:0; top:0; color:var(--color-text-muted); font-weight:var(--weight-normal); }
.video-upload-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.video-upload-row .btn { min-height:36px; font-size:var(--text-xs); }
.upload-label-btn.disabled { opacity:.5; cursor:default; }
.video-upload-help { margin-top:var(--space-2); }
.video-upload-status { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin:var(--space-3) 0; }
.video-upload-status progress { flex-basis:100%; width:100%; height:4px; accent-color:var(--color-primary); }
.composer-video-preview,.composer-video-empty { margin-top:var(--space-4); }
.composer-video-preview video { display:block; width:100%; aspect-ratio:16/9; max-height:224px; border-radius:var(--radius-control); background:#1b2329; object-fit:contain; }
.composer-video-preview .media-playback-status { margin-top:var(--space-2); }
.composer-video-empty { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:var(--space-3); aspect-ratio:16/9; border:1px dashed var(--color-border); border-radius:var(--radius-control); background:var(--color-surface-subtle); color:var(--color-text-muted); font-size:var(--text-xs); }
.composer-video-empty>.icon { width:28px; height:28px; color:var(--color-text-muted); }
.video-composer-footer { margin-top:var(--space-6); }
.video-composer-footer .composer-data-note { margin:0 0 var(--space-4); }
#video-composer-result { border-top:1px solid var(--color-border); margin-top:var(--space-8); padding-top:var(--space-8); }
.video-analysis-summary { padding:var(--space-4) 0; margin-top:var(--space-4); }
.video-analysis-summary>span { display:block; margin-bottom:var(--space-2); font-size:var(--text-xs); font-weight:var(--weight-medium); color:var(--color-text-muted); }
.video-analysis-summary>p { font-size:var(--text-sm); color:var(--color-text-secondary); line-height:1.9; white-space:pre-line; }
.video-generation-status { display:flex; align-items:flex-start; gap:var(--space-4); padding:var(--space-3) 0; }
.video-generation-status strong { font-size:var(--text-sm); font-weight:var(--weight-medium); }
.video-generation-status p { margin-top:var(--space-2); font-size:var(--text-xs); color:var(--color-text-muted); line-height:1.8; }
.generation-spinner { flex-shrink:0; width:20px; height:20px; border:2px solid var(--color-border); border-top-color:var(--color-primary); border-radius:50%; animation:generation-spin 1s linear infinite; }
.video-generation-progress { padding:var(--space-4) 0; }
.course-voice-summary { display:block; margin-top:6px; font-size:var(--text-xs); color:var(--color-text-muted); }
.course-voice-summary[data-voice-state=ready] { color:#23897f; }
.course-voice-summary[data-voice-state=failed] { color:var(--color-danger,#aa4b43); }
.course-voice-progress { display:block; width:100%; height:6px; margin:12px 0; border:0; accent-color:var(--color-primary); }
.generation-progress-heading { display:flex; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-3); color:var(--color-text-primary); font-size:var(--text-sm); }
.generation-progress-heading>span { color:var(--color-primary); font-variant-numeric:tabular-nums; font-weight:var(--weight-medium); }
.video-generation-progress progress { display:block; width:100%; height:8px; border:0; border-radius:99px; accent-color:var(--color-primary); overflow:hidden; }
.video-generation-progress progress::-webkit-progress-bar { background:var(--color-surface-subtle); border-radius:99px; }
.video-generation-progress progress::-webkit-progress-value { background:var(--color-primary); border-radius:99px; transition:width .25s ease; }
.generation-stages { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); padding:0; margin:var(--space-4) 0; list-style:none; color:var(--color-text-muted); font-size:var(--text-xs); }
.generation-stages li::before { content:'○'; margin-right:6px; }
.generation-stages .is-current { color:var(--color-primary); font-weight:var(--weight-medium); }
.generation-stages .is-current::before { content:'●'; }
.generation-stages .is-complete { color:var(--color-teal,#23897f); }
.generation-stages .is-complete::before { content:'✓'; }
.generation-review-note { padding:var(--space-3) var(--space-4); border-radius:var(--radius-control); margin-top:var(--space-4); color:#23897f; background:#eaf7f4; font-size:var(--text-xs); line-height:1.7; }
.composer-outline .question-evidence { color:var(--color-text-secondary); white-space:normal; margin-top:var(--space-2); line-height:1.7; }
.video-timeline { margin:var(--space-4) 0; font-size:var(--text-xs); color:var(--color-text-secondary); }
.video-timeline summary { cursor:pointer; padding:var(--space-3) 0; }
.video-timeline ol { max-height:320px; overflow-y:auto; padding:var(--space-3) 0; list-style:none; }
.video-timeline li { display:flex; gap:var(--space-4); padding:var(--space-2) 0; line-height:1.8; }
.video-timeline time { flex:0 0 52px; color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
@keyframes generation-spin { to { transform:rotate(360deg); } }
@media(max-width:1100px) { .video-composer-grid { gap:var(--space-8); } .video-composer-brief { padding-left:var(--space-6); } }
@media(max-width:760px) {
 .video-course-composer { margin-top:var(--space-8); }
 .video-composer-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-8); }
 .video-composer-brief { border-left:0; border-top:1px solid var(--color-border); padding:var(--space-6) 0 0; }
 .video-composer-grid h2 { margin-bottom:var(--space-4); }
 .video-composer-footer .composer-actions [role=status] { flex-basis:100%; }
 .create-dialog-header { padding:var(--space-6); }
 #course-create-dialog .create-methods { padding:0 var(--space-6) var(--space-6); }
 .create-method { padding:var(--space-4); gap:var(--space-3); }
 .create-method strong { font-size:var(--text-sm); }
 .create-method strong+span { font-size:var(--text-xs); }
}
@media(prefers-reduced-motion:reduce) { .generation-spinner { animation:none; } }