:root { color-scheme: light; font-family: "Segoe UI Variable", "Segoe UI", "Noto Sans KR", "맑은 고딕", sans-serif; font-size: 13px; --workspace-nav-expanded: 210px; --workspace-nav-collapsed: 62px; --workspace-splitter-width: 8px; --workspace-accent: #2563eb; --workspace-border: #d9e0ea; --workspace-nav-surface: #f7f9fc; --ui-canvas: #f3f6fa; --ui-surface: #ffffff; --ui-surface-subtle: #fafbfd; --ui-surface-muted: #f2f5f8; --ui-surface-hover: #eef4ff; --ui-border: #dfe5ed; --ui-border-strong: #778397; --ui-control-border: #c4cedb; --ui-text: #172033; --ui-text-muted: #667085; --ui-text-subtle: #667085; --ui-accent: #2563eb; --ui-accent-hover: #1d4ed8; --ui-accent-soft: #eaf1ff; --ui-success: #0f6f3a; --ui-success-soft: #e9f8ef; --ui-danger: #c9364f; --ui-danger-soft: #fff0f3; --ui-warning: #8a4b00; --ui-warning-soft: #fff5df; --ui-brand: #f47b20; --ui-on-accent: #fff; --ui-focus-contrast: #fff; --ui-nav-text: #445066; --ui-accent-text: #174ea6; --ui-field-label: #344054; --ui-neutral-text: #475467; --ui-disabled-border: #dce2ea; --ui-disabled-surface: #f2f4f7; --ui-disabled-text: #98a2b3; --ui-scroll-thumb: #b8c3d1; --ui-scroll-thumb-hover: #96a4b6; --ui-selection: #cfe0ff; --ui-row-alternate: #fbfcfe; --ui-row-hover: #f1f5fb; --ui-divider-soft: #eef2f6; --ui-on-air: #fdc8d2; --ui-on-air-edge: #d92d4b; --ui-overlay: rgba(15, 23, 42, .36); --ui-card-outline: rgba(111, 129, 153, .28); --ui-radius-sm: 8px; --ui-radius: 11px; --ui-radius-lg: 16px; --ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --ui-shadow-card: 0 1px 2px rgba(15, 23, 42, .055), 0 8px 24px rgba(15, 23, 42, .035); --ui-shadow-dialog: 0 24px 70px rgba(15, 23, 42, .24), 0 4px 18px rgba(15, 23, 42, .12); background: var(--ui-canvas); color: var(--ui-text); } :root[data-color-theme="light"], body[data-color-theme="light"] { color-scheme: light; } :root[data-color-theme="dark"], body[data-color-theme="dark"] { color-scheme: dark; --workspace-accent: #72a5ff; --workspace-border: #2d3a4d; --workspace-nav-surface: #111a27; --ui-canvas: #0b121c; --ui-surface: #141e2c; --ui-surface-subtle: #101925; --ui-surface-muted: #1b2737; --ui-surface-hover: #203149; --ui-border: #2d3a4d; --ui-border-strong: #8fa2bc; --ui-control-border: #50627a; --ui-text: #edf3fb; --ui-text-muted: #acb9ca; --ui-text-subtle: #8796aa; --ui-accent: #72a5ff; --ui-accent-hover: #8ab4ff; --ui-accent-soft: #1d3457; --ui-success: #5bd497; --ui-success-soft: #17392b; --ui-danger: #ff7d94; --ui-danger-soft: #431f2b; --ui-warning: #f4b84d; --ui-warning-soft: #402f17; --ui-on-accent: #07111f; --ui-focus-contrast: #07111f; --ui-nav-text: #bcc8d8; --ui-accent-text: #a9c7ff; --ui-field-label: #d7e0ec; --ui-neutral-text: #c2cddd; --ui-disabled-border: #344256; --ui-disabled-surface: #182230; --ui-disabled-text: #7f8da1; --ui-scroll-thumb: #52647c; --ui-scroll-thumb-hover: #687b94; --ui-selection: #294a78; --ui-row-alternate: #111b29; --ui-row-hover: #1a2a40; --ui-divider-soft: #263448; --ui-on-air: #4a202d; --ui-on-air-edge: #ff718d; --ui-overlay: rgba(2, 6, 12, .66); --ui-card-outline: rgba(143, 162, 188, .3); --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .28); --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, .32), 0 8px 24px rgba(0, 0, 0, .18); --ui-shadow-dialog: 0 24px 70px rgba(0, 0, 0, .62), 0 4px 18px rgba(0, 0, 0, .4); } @media (prefers-color-scheme: dark) { :root[data-color-theme="system"], body[data-color-theme="system"] { color-scheme: dark; --workspace-accent: #72a5ff; --workspace-border: #2d3a4d; --workspace-nav-surface: #111a27; --ui-canvas: #0b121c; --ui-surface: #141e2c; --ui-surface-subtle: #101925; --ui-surface-muted: #1b2737; --ui-surface-hover: #203149; --ui-border: #2d3a4d; --ui-border-strong: #8fa2bc; --ui-control-border: #50627a; --ui-text: #edf3fb; --ui-text-muted: #acb9ca; --ui-text-subtle: #8796aa; --ui-accent: #72a5ff; --ui-accent-hover: #8ab4ff; --ui-accent-soft: #1d3457; --ui-success: #5bd497; --ui-success-soft: #17392b; --ui-danger: #ff7d94; --ui-danger-soft: #431f2b; --ui-warning: #f4b84d; --ui-warning-soft: #402f17; --ui-on-accent: #07111f; --ui-focus-contrast: #07111f; --ui-nav-text: #bcc8d8; --ui-accent-text: #a9c7ff; --ui-field-label: #d7e0ec; --ui-neutral-text: #c2cddd; --ui-disabled-border: #344256; --ui-disabled-surface: #182230; --ui-disabled-text: #7f8da1; --ui-scroll-thumb: #52647c; --ui-scroll-thumb-hover: #687b94; --ui-selection: #294a78; --ui-row-alternate: #111b29; --ui-row-hover: #1a2a40; --ui-divider-soft: #263448; --ui-on-air: #4a202d; --ui-on-air-edge: #ff718d; --ui-overlay: rgba(2, 6, 12, .66); --ui-card-outline: rgba(143, 162, 188, .3); --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .28); --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, .32), 0 8px 24px rgba(0, 0, 0, .18); --ui-shadow-dialog: 0 24px 70px rgba(0, 0, 0, .62), 0 4px 18px rgba(0, 0, 0, .4); } } * { box-sizing: border-box; } *[hidden] { display: none !important; } .workspace-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } .workspace-nav-icon { shape-rendering: geometricPrecision; } html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; } body.busy { cursor: wait; } body.busy .operator-shell { pointer-events: none; } body.busy::before { position: fixed; z-index: 10001; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--ui-accent), transparent); background-size: 36% 100%; background-repeat: no-repeat; content: ""; animation: operator-progress 1.05s ease-in-out infinite; pointer-events: none; } @keyframes operator-progress { from { background-position-x: -56%; } to { background-position-x: 156%; } } button, input, select { font: inherit; } button { border: 1px solid var(--ui-control-border); background: var(--ui-surface); color: var(--ui-text); } button:not(:disabled) { cursor: pointer; } button:disabled { color: var(--ui-disabled-text); opacity: 1; } .operator-shell { display: grid; grid-template-columns: minmax(780px, 1fr) var(--workspace-splitter-width) minmax(600px, var(--schedule-pane-width, 40%)); width: 100%; min-width: 1388px; height: 100vh; background: #efefef; } .workspace-splitter { position: relative; z-index: 4; width: var(--workspace-splitter-width); min-width: var(--workspace-splitter-width); align-self: stretch; cursor: col-resize; background: var(--ui-canvas); touch-action: none; } .workspace-splitter::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: var(--ui-border); content: ""; pointer-events: none; } .workspace-splitter:hover::before, .workspace-splitter.dragging::before { width: 3px; border-radius: 999px; background: var(--ui-accent); } .workspace-splitter:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; } body.resizing-workspace { cursor: col-resize; user-select: none; } .workspace-region { --workspace-nav-width: var(--workspace-nav-expanded); display: grid; grid-template-columns: var(--workspace-nav-width) minmax(0, 1fr); min-width: 0; min-height: 0; border-right: 1px solid var(--workspace-border); background: #f7f7f7; } .workspace-region.nav-collapsed { --workspace-nav-width: var(--workspace-nav-collapsed); } .workspace-navigation { display: grid; grid-template-rows: 66px minmax(0, 1fr) auto; min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid var(--workspace-border); background: var(--workspace-nav-surface); } .workspace-nav-header { display: flex; align-items: center; padding: 10px; } .workspace-nav-toggle { display: flex; width: 100%; min-width: 42px; height: 42px; align-items: center; gap: 13px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; text-align: left; white-space: nowrap; } .workspace-nav-toggle:hover { background: #e5e5e5; } .workspace-nav-toggle:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: -2px; background: #e5e5e5; } .workspace-nav-toggle svg, .workspace-nav-item svg { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .workspace-nav-toggle-label { overflow: hidden; text-overflow: ellipsis; } .workspace-nav-items { display: flex; min-height: 0; flex-direction: column; gap: 4px; overflow: auto; padding: 4px 8px 8px; } .workspace-nav-section-label { display: flex; height: 26px; flex: 0 0 26px; align-items: center; padding: 4px 12px 2px; overflow: hidden; color: var(--ui-text-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; } .workspace-nav-footer { padding: 8px; border-top: 1px solid var(--workspace-border); } .workspace-nav-item { position: relative; display: flex; width: 100%; min-width: 44px; height: 46px; flex: 0 0 46px; align-items: center; gap: 13px; padding: 0 12px; overflow: hidden; border: 0; border-radius: 6px; background: transparent; text-align: left; white-space: nowrap; } .workspace-nav-item:hover { background: #e7e7e7; } .workspace-nav-item:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: -2px; background: #e7e7e7; } .workspace-nav-item.workspace-current { background: #dedede; font-weight: 700; } .workspace-nav-item.workspace-current::before { position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--workspace-accent); content: ""; } .nav-collapsed .workspace-nav-toggle { justify-content: center; padding: 0; } .nav-collapsed .workspace-nav-toggle-label, .nav-collapsed .workspace-nav-item span, .nav-collapsed .workspace-nav-section-label span { display: none; } .nav-collapsed .workspace-nav-item { justify-content: center; padding: 0; } .nav-collapsed .workspace-nav-section-label { height: 12px; flex-basis: 12px; margin: 0 7px; padding: 0; border-top: 1px solid var(--workspace-border); } .workspace-surface { display: grid; grid-template-rows: 66px minmax(0, 1fr); min-width: 0; min-height: 0; background: #f7f7f7; container-name: operator-workspace; container-type: inline-size; } .workspace-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 8px 20px; border-bottom: 1px solid var(--workspace-border); background: #fff; } .brand { display: flex; min-width: 0; align-items: center; gap: 10px; white-space: nowrap; } .workspace-heading { min-width: 0; } .workspace-heading h1 { margin: 1px 0 0; overflow: hidden; font-size: 21px; text-overflow: ellipsis; white-space: nowrap; } .connection-state { padding: 8px 10px; border-radius: 4px; background: #c40000; color: white; font: 700 14px Consolas, monospace; } .connection-state.connected { background: #176c32; } .connection-state.outcome-unknown { background: #8a4d00; } .workspace-content { position: relative; min-width: 0; min-height: 0; overflow: hidden; } .workspace-view { width: 100%; height: 100%; min-width: 0; min-height: 0; } .left-panel, .catalog-panel, .playlist-panel { min-height: 0; } .left-panel { display: flex; flex-direction: column; padding: 16px 20px 12px; background: #f7f7f7; } .search-line { display: grid; grid-template-columns: 44px minmax(220px, 460px) 112px; align-items: center; justify-content: start; gap: 7px; min-height: 42px; } .search-line label { font-weight: 700; } .search-line input { grid-column: 2; height: 31px; padding: 2px 8px; border: 1px solid #888; font-size: 16px; } .search-line button { grid-column: 3; height: 31px; font-size: 14px; } .search-line button span { font-size: 19px; margin-right: 12px; } .stock-results { height: 190px; border: 1px solid #999; background: #fff; overflow-y: auto; } .stock-result { display: block; width: 100%; height: 17px; padding: 0 5px; border: 0; background: #fff; text-align: left; font-size: 16px; line-height: 17px; } .stock-result.selected { background: #696969; color: #fff; } .manual-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 9px 0; } .manual-actions button { height: 34px; font-size: 12px; font-weight: 700; } .manual-list-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 9px; } .manual-list-actions button { height: 31px; padding: 2px 3px; font-size: 11px; font-weight: 700; } .named-playlist-backdrop { position: fixed; inset: 0; z-index: 19; background: rgba(0, 0, 0, .3); } .named-playlist-backdrop[hidden] { display: none; } .named-playlist-dialog { position: absolute; left: 50%; top: 50%; width: 650px; height: 500px; transform: translate(-50%, -50%); display: grid; grid-template-rows: 45px auto minmax(0, 1fr) 52px; border: 1px solid #666; background: #f2f2f2; box-shadow: 0 10px 36px rgba(0, 0, 0, .4); } .named-playlist-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid #999; background: #ececec; } .named-playlist-dialog h2 { margin: 0; font-size: 18px; } .named-playlist-dialog > header button { width: 34px; height: 29px; font-size: 20px; } .named-playlist-status { min-height: 38px; padding: 8px 12px; border-bottom: 1px solid var(--ui-border); color: var(--ui-text-muted); } .named-playlist-status.error { background: var(--ui-danger-soft); color: var(--ui-danger); font-weight: 700; } .named-playlist-body { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 9px; padding: 10px; } .named-playlist-definitions { min-height: 0; overflow: auto; border: 1px solid #888; background: #fff; } .named-playlist-definitions button { display: block; width: 100%; min-height: 28px; padding: 4px 8px; border: 0; border-bottom: 1px solid #ddd; background: #fff; text-align: left; } .named-playlist-definitions button.selected { background: #d9e8f9; font-weight: 700; } .named-playlist-create { align-self: start; display: grid; grid-template-columns: 1fr; gap: 7px; padding: 10px; border: 1px solid #aaa; background: #fff; } .named-playlist-create h3 { margin: 0 0 5px; font-size: 15px; } .named-playlist-create input, .named-playlist-create button { min-width: 0; height: 30px; } .named-playlist-create p { margin: 5px 0 0; color: var(--ui-text-muted); font-size: 11px; line-height: 1.45; } .named-playlist-dialog > footer { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-top: 1px solid #aaa; } .named-playlist-dialog > footer button { min-width: 96px; height: 32px; } .named-playlist-footer-spacer { flex: 1; } .named-playlist-dialog > footer #named-playlist-confirm-button { border-color: #4774a8; background: linear-gradient(#f8fbff, #d9e8f9); font-weight: 700; } .named-playlist-confirmation-backdrop { position: fixed; inset: 0; z-index: 26; background: rgba(0, 0, 0, .28); } .named-playlist-confirmation-backdrop[hidden] { display: none; } .named-playlist-confirmation-dialog { position: absolute; left: 50%; top: 50%; width: 360px; padding: 24px; transform: translate(-50%, -50%); border: 1px solid #666; background: #fff; box-shadow: 0 10px 36px rgba(0, 0, 0, .4); text-align: center; } .named-playlist-confirmation-dialog > footer { display: flex; justify-content: center; gap: 10px; margin-top: 24px; } .named-playlist-confirmation-dialog button { min-width: 88px; padding: 6px 15px; } .named-playlist-confirmation-dialog #named-playlist-confirmation-yes { border-color: #4774a8; background: linear-gradient(#f8fbff, #d9e8f9); font-weight: 700; } .manual-financial-backdrop { position: fixed; inset: 0; z-index: 18; background: rgba(0, 0, 0, .3); } .manual-financial-backdrop[hidden] { display: none; } .manual-financial-dialog { position: absolute; left: 50%; top: 50%; width: min(1120px, 92vw); height: min(800px, 90vh); transform: translate(-50%, -50%); display: grid; grid-template-rows: 46px minmax(0, 1fr) auto; border: 1px solid #666; background: #f3f3f3; box-shadow: 0 10px 36px rgba(0, 0, 0, .4); } .manual-financial-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid #999; background: #ececec; } .manual-financial-dialog h2 { margin: 0; font-size: 18px; } .manual-financial-dialog > header button { width: 34px; height: 29px; font-size: 20px; } .manual-financial-workspace { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 7px; padding: 8px; } .manual-financial-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px; } .manual-financial-toolbar input, .manual-financial-toolbar button { min-width: 0; height: 30px; } .manual-financial-body { min-height: 0; display: grid; grid-template-columns: minmax(430px, .95fr) minmax(0, 1.05fr); gap: 8px; } .manual-financial-list { min-height: 0; overflow: auto; border: 1px solid #999; background: #fff; } .manual-financial-list button { display: block; width: 100%; min-height: 25px; padding: 3px 7px; border: 0; border-bottom: 1px solid #ddd; background: #fff; text-align: left; } .manual-financial-list button.selected { background: #dcdcdc; } .manual-financial-list button.manual-financial-row-unreadable { border-left: 3px solid var(--ui-danger); background: var(--ui-danger-soft); color: var(--ui-danger); } .manual-financial-list button.manual-financial-row-unreadable::after { content: "읽기 불가"; position: absolute; top: 3px; right: 4px; padding: 1px 3px; background: inherit; font-size: 11px; font-weight: 700; } .manual-financial-list button.manual-financial-row-legacy { border-left: 3px solid var(--ui-warning); background: var(--ui-warning-soft); color: var(--ui-warning); } .manual-financial-list button.manual-financial-row-legacy::after { content: "기존 원문"; position: absolute; top: 3px; right: 4px; padding: 1px 3px; background: inherit; font-size: 11px; font-weight: 700; } .manual-financial-list button.manual-financial-list-header { position: sticky; top: 0; z-index: 1; background: #ececec; border-bottom: 1px solid #888; font-weight: 700; } .manual-financial-list button.manual-financial-list-row { position: relative; display: grid; align-items: stretch; width: 100%; padding: 0; } .manual-financial-preview-columns-6 button.manual-financial-list-row { min-width: 560px; grid-template-columns: minmax(112px, 1.35fr) repeat(5, minmax(82px, 1fr)); } .manual-financial-preview-columns-7 button.manual-financial-list-row { min-width: 600px; grid-template-columns: minmax(112px, 1.35fr) repeat(6, minmax(76px, 1fr)); } .manual-financial-preview-cell { min-width: 0; overflow: hidden; padding: 4px 6px; border-right: 1px solid #e2e2e2; text-overflow: ellipsis; white-space: nowrap; } .manual-financial-preview-cell:last-child { border-right: 0; } .manual-financial-editor { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 7px; padding: 8px; border: 1px solid #999; background: #fff; } .manual-financial-stock-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; } .manual-financial-stock-line input, .manual-financial-stock-line button { height: 30px; } .manual-financial-stock-results { display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; max-height: 84px; overflow: auto; padding: 3px; border: 1px solid #ccc; } .manual-financial-stock-results button { padding: 3px 7px; } .manual-financial-stock-results button.selected { border-color: var(--ui-accent); background: var(--ui-accent-soft); } .manual-financial-verification { min-height: 22px; color: var(--ui-accent-text); } .manual-financial-reference { align-self: center; width: min(100%, 360px); margin: 0; padding: 6px; border: 1px solid #ccc; background: #f7f7f7; } .manual-financial-reference img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #111; } .manual-financial-reference figcaption { margin-top: 5px; color: var(--ui-text-muted); font-size: 12px; text-align: center; } .manual-financial-fields { display: grid; gap: 7px; } .manual-financial-field { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 6px; } .manual-financial-field input { min-width: 0; height: 28px; } .manual-financial-grid { display: grid; gap: 4px; align-items: center; } .manual-financial-grid input { min-width: 0; height: 27px; } .manual-revenue-grid, .manual-quarter-grid { grid-template-columns: minmax(0, 1fr) minmax(120px, .45fr); } .manual-growth-grid { grid-template-columns: 130px repeat(4, minmax(90px, 1fr)); } .manual-financial-actions { margin-top: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .manual-financial-actions button { min-height: 34px; } .manual-financial-actions .manual-primary { border-color: #4774a8; background: linear-gradient(#f8fbff, #d9e8f9); font-weight: 700; } .manual-financial-message { color: var(--ui-text-muted); } .manual-financial-warning { padding: 7px; border: 1px solid var(--ui-danger); background: var(--ui-danger-soft); color: var(--ui-danger); font-weight: 700; } .manual-list-backdrop { position: fixed; inset: 0; z-index: 19; background: rgba(0, 0, 0, .32); } .manual-list-backdrop[hidden] { display: none; } .manual-list-dialog { position: absolute; left: 50%; top: 50%; width: min(980px, 94vw); height: min(760px, 91vh); transform: translate(-50%, -50%); display: grid; grid-template-rows: 46px minmax(0, 1fr) auto; border: 1px solid #666; background: #f3f3f3; box-shadow: 0 10px 36px rgba(0, 0, 0, .4); } .manual-list-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid #999; } .manual-list-dialog h2 { margin: 0; font-size: 18px; } .manual-list-dialog > header button { width: 34px; height: 29px; font-size: 20px; } .manual-list-workspace { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; } .manual-list-tabs, .manual-list-actions-row, .manual-list-search { display: flex; gap: 6px; align-items: center; } .manual-list-tabs button.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-text); font-weight: 700; } .manual-list-table-wrap { min-height: 0; overflow: auto; border: 1px solid #999; background: #fff; } .manual-list-table { width: 100%; border-collapse: collapse; } .manual-list-table th, .manual-list-table td { padding: 4px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .manual-list-table input { width: 100%; min-width: 0; height: 27px; } .manual-list-table .manual-list-row-actions { width: 170px; white-space: nowrap; } .manual-list-search input { flex: 1; min-width: 0; height: 30px; } .manual-list-search-results { display: flex; flex-wrap: wrap; gap: 4px; max-height: 110px; overflow: auto; padding: 5px; border: 1px solid #aaa; background: #fff; } .manual-list-search-results button.selected { background: #dcdcdc; font-weight: 600; } .manual-list-status { padding: 7px; border: 1px solid #bbb; background: #fff; } .manual-list-status.error { border-color: var(--ui-danger); background: var(--ui-danger-soft); color: var(--ui-danger); font-weight: 700; } .manual-list-status.warning { border-color: var(--ui-warning); background: var(--ui-warning-soft); color: var(--ui-warning); font-weight: 700; } .manual-list-actions-row { margin-top: auto; justify-content: flex-end; } .manual-list-actions-row button { min-width: 100px; height: 34px; } .manual-list-actions-row .primary { border-color: #4774a8; background: linear-gradient(#f8fbff, #d9e8f9); font-weight: 700; } .manual-dialog-footer { display: flex; justify-content: flex-end; padding: 9px 10px; border-top: 1px solid #aaa; background: #ececec; } .manual-dialog-footer button { min-width: 100px; height: 34px; } .cut-list { flex: 1; min-height: 0; border: 1px solid #999; background: #fff; overflow-y: auto; user-select: none; } .cut-row { display: grid; grid-template-columns: 62px 1fr; min-height: 23px; border-bottom: 1px solid #ddd; background: #fff; font-size: 15px; } .cut-row > span { padding: 2px 7px; pointer-events: none; } .cut-row .cut-number { border-right: 1px solid #ddd; text-align: center; color: #145ab4; } .cut-row.selected { background: #dcdcdc; } .cut-row:focus { outline: 1px dotted #222; outline-offset: -2px; } .cut-row.separator { background: #fff; } .cut-row[data-cut-drag-enabled="true"] { cursor: grab; } .cut-row.dragging { opacity: .58; cursor: not-allowed; } .cut-row.dragging.drag-allowed { cursor: move; } .playlist-grid.cut-drag-over { box-shadow: inset 0 0 0 3px #176b2d; } .cut-drag-feedback { position: fixed; z-index: 10000; display: flex; align-items: center; gap: 7px; max-width: 260px; padding: 7px 10px; border: 1px solid #8a8a8a; border-radius: 4px; background: rgba(255, 255, 255, .97); box-shadow: 0 3px 10px rgba(0, 0, 0, .28); color: #555; font-size: 13px; font-weight: 700; line-height: 1; pointer-events: none; user-select: none; white-space: nowrap; } .cut-drag-feedback[hidden] { display: none; } .cut-drag-feedback-icon { display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; border-radius: 50%; background: #777; color: #fff; font-size: 16px; font-weight: 800; } .cut-drag-feedback-icon::before { content: "×"; } .cut-drag-feedback.allowed { border-color: #176b2d; color: #125824; } .cut-drag-feedback.allowed .cut-drag-feedback-icon { background: #176b2d; } .cut-drag-feedback.allowed .cut-drag-feedback-icon::before { content: "+"; } .operator-status { min-height: 18px; padding-top: 2px; color: #a40000; font-size: 11px; } .catalog-panel { display: flex; flex-direction: column; padding: 14px 16px 12px; background: #f7f7f7; } .market-tabs { display: flex; min-height: 34px; border-bottom: 1px solid #999; } .market-tabs button { min-width: 54px; padding: 4px 10px; border-width: 0 1px 0 0; background: #efefef; } .market-tabs button.active { background: #fff; border-top: 2px solid var(--workspace-accent); font-weight: 700; } .market-tabs button[draggable="true"] { cursor: grab; } .market-tabs button.dragging { opacity: .58; cursor: grabbing; } .expand-line { height: 34px; padding: 8px 8px 0; } .category-tree { flex: 1; overflow: auto; padding: 10px 14px; background: #fff; border: 1px solid #aaa; border-top: 0; } .tree-root { margin: 5px 0 2px; color: #168000; font-size: 16px; } .tree-root.second { margin-top: 15px; } .catalog-section > summary { margin: 5px 0 2px; color: #168000; font-size: 16px; cursor: default; user-select: none; } details > summary[data-tree-root] { display: flex; align-items: center; min-height: 24px; list-style: none; cursor: default; user-select: none; } details > summary[data-tree-root]::-webkit-details-marker { display: none; } .tree-disclosure { flex: 0 0 22px; width: 22px; text-align: center; } .tree-disclosure::before { content: "\25B6"; font-size: 10px; } details[open] > summary[data-tree-root] .tree-disclosure::before { content: "\25BC"; } .tree-root-label { flex: 1; min-width: 0; } summary[data-tree-root].tree-node-selected, .tree-item.tree-node-selected { background: #dcdcdc; outline: none; } summary[data-tree-root]:focus-visible { background: #dcdcdc; outline: none; } summary[data-tree-root][aria-disabled="true"] { color: #777; } .catalog-actions { display: grid; } .tree-item { width: 100%; padding: 3px 0 3px 29px; border: 0; background: transparent; color: #111; font: inherit; font-size: 15px; text-align: left; cursor: default; } .tree-item:hover, .tree-item:focus-visible { background: #dcdcdc; outline: none; } .tree-item.unavailable { color: #777; } .industry-workspace { display: grid; grid-template-rows: minmax(170px, 42%) minmax(0, 1fr); height: 100%; gap: 7px; } .industry-selector { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; } .industry-slots { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px; margin-bottom: 5px; } .industry-slots input { min-width: 0; } .industry-list { overflow: auto; border: 1px solid #aaa; background: #fff; } .industry-list button { display: block; width: 100%; padding: 2px 7px; border: 0; background: #fff; text-align: left; } .industry-list button.selected { background: #dcdcdc; } .industry-action-tree { min-height: 0; overflow: auto; border-top: 1px solid #aaa; padding-top: 4px; } .industry-action-tree summary { color: #168000; font-size: 15px; cursor: default; } .overseas-workspace { display: grid; grid-template-rows: minmax(92px, 20%) minmax(170px, 42%) minmax(0, 1fr); height: 100%; gap: 7px; } .overseas-panel { min-height: 0; } .overseas-panel h3 { margin: 0 0 4px; color: #168000; font-size: 14px; font-weight: 600; } .overseas-fixed-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); } .overseas-fixed-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: auto; border: 1px solid #aaa; background: #fff; } .overseas-fixed-list button { min-width: 0; padding: 2px 5px; border-width: 0 1px 1px 0; background: #fff; text-align: left; } .overseas-fixed-list button.selected { background: #dcdcdc; font-weight: 600; } .overseas-searches { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; gap: 7px; } .overseas-search-panel { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; } .overseas-search-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; } .overseas-search-line input { min-width: 0; } .overseas-selected, .overseas-note { min-height: 18px; padding: 2px 3px; color: var(--ui-text-muted); font-size: 11px; } .overseas-note.error { color: var(--ui-danger); } .overseas-results { min-height: 0; overflow: auto; border: 1px solid #aaa; background: #fff; } .overseas-results button { display: block; width: 100%; padding: 2px 5px; border: 0; background: #fff; text-align: left; } .overseas-results button.selected { background: #dcdcdc; } .overseas-action-panel { overflow: auto; border-top: 1px solid #aaa; padding-top: 4px; } .overseas-action-panel summary { color: #168000; font-size: 15px; cursor: default; } .overseas-workspace { display: grid; grid-template-rows: minmax(176px, .92fr) minmax(184px, 1fr) minmax(210px, 1.12fr); height: 100%; gap: 7px; } .overseas-group { display: grid; min-height: 0; padding: 6px; border: 1px solid #aaa; background: #f3f3f3; } .overseas-group h3 { margin: 0; padding: 0 3px; color: var(--ui-text); font-size: 14px; font-weight: 600; } .overseas-truncation { margin-left: 7px; color: var(--ui-warning); font-size: 11px; font-weight: 400; } .overseas-fixed-group { grid-template-rows: auto minmax(0, 1fr); } .overseas-fixed-body { display: grid; grid-template-columns: minmax(0, 1fr) 82px; min-height: 0; gap: 8px; padding-top: 5px; } .overseas-fixed-list { display: block; min-height: 0; overflow: auto; border: 1px solid #aaa; background: #fff; } .overseas-fixed-list button { display: block; width: 100%; min-height: 22px; padding: 2px 6px; border: 0; border-bottom: 1px solid #ddd; background: #fff; text-align: left; } .overseas-fixed-list button.selected, .overseas-results button.selected { background: #dcdcdc; font-weight: 600; } .overseas-period-actions { display: grid; grid-auto-rows: 27px; align-content: start; gap: 6px; } .overseas-period-actions button { min-width: 0; } .overseas-search-group { grid-template-rows: auto auto minmax(0, 1fr); gap: 5px; } .overseas-search-line { display: grid; grid-template-columns: minmax(0, 1fr) 93px; gap: 5px; } .overseas-search-line input, .overseas-search-line button { min-width: 0; height: 27px; } .overseas-result-area { display: grid; grid-template-columns: minmax(0, 1fr) 82px; min-height: 0; gap: 8px; } .overseas-result-area > button[data-overseas-action-id] { align-self: start; min-height: 27px; } .overseas-result-area > .overseas-period-actions { grid-column: 2; grid-row: 1; } .overseas-results { min-height: 0; overflow: auto; border: 1px solid #aaa; background: #fff; } .overseas-results button { display: block; width: 100%; min-height: 22px; padding: 2px 6px; border: 0; border-bottom: 1px solid #ddd; background: #fff; text-align: left; } .comparison-workspace { display: grid; grid-template-rows: minmax(110px, 22%) minmax(70px, 16%) minmax(150px, 1fr) auto; height: 100%; gap: 6px; } .comparison-searches { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; gap: 6px; } .comparison-search-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; } .comparison-search-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; } .comparison-search-warning { color: var(--ui-warning); font-size: 11px; font-weight: 600; padding: 3px 1px 0; } .comparison-results, .comparison-saved { min-height: 0; overflow: auto; border: 1px solid #aaa; background: #fff; } .comparison-results button, .comparison-saved button { display: block; width: 100%; padding: 2px 5px; border: 0; background: #fff; text-align: left; } .comparison-results button:hover, .comparison-results button.selected, .comparison-saved button.selected { background: #dcdcdc; } .comparison-fixed { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; } .comparison-fixed-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: auto; border: 1px solid #aaa; } .comparison-fixed-list button { padding: 2px 4px; text-align: left; } .comparison-fixed-list button.selected { background: #dcdcdc; font-weight: 600; } .comparison-pair-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-height: 0; gap: 4px; } .comparison-draft { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto; gap: 4px; } .comparison-draft input { min-width: 0; } .comparison-saved-tools { display: flex; gap: 4px; justify-content: flex-end; } .comparison-import-status { min-height: 18px; color: var(--ui-text-muted); font-size: 11px; } .comparison-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .theme-workspace { display: grid; grid-template-rows: auto minmax(72px, .8fr) auto auto minmax(72px, 1fr); height: 100%; gap: 7px; } .theme-search-line { display: grid; grid-template-columns: minmax(120px, 2.1fr) repeat(4, minmax(64px, 1fr)); gap: 5px; } .theme-search-line #theme-search { min-width: 0; } .theme-results-panel, .theme-preview-panel { display: grid; min-height: 0; overflow: hidden; border: 1px solid #aaa; background: #fff; } .theme-results-panel { grid-template-rows: auto minmax(0, 1fr); } .theme-column-title { padding: 4px 6px; border-bottom: 1px solid #aaa; background: #eee; text-align: center; } .theme-search-truncation { margin-left: 8px; color: var(--ui-warning); font-size: 11px; font-weight: 600; } .theme-results { min-height: 0; overflow: auto; } .theme-results button { display: block; width: 100%; padding: 3px 6px; border: 0; background: #fff; text-align: left; } .theme-results button.selected { background: #dcdcdc; } .theme-preview-panel { grid-template-rows: auto minmax(0, 1fr); } .theme-preview-list { overflow: auto; margin: 0; padding-left: 28px; } .theme-sort-controls { display: flex; align-items: center; gap: 10px; margin: 0; padding: 3px 7px; } .theme-sort-controls legend { padding: 0 3px; } .theme-sort-controls label { white-space: nowrap; } .theme-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .expert-workspace, .halt-workspace { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; gap: 7px; } .expert-search-line { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: 5px; } .expert-body { display: grid; grid-template-columns: minmax(150px, 40%) minmax(0, 1fr); min-height: 0; gap: 7px; } .expert-results, .expert-preview, .halt-results { min-height: 0; overflow: auto; border: 1px solid #aaa; background: #fff; } .expert-results button, .halt-results button { display: block; width: 100%; padding: 3px 6px; border: 0; background: #fff; text-align: left; } .expert-results button.selected, .halt-results button.selected { background: #dcdcdc; } .expert-preview { padding: 6px; } .expert-preview ol { margin: 5px 0 0; padding-left: 28px; } .expert-actions, .halt-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .halt-search-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px; } .operator-catalog-backdrop { position: fixed; inset: 0; z-index: 24; display: grid; place-items: center; background: rgba(0, 0, 0, .36); } .operator-catalog-backdrop[hidden] { display: none; } .operator-catalog-dialog { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); width: min(1160px, calc(100vw - 70px)); height: min(820px, calc(100vh - 60px)); overflow: hidden; border: 1px solid #555; background: #efefef; box-shadow: 0 12px 42px rgba(0, 0, 0, .38); } .operator-catalog-dialog > header { display: flex; align-items: center; min-height: 48px; padding: 7px 12px; border-bottom: 1px solid #888; background: #fff; } .operator-catalog-dialog > header h2 { flex: 1; margin: 0; font-size: 20px; } .operator-catalog-dialog > header button { width: 38px; height: 32px; font-size: 22px; } .operator-catalog-status { min-height: 34px; padding: 8px 12px; border-bottom: 1px solid var(--ui-border); color: var(--ui-text-muted); background: var(--ui-surface-subtle); } .operator-catalog-status.error { color: var(--ui-danger); background: var(--ui-danger-soft); font-weight: 600; } .operator-catalog-toolbar { display: grid; grid-template-columns: 94px 94px minmax(240px, 1fr) 120px 80px; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #aaa; } .operator-catalog-toolbar button.selected { color: #fff; background: #176b2d; font-weight: 700; } .operator-catalog-body { display: grid; grid-template-columns: minmax(280px, 34%) minmax(0, 1fr); min-height: 0; gap: 10px; padding: 10px 12px 12px; } .operator-catalog-body.editor-only { grid-template-columns: minmax(0, 1fr); } .operator-catalog-list-panel, .operator-catalog-editor { display: grid; min-height: 0; border: 1px solid #999; background: #fff; } .operator-catalog-list-panel { grid-template-rows: auto minmax(0, 1fr); } .operator-catalog-panel-header { display: flex; align-items: center; min-height: 40px; gap: 6px; padding: 6px 8px; border-bottom: 1px solid #bbb; background: #f3f3f3; } .operator-catalog-panel-header h3 { flex: 1; margin: 0; font-size: 15px; } .operator-catalog-editor-market { display: inline-flex; align-items: center; gap: 5px; color: var(--ui-text-muted); font-size: 12px; } .operator-catalog-editor-market[hidden] { display: none; } .operator-catalog-editor-market select { min-width: 72px; } .operator-catalog-code { color: var(--ui-text-muted); font-family: Consolas, monospace; } .operator-catalog-results, .operator-catalog-stock-results, .operator-catalog-draft-rows { min-height: 0; overflow: auto; } .operator-catalog-results button { display: grid; grid-template-columns: 84px minmax(0, 1fr); width: 100%; gap: 2px 8px; padding: 6px 8px; border: 0; border-bottom: 1px solid #ddd; background: #fff; text-align: left; } .operator-catalog-results button small { grid-column: 2; color: var(--ui-text-muted); } .operator-catalog-results button.selected { background: #dcebdc; } .operator-catalog-editor { grid-template-rows: auto auto auto minmax(92px, 20%) auto auto minmax(120px, 1fr) auto; gap: 7px; padding-bottom: 8px; } .operator-catalog-editor[hidden] { display: none; } .operator-catalog-name-field { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 0 9px; } .operator-catalog-name-field small { grid-column: 2 / 4; min-height: 16px; color: var(--ui-text-muted); } .operator-catalog-name-field small.available { color: var(--ui-success); font-weight: 600; } .operator-catalog-name-field small.duplicate, .operator-catalog-name-field small.indeterminate { color: var(--ui-danger); font-weight: 600; } .operator-catalog-stock-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 0 9px; } .operator-catalog-stock-results { margin: 0 9px; border: 1px solid #aaa; } .operator-catalog-stock-results button { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; padding: 4px 7px; border: 0; border-bottom: 1px solid #ddd; background: #fff; text-align: left; } .operator-catalog-stock-results button.selected { background: #dcebdc; } .operator-catalog-stock-results button:disabled { color: #999; } .operator-catalog-add-line { display: grid; grid-template-columns: auto 150px minmax(130px, auto); justify-content: end; align-items: center; gap: 6px; padding: 0 9px; } .operator-catalog-add-line [hidden] { display: none; } .operator-catalog-draft-header { display: flex; justify-content: space-between; gap: 8px; padding: 2px 9px; color: var(--ui-text-muted); } .operator-catalog-draft-header span { font-size: 11px; } .operator-catalog-draft-rows { margin: 0 9px; border: 1px solid #aaa; } .operator-catalog-draft-row { display: grid; grid-template-columns: 34px minmax(140px, 1fr) minmax(110px, auto) 36px 36px 58px; align-items: center; gap: 4px; min-height: 34px; padding: 3px 5px; border-bottom: 1px solid #ddd; } .operator-catalog-draft-row > span { text-align: center; } .operator-catalog-draft-row > small { color: var(--ui-text-muted); text-align: right; } .operator-catalog-draft-row > input { min-width: 90px; width: 100%; height: 27px; text-align: right; } .operator-catalog-draft-row[draggable="true"] { cursor: grab; } .operator-catalog-draft-row.selected { background: #dbeafe; outline: 1px solid #4f83cc; outline-offset: -1px; } .operator-catalog-draft-row:focus { outline: 2px solid #176b2d; outline-offset: -2px; } .operator-catalog-draft-row.dragging { opacity: .55; cursor: grabbing; } .operator-catalog-draft-row.drag-before { box-shadow: inset 0 3px #176b2d; } .operator-catalog-draft-row.drag-after { box-shadow: inset 0 -3px #176b2d; } .operator-catalog-editor-actions { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 7px; padding: 2px 9px 0; } .operator-catalog-editor-actions button:last-child { min-width: 92px; color: #fff; background: #176b2d; font-weight: 700; } .playlist-panel { display: grid; grid-template-rows: 66px minmax(84px, auto) minmax(0, 1fr) 76px 42px; min-width: 0; padding: 0 8px; border-left: 1px solid var(--workspace-border); background: #efefef; } .playlist-heading { display: flex; align-items: center; gap: 11px; margin: 0 -8px; padding: 8px 14px; border-bottom: 1px solid var(--workspace-border); background: #fff; } .playlist-heading-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 7px; background: #e6f1fb; color: var(--workspace-accent); font-size: 22px; } .playlist-heading h2 { margin: 1px 0 0; font-size: 19px; } .playlist-toolbar { display: flex; align-content: center; align-items: center; gap: 5px; overflow: auto; flex-wrap: wrap; padding: 6px 0; } .playlist-toolbar label { white-space: nowrap; } .playlist-toolbar button { height: 25px; padding: 2px 6px; white-space: nowrap; } .background-name { width: 76px; height: 25px; border: 1px solid #888; background: #fff; } .fade-control { margin-left: 2px; } #playout-fade-duration { width: 48px; height: 25px; } .playlist-grid { min-height: 0; border: 1px solid #888; background: #d5d5d5; overflow: auto; } .playlist-row { display: grid; grid-template-columns: 30px 40px 100px minmax(115px, 1.1fr) minmax(95px, .8fr) minmax(138px, 1.3fr) 52px; min-width: 600px; } .playlist-header { position: sticky; top: 0; z-index: 2; height: 29px; background: #efefef; border-bottom: 1px solid #999; } .playlist-header > div { display: flex; align-items: center; justify-content: center; border-right: 1px solid #aaa; } .playlist-data-row { min-height: 25px; background: #fff; border-bottom: 1px solid #ddd; } .playlist-data-row > div { padding: 3px 6px; border-right: 1px solid #ddd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .playlist-data-row .playlist-row-header { display: flex; align-items: center; justify-content: center; padding: 3px 2px; border-color: #999; background: linear-gradient(#f4f4f4, #d4d4d4); color: #222; user-select: none; touch-action: none; } .playlist-data-row .playlist-row-header[data-drag-enabled="true"] { cursor: grab; } .playlist-data-row .enabled-cell { text-align: center; } .playlist-data-row.on-air { background: #fdc8d2; } .playlist-data-row.selected, .playlist-data-row.on-air.selected { background: #dcdcdc; } .playlist-data-row:focus { outline: 1px dotted #333; outline-offset: -2px; } .playlist-data-row.dragging { opacity: .55; } .playlist-data-row.dragging .playlist-row-header { cursor: not-allowed; } .playlist-data-row.dragging.drag-allowed .playlist-row-header { cursor: move; } .playlist-data-row.drag-before { box-shadow: inset 0 3px #176b2d; } .playlist-data-row.drag-after { box-shadow: inset 0 -3px #176b2d; } .playout-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 7px; } .playout-actions button { height: 51px; padding: 2px 4px; background: #fff; font-size: 20px; font-weight: 700; white-space: nowrap; } .playout-actions button:disabled { color: #888; background: #f7f7f7; } .playout-actions .prepare { font-size: 21px; } .playout-actions .prepare.active { color: #fff; background: #1a7700; } .playout-status { border-top: 1px solid #bbb; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #666; text-overflow: ellipsis; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .workspace-region { scroll-behavior: auto; } } .dialog-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .25); } .dialog-backdrop[hidden] { display: none; } .legacy-dialog { position: absolute; left: 50%; top: 50%; width: 320px; padding: 24px; transform: translate(-50%, -50%); border: 1px solid #777; background: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, .3); text-align: center; } .legacy-dialog > strong { display: block; margin-bottom: 18px; } .legacy-dialog-actions { display: flex; justify-content: center; gap: 8px; margin-top: 24px; } .legacy-dialog button { min-width: 80px; padding: 6px 15px; } /* Unified operator theme: visual-only rules; geometry and native contracts stay intact. */ body { background: var(--ui-canvas); color: var(--ui-text); line-height: 1.35; letter-spacing: -.01em; text-rendering: optimizeLegibility; } * { scrollbar-color: var(--ui-scroll-thumb) transparent; scrollbar-width: auto; } *::-webkit-scrollbar { width: 12px; height: 12px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--ui-scroll-thumb); background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background-color: var(--ui-scroll-thumb-hover); } ::selection { background: var(--ui-selection); color: var(--ui-text); } button { border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); background: var(--ui-surface); background-image: none; box-shadow: var(--ui-shadow-sm); color: var(--ui-text); font-weight: 600; transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease; } button:not(:disabled):hover { border-color: var(--ui-border-strong); background: var(--ui-surface-hover); } button:not(:disabled):active { border-color: var(--ui-accent); background: var(--ui-accent-soft); } button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--ui-focus-contrast); outline-offset: 0; box-shadow: 0 0 0 4px var(--ui-accent); } button:disabled { border-color: var(--ui-disabled-border); background: var(--ui-disabled-surface); box-shadow: none; color: var(--ui-disabled-text); cursor: not-allowed; opacity: 1; } input:not([type="checkbox"]):not([type="radio"]), select { border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); background: var(--ui-surface); box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04); color: var(--ui-text); transition: border-color 120ms ease, box-shadow 120ms ease; } input:not([type="checkbox"]):not([type="radio"]):hover, select:hover { border-color: var(--ui-border-strong); } input:not([type="checkbox"]):not([type="radio"]):focus, select:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .13); } input[readonly] { background: var(--ui-surface-muted); color: var(--ui-text-muted); } input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-accent); } .operator-shell { background: var(--ui-canvas); } .workspace-region { border-right-color: var(--ui-border); background: var(--ui-canvas); } .workspace-navigation { border-right-color: var(--ui-border); background: var(--workspace-nav-surface); box-shadow: inset -1px 0 var(--ui-border); } .workspace-nav-header { border-bottom: 1px solid var(--ui-border); background: var(--workspace-nav-surface); } .workspace-nav-toggle, .workspace-nav-item { border: 0; background: transparent; box-shadow: none; color: var(--ui-nav-text); font-weight: 600; } .workspace-nav-toggle:hover, .workspace-nav-item:hover { background: var(--ui-surface-hover); color: var(--ui-text); } .workspace-nav-toggle:focus-visible, .workspace-nav-item:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; background: var(--ui-accent-soft); } .workspace-nav-item.workspace-current { background: var(--ui-accent-soft); color: var(--ui-accent-text); font-weight: 700; } .workspace-nav-item.workspace-current::before { top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--ui-accent); } .workspace-nav-toggle svg, .workspace-nav-item svg { stroke-width: 1.9; } .workspace-surface, .workspace-content, .left-panel, .catalog-panel { background: var(--ui-canvas); } .workspace-header { position: relative; border-bottom-color: var(--ui-border); background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); } .workspace-header::before { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: linear-gradient(90deg, #f26b38 0 13%, var(--ui-accent) 13% 52%, transparent 82%); content: ""; opacity: .72; pointer-events: none; } .brand { min-width: 0; gap: 10px; } .brand-wordmark-plate { display: grid; width: 142px; height: 35px; flex: 0 0 142px; place-items: center; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .08); } .brand-wordmark-fallback, .brand-wordmark { grid-area: 1 / 1; } .brand-wordmark-fallback { visibility: hidden; color: #172033; font-size: 16px; font-weight: 800; letter-spacing: -.045em; } .brand-wordmark-plate.wordmark-fallback-active .brand-wordmark-fallback { visibility: visible; } .brand-wordmark-plate.wordmark-fallback-active .brand-wordmark { display: none; } .brand-wordmark { display: block; width: 142px; max-width: none; height: auto; filter: none; pointer-events: none; user-select: none; } .brand-divider { width: 1px; height: 24px; flex: 0 0 1px; background: var(--ui-border-strong); } .brand-product { color: var(--ui-text); font-size: 13px; font-weight: 750; letter-spacing: .08em; line-height: 1; } .workspace-heading-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .workspace-heading { display: flex; min-width: 0; align-items: center; gap: 10px; } .workspace-heading-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 1px solid var(--ui-border); border-radius: 11px; background: var(--ui-accent-soft); box-shadow: none; color: var(--ui-accent); } .workspace-heading-copy { display: block; min-width: 0; } .workspace-heading h1 { margin-top: 0; color: var(--ui-text); font-size: 20px; font-weight: 760; letter-spacing: -.04em; } .playout-connection-summary { display: flex; align-items: center; gap: 11px; padding-left: 16px; border-left: 1px solid rgba(190, 202, 219, .8); } .connection-state { display: inline-flex; min-width: 86px; min-height: 30px; align-items: center; justify-content: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--ui-danger); border-radius: 999px; background: var(--ui-danger-soft); box-shadow: inset 0 1px rgba(255, 255, 255, .8); color: var(--ui-danger); font: 750 11px "Segoe UI", sans-serif; letter-spacing: .02em; text-align: center; white-space: nowrap; } .connection-state::before { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(201, 54, 79, .11); content: ""; } .connection-state.connected { border-color: var(--ui-success); background: var(--ui-success-soft); box-shadow: inset 0 1px rgba(255, 255, 255, .8); color: var(--ui-success); } .connection-state.connected::before { box-shadow: 0 0 0 3px rgba(22, 131, 74, .12); } .connection-state.outcome-unknown { border-color: var(--ui-warning); background: var(--ui-warning-soft); box-shadow: inset 0 1px rgba(255, 255, 255, .8); color: var(--ui-warning); } .connection-state.outcome-unknown::before { box-shadow: 0 0 0 3px rgba(169, 99, 0, .12); } .connection-state.dry-run:not(.outcome-unknown) { border-color: var(--ui-accent); background: var(--ui-accent-soft); box-shadow: inset 0 1px rgba(255, 255, 255, .8); color: var(--ui-accent-text); } .connection-state.dry-run:not(.outcome-unknown)::before { box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); } .search-line { min-height: 46px; } .search-line label { color: var(--ui-field-label); font-weight: 700; } .search-line input { height: 34px; padding: 4px 10px; border-color: var(--ui-border-strong); } .search-line button { display: inline-flex; height: 34px; align-items: center; justify-content: center; gap: 7px; border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-on-accent); } .search-line button:not(:disabled):hover { border-color: var(--ui-accent-hover); background: var(--ui-accent-hover); } .search-line button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .stock-results, .cut-list, .category-tree, .playlist-grid, .industry-list, .overseas-fixed-list, .overseas-results, .comparison-results, .comparison-saved, .comparison-fixed-list, .theme-results-panel, .theme-preview-panel, .expert-results, .expert-preview, .halt-results { border-color: var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); } .stock-results { margin-top: 3px; } .stock-results { height: 242px; } .stock-result, .category-tree button, .industry-list button, .overseas-fixed-list button, .overseas-results button, .comparison-results button, .comparison-saved button, .comparison-fixed-list button, .theme-results button, .expert-results button, .halt-results button, .named-playlist-definitions button, .manual-financial-list button, .operator-catalog-results button, .operator-catalog-stock-results button { min-height: 24px; border-radius: 0; box-shadow: none; } .stock-result { height: 24px; padding: 0 8px; color: var(--ui-text); font-size: 14px; line-height: 24px; } .stock-result:hover { background: var(--ui-surface-hover); } .stock-result.selected { background: var(--ui-field-label); color: var(--ui-on-accent); box-shadow: inset 3px 0 var(--ui-accent); } .manual-actions, .manual-list-actions { gap: 7px; } .manual-actions button, .manual-list-actions button { border-color: var(--ui-control-border); background: var(--ui-surface); color: var(--ui-field-label); } .manual-actions button:not(:disabled):hover, .manual-list-actions button:not(:disabled):hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); } .cut-list { overflow: auto; } .cut-row { min-height: 24px; border-bottom-color: var(--ui-divider-soft); background: var(--ui-surface); color: var(--ui-text); } .cut-row:hover { background: var(--ui-row-hover); } .cut-row .cut-number { border-right-color: var(--ui-divider-soft); color: var(--ui-accent); font-variant-numeric: tabular-nums; } .cut-row.selected { background: var(--ui-accent-soft); box-shadow: inset 3px 0 var(--ui-accent); } .cut-row:focus { outline: 2px solid var(--ui-accent); outline-offset: -2px; } .cut-row.separator { background: var(--ui-surface-subtle); } .playlist-grid.cut-drag-over { border-color: var(--ui-success); box-shadow: inset 0 0 0 3px rgba(22, 131, 74, .85), var(--ui-shadow-card); } .cut-drag-feedback { border-color: var(--ui-border-strong); border-radius: 999px; background: var(--ui-surface); box-shadow: 0 12px 32px rgba(15, 23, 42, .18); color: var(--ui-text-muted); } .cut-drag-feedback.allowed { border-color: var(--ui-success); color: var(--ui-success); } .cut-drag-feedback.allowed .cut-drag-feedback-icon { background: var(--ui-success); } .operator-status { color: var(--ui-danger); font-weight: 600; } .market-tabs { min-height: 38px; gap: 2px; padding: 3px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface-muted); } .market-tabs button { min-width: 54px; padding: 4px 10px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; box-shadow: none; color: var(--ui-text-muted); } .market-tabs button:not(:disabled):hover { background: var(--ui-surface-hover); } .market-tabs button.active { border: 0; background: var(--ui-surface); box-shadow: 0 1px 3px rgba(15, 23, 42, .14); color: var(--ui-accent-text); font-weight: 700; } .expand-line { color: var(--ui-text-muted); font-weight: 600; } .category-tree { margin-top: 0; border-top: 1px solid var(--ui-border); } .tree-root, .catalog-section > summary, .industry-action-tree summary, .overseas-action-panel summary { color: var(--ui-success); font-weight: 700; } summary[data-tree-root].tree-node-selected, .tree-item.tree-node-selected, .tree-item:hover, .industry-list button.selected, .overseas-fixed-list button.selected, .overseas-results button.selected, .comparison-results button:hover, .comparison-results button.selected, .comparison-saved button.selected, .comparison-fixed-list button.selected, .theme-results button.selected, .expert-results button.selected, .halt-results button.selected { background: var(--ui-accent-soft); color: var(--ui-text); } summary[data-tree-root]:focus-visible, .tree-item:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; background: var(--ui-accent-soft); } .overseas-group { border-color: var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface-subtle); box-shadow: var(--ui-shadow-sm); } .theme-column-title, .operator-catalog-panel-header, .manual-financial-list button.manual-financial-list-header { border-bottom-color: var(--ui-border); background: var(--ui-surface-muted); color: var(--ui-neutral-text); } .playlist-panel { padding: 0 8px; border-left-color: var(--ui-border); background: var(--ui-canvas); box-shadow: -4px 0 18px rgba(15, 23, 42, .035); } .playlist-heading { position: relative; margin: 0 -8px; padding: 8px 14px; border-bottom-color: var(--ui-border); background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); } .playlist-heading::before { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: linear-gradient(90deg, var(--ui-accent), #65a3ff 42%, transparent 88%); content: ""; opacity: .62; pointer-events: none; } .playlist-heading-icon { width: 38px; height: 38px; border: 1px solid var(--ui-border); border-radius: 11px; background: var(--ui-accent-soft); box-shadow: none; color: var(--ui-accent); } .playlist-heading-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .playlist-heading h2 { color: var(--ui-text); font-size: 19px; font-weight: 750; } .playlist-toolbar { gap: 5px; padding: 7px 0; overflow: auto; } .playlist-toolbar label { display: inline-flex; min-height: 25px; align-items: center; gap: 3px; padding: 1px 5px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-surface); color: var(--ui-neutral-text); font-size: 12px; font-weight: 600; } .playlist-toolbar button { height: 25px; border-radius: 6px; } .background-name { border-color: var(--ui-border-strong); border-radius: 6px; } .playlist-grid { border-color: var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-canvas); box-shadow: var(--ui-shadow-card); scroll-padding-top: 29px; } .stock-results, .cut-list, .category-tree, .playlist-grid { scrollbar-gutter: stable; } .playlist-header { border-bottom-color: var(--ui-border-strong); background: var(--ui-surface-muted); color: var(--ui-neutral-text); font-size: 12px; font-weight: 700; } .playlist-header > div { border-right-color: var(--ui-border); } .playlist-data-row { border-bottom-color: var(--ui-divider-soft); background: var(--ui-surface); } .playlist-data-row > div { border-right-color: var(--ui-divider-soft); } .playlist-data-row:not([aria-selected="true"]):not([data-active="true"]):not(.on-air):hover { background: var(--ui-row-hover); } .playlist-data-row .playlist-row-header { border-color: var(--ui-border); background: var(--ui-surface-muted); background-image: none; color: var(--ui-neutral-text); font-weight: 700; } .playlist-data-row.on-air { background: var(--ui-on-air); box-shadow: inset 4px 0 var(--ui-on-air-edge); } .playlist-data-row.selected { background: var(--ui-surface); box-shadow: none; } .playlist-data-row.on-air.selected { background: var(--ui-on-air); box-shadow: inset 4px 0 var(--ui-on-air-edge); } .playlist-data-row[data-active="true"]:not(.on-air) { background: var(--ui-warning-soft); box-shadow: inset 0 3px var(--ui-warning); } .playlist-data-row[aria-selected="true"]:not(.on-air) { background: var(--ui-accent-soft); box-shadow: inset 4px 0 var(--ui-accent); } .playlist-data-row[data-active="true"][aria-selected="true"]:not(.on-air) { background: var(--ui-warning-soft); box-shadow: inset 4px 0 var(--ui-accent), inset 0 3px var(--ui-warning); } .playlist-data-row.on-air[data-active="true"] { box-shadow: inset 4px 0 var(--ui-on-air-edge), inset 0 3px var(--ui-warning); } .playlist-data-row.on-air[aria-selected="true"] { box-shadow: inset 4px 0 var(--ui-on-air-edge), inset 0 0 0 2px var(--ui-accent); } .playlist-data-row.on-air[data-active="true"][aria-selected="true"] { box-shadow: inset 4px 0 var(--ui-on-air-edge), inset 0 3px var(--ui-warning), inset 0 0 0 2px var(--ui-accent); } .playlist-data-row.scene-unresolved .playlist-row-header { color: var(--ui-warning); } .playlist-data-row.scene-unresolved .playlist-row-header::after { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; margin-left: 2px; border-radius: 50%; background: var(--ui-warning); color: var(--ui-on-accent); font-size: 9px; line-height: 1; } .playlist-data-row.playout-current:not(.on-air):not([data-active="true"]) { box-shadow: inset 0 3px var(--ui-warning); } .playlist-data-row.drag-before { box-shadow: inset 0 3px var(--ui-success); } .playlist-data-row.drag-after { box-shadow: inset 0 -3px var(--ui-success); } .playout-actions { gap: 8px; } .playout-actions button { height: 51px; border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); font-size: 18px; font-weight: 750; letter-spacing: -.02em; } .playout-actions .take-in:not(:disabled) { border-color: var(--ui-success); background: var(--ui-success-soft); color: var(--ui-success); } .playout-actions .take-in:not(:disabled):hover { border-color: var(--ui-success); background: var(--ui-success-soft); } .playout-actions .next:not(:disabled) { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-text); } .playout-actions .next:not(:disabled):hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); } .playout-actions .take-out:not(:disabled) { border-color: var(--ui-danger); background: var(--ui-danger-soft); color: var(--ui-danger); } .playout-actions .take-out:not(:disabled):hover { border-color: var(--ui-danger); background: var(--ui-danger-soft); } .playout-actions button:disabled { border-color: var(--ui-disabled-border); background: var(--ui-disabled-surface); color: var(--ui-disabled-text); } .playout-actions .prepare.active { border-color: var(--ui-success); background: var(--ui-success); color: var(--ui-on-accent); } .playout-status { border-top-color: var(--ui-border); color: var(--ui-text-muted); font-size: 12px; } .named-playlist-backdrop, .named-playlist-confirmation-backdrop, .manual-financial-backdrop, .manual-list-backdrop, .operator-catalog-backdrop, .dialog-backdrop { background: var(--ui-overlay); backdrop-filter: blur(2px); } .named-playlist-dialog, .named-playlist-confirmation-dialog, .manual-financial-dialog, .manual-list-dialog, .operator-catalog-dialog, .legacy-dialog { overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-canvas); box-shadow: var(--ui-shadow-dialog); } .named-playlist-dialog > header, .manual-financial-dialog > header, .manual-list-dialog > header, .operator-catalog-dialog > header { border-bottom-color: var(--ui-border); background: var(--ui-surface); } .named-playlist-dialog > header button, .manual-financial-dialog > header button, .manual-list-dialog > header button, .operator-catalog-dialog > header button { border: 0; background: transparent; box-shadow: none; color: var(--ui-text-muted); } .named-playlist-dialog > header button:hover, .manual-financial-dialog > header button:hover, .manual-list-dialog > header button:hover, .operator-catalog-dialog > header button:hover { background: var(--ui-surface-muted); color: var(--ui-text); } .named-playlist-status, .operator-catalog-status { border-bottom-color: var(--ui-border); background: var(--ui-surface-subtle); color: var(--ui-text-muted); } .named-playlist-status.error, .operator-catalog-status.error, .manual-list-status.error, .manual-financial-warning { border-color: var(--ui-danger); background: var(--ui-danger-soft); color: var(--ui-danger); } .named-playlist-definitions, .named-playlist-create, .manual-financial-list, .manual-financial-editor, .manual-financial-stock-results, .manual-list-table-wrap, .manual-list-search-results, .manual-list-status, .operator-catalog-list-panel, .operator-catalog-editor, .operator-catalog-stock-results, .operator-catalog-draft-rows { border-color: var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); } .named-playlist-definitions button.selected, .manual-financial-list button.selected, .manual-financial-stock-results button.selected, .manual-list-search-results button.selected, .operator-catalog-results button.selected, .operator-catalog-stock-results button.selected, .operator-catalog-draft-row.selected { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-text); } .named-playlist-dialog > footer, .manual-dialog-footer, .operator-catalog-toolbar { border-color: var(--ui-border); background: var(--ui-surface-subtle); } .named-playlist-dialog > footer #named-playlist-confirm-button, .named-playlist-confirmation-dialog #named-playlist-confirmation-yes, .manual-financial-actions .manual-primary, .manual-list-actions-row .primary, .operator-catalog-editor-actions button:last-child { border-color: var(--ui-accent); background: var(--ui-accent); background-image: none; color: var(--ui-on-accent); font-weight: 700; } .operator-catalog-toolbar button.selected { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-on-accent); } .operator-catalog-code { color: var(--ui-text-muted); } .operator-catalog-draft-row { border-bottom-color: var(--ui-divider-soft); } .operator-catalog-draft-row:focus { outline-color: var(--ui-accent); outline-width: 2px; } .legacy-dialog { background: var(--ui-surface); } #playlist-delete-selected:not(:disabled), #playlist-delete-all:not(:disabled), #named-playlist-delete-button:not(:disabled) { border-color: var(--ui-danger); background: var(--ui-danger-soft); color: var(--ui-danger); } #playlist-delete-selected:not(:disabled):hover, #playlist-delete-all:not(:disabled):hover, #named-playlist-delete-button:not(:disabled):hover { border-color: var(--ui-danger); background: var(--ui-danger-soft); } .stock-result:focus-visible, .cut-row:focus-visible, .playlist-data-row:focus-visible, .tree-item:focus-visible, summary[data-tree-root]:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: -3px; } /* Sidebar catalog navigation and its native-backed operator settings surface. */ .workspace-nav-section-label { color: var(--ui-text-subtle); } .workspace-nav-footer { border-top-color: var(--ui-border); background: var(--workspace-nav-surface); } .workspace-navigation .market-tabs { display: flex; min-height: 0; flex: 0 0 auto; flex-direction: column; gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; } .workspace-navigation .market-tabs button { position: relative; display: flex; width: 100%; min-width: 44px; height: 46px; flex: 0 0 46px; align-items: center; justify-content: flex-start; gap: 13px; padding: 0 12px; overflow: hidden; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--ui-nav-text); font-weight: 600; text-align: left; white-space: nowrap; } .workspace-navigation .market-tabs button.active:not(.workspace-current) { background: transparent; box-shadow: none; color: var(--ui-nav-text); font-weight: 600; } .workspace-navigation .market-tabs button:not(:disabled):hover { background: var(--ui-surface-hover); color: var(--ui-text); } .workspace-navigation .market-tabs button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; background: var(--ui-accent-soft); } .workspace-navigation .market-tabs button.workspace-current, .workspace-navigation .market-tabs button.active.workspace-current { background: var(--ui-accent-soft); box-shadow: none; color: var(--ui-accent-text); font-weight: 700; } .workspace-navigation .market-tabs button.workspace-current::before { position: absolute; left: 0; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--ui-accent); content: ""; } .workspace-navigation .market-tabs button[draggable="true"] { cursor: grab; } .workspace-navigation .market-tabs button.dragging { opacity: .58; cursor: grabbing; } .nav-collapsed .workspace-navigation .market-tabs button { justify-content: center; padding: 0; } .settings-panel { overflow: auto; padding: 20px 24px 32px; background: var(--ui-canvas); scrollbar-gutter: stable; } .settings-message, .settings-restart-banner { display: flex; max-width: 920px; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface-subtle); color: var(--ui-field-label); font-size: 12px; } .settings-message.success { border-color: var(--ui-success); background: var(--ui-success-soft); color: var(--ui-success); } .settings-message.information { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-text); } .settings-message.warning { border-color: var(--ui-warning); background: var(--ui-warning-soft); color: var(--ui-warning); } .settings-message.error { border-color: var(--ui-danger); background: var(--ui-danger-soft); color: var(--ui-danger); } .settings-restart-banner { border-color: var(--ui-warning); background: var(--ui-warning-soft); color: var(--ui-warning); } .settings-restart-banner svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .settings-restart-banner strong { display: block; } .settings-grid { display: grid; max-width: 920px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .settings-appearance-card { align-self: start; } .settings-choice-list { display: grid; border-top: 1px solid var(--ui-border); } .settings-choice-row { display: grid; min-height: 46px; grid-template-columns: minmax(0, 1fr) minmax(156px, 210px); align-items: center; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--ui-divider-soft); } .settings-choice-row:last-child { border-bottom: 0; } .settings-choice-row strong { overflow: hidden; color: var(--ui-field-label); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .settings-choice-row select { width: 100%; min-width: 0; height: 32px; padding: 3px 28px 3px 9px; } .settings-card { padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); } .settings-card-wide { grid-column: 1 / -1; } .settings-card h3 { margin: 0; font-size: 14px; } .settings-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .settings-folder-kind { display: inline-flex; min-height: 18px; align-items: center; padding: 1px 5px; border-radius: 5px; background: var(--ui-surface-muted); color: var(--ui-text-muted); font-size: 10px; font-weight: 700; white-space: nowrap; } .settings-folder-card { padding-bottom: 0; } .settings-folder-list { margin: 0 -16px; border-top: 1px solid var(--ui-border); } .settings-folder-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ui-divider-soft); } .settings-folder-row:last-child { border-bottom: 0; } .settings-folder-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: var(--ui-accent-soft); color: var(--ui-accent); } .settings-folder-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .settings-folder-copy { min-width: 0; } .settings-folder-title-line { display: flex; align-items: center; gap: 8px; } .settings-folder-title-line h4 { margin: 0; font-size: 14px; } .settings-folder-value { display: flex; min-width: 0; align-items: center; gap: 8px; margin-top: 3px; } .settings-folder-value strong { max-width: min(100%, 500px); overflow: hidden; color: var(--ui-field-label); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .settings-status-badge { display: inline-flex; min-height: 18px; flex: 0 0 auto; align-items: center; gap: 5px; padding: 1px 6px; border-radius: 999px; background: var(--ui-surface-muted); color: var(--ui-text-muted); font-size: 11px; font-weight: 700; white-space: nowrap; } .settings-status-badge::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; } .settings-status-badge.valid { background: var(--ui-success-soft); color: var(--ui-success); } .settings-status-badge.invalid { background: var(--ui-danger-soft); color: var(--ui-danger); } .settings-folder-source { color: var(--ui-text-muted); font-size: 10px; white-space: nowrap; } .settings-folder-actions { display: flex; gap: 7px; } .settings-folder-actions button { min-width: 64px; min-height: 32px; padding: 5px 9px; border-radius: 8px; } .settings-folder-actions .settings-primary-action:not(:disabled) { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-text); font-weight: 700; } .settings-switch-row { position: relative; display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; } .settings-switch-row > span:first-child { min-width: 0; } .settings-switch-row strong { display: block; } .settings-switch-row strong { color: var(--ui-field-label); font-size: 13px; } .settings-switch-row input { position: absolute; right: 13px; width: 1px; height: 1px; opacity: 0; } .settings-switch { position: relative; width: 42px; height: 24px; flex: 0 0 42px; border: 1px solid var(--ui-control-border); border-radius: 999px; background: var(--ui-disabled-border); transition: background .15s ease, border-color .15s ease; } .settings-switch::after { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ui-on-accent); box-shadow: 0 1px 4px rgba(16, 24, 40, .25); content: ""; transition: transform .15s ease; } .settings-switch-row input:checked + .settings-switch { border-color: var(--ui-accent); background: var(--ui-accent); } .settings-switch-row input:checked + .settings-switch::after { transform: translateX(18px); } .settings-switch-row input:focus-visible + .settings-switch { outline: 2px solid var(--ui-accent); outline-offset: 3px; } .settings-switch-row input:disabled + .settings-switch { opacity: .55; } .settings-card dl { margin: 0; } .settings-diagnostics > div { display: grid; grid-template-columns: minmax(90px, .42fr) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--ui-divider-soft); } .settings-diagnostics > div:first-child { padding-top: 0; border-top: 0; } .settings-diagnostics > div:last-child { padding-bottom: 0; } .settings-card dt { color: var(--ui-field-label); font-weight: 700; } .settings-card dd { margin: 0; color: var(--ui-text-muted); } .settings-diagnostics dd[data-state="good"] { color: var(--ui-success); font-weight: 700; } .settings-diagnostics dd[data-state="warning"] { color: var(--ui-warning); font-weight: 700; } .settings-diagnostics dd[data-state="bad"] { color: var(--ui-danger); font-weight: 700; } /* Compact broadcast-console components. */ button { border-color: var(--ui-control-border); box-shadow: none; } button:not(:disabled):hover { border-color: var(--ui-border-strong); box-shadow: 0 1px 2px rgba(15, 23, 42, .07); } button:not(:disabled):active { box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08); } .workspace-nav-header { background: var(--workspace-nav-surface); background-image: none; } .workspace-nav-items, .workspace-navigation .market-tabs { gap: 2px; } .workspace-nav-item, .workspace-navigation .market-tabs button { gap: 11px; border-radius: 9px; } .workspace-nav-toggle svg, .workspace-nav-item svg, .workspace-navigation .market-tabs button svg { color: inherit; } .workspace-nav-item.workspace-current svg, .workspace-navigation .market-tabs button.workspace-current svg { color: var(--ui-accent); } .workspace-nav-section-label { color: var(--ui-text-muted); font-size: 11px; } .workspace-header, .playlist-heading { background: var(--ui-surface); background-image: none; box-shadow: 0 1px 0 rgba(15, 23, 42, .055); } .workspace-header::before, .playlist-heading::before { display: none; } .workspace-heading-copy, .playlist-heading > div { min-width: 0; } .workspace-heading h1, .playlist-heading h2 { margin: 0; color: var(--ui-text); font-size: 19px; font-weight: 750; letter-spacing: -.025em; } .search-line { width: min(100%, 660px); min-height: 48px; margin-bottom: 8px; padding: 6px 8px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); } .search-line button { box-shadow: 0 5px 13px rgba(37, 99, 235, .18); } .search-meta { grid-column: 2 / 4; min-height: 16px; overflow: hidden; color: var(--ui-text-muted); font-size: 12px; font-weight: 600; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .search-meta[hidden] { display: none; } .stock-result, .category-tree button, .industry-list button, .overseas-fixed-list button, .overseas-results button, .comparison-results button, .comparison-saved button, .comparison-fixed-list button, .theme-results button, .expert-results button, .halt-results button, .named-playlist-definitions button, .manual-financial-list button, .operator-catalog-results button, .operator-catalog-stock-results button { font-weight: 500; } .stock-result.selected { background: var(--ui-accent-soft); color: var(--ui-accent-text); box-shadow: inset 3px 0 var(--ui-accent); font-weight: 700; } .industry-list button.selected, .overseas-fixed-list button.selected, .overseas-results button.selected, .comparison-results button.selected, .comparison-saved button.selected, .comparison-fixed-list button.selected, .theme-results button.selected, .expert-results button.selected, .halt-results button.selected, .named-playlist-definitions button.selected, .manual-financial-list button.selected, .operator-catalog-results button.selected, .operator-catalog-stock-results button.selected { font-weight: 650; } .manual-actions button, .manual-list-actions button { border-color: var(--ui-control-border); background: var(--ui-surface); color: var(--ui-field-label); } .stock-results, .cut-list, .category-tree, .playlist-grid, .industry-list, .overseas-fixed-list, .overseas-results, .comparison-results, .comparison-saved, .comparison-fixed-list, .theme-results-panel, .theme-preview-panel, .expert-results, .expert-preview, .halt-results { border-radius: 8px; box-shadow: none; } .stock-results, .cut-list { position: relative; } .stock-results:empty[data-empty-label]::after, .cut-list:empty[data-empty-label]::after { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; color: var(--ui-text-subtle); content: attr(data-empty-label); font-size: 12px; font-weight: 600; text-align: center; pointer-events: none; } .cut-row:nth-child(even):not(.separator):not(.selected) { background: var(--ui-row-alternate); } .playlist-row, .cut-row .cut-number, .playout-status { font-variant-numeric: tabular-nums; } .playlist-heading-count { display: inline-flex; min-height: 28px; margin-left: 0; align-items: center; gap: 7px; padding: 4px 9px; border: 1px solid var(--ui-accent); border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: 11px; font-weight: 700; white-space: nowrap; } .playlist-heading-count::before { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--ui-accent); content: ""; } .playlist-state-legend { display: inline-flex; min-width: 0; margin-left: auto; align-items: center; gap: 9px; color: var(--ui-text-muted); font-size: 11px; font-weight: 650; white-space: nowrap; } .playlist-state-legend span { display: inline-flex; align-items: center; gap: 4px; } .playlist-state-legend i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; } .playlist-state-legend .legend-selected { color: var(--ui-accent); } .playlist-state-legend .legend-next { color: var(--ui-warning); } .playlist-state-legend .legend-on-air { color: var(--ui-danger); } .playlist-toolbar { flex-wrap: wrap; margin: 8px 0; padding: 6px; border: 1px solid var(--ui-border); border-radius: 11px; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); overflow: hidden; } .playlist-toolbar-group { display: inline-flex; min-width: 0; min-height: 31px; align-items: center; gap: 3px; padding-right: 7px; border-right: 1px solid var(--ui-border); } .playlist-toolbar-background { flex: 1 1 210px; } .playlist-toolbar-db { flex: 0 0 auto; } .playlist-toolbar-danger { margin-left: auto; padding-right: 0; border-right: 0; } .playlist-toolbar label { min-height: 27px; padding: 2px 7px; border-color: transparent; border-radius: 8px; background: transparent; } .playlist-toolbar label:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-text); } .playlist-toolbar button { height: 27px; padding-inline: 8px; border-radius: 8px; } #playlist-move-up, #playlist-move-down { width: 28px; min-width: 28px; padding: 0; border-color: transparent; background: transparent; box-shadow: none; font-size: 14px; } #playlist-move-up:not(:disabled):hover, #playlist-move-down:not(:disabled):hover { border-color: var(--ui-control-border); background: var(--ui-surface-muted); } #db-save-button:not(:disabled), #db-load-button:not(:disabled) { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-text); } .playlist-toolbar-danger button:not(:disabled) { border-color: var(--ui-danger); background: var(--ui-danger-soft); color: var(--ui-danger); } .background-name { min-width: 64px; flex: 1 1 76px; background: var(--ui-surface-subtle); } .playlist-grid { background: var(--ui-canvas); } .playlist-header { border-bottom-color: var(--ui-border-strong); background: var(--ui-surface-muted); } .playlist-data-row > div { border-right-color: var(--ui-divider-soft); } .playlist-data-row:nth-child(even):not(.on-air):not([aria-selected="true"]):not([data-active="true"]):not(.playout-current) { background: var(--ui-row-alternate); } .playlist-data-row:not(.on-air):not([aria-selected="true"]):not([data-active="true"]):hover { background: var(--ui-row-hover); } .playlist-rows { min-height: calc(100% - 29px); background: var(--ui-surface-subtle); } .playlist-rows:empty { display: grid; place-items: center; } .playlist-rows:empty::after { max-width: 260px; padding: 16px; color: var(--ui-text-subtle); content: "컷을 끌어 놓거나 더블클릭하세요"; font-size: 12px; line-height: 1.55; text-align: center; } .playout-actions button { border-radius: 12px; } .playout-actions .take-in:not(:disabled) { border-color: var(--ui-success); background: var(--ui-success); box-shadow: 0 6px 16px rgba(20, 122, 70, .18); color: var(--ui-on-accent); } .playout-actions .take-in:not(:disabled):hover { border-color: var(--ui-success); background: var(--ui-success); } .playout-actions .next:not(:disabled) { border-color: var(--ui-accent); background: var(--ui-accent); box-shadow: 0 6px 16px rgba(37, 99, 235, .18); color: var(--ui-on-accent); } .playout-actions .next:not(:disabled):hover { border-color: var(--ui-accent-hover); background: var(--ui-accent-hover); } .playout-actions .take-out:not(:disabled) { border-color: var(--ui-danger); background: var(--ui-surface); color: var(--ui-danger); } .playout-actions .take-out:not(:disabled):hover { border-color: var(--ui-danger); background: var(--ui-danger-soft); } .playout-status { justify-content: flex-start; gap: 8px; padding: 0 12px; background: var(--ui-surface-muted); color: var(--ui-neutral-text); font-weight: 650; } .playout-status::before { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--ui-disabled-text); content: ""; } .playout-status[data-state="prepared"] { background: var(--ui-warning-soft); color: var(--ui-warning); } .playout-status[data-state="prepared"]::before { background: var(--ui-warning); } .playout-status[data-state="program"] { background: var(--ui-danger-soft); color: var(--ui-danger); } .playout-status[data-state="program"]::before { background: var(--ui-danger); } .playout-status[data-state="busy"] { background: var(--ui-accent-soft); color: var(--ui-accent-text); } .playout-status[data-state="busy"]::before { background: var(--ui-accent); } .playout-status[data-state="error"] { background: var(--ui-danger-soft); color: var(--ui-danger); } .playout-status[data-state="error"]::before { background: var(--ui-danger); } .playout-status[data-state="outcome-unknown"] { border-top-color: var(--ui-warning); background: var(--ui-warning-soft); color: var(--ui-warning); font-weight: 750; } .playout-status[data-state="outcome-unknown"]::before { background: var(--ui-warning); box-shadow: 0 0 0 4px rgba(169, 99, 0, .13); } .operator-status { color: var(--ui-text-muted); font-weight: 600; } .named-playlist-backdrop, .named-playlist-confirmation-backdrop, .manual-financial-backdrop, .manual-list-backdrop, .operator-catalog-backdrop, .dialog-backdrop { background: var(--ui-overlay); backdrop-filter: blur(2px); } .named-playlist-dialog, .named-playlist-confirmation-dialog, .manual-financial-dialog, .manual-list-dialog, .operator-catalog-dialog, .legacy-dialog { background: var(--ui-surface); } .named-playlist-body, .manual-financial-workspace, .manual-list-workspace, .operator-catalog-body { background: var(--ui-surface-subtle); } .named-playlist-dialog > header button, .manual-financial-dialog > header button, .manual-list-dialog > header button, .operator-catalog-dialog > header button { width: 32px; height: 32px; border-radius: 999px; } .legacy-dialog { width: min(400px, calc(100vw - 40px)); padding: 28px; } #legacy-dialog-message { line-height: 1.6; } /* Theme surfaces shared by legacy-compatible lists and editors. */ .workspace-nav-header, .workspace-nav-footer, .manual-financial-reference, .named-playlist-create, .manual-financial-editor, .manual-list-table-wrap, .manual-list-search-results, .manual-list-status, .operator-catalog-list-panel, .operator-catalog-editor { border-color: var(--ui-border); background: var(--ui-surface); color: var(--ui-text); } .stock-result, .cut-row, .category-tree button, .industry-list button, .overseas-fixed-list button, .overseas-results button, .comparison-results button, .comparison-saved button, .comparison-fixed-list button, .theme-results button, .expert-results button, .halt-results button, .named-playlist-definitions button, .manual-financial-list button, .operator-catalog-results button, .operator-catalog-stock-results button { border-color: var(--ui-divider-soft); background-color: var(--ui-surface); color: var(--ui-text); } .manual-list-table th, .manual-list-table td, .operator-catalog-draft-row { border-color: var(--ui-divider-soft); color: var(--ui-text); } .workspace-navigation { box-shadow: inset -1px 0 var(--ui-border); } .workspace-nav-header { border-bottom-color: var(--ui-border); background-image: none; } .workspace-nav-footer { background: var(--workspace-nav-surface); } .settings-switch { border-color: var(--ui-control-border); background: var(--ui-disabled-border); } /* View modes affect graphic actions only. Dense stock, cut, playlist, and editor rows stay fixed. */ .visual-card-copy { display: contents; } .visual-card-meta { display: none; } .visual-card-title { min-width: 0; } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) .category-tree { background: var(--ui-surface-subtle); } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) :is( .catalog-section, .industry-action-tree, .comparison-actions > details) { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--ui-card-outline); border-radius: 12px; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) .industry-action-tree { overflow: auto; } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) .comparison-actions { display: block; } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) summary[data-tree-root] { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; min-height: 42px; margin: 0; padding: 8px 12px; align-items: center; border-bottom: 1px solid var(--ui-divider-soft); background: var(--ui-surface-muted); color: var(--ui-text); font-size: 14px; } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) summary[data-tree-root].tree-node-selected { background: var(--ui-accent-soft); box-shadow: inset 3px 0 var(--ui-accent); } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) summary[data-tree-root]:focus-visible { background: var(--ui-accent-soft); outline: 3px solid var(--ui-accent); outline-offset: -3px; } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) summary[data-tree-root][aria-disabled="true"] { color: var(--ui-text-subtle); } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) summary[data-tree-root][data-card-count]::after { min-width: 28px; padding: 3px 7px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-text-muted); content: attr(data-card-count) "개"; font-size: 11px; font-weight: 700; text-align: center; } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) [data-visual-card-list="true"] { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; align-content: start; gap: 10px; padding: 10px; } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) [data-visual-card-context="comparison-actions"] { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) button.visual-card { --visual-card-accent: var(--ui-accent); position: relative; display: grid; width: 100%; min-width: 0; min-height: 62px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy"; align-items: center; padding: 10px 12px; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); color: var(--ui-text); text-align: left; transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease; } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) button.visual-card:not(:disabled):hover { border-color: var(--ui-accent); box-shadow: 0 8px 22px rgba(15, 23, 42, .11); } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) button.visual-card:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: -3px; box-shadow: 0 8px 22px rgba(15, 23, 42, .11); } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) button.visual-card:is(.selected, .tree-node-selected, [aria-selected="true"]) { border-color: var(--ui-accent); background: var(--ui-accent-soft); box-shadow: inset 3px 0 var(--ui-accent), 0 5px 16px rgba(37, 99, 235, .12); } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) button.visual-card:is(.unavailable, :disabled) { border-color: var(--ui-disabled-border); background: var(--ui-surface-muted); box-shadow: none; color: var(--ui-text-subtle); } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) button.visual-card:is(.unavailable, :disabled):is( .selected, .tree-node-selected, [aria-selected="true"]) { border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) .visual-card-copy { display: grid; min-width: 0; grid-area: copy; gap: 3px; align-content: center; } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) .visual-card-title { display: -webkit-box; overflow: hidden; color: var(--ui-text); font-size: 15px; font-weight: 750; line-height: 1.32; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) .visual-card-meta { display: block; overflow: hidden; color: var(--ui-text-muted); font-size: 11px; font-weight: 550; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) [data-visual-card-context="expert-actions"] #uc6-expert-edit { grid-column: 1 / -1; justify-self: end; } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) .workspace-navigation :is(.workspace-nav-item.workspace-current, .market-tabs button.workspace-current) { box-shadow: inset 0 0 0 1px var(--ui-card-outline); } :is(body[data-view-mode="compact"]) :is( .catalog-section, .industry-action-tree, .comparison-actions, .tree-item, summary[data-tree-root]) { border-radius: 0; box-shadow: none; } @container operator-workspace (min-width: 520px) { :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) :is( [data-visual-card-context="fixed-actions"], [data-visual-card-context="industry-actions"], [data-visual-card-context="theme-actions"], [data-visual-card-context="halt-actions"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container operator-workspace (min-width: 820px) { :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) :is( [data-visual-card-context="fixed-actions"], [data-visual-card-context="industry-actions"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container operator-workspace (max-width: 759px) { body[data-view-mode="automatic"] :is( .catalog-section, .industry-action-tree, .comparison-actions > details) { margin-bottom: 0; overflow: visible; border: 0; border-radius: 0; box-shadow: none; } body[data-view-mode="automatic"] .comparison-actions { display: grid; } body[data-view-mode="automatic"] summary[data-tree-root] { display: flex; min-height: 24px; margin: 5px 0 2px; padding: 0; border-bottom: 0; background: transparent; } body[data-view-mode="automatic"] summary[data-tree-root][data-card-count]::after { display: none; } body[data-view-mode="automatic"] [data-visual-card-list="true"] { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 0; padding: 0; } body[data-view-mode="automatic"] button.visual-card { display: block; min-height: 24px; padding: 3px 6px 3px 29px; overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ui-text); line-height: 18px; text-overflow: ellipsis; white-space: nowrap; } body[data-view-mode="automatic"] .visual-card-copy { display: contents; } body[data-view-mode="automatic"] :is( .visual-card-meta) { display: none; } body[data-view-mode="automatic"] .visual-card-title { display: inline; font: inherit; } } /* End view-mode presentation. */ @media (max-width: 1720px) { .settings-folder-row { grid-template-columns: 38px minmax(0, 1fr); } .settings-folder-actions { grid-column: 2; } .settings-folder-value { flex-wrap: wrap; } } @container operator-workspace (max-width: 620px) { .workspace-header { gap: 14px; padding-inline: 14px; } .workspace-heading-icon { display: none; } } @container operator-workspace (max-width: 520px) { .brand-divider, .brand-product { display: none; } } @media (forced-colors: active) { * { scrollbar-color: auto; } .workspace-heading-icon, .playlist-heading-icon, .connection-state { border: 1px solid CanvasText; background: Canvas; box-shadow: none; color: CanvasText; } .brand-wordmark-plate { outline: 1px solid CanvasText; background: #fff; box-shadow: none; forced-color-adjust: none; } .workspace-header::before, .playlist-heading::before { background: Highlight; } button:focus-visible, input:focus-visible, select:focus-visible, .stock-result:focus-visible, .cut-row:focus-visible, .playlist-data-row:focus-visible, .tree-item:focus-visible, summary[data-tree-root]:focus-visible { outline: 3px solid Highlight; outline-offset: -3px; box-shadow: none; } .playlist-data-row[data-active="true"] { border-top: 3px solid Highlight; } .playlist-data-row[aria-selected="true"] { border-right: 3px solid Highlight; } .playlist-data-row.on-air { border-left: 4px double Highlight; } .settings-status-badge, .settings-folder-icon, .settings-message, .settings-restart-banner, .settings-switch { border: 1px solid CanvasText; background: Canvas; box-shadow: none; color: CanvasText; } .settings-switch-row input:checked + .settings-switch { background: Highlight; } .catalog-section, .industry-action-tree, .comparison-actions, .tree-item, summary[data-tree-root], .operator-catalog-results button, .operator-catalog-stock-results button { box-shadow: none !important; } button.visual-card { border-color: CanvasText !important; background: Canvas !important; box-shadow: none !important; color: CanvasText !important; } button.visual-card:is(.selected, .tree-node-selected, [aria-selected="true"]) { outline: 3px solid Highlight; outline-offset: -3px; } :is(body[data-view-mode="automatic"], body[data-view-mode="cards"]) summary[data-tree-root]:focus-visible { outline: 3px solid Highlight !important; outline-offset: -3px; } .settings-choice-row { border-bottom-color: CanvasText; } .workspace-splitter { background: Canvas; forced-color-adjust: none; } .workspace-splitter::before { background: CanvasText; } .workspace-splitter:hover::before, .workspace-splitter.dragging::before { background: Highlight; } .workspace-splitter:focus-visible { outline-color: Highlight; } } @media (prefers-reduced-motion: reduce) { button, input, select, .settings-switch, .settings-switch::after { transition: none !important; } body.busy::before { animation: none; background-size: 100% 100%; } }