.brand img { width: var(--brand-logo-width, 138px); height: var(--brand-logo-height, 45px); max-width: 100%; max-height: 100%; margin-right: 8px; object-fit: contain; }
.login-logo { display: block; width: var(--brand-logo-width, 138px); height: var(--brand-logo-height, 45px); max-width: 100%; max-height: 100px; margin: 0 auto 17px; object-fit: contain; }
.settings-form { display: grid; gap: 16px; }
.settings-card { max-width: 1100px; }
.logo-upload-row { display: flex; align-items: center; gap: 20px; }
.logo-preview-wrap { display: grid; justify-items: start; gap: 8px; }
.logo-preview, .logo-placeholder { width: 124px; height: 72px; border: 1px solid #dfe5ed; border-radius: 6px; background: #f7f9fb; object-fit: contain; }
.logo-preview { width: min(var(--brand-logo-width, 138px), 240px); height: min(var(--brand-logo-height, 45px), 100px); }
.logo-placeholder { display: grid; place-items: center; color: #9ba6b6; font-size: 26px; }
.logo-delete { padding: 0; border: 0; background: transparent; color: #d64545; font-size: 13px; cursor: pointer; }
.logo-delete:hover { color: #b52f2f; text-decoration: underline; }
.login-background-preview, .login-background-placeholder { width: 180px; height: 82px; border: 1px solid #dfe5ed; border-radius: 6px; background: #f7f9fb; object-fit: cover; }
.login-background-placeholder { display: grid; place-items: center; color: #9ba6b6; font-size: 26px; }
.upload-control { flex: 1; }
.upload-control small { color: #8490a0; }
.style-options, .font-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.style-option, .font-option { display: flex; gap: 10px; align-items: flex-start; min-height: 92px; padding: 15px; border: 1px solid #dfe5ed; border-radius: 7px; cursor: pointer; }
.style-option:has(input:checked), .font-option:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 2px var(--accent-soft); }
.style-option input, .font-option input, .size-options input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--green); }
.style-option span { display: grid; gap: 7px; }
.style-option b { font-size: 16px; }
.style-option small, .font-option small { color: #8490a0; line-height: 1.45; }
.theme-option.dynamic { border-top: 4px solid #0da9e5; }
.theme-option.enterprise { border-top: 4px solid #0078d4; }
.theme-option.professional { border-top: 4px solid #007aff; }
.theme-option.minimal { border-top: 4px solid #00a844; }
.theme-option.dark { border-top: 4px solid #111111; }
.theme-option.red { border-top: 4px solid #d64545; }
.theme-option.orange { border-top: 4px solid #e67e22; }
.theme-option.purple { border-top: 4px solid #7c3aed; }
.theme-option.monochrome { border-top: 4px solid #222222; }
.theme-option.custom { border-top: 4px solid var(--custom-color, #0da9e5); }
.custom-theme-controls { display: grid; grid-template-columns: auto minmax(180px, 300px); align-items: center; gap: 8px 14px; margin-top: 16px; padding: 15px 16px; border: 1px solid #dfe5ed; border-radius: 7px; background: #fafbfd; }
.custom-theme-controls[hidden] { display: none; }
.custom-theme-controls > label { color: #4f5d70; font-weight: 600; }
.custom-theme-picker { display: flex; align-items: center; gap: 12px; }
.custom-theme-picker input[type="color"] { width: 52px; height: 36px; padding: 3px; border: 1px solid #d5dde7; border-radius: 6px; background: #ffffff; cursor: pointer; }
.custom-theme-picker output { color: #5b6675; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; text-transform: lowercase; }
.custom-theme-controls > small { grid-column: 2; color: #8490a0; line-height: 1.5; }
.font-option { display: grid; gap: 8px; min-height: 78px; }
.font-sample-heiti span, body.font-heiti { font-family: SimHei, "Microsoft YaHei", sans-serif; }
.font-sample-apple span, body.font-apple { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
.font-sample-songti span, body.font-songti { font-family: SimSun, STSong, serif; }
.font-sample-fangsong span, body.font-fangsong { font-family: FangSong, STFangsong, serif; }
.size-options { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.size-options p { margin: 0 6px 0 0; font-weight: 600; }
.size-options label { display: flex; align-items: center; gap: 6px; }
body.font-size-15 { font-size: 15px; }
body.font-size-16 { font-size: 16px; }
body.font-size-17 { font-size: 17px; }
body.theme-enterprise { --green: #1966bd; --green-dark: #0f4f99; --nav: #15263f; }
body.theme-professional { --green: #365f86; --green-dark: #274b6d; --nav: #1f2937; }
body.theme-dynamic .brand { animation: brand-glow 2.8s ease-in-out infinite; }
body.theme-dynamic .primary-nav-item.active { animation: active-breathe 2.8s ease-in-out infinite; }
@keyframes brand-glow { 50% { text-shadow: 0 0 14px rgba(52, 213, 244, .42); } }
@keyframes active-breathe { 50% { filter: brightness(1.11); } }
@media (prefers-reduced-motion: reduce) { body.theme-dynamic .brand, body.theme-dynamic .primary-nav-item.active { animation: none; } }
@media (max-width: 1100px) { .style-options, .font-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.source-searchbar { flex-wrap: wrap; align-items: end; }
.operations-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.operations-page-actions form { display: flex; align-items: center; gap: 5px; margin: 0; }
.operations-page-actions input[type="file"] { width: 178px; padding: 6px 7px; font-size: 12px; background: #fff; }
.operations-page-actions .primary { white-space: nowrap; }
.operation-resource-link { color: var(--green); font-weight: 600; }
.operation-resource-link:hover { color: var(--green-dark); text-decoration: underline; }
.operation-player-head { align-items: center; }
.operation-player-head h1 { margin-bottom: 4px; }
.operation-player-head p { margin: 0; color: var(--muted); font-size: 13px; }
.operation-player-panel { min-height: min(560px, calc(100vh - 210px)); display: grid; place-items: center; padding: 26px; }
.operation-video-player { display: block; width: min(980px, 100%); max-height: calc(100vh - 280px); border-radius: 8px; background: #10151c; box-shadow: 0 16px 45px rgba(19, 31, 46, .2); }
.operation-player-empty { display: grid; justify-items: center; gap: 8px; padding: 70px 24px; color: var(--muted); text-align: center; }
.operation-player-empty h2 { margin: 10px 0 0; color: var(--ink); font-size: 20px; }
.operation-player-empty p { margin: 0; }
.operation-player-icon { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: var(--accent-soft, #e4f6eb); color: var(--green); font-size: 27px; }
.operation-document-head { align-items: center; }
.operation-document-head h1 { margin-bottom: 4px; max-width: min(760px, 62vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-document-head p { margin: 0; color: var(--muted); font-size: 13px; }
.operation-document-head-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.operation-document-head-actions .secondary { border: 1px solid var(--line); background: var(--surface-alt, #f7f8fa); color: var(--ink); }
.operation-document-panel { min-height: min(620px, calc(100vh - 210px)); padding: clamp(18px, 3vw, 36px); background: #eef1f5; }
.operation-document-page { width: min(980px, 100%); min-height: 720px; margin: 0 auto; padding: clamp(28px, 5vw, 66px); background: #fff; box-shadow: 0 12px 34px rgba(29, 45, 66, .12); color: #26364b; }
.operation-docx-paragraph { min-height: 1.65em; margin: 0 0 10px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.operation-docx-heading { margin-top: 18px; color: var(--ink); font-size: 1.2em; font-weight: 700; }
.operation-docx-run { white-space: pre-wrap; }
.operation-docx-run.is-bold { font-weight: 700; }
.operation-docx-run.is-italic { font-style: italic; }
.operation-docx-run.is-underline { text-decoration: underline; }
.operation-document-table-wrap { width: 100%; overflow: auto; margin: 18px 0 24px; }
.operation-document-table { width: 100%; min-width: 460px; border-collapse: collapse; background: #fff; font-size: 14px; }
.operation-document-table th, .operation-document-table td { min-width: 80px; padding: 9px 12px; border: 1px solid #dfe5ed; vertical-align: top; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.operation-document-table th { background: #f3f6fa; color: var(--ink); font-weight: 700; text-align: left; }
.operation-document-table p { margin: 0 0 6px; }
.operation-document-table p:last-child { margin-bottom: 0; }
.operation-xlsx-sheet + .operation-xlsx-sheet { margin-top: 28px; padding-top: 24px; border-top: 1px solid #d7dee8; }
.operation-xlsx-sheet h2 { margin: 0; color: var(--ink); font-size: 18px; }
.operation-document-empty { display: grid; justify-items: center; gap: 10px; padding: 80px 24px; color: var(--muted); text-align: center; }
.operation-document-empty h2 { margin: 0; color: var(--ink); font-size: 20px; }
.operation-document-empty p { margin: 0; }
.operation-document-note { margin: 0; color: var(--muted); font-size: 12px; }
@media (max-width: 760px) { .operation-document-head { align-items: flex-start; gap: 12px; } .operation-document-head h1 { max-width: 100%; white-space: normal; } .operation-document-head-actions { width: 100%; } .operation-document-page { min-height: 520px; padding: 24px 18px; } .operation-document-panel { padding: 12px; } }
.source-searchbar label { display: grid; gap: 5px; min-width: 150px; color: #687588; font-size: 13px; }
.source-searchbar label input { min-width: 150px; }
.module-summary { display: flex; flex-wrap: wrap; gap: 24px; }
.module-summary span { display: inline-flex; gap: 8px; align-items: center; }
.module-summary b { color: #59677a; font-weight: 500; }
.parameter-card { max-width: 1100px; }
.parameter-section + .parameter-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid #edf0f2; }

.settings-help { margin: -4px 0 16px; color: #7f8a99; line-height: 1.6; }
.style-options { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.style-option { display: grid; grid-template-columns: 16px 48px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 116px; }
.style-option .theme-copy { display: grid; gap: 7px; min-width: 0; }
.style-option .theme-copy b { line-height: 1.35; }
.style-option .theme-copy small { line-height: 1.45; }
.style-option .theme-preview { gap: 3px; }
.theme-preview { width: 48px; height: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 4px; border-radius: 6px; background: #f4f6f8; border: 1px solid #dfe5ed; }
.theme-preview i { display: block; border-radius: 3px; background: #c8d1dc; }
.theme-preview i:first-child { background: #00a844; }
.theme-preview i:nth-child(2) { background: #ffffff; border: 1px solid #d7dee7; }
.theme-preview i:last-child { background: #202020; }
.theme-preview-dynamic { background: #e6f7fd; }
.theme-preview-dynamic i:first-child { background: #0da9e5; }
.theme-preview-dynamic i:last-child { background: #2f82bd; }
.theme-preview-enterprise { background: #edf3f9; }
.theme-preview-enterprise i:first-child { background: #0078d4; }
.theme-preview-enterprise i:last-child { background: #2d2d30; }
.theme-preview-professional { background: #f5f5f7; }
.theme-preview-professional i:first-child { background: #007aff; }
.theme-preview-professional i:last-child { background: #202124; }
.theme-preview-dark { background: #1a1a1a; border-color: #444444; }
.theme-preview-dark i:first-child { background: #111111; }
.theme-preview-dark i:nth-child(2) { background: #333333; border-color: #555555; }
.theme-preview-dark i:last-child { background: #000000; }
.theme-preview-red { background: #fff0f0; }
.theme-preview-red i:first-child { background: #d64545; }
.theme-preview-red i:last-child { background: #b4232d; }
.theme-preview-orange { background: #fff7ed; }
.theme-preview-orange i:first-child { background: #e67e22; }
.theme-preview-orange i:last-child { background: #c85b0d; }
.theme-preview-purple { background: #f5f3ff; }
.theme-preview-purple i:first-child { background: #7c3aed; }
.theme-preview-purple i:last-child { background: #5b21b6; }
.theme-preview-monochrome { background: #fafafa; border-color: #cfcfcf; }
.theme-preview-monochrome i:first-child { background: #222222; }
.theme-preview-monochrome i:nth-child(2) { background: #ffffff; border-color: #cfcfcf; }
.theme-preview-monochrome i:last-child { background: #555555; }
.theme-preview-custom { background: color-mix(in srgb, var(--custom-color, #0da9e5) 12%, #ffffff); }
.theme-preview-custom i:first-child { background: var(--custom-color, #0da9e5); }
.theme-preview-custom i:last-child { background: color-mix(in srgb, var(--custom-color, #0da9e5) 72%, #000000); }

.settings-subsection { margin-top: 24px; padding-top: 20px; border-top: 1px solid #edf0f2; }
.settings-subsection h3 { margin: 0 0 6px; font-size: 14px; color: var(--ink); }
.brand-size-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; max-width: 780px; }
.brand-size-grid label { display: grid; gap: 7px; color: #5b6675; }
.brand-size-grid input, .brand-size-grid select { min-height: 38px; }
.nav-position-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nav-position-option { display: grid; grid-template-columns: 16px 58px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 82px; padding: 12px; border: 1px solid #dfe5ed; border-radius: 7px; cursor: pointer; }
.nav-position-option:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 2px var(--accent-soft); }
.nav-position-option input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--green); }
.nav-position-preview { position: relative; width: 58px; height: 42px; overflow: hidden; border: 1px solid #dfe5ed; border-radius: 5px; background: linear-gradient(#ffffff 0 0) 18px 9px / 30px 4px no-repeat, linear-gradient(#dfe5ed 0 0) 18px 18px / 25px 3px no-repeat, linear-gradient(#dfe5ed 0 0) 18px 26px / 18px 3px no-repeat, #f4f6f8; }
.nav-position-preview::before { content: ""; position: absolute; background: var(--green); border-radius: 2px; }
.nav-preview-left::before { inset: 5px auto 5px 5px; width: 9px; }
.nav-preview-top::before { inset: 5px 5px auto; height: 8px; }
.nav-preview-bottom::before { inset: auto 5px 5px; height: 8px; }
.nav-preview-right::before { inset: 5px 5px 5px auto; width: 9px; }
.nav-position-copy { display: grid; gap: 5px; min-width: 0; }
.nav-position-copy b { font-size: 14px; line-height: 1.35; }
.nav-position-copy small { color: #8490a0; font-size: 12px; line-height: 1.45; }
@media (max-width: 1100px) { .nav-position-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .brand-size-grid { grid-template-columns: 1fr; } }

/* Source-page typography tuning: keep the dense CRM workspace readable. */
.primary-sidebar { width: 88px; padding: 0 4px; }
.brand { height: 48px; font-size: var(--brand-name-size, 18px); letter-spacing: 0; }
.primary-nav { gap: 4px; padding: 4px 0 20px; }
.primary-nav-item { height: 68px; margin: 0; border-radius: 8px; font-size: 14px; gap: 7px; padding: 8px 2px; }
.primary-nav-item i { font-size: 22px; }
.pi-nav-icon { width: 27px; height: 27px; display: block; overflow: visible; }
.pi-icon-wand { fill: none; stroke: #ffffff; stroke-width: 7.4; stroke-linecap: round; }
.pi-icon-star { fill: #ffffff; stroke: #ffffff; stroke-width: 1.4; stroke-linejoin: round; }
.primary-nav-item span { font-size: 11px; line-height: 14px; }
.primary-nav-item.active .pi-nav-icon { color: #fff; }
.secondary-sidebar { left: 88px; top: 48px; width: 180px; }
.secondary-nav { padding: 6px 16px; }
.secondary-nav-item { font-size: 14px; line-height: 22px; padding: 9px 12px; margin: 2px 0; border-radius: 4px; }
.app-shell { margin-left: 268px; min-width: 760px; }
.topbar { height: 48px; padding: 0 16px; }
.topbar .crumb { font-size: 14px; gap: 16px; }
.topbar .crumb i { font-size: 18px; }
.tabs { height: 40px; font-size: 14px; gap: 16px; padding: 0 16px; }
.content { padding: 16px 24px 28px; max-width: none; }
.dashboard-page .app-shell { margin-left: 88px; }
.dashboard-page .content { padding: 16px 24px 28px; }
.section-head h1 { font-size: 16px; }
.panel h2, .form-card h2 { font-size: 16px; }
.table-panel th, .table-panel td { font-size: 14px; padding: 10px 11px; }
.table-panel td small { font-size: 12px; }
.source-searchbar label { font-size: 14px; }
.source-searchbar input, .source-searchbar select { font-size: 14px; }
.style-option b { font-size: 14px; }
.style-option small, .font-option small { font-size: 12px; }
.muted { font-size: 14px; }

/* Open-page tabs: every visited module gets a real, closable workspace tab. */
.workspace-tabs { height: 40px; display: flex; align-items: stretch; background: #fff; border-bottom: 1px solid var(--line); padding: 0 16px; overflow-x: auto; overflow-y: hidden; }
.workspace-tab-list { display: flex; align-items: stretch; min-width: max-content; }
.workspace-tab { display: inline-flex; align-items: center; gap: 9px; min-width: 76px; padding: 0 14px; color: #536077; font-size: 14px; white-space: nowrap; border-radius: 8px 8px 0 0; }
.workspace-tab:hover { background: #f4faf6; color: #287f48; }
.workspace-tab.active { background: #e4f6eb; color: #287f48; font-weight: 600; }
.workspace-tab-close { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #536077; font-size: 17px; line-height: 16px; cursor: pointer; }
.workspace-tab-close:hover { background: #d7e9dd; color: #287f48; }
.dashboard-page .workspace-tabs { height: 40px; padding: 0 16px; }

/* Account menu and message reminders in the source-style top bar. */
.topbar-actions { display: flex; align-items: center; gap: 5px; height: 100%; }
.topbar-icon-button, .topbar-account-trigger { display: inline-flex; align-items: center; justify-content: center; border: 0; color: #526174; background: transparent; cursor: pointer; }
.topbar-icon-button { position: relative; width: 34px; height: 34px; border-radius: 4px; }
.topbar-icon-button:hover { background: #f3f6f8; color: var(--green); }
.topbar-icon-button i { font-size: 17px; }
.topbar-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #f04444; color: #fff; font-size: 10px; line-height: 18px; text-align: center; font-weight: 700; }
.topbar-notifications, .topbar-account { position: relative; display: flex; align-items: center; height: 100%; }
.topbar-account-trigger { height: 100%; gap: 8px; padding: 0 10px; border-left: 1px solid transparent; font-size: 14px; color: #4b5563; }
.topbar-account-trigger:hover, .topbar-account-trigger[aria-expanded="true"] { background: #f5f7f9; color: var(--ink); }
.topbar-account-trigger > i { color: #627187; font-size: 18px; }
.topbar-account-chevron { font-size: 17px; line-height: 1; transform: translateY(-1px); }
.topbar-notification-menu, .topbar-account-menu { position: absolute; right: 0; top: calc(100% + 1px); z-index: 30; width: 244px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 10px 28px rgba(28, 42, 58, .16); }
.topbar-notification-menu[hidden], .topbar-account-menu[hidden] { display: none; }
.topbar-popover-heading { padding: 8px 12px 10px; border-bottom: 1px solid #edf0f2; color: #344052; font-size: 14px; font-weight: 600; }
.topbar-notification-menu > a, .topbar-account-menu > a, .topbar-account-menu > form button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 38px; padding: 8px 12px; border-radius: 3px; color: #344052; background: transparent; font-size: 14px; text-align: left; }
.topbar-notification-menu > a:hover, .topbar-account-menu > a:hover, .topbar-account-menu > form button:hover { background: #f5f7f9; color: var(--green); }
.topbar-notification-menu i, .topbar-account-menu i { width: 16px; color: #68778b; text-align: center; }
.topbar-account-menu > form { margin: 0; border-top: 1px solid #edf0f2; padding-top: 4px; }
.topbar-account-menu > form button { border: 0; cursor: pointer; font: inherit; }
.topbar-notification-menu > a { justify-content: space-between; }
.topbar-notification-menu > a span { display: inline-flex; align-items: center; gap: 11px; }
.topbar-notification-menu b { min-width: 18px; padding: 1px 5px; border-radius: 999px; background: #fff0f0; color: #e24b4b; font-size: 11px; font-weight: 600; text-align: center; }
.account-password-form { max-width: 760px; }
@media (max-width: 680px) {
  .topbar-account-trigger span:not(.topbar-account-chevron) { display: none; }
  .topbar-account-trigger { padding: 0 7px; }
  .topbar-account-menu { right: -6px; }
}

/* Real-time message and approval reminders. */
.notification-toast-region { position: fixed; top: 58px; right: 18px; z-index: 60; width: min(360px, calc(100vw - 36px)); display: grid; gap: 8px; pointer-events: none; }
.notification-toast { pointer-events: auto; display: grid; gap: 6px; padding: 12px 13px 11px; background: var(--surface, #fff); border: 1px solid var(--line, #e5e8ee); border-left: 3px solid var(--green, #00a844); border-radius: 6px; box-shadow: 0 12px 28px rgba(28, 42, 58, .18); color: var(--ink, #242b35); animation: notification-toast-in .22s ease-out both; }
.notification-toast-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notification-toast-title { font-size: 14px; line-height: 1.35; }
.notification-toast-close { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted, #7c8798); font-size: 18px; line-height: 20px; cursor: pointer; }
.notification-toast-close:hover { background: var(--surface-alt, #f7f8fa); color: var(--ink, #242b35); }
.notification-toast-meta { color: var(--green, #00a844); font-size: 12px; font-weight: 600; }
.notification-toast-body { max-height: 4.2em; overflow: hidden; color: var(--muted, #7c8798); font-size: 13px; line-height: 1.45; word-break: break-word; }
.notification-toast-link { justify-self: start; color: var(--green, #00a844); font-size: 12px; }
.notification-toast-link:hover { color: var(--green-dark, #008d39); text-decoration: underline; }
@keyframes notification-toast-in { from { opacity: 0; transform: translateY(-7px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .notification-toast { animation: none; } }
.message-status-form { display: inline; margin: 0; }
.message-read-tag { background: #e6f0ff; color: #1674e8; }
.message-unread-button { cursor: pointer; font: inherit; background: #fff1df; color: #f08a24; }
.message-unread-button:hover { background: #ffe6c9; color: #d97413; }

/* Video categories use a lightweight directory editor rather than file actions. */
.video-category-name { display: inline-flex; align-items: center; gap: 8px; min-width: 180px; font-weight: 600; color: var(--ink); }
.video-category-name.is-child { padding-left: 18px; font-weight: 500; }
.video-category-branch { color: var(--green); font-size: 17px; line-height: 1; }
.video-category-level { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: var(--surface-alt, #f4f7f9); color: var(--muted); font-size: 12px; }
.muted-tag { background: #f1f3f5; color: #8a94a2; }
.video-category-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(22, 34, 49, .48); }
.video-category-modal[hidden] { display: none; }
.video-category-modal-card { width: min(500px, 100%); overflow: hidden; background: var(--surface, #fff); border-radius: 10px; box-shadow: 0 20px 60px rgba(24, 39, 58, .22); }
.video-category-modal .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.video-category-modal .modal-head h2 { margin: 0; font-size: 18px; }
.video-category-modal .modal-close { border: 0; padding: 0 2px; background: transparent; color: var(--muted); font-size: 25px; line-height: 1; cursor: pointer; }
.video-category-modal form { display: grid; gap: 16px; padding: 20px 22px 22px; }
.video-category-modal label { display: grid; gap: 7px; color: #586679; }
.video-category-modal input, .video-category-modal select { min-height: 40px; }
.video-category-modal small { color: var(--muted); font-size: 12px; }
.video-category-modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 3px; }
.video-category-modal .secondary { border: 1px solid var(--line); background: var(--surface-alt, #f7f8fa); color: var(--ink); }
.operation-video-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(22, 34, 49, .48); }
.operation-video-modal[hidden] { display: none; }
.operation-video-modal-card { width: min(560px, 100%); overflow: hidden; background: var(--surface, #fff); border-radius: 10px; box-shadow: 0 20px 60px rgba(24, 39, 58, .22); }
.operation-video-modal .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.operation-video-modal .modal-head h2 { margin: 0; font-size: 18px; }
.operation-video-modal .modal-close { border: 0; padding: 0 2px; background: transparent; color: var(--muted); font-size: 25px; line-height: 1; cursor: pointer; }
.operation-video-modal form { display: grid; gap: 16px; padding: 20px 22px 22px; }
.operation-video-modal label { display: grid; gap: 7px; color: #586679; }
.operation-video-modal input, .operation-video-modal select { min-height: 40px; }
.operation-video-modal input[type="file"] { min-height: 38px; padding: 7px; }
.operation-video-modal small { color: var(--muted); font-size: 12px; }
.operation-video-upload-progress { display: grid; gap: 8px; margin-top: -2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-alt, #f7f8fa); color: var(--muted); font-size: 12px; }
.operation-video-upload-progress[hidden] { display: none; }
.operation-video-upload-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.operation-video-upload-progress-head strong { color: var(--ink); font-size: 13px; }
.operation-video-upload-progress-track { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: #dce8f5; }
.operation-video-upload-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue, #1677e8); transition: width .16s ease; }
.operation-video-upload-progress.is-indeterminate .operation-video-upload-progress-track span { width: 42%; animation: operation-video-upload-indeterminate 1.05s ease-in-out infinite; }
.operation-video-upload-progress.is-error { border-color: #f0b7b7; background: #fff6f6; }
.operation-video-upload-progress.is-error .operation-video-upload-progress-track span { background: #d34b4b; }
@keyframes operation-video-upload-indeterminate { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
.operation-video-modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 3px; }
.operation-video-modal .secondary { border: 1px solid var(--line); background: var(--surface-alt, #f7f8fa); color: var(--ink); }