/* EQUAI application workspace refresh: quiet surfaces, clear actions, no form hunting. */ #consoleView { --work-bg: #09090b; --work-surface: #151517; --work-raised: #1b1b1e; --work-input: #0d0d0f; --work-line: rgba(255,255,255,.095); --work-line-strong: rgba(255,255,255,.17); --work-text: #f4f3f0; --work-muted: #939399; --work-faint: #69696f; --work-blue: #8eafff; --work-radius: 17px; color: var(--work-text); background: var(--work-bg); } #consoleView .sidebar { border-color: var(--work-line); background: rgba(12,12,14,.96); backdrop-filter: blur(24px); } #consoleView .sidebar-brand { border-color: var(--work-line); } #consoleView .nav-group-label { color: var(--work-faint); letter-spacing: .12em; } #consoleView .nav button { color: #aaaab0; border-radius: 11px; } #consoleView .nav button:hover { color: #fff; border-color: var(--work-line); background: rgba(255,255,255,.045); } #consoleView .nav button.active { color: #fff; border-color: var(--work-line); background: rgba(255,255,255,.09); box-shadow: inset 2px 0 #fff; } #consoleView .nav button.active .nav-symbol { background: #fff; } #consoleView .identity { border-color: var(--work-line); border-radius: 14px; background: var(--work-surface); } #consoleView .content { max-width: none; padding: 78px clamp(22px,3.1vw,48px) 38px; } #consoleView .page-head { margin-bottom: 20px; } #consoleView .page-head h1 { margin-top: 5px; color: var(--work-text); font-size: clamp(27px,2.1vw,34px); font-weight: 650; letter-spacing: -.045em; } #consoleView .page-head .eyebrow { color: var(--work-faint); font: 600 10px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; } #consoleView .page-head p { color: var(--work-muted); font-size: 13px; line-height: 1.55; } #consoleView .page-back { margin-bottom: 12px; border-color: transparent; color: var(--work-muted); background: transparent; } #consoleView .page-back:hover { color: #fff; background: rgba(255,255,255,.06); } #consoleView .panel, #consoleView .metric, #consoleView .studio-compose, #consoleView .studio-result, #consoleView .creative-form, #consoleView .creative-results { border-color: var(--work-line); border-radius: var(--work-radius); background: var(--work-surface); box-shadow: 0 16px 50px rgba(0,0,0,.16); } #consoleView .metric { min-height: 126px; padding: 20px; } #consoleView .metric::before { display: none; } #consoleView .metric .label { color: var(--work-muted); font-family: var(--sans); letter-spacing: 0; text-transform: none; } #consoleView .metric .number { color: var(--work-text); font-family: var(--sans); font-size: 34px; font-weight: 600; } #consoleView .metric.primary-metric { border-color: var(--work-line-strong); background: linear-gradient(145deg,#202023,#151517 74%); } #consoleView .metric.primary-metric .number { color: var(--work-text); } #consoleView .credit-rail { background: rgba(255,255,255,.1); } #consoleView .credit-rail span { background: linear-gradient(90deg,#819fff,#c3d2ff); box-shadow: none; } #consoleView .panel-head { border-color: var(--work-line); } #consoleView .panel-head h2 { color: var(--work-text); font-size: 15px; font-weight: 620; } #consoleView .app-launch-card { border-color: var(--work-line); border-radius: 18px; background: linear-gradient(145deg,#18181b,#111113); transition: border-color .2s,transform .2s,background .2s; } #consoleView .app-launch-card:hover { border-color: var(--work-line-strong); background: #1d1d20; transform: translateY(-2px); } #consoleView .app-launch-copy small { color: var(--work-faint); letter-spacing: .11em; } #consoleView .app-launch-copy strong { color: var(--work-text); font-weight: 620; } #consoleView .app-launch-copy > span { color: var(--work-muted); line-height: 1.55; } #consoleView .app-launch-arrow { color: var(--work-muted); } #consoleView .btn.primary { border-color: #f4f3f0; background: #f4f3f0; color: #111113; animation: none; font-weight: 650; } #consoleView .btn.primary:hover { border-color: #fff; background: #fff; transform: translateY(-1px); } #consoleView .btn:not(.primary) { border-color: var(--work-line-strong); border-radius: 10px; background: rgba(255,255,255,.035); color: #dddde0; } #consoleView .btn:not(.primary):hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.075); color: #fff; } #consoleView .creative-page .creative-shell { grid-template-columns: minmax(350px,.88fr) minmax(0,1.12fr); gap: 20px; align-items: start; } #consoleView .creative-page .creative-form { border-radius: var(--work-radius); background: var(--work-surface); box-shadow: 0 16px 50px rgba(0,0,0,.12); } #consoleView .creative-page .creative-source { padding: 18px 19px; border-color: var(--work-line); } #consoleView .creative-page .creative-source > label { margin-bottom: 9px; color: var(--work-text); font-size: 13px; font-weight: 620; } #consoleView .creative-page .creative-source > label .muted { color: var(--work-faint); font-size: 10px; font-weight: 450; } #consoleView .creative-page .creative-source small { margin: 8px 0 0; color: var(--work-muted); font-size: 10px; line-height: 1.5; } #consoleView .creative-page .creative-source-preview { min-height: 150px; margin: 12px 0 8px; border: 1px solid var(--work-line); border-radius: 11px; background: linear-gradient(145deg,#171719,#101012); } #consoleView .creative-page .creative-source-preview p { color: var(--work-muted); font-size: 11px; } #consoleView .creative-page .creative-source-preview video { max-height: 230px; } #consoleView .creative-page .creative-controls { padding: 18px 19px; } #consoleView .creative-page .creative-controls > h2 { margin: 0 0 7px; color: var(--work-text); font-size: 13px; font-weight: 620; } #consoleView .creative-page .creative-controls > p, #consoleView .creative-page .creative-controls > small { color: var(--work-muted); font-size: 11px; line-height: 1.55; } #consoleView .creative-page .creative-controls .field { margin-bottom: 13px; } #consoleView .creative-page .creative-controls .field > small { color: var(--work-muted); font-size: 10px; line-height: 1.5; } #consoleView .creative-page .creative-controls input:not([type=file]), #consoleView .creative-page .creative-controls select, #consoleView .creative-page .creative-controls textarea { width: 100%; min-height: 40px; padding: 10px 11px; border-color: var(--work-line-strong); border-radius: 10px; background: var(--work-input); color: var(--work-text); font-size: 12px; } #consoleView .creative-page .creative-controls textarea { min-height: 94px; resize: vertical; } #consoleView .creative-page .creative-price { color: var(--work-muted); font-size: 10px; } #consoleView .creative-page .creative-controls > button[type=submit] { min-height: 44px; padding: 0 20px; border-radius: 11px; } #consoleView .creative-page .creative-results { border-radius: var(--work-radius); background: var(--work-surface); box-shadow: 0 16px 50px rgba(0,0,0,.12); } #consoleView .creative-page .creative-results .panel-head { min-height: 52px; padding: 0 16px; } #consoleView .creative-page .creative-results .panel-head h2 { font-size: 13px; font-weight: 620; } #consoleView .creative-page .creative-results > div[id$=Tasks] > .empty, #consoleView .creative-page .creative-results > div[id$=tasks] > .empty { margin: 12px; padding: 36px 18px; border: 1px dashed var(--work-line); border-radius: 11px; color: var(--work-muted); font-size: 11px; text-align: center; } #consoleView .creative-page .creative-role { padding: 12px; border: 1px solid var(--work-line); border-radius: 12px; background: rgba(255,255,255,.02); } #consoleView .creative-page .creative-role-head { margin-bottom: 8px; } #consoleView .creative-page .creative-role-head label { color: var(--work-text); font-size: 12px; font-weight: 600; } #consoleView .creative-page .creative-role-head span { color: var(--work-muted); font-size: 10px; } #consoleView .creative-page .creative-thumb { border-radius: 9px; background: #101012; } #consoleView .creative-page .creative-clear { min-height: 30px; margin-top: 7px; font-size: 10px; } #consoleView input:not([type=file]):not([type=radio]), #consoleView select, #consoleView textarea { border-color: var(--work-line-strong); border-radius: 11px; background-color: var(--work-input); color: var(--work-text); font-family: var(--sans); } #consoleView input:focus-visible, #consoleView select:focus-visible, #consoleView textarea:focus-visible, #consoleView button:focus-visible, #consoleView a:focus-visible { outline-color: var(--work-blue); } #consoleView .creative-page textarea { min-height: 100px; color: var(--work-text); line-height: 1.55; resize: vertical; } #consoleView .creative-page input[type=file] { color: var(--work-muted); } #consoleView .creative-page input::file-selector-button { border-color: var(--work-line-strong); border-radius: 9px; background: #242427; color: var(--work-text); } #consoleView .creative-page .creative-source { border-color: var(--work-line); } #consoleView .creative-page .creative-source > label { color: var(--work-text); font-size: 13px; font-weight: 620; } #consoleView .creative-page .muted, #consoleView .creative-page small.muted { color: var(--work-muted); } #consoleView .creative-page .creative-controls .field { margin: 0; } #consoleView .creative-page .creative-controls .field > label { display: block; margin-bottom: 7px; color: #d8d8dc; font-size: 12px; font-weight: 580; } #consoleView .creative-page .creative-controls .field > label .muted { margin-left: 4px; color: var(--work-faint); font-size: 11px; font-weight: 450; } #consoleView .creative-page .creative-controls select { min-height: 42px; padding: 9px 12px; } #consoleView .creative-results { margin-top: 0; } #consoleView .creative-results .panel-head { min-height: 58px; } /* Video studio: a larger canvas with the live task state kept beside it. */ #consoleView #page-studio .studio-page-head { margin-bottom: 14px; } #consoleView #page-studio .studio-balance { border-color: var(--work-line-strong); border-radius: 14px; background: var(--work-surface); box-shadow: none; } #consoleView #page-studio .studio-balance span, #consoleView #page-studio .studio-balance strong, #consoleView #page-studio .studio-balance small { color: var(--work-text); } #consoleView #page-studio .studio-shell { grid-template-columns: minmax(380px,.78fr) minmax(0,1.22fr); gap: 18px; align-items: stretch; } #consoleView #page-studio .studio-compose, #consoleView #page-studio .studio-result { border-radius: var(--work-radius); background: var(--work-surface); box-shadow: 0 16px 50px rgba(0,0,0,.16); } #consoleView #page-studio .studio-compose { overflow-y: auto; max-height: calc(100dvh - 176px); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; } #consoleView #page-studio .studio-section { padding: 16px 18px; border-color: var(--work-line); } #consoleView #page-studio .studio-section-head { margin-bottom: 9px; } #consoleView #page-studio .studio-section-head > span, #consoleView #page-studio .studio-section-head > label { color: var(--work-text); } #consoleView #page-studio .studio-section-head small { color: var(--work-muted); } #consoleView #page-studio .studio-mode-tabs { border-color: var(--work-line); background: var(--work-input); } #consoleView #page-studio .studio-mode-tabs button.active { color: #101012; border-color: #f4f3f0; background: #f4f3f0; } #consoleView #page-studio .quality-choice label > span { min-height: 72px; padding: 12px; border-color: var(--work-line-strong); border-radius: 11px; background: var(--work-input); } #consoleView #page-studio .quality-choice input:checked + span { border-color: rgba(142,175,255,.75); background: rgba(142,175,255,.1); box-shadow: inset 2px 0 var(--work-blue); } #consoleView #page-studio .quality-choice em { color: var(--work-muted); } #consoleView #page-studio .quality-choice small { color: var(--work-faint); } #consoleView #page-studio .prompt-section textarea { min-height: 116px; padding: 12px 13px; border-color: var(--work-line-strong); background: var(--work-input); } #consoleView #page-studio .studio-settings { padding: 14px 18px 6px; } #consoleView #page-studio .studio-settings select, #consoleView #page-studio .studio-settings input { min-height: 38px; border-color: var(--work-line-strong); background: var(--work-input); } #consoleView #page-studio .studio-submit { min-height: 48px; margin: 8px 18px 16px; border-radius: 12px; } #consoleView #page-studio .studio-result { position: sticky; top: 84px; max-height: calc(100dvh - 176px); } #consoleView #page-studio .result-stage { min-height: 0; aspect-ratio: 16/9; border-color: var(--work-line); } #consoleView #page-studio .result-stage::before { display: none; } #consoleView #page-studio .result-stage.is-generating::before { display: block; } #consoleView #page-studio .result-progress { padding: 15px 18px; background: #19191b; } #consoleView #page-studio .result-progress-rail, #consoleView #page-studio .task-mini-progress { background: rgba(255,255,255,.1); } #consoleView #page-studio .result-progress-rail i, #consoleView #page-studio .task-mini-progress i { background: linear-gradient(90deg,#7c9cff,#b6c9ff); } #consoleView #page-studio .studio-task-center { border-color: var(--work-line); background: #121214; } #consoleView #page-studio .task-center-head { border-color: var(--work-line); } #consoleView #page-studio .studio-task-card { border-color: var(--work-line); border-radius: 12px; background: rgba(255,255,255,.035); } #consoleView #page-studio .studio-task-card.selected { border-color: rgba(142,175,255,.58); background: rgba(142,175,255,.08); box-shadow: inset 2px 0 var(--work-blue); } /* Music editor: upload, choose, describe, create; all controls fit in the left pane. */ #consoleView #page-music .page-head { margin-bottom: 14px; } #consoleView #page-music .page-head p { margin-top: 7px; } #consoleView #page-music .creative-shell { height: calc(100dvh - 205px); min-height: 510px; grid-template-columns: minmax(520px,.9fr) minmax(420px,1.1fr); gap: 18px; align-items: stretch; } #consoleView #page-music #musicForm { height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr); overflow: hidden; align-self: start; } #consoleView #page-music .creative-source { padding: 16px 20px 13px; border-bottom: 1px solid var(--work-line); } #consoleView #page-music .creative-source > label { margin-bottom: 8px; } #consoleView #page-music .creative-page input[type=file] { padding: 0; } #consoleView #page-music .creative-source small { margin: 7px 0 0; font-size: 11px; line-height: 1.4; } #consoleView #page-music .creative-controls { min-height: 0; padding: 14px 20px 16px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto auto 92px 92px auto auto; align-content: space-between; gap: 9px 14px; overflow: hidden; } #consoleView #page-music .creative-controls .field:nth-child(1) { grid-column: 1; grid-row: 1; } #consoleView #page-music .creative-controls .field:nth-child(2) { grid-column: 2; grid-row: 1; } #consoleView #page-music .creative-controls .field:nth-child(3) { grid-column: 1 / -1; grid-row: 3; min-height: 0; display: flex; flex-direction: column; } #consoleView #page-music .creative-controls .field:nth-child(4) { grid-column: 1 / -1; grid-row: 4; min-height: 0; display: flex; flex-direction: column; } #consoleView #page-music .creative-controls textarea { width: 100%; min-height: 0; height: 100%; max-height: 120px; padding: 10px 12px; resize: none; font-size: 12px; } #consoleView #page-music #musicPrice { grid-column: 1; grid-row: 5; align-self: center; margin: 0; color: var(--work-muted); font-size: 11px; } #consoleView #page-music #musicError { grid-column: 1 / -1; grid-row: 6; min-height: 0; margin: 0; font-size: 11px; } #consoleView #page-music #musicError:empty { display: none; } #consoleView #page-music .creative-controls > button[type=submit] { grid-column: 2; grid-row: 5 / span 2; justify-self: end; align-self: center; min-width: 138px; min-height: 46px; padding-inline: 20px; border-radius: 12px; } #consoleView #page-music .creative-results { height: 100%; max-height: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; } #consoleView #page-music .creative-results .empty { min-height: 230px; display: grid; place-content: center; text-align: center; color: var(--work-muted); } #consoleView #page-music #musicTasks:has(> .empty) { min-height: calc(100% - 58px); display: grid; place-items: center; padding: 24px; } #consoleView #page-music #musicTasks > .empty::before { content: "♪"; width: 48px; height: 48px; margin: 0 auto 14px; display: grid; place-items: center; border: 1px solid var(--work-line-strong); border-radius: 50%; background: radial-gradient(circle at 35% 30%,rgba(142,175,255,.12),transparent 64%); color: #c0c0c5; font-size: 19px; } /* Application discovery: natural-language entry, plain categories, compact visual cards. */ #consoleView #page-apps { max-width: 1640px; margin: 0 auto; } #consoleView #page-apps .apps-discovery { max-width: 900px; margin: 0 auto 40px; text-align: center; } #consoleView #page-apps .apps-discovery-intro .eyebrow { display: none; } #consoleView #page-apps .apps-discovery-intro h1 { margin: 10px 0 0; color: var(--work-text); font-size: clamp(30px,3.2vw,46px); font-weight: 560; letter-spacing: -.055em; } #consoleView #page-apps .apps-discovery-intro p { margin: 8px 0 21px; color: var(--work-muted); font-size: 14px; } #consoleView #page-apps .apps-search { height: 58px; display: grid; grid-template-columns: 48px minmax(0,1fr) 44px; align-items: center; gap: 4px; padding: 5px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: linear-gradient(110deg,#1a1a1c,#101012); box-shadow: 0 10px 40px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035); text-align: left; transition:border-color .2s,box-shadow .2s; } #consoleView #page-apps .apps-search:focus-within { border-color: rgba(178,198,255,.62); box-shadow: 0 0 0 3px rgba(116,148,255,.1),0 10px 40px rgba(0,0,0,.24); } #consoleView #page-apps .apps-search-spark { display: grid; place-items: center; color: #efede8; font-size: 22px; } #consoleView #page-apps .apps-search input { width: 100%; min-width: 0; height: 44px; padding: 0 5px; border: 0; outline: 0; color: var(--work-text); background: transparent; font: 14px var(--sans); box-shadow: none; } #consoleView #page-apps .apps-search input::placeholder { color: #85858b; } #consoleView #page-apps .apps-search button { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #101114; background: #f1f0ed; cursor: pointer; transition:transform .2s,background .2s; } #consoleView #page-apps .apps-search button:hover { transform: translateX(2px); background: #fff; } #consoleView #page-apps .apps-search button:disabled { opacity: .55; cursor: wait; } #consoleView #page-apps .apps-search button span { font: 24px/1 var(--sans); } #consoleView #page-apps .apps-examples { min-height: 33px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; color: var(--work-faint); } #consoleView #page-apps .apps-examples button { padding: 2px 0; border: 0; color: var(--work-muted); background: transparent; font: 11px var(--sans); cursor: pointer; } #consoleView #page-apps .apps-examples button:hover { color: var(--work-text); } #consoleView #page-apps .apps-examples i { color: #515157; font-style: normal; } #consoleView #page-apps .app-recommend-status { min-height: 20px; margin: 8px auto 0; color: var(--work-muted); font-size: 12px; } #consoleView #page-apps .app-recommend-status:empty { display: none; } #consoleView #page-apps .app-recommend-status.is-error { color: #f0a6a1; } #consoleView #page-apps .app-recommend-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 12px; text-align: left; } #consoleView #page-apps .app-recommend-result { min-height: 86px; padding: 14px 15px; display: grid; gap: 5px; border: 1px solid var(--work-line); border-radius: 13px; color: var(--work-text); background: #171719; text-align: left; cursor: pointer; } #consoleView #page-apps .app-recommend-result:hover { border-color: var(--work-line-strong); background: #202023; } #consoleView #page-apps .app-recommend-result small { color: var(--work-faint); font-size: 10px; } #consoleView #page-apps .app-recommend-result strong { font-size: 14px; font-weight: 620; } #consoleView #page-apps .app-recommend-result span { color: var(--work-muted); font-size: 11px; line-height: 1.5; } #consoleView #page-apps .apps-browse-head { min-height: 46px; display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 0 0 22px; border-bottom: 1px solid var(--work-line); } #consoleView #page-apps .apps-categories { display: flex; align-items: center; gap: clamp(16px,3vw,38px); overflow-x: auto; } #consoleView #page-apps .apps-categories button { position: relative; min-height: 44px; padding: 0 1px; border: 0; color: var(--work-muted); background: transparent; font: 12px var(--sans); white-space: nowrap; cursor: pointer; } #consoleView #page-apps .apps-categories button[aria-selected="true"] { color: var(--work-text); } #consoleView #page-apps .apps-categories button[aria-selected="true"]::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #f1f0ed; content: ""; } #consoleView #page-apps .apps-favorites-toggle { padding: 7px 2px 7px 10px; border: 0; color: var(--work-muted); background: transparent; font: 12px var(--sans); cursor: pointer; white-space: nowrap; } #consoleView #page-apps .apps-favorites-toggle[aria-pressed="true"] { color: var(--work-text); } #consoleView #page-apps .apps-section-label { display: flex; align-items: center; gap: 10px; margin: 0 0 13px; } #consoleView #page-apps .apps-section-label h2 { margin: 0; color: var(--work-text); font-size: 17px; font-weight: 600; letter-spacing: -.025em; } #consoleView #page-apps .apps-count { padding: 0; border: 0; color: var(--work-faint); font: 11px var(--sans); } #consoleView #page-apps .app-launch-grid { max-width: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px 20px; } #consoleView #page-apps .app-launch-card { position: relative; min-width: 0; min-height: 0; display: block; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; } #consoleView #page-apps .app-launch-open { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr); align-content: start; gap: 0; padding: 0; border: 0; color: var(--work-text); background: transparent; box-shadow: none; text-align: left; cursor: pointer; } #consoleView #page-apps .app-launch-open:hover { border: 0; background: transparent; } #consoleView #page-apps .app-launch-open:focus-visible, #consoleView #page-apps .app-favorite:focus-visible { outline: 2px solid rgba(178,198,255,.9); outline-offset: 3px; border-radius: 8px; } #consoleView #page-apps .app-launch-art { position: relative; grid-column: 1 / -1; aspect-ratio: 2.25 / 1; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: #171719; } #consoleView #page-apps .app-launch-art::after { position: absolute; inset: 35% 0 0; background: linear-gradient(0deg,rgba(0,0,0,.64),transparent); content: ""; pointer-events: none; } #consoleView #page-apps .app-launch-art img { width: 100%; height: 100%; display: block; object-fit: cover; opacity: .84; transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .3s; } #consoleView #page-apps .app-launch-card:hover .app-launch-art img { transform: scale(1.035); opacity: 1; } #consoleView #page-apps .app-launch-type { position: absolute; z-index: 1; top: 12px; left: 13px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #fff; background: rgba(10,10,12,.38); font-size: 10px; backdrop-filter: blur(10px); } #consoleView #page-apps .app-launch-arrow { position: absolute; z-index: 1; right: 11px; bottom: 11px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: white; background: rgba(0,0,0,.3); font-size: 15px; backdrop-filter: blur(8px); } #consoleView #page-apps .app-launch-copy { grid-column: 1; gap: 6px; padding: 10px 2px 0; } #consoleView #page-apps .app-launch-copy strong { color: var(--work-text); font-size: 15px; font-weight: 620; letter-spacing: -.02em; } #consoleView #page-apps .app-launch-copy > span:not(.app-launch-tags) { color: var(--work-muted); font-size: 11px; line-height: 1.45; } #consoleView #page-apps .app-launch-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } #consoleView #page-apps .app-launch-tags i { padding: 3px 7px; border: 1px solid var(--work-line); border-radius: 999px; color: var(--work-faint); font-size: 9px; font-style: normal; } #consoleView #page-apps .app-favorite { position: absolute; z-index: 2; top: calc(100% - 74px); right: 7px; width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #e4e4e4; background: transparent; font: 18px/1 var(--sans); opacity: 0; cursor: pointer; transition:opacity .2s,background .2s,color .2s; } #consoleView #page-apps .app-launch-card:hover .app-favorite, #consoleView #page-apps .app-favorite:focus-visible, #consoleView #page-apps .app-favorite[aria-pressed="true"] { opacity: 1; } #consoleView #page-apps .app-favorite:hover { background: rgba(0,0,0,.45); } #consoleView #page-apps .app-favorite[aria-pressed="true"] { color: #fff; } #consoleView #page-apps .app-favorite[aria-pressed="true"]::first-letter { color: #a9bcff; } #consoleView #page-apps .app-launch-card.is-filtered-out { display: none; } #consoleView #page-apps .apps-empty-state { padding: 48px 18px; color: var(--work-muted); text-align: center; font-size: 13px; } #consoleView #page-apps .apps-empty-state:not(.hidden) { display: block; } @media (min-width: 1450px) { #consoleView #page-apps .app-launch-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px 24px; } } @media (max-width: 1000px) { #consoleView #page-apps .app-launch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } #consoleView #page-apps .app-recommend-results { grid-template-columns: 1fr; } } @media (max-width: 600px) { #consoleView #page-apps .apps-discovery { margin-bottom: 28px; } #consoleView #page-apps .apps-discovery-intro h1 { font-size: 30px; } #consoleView #page-apps .apps-discovery-intro p { font-size: 12px; } #consoleView #page-apps .apps-search { height: 53px; grid-template-columns: 36px minmax(0,1fr) 40px; } #consoleView #page-apps .apps-search button { width: 38px; height: 38px; } #consoleView #page-apps .apps-examples { gap: 7px; } #consoleView #page-apps .apps-examples button { font-size: 10px; } #consoleView #page-apps .apps-browse-head { gap: 6px; margin-bottom: 16px; } #consoleView #page-apps .apps-categories { gap: 18px; } #consoleView #page-apps .apps-categories button { font-size: 11px; } #consoleView #page-apps .app-launch-grid { grid-template-columns: 1fr; gap: 19px; } #consoleView #page-apps .app-launch-art { aspect-ratio: 2.2 / 1; } #consoleView #page-apps .app-favorite { opacity: .75; } } /* Account overview: balance and activity first, then a compact searchable task ledger. */ #consoleView #page-overview .overview-page-head { min-height: 70px; margin-bottom: 24px; align-items: center; } #consoleView #page-overview .overview-page-head .eyebrow { display: none; } #consoleView #page-overview .overview-page-head h1 { margin: 0; font-size: clamp(26px,2.4vw,36px); font-weight: 620; letter-spacing: -.045em; } #consoleView #page-overview .metric-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin-bottom: 34px; border-bottom: 1px solid var(--work-line); } #consoleView #page-overview .metric { position: relative; min-width: 0; min-height: 148px; display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto auto 1fr; align-content: start; align-items: end; gap: 0 9px; padding: 14px 24px 22px; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } #consoleView #page-overview .metric + .metric { border-left: 1px solid var(--work-line); } #consoleView #page-overview .metric:hover { transform: none; border-color: var(--work-line); } #consoleView #page-overview .metric.primary-metric { border-color: var(--work-line); background: transparent; } #consoleView #page-overview .metric .label { grid-column: 1/-1; margin: 0 0 13px; color: var(--work-muted); font-size: 12px; font-weight: 500; } #consoleView #page-overview .metric-info { margin-left: 5px; color: var(--work-faint); cursor: help; } #consoleView #page-overview .metric .number { grid-column: 1; grid-row: 2; margin: 0; color: var(--work-text); font-size: clamp(26px,2.5vw,38px); font-weight: 610; letter-spacing: -.045em; white-space: nowrap; } #consoleView #page-overview .metric-unit { grid-column: 2; grid-row: 2; padding-bottom: 3px; color: var(--work-muted); font-size: 12px; } #consoleView #page-overview .metric > small { grid-column: 1/-1; grid-row: 3; margin-top: 10px; color: var(--work-muted); font-size: 11px; } #consoleView #page-overview .credit-rail { grid-column: 1/-1; grid-row: 4; align-self: end; height: 2px; margin-top: 18px; opacity: .7; } #consoleView #page-overview .overview-record-switch { display: flex; gap: 30px; margin: 0 0 20px; padding: 0; border: 0; border-bottom: 1px solid var(--work-line); border-radius: 0; background: transparent; } #consoleView #page-overview .overview-record-switch button { position: relative; min-height: 46px; padding: 0 2px; border-radius: 0; color: var(--work-muted); background: transparent; font-size: 13px; } #consoleView #page-overview .overview-record-switch button.active { color: var(--work-text); background: transparent; box-shadow: none; } #consoleView #page-overview .overview-record-switch button.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #f2f1ee; content: ""; } #consoleView #page-overview .overview-call-panel, #consoleView #page-overview .overview-ledger-panel { margin-top: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } #consoleView #page-overview .overview-call-panel > .panel-head, #consoleView #page-overview .overview-ledger-panel > .panel-head { min-height: 40px; padding: 0 0 10px; border: 0; } #consoleView #page-overview .overview-call-panel .panel-head h2, #consoleView #page-overview .overview-ledger-panel .panel-head h2 { font-size: 16px; } #consoleView #page-overview .overview-call-copy small { font-size: 10px; } #consoleView #page-overview .call-result-count { margin-left: auto; color: var(--work-faint); font-size: 11px; } #consoleView #page-overview .call-retention-note { display: none; } #consoleView #page-overview .overview-call-toolbar { min-height: 48px; display: flex; align-items: center; gap: 10px; margin: 8px 0 15px; } #consoleView #page-overview .overview-search { width: min(280px,27vw); min-width: 190px; height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--work-line-strong); border-radius: 9px; background: var(--work-input); } #consoleView #page-overview .overview-search > span { color: var(--work-muted); font-size: 19px; line-height: 1; } #consoleView #page-overview .overview-search input { width: 100%; min-width: 0; height: 36px; padding: 0; border: 0; outline: 0; color: var(--work-text); background: transparent; box-shadow: none; font: 11px var(--sans); } #consoleView #page-overview .overview-search input::placeholder { color: var(--work-faint); } #consoleView #page-overview .overview-call-toolbar select { min-width: 140px; height: 40px; padding: 0 30px 0 12px; border: 1px solid var(--work-line-strong); border-radius: 9px; color: #d8d8dc; background-color: #141416; font: 11px var(--sans); } #consoleView #page-overview .overview-call-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; } #consoleView #page-overview .overview-call-actions button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 0; border: 0; color: var(--work-muted); background: transparent; font: 11px var(--sans); cursor: pointer; } #consoleView #page-overview .overview-call-actions button:hover { color: var(--work-text); } #consoleView #page-overview .overview-call-actions button span { font-size: 17px; } #consoleView #page-overview .overview-call-actions button:disabled { opacity: .45; cursor: wait; } #consoleView #page-overview #callTable { min-height: 100px; } #consoleView #page-overview #callTable .table-wrap, #consoleView #page-overview #ledgerTable .table-wrap { border: 0; border-radius: 0; background: transparent; } #consoleView #page-overview #callTable table, #consoleView #page-overview #ledgerTable table { width: 100%; table-layout: auto; border-collapse: collapse; } #consoleView #page-overview #callTable th, #consoleView #page-overview #ledgerTable th { padding: 12px 13px; border-bottom: 1px solid var(--work-line-strong); color: var(--work-muted); font-size: 11px; font-weight: 500; text-align: left; white-space: nowrap; } #consoleView #page-overview #callTable td, #consoleView #page-overview #ledgerTable td { padding: 14px 13px; border-bottom: 1px solid var(--work-line); color: #d4d4d8; font-size: 11px; vertical-align: middle; } #consoleView #page-overview #callTable tbody tr:hover, #consoleView #page-overview #ledgerTable tbody tr:hover { background: rgba(255,255,255,.025); } #consoleView #page-overview .call-task-cell { max-width: 300px; } #consoleView #page-overview .call-prompt { max-width: 290px; color: var(--work-text); font-size: 12px; } #consoleView #page-overview .call-task-meta { margin-top: 4px; color: var(--work-faint); font-size: 10px; } #consoleView #page-overview .call-task-meta code { color: var(--work-faint); } #consoleView #page-overview #callTable .status { min-height: 0; padding: 0; border: 0; border-radius: 0; color: #d9d9dd; background: transparent; font: 11px var(--sans); } #consoleView #page-overview #callTable .status::before { width: 7px; height: 7px; margin-right: 5px; background: #70c88b; box-shadow: none; } #consoleView #page-overview #callTable .status.running::before, #consoleView #page-overview #callTable .status.queued::before, #consoleView #page-overview #callTable .status.dispatching::before { background: #82adff; animation: none; } #consoleView #page-overview #callTable .status.failed::before { background: #e9b765; } #consoleView #page-overview .call-result-actions { display: flex; align-items: center; gap: 6px; } #consoleView #page-overview .call-result-actions .btn { min-height: 28px; padding: 5px 8px; border-radius: 7px; font-size: 10px; } #consoleView #page-overview .call-result-actions .btn.primary { border-color: transparent; color: #e5e5e8; background: rgba(255,255,255,.08); } #consoleView #page-overview .call-result-expiry { display: block; margin-top: 5px; color: var(--work-faint); font-size: 9px; white-space: nowrap; } #consoleView #page-overview .ledger-more-wrap { border-color: var(--work-line); } @media (max-width: 1050px) { #consoleView #page-overview .overview-call-toolbar { flex-wrap: wrap; } #consoleView #page-overview .overview-call-actions { margin-left: 0; } #consoleView #page-overview .metric { padding-inline: 16px; } } @media (max-width: 700px) { #consoleView #page-overview .metric-grid { grid-template-columns: 1fr 1fr; } #consoleView #page-overview .metric { min-height: 116px; padding: 14px 10px; } #consoleView #page-overview .metric:nth-child(3) { border-left: 0; } #consoleView #page-overview .metric:nth-child(n+3) { border-top: 1px solid var(--work-line); } #consoleView #page-overview .metric .number { font-size: 25px; } #consoleView #page-overview .overview-call-toolbar > * { flex: 1 1 42%; } #consoleView #page-overview .overview-search { width: auto; min-width: 0; } #consoleView #page-overview .overview-call-actions { flex: 1 1 100%; justify-content: flex-end; } #consoleView #page-overview #callTable .table-wrap, #consoleView #page-overview #ledgerTable .table-wrap { overflow-x: auto; } #consoleView #page-overview #callTable table { min-width: 760px; } } @media (max-width: 1280px) { #consoleView .creative-page .creative-shell { grid-template-columns: minmax(0,1fr); } #consoleView #page-studio .studio-shell { grid-template-columns: minmax(0,1fr); } #consoleView #page-studio .studio-result { position: static; max-height: none; } #consoleView #page-music .creative-shell { height: auto; min-height: 0; grid-template-columns: 1fr; } #consoleView #page-music #musicForm { height: auto; overflow: visible; } #consoleView #page-music .creative-controls { overflow: visible; } #consoleView #page-music .creative-results { height: auto; } } @media (max-height: 820px) and (min-width: 1121px) { #consoleView #page-music .creative-shell { height: calc(100dvh - 180px); min-height: 0; } #consoleView #page-music .creative-controls { grid-template-rows: auto auto 78px 78px auto auto; gap: 6px 12px; padding-block: 10px; } #consoleView #page-music .creative-source { padding-block: 12px 10px; } #consoleView #page-music .creative-controls textarea { max-height: 100px; } } @media (max-width: 600px) { #consoleView .content { padding: 20px 14px 28px; } #consoleView #page-music .creative-controls { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(100px,auto) minmax(110px,auto) auto auto; } #consoleView #page-music .creative-controls .field:nth-child(1), #consoleView #page-music .creative-controls .field:nth-child(2), #consoleView #page-music .creative-controls .field:nth-child(3), #consoleView #page-music .creative-controls .field:nth-child(4) { grid-column: 1; grid-row: auto; } #consoleView #page-music #musicPrice, #consoleView #page-music #musicError, #consoleView #page-music .creative-controls > button[type=submit] { grid-column: 1; grid-row: auto; } #consoleView #page-music .creative-controls > button[type=submit] { justify-self: stretch; } } @media (prefers-reduced-motion: reduce) { #consoleView *, #consoleView *::before, #consoleView *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Video creator, tuned to a focused studio: compact controls, large canvas, recent work carousel. */ #consoleView #page-studio .studio-page-head { min-height: 76px; margin-bottom: 14px; } #consoleView #page-studio .studio-page-head h1 { margin: 0; font-size: clamp(28px,2.2vw,36px); letter-spacing: -.045em; } #consoleView #page-studio .studio-page-head .eyebrow { display: none; } #consoleView #page-studio .studio-page-head p { margin-top: 4px; font-size: 14px; } #consoleView #page-studio .studio-page-head .page-back { margin: 0 0 4px -8px; padding: 3px 8px; font-size: 11px; } #consoleView #page-studio .studio-balance { min-width: 154px; padding: 10px 14px; display: grid; grid-template-columns: auto 1fr auto; align-items: end; column-gap: 6px; } #consoleView #page-studio .studio-balance span { grid-column: 1 / -1; margin-bottom: 2px; color: var(--work-faint); font: 11px var(--sans); letter-spacing: 0; text-transform: none; } #consoleView #page-studio .studio-balance strong { font-size: 23px; font-weight: 560; } #consoleView #page-studio .studio-balance small { padding-bottom: 3px; color: var(--work-muted); } #consoleView #page-studio .studio-shell { height: calc(100dvh - 216px); min-height: 620px; grid-template-columns: minmax(350px,.37fr) minmax(0,.63fr); gap: 20px; align-items: stretch; } #consoleView #page-studio .studio-compose { max-height: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.13) transparent; } #consoleView #page-studio .studio-compose form { min-height: 100%; grid-template-rows: auto auto 1fr auto auto auto auto; align-content: start; } #consoleView #page-studio .studio-section { padding: 13px 16px; } #consoleView #page-studio .studio-section-head { align-items: baseline; margin-bottom: 8px; } #consoleView #page-studio .studio-section-head > span, #consoleView #page-studio .studio-section-head > label { font-size: 12px; } #consoleView #page-studio .studio-section-head small { font-size: 10px; } #consoleView #page-studio .studio-mode-tabs { gap: 0; padding: 0; border: 0; border-bottom: 1px solid var(--work-line); border-radius: 0; background: transparent; } #consoleView #page-studio .studio-mode-tabs button { min-height: 38px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--work-muted); font-size: 12px; } #consoleView #page-studio .studio-mode-tabs button.active { border-color: #f4f3f0; background: transparent; color: var(--work-text); box-shadow: none; } #consoleView #page-studio .studio-quality-section { padding-block: 10px; } #consoleView #page-studio .quality-choice { gap: 7px; } #consoleView #page-studio .quality-choice label > span { min-height: 52px; padding: 8px 10px; grid-template-columns: 1fr auto; align-items: center; border-radius: 10px; } #consoleView #page-studio .quality-choice b { font-size: 13px; } #consoleView #page-studio .quality-choice em { font-size: 10px; } #consoleView #page-studio .quality-choice small { display: none; } #consoleView #page-studio .prompt-section { min-height: 0; display: flex; flex-direction: column; } #consoleView #page-studio .prompt-section textarea { min-height: 100px; flex: 1; padding: 11px 12px; font-size: 12px; } #consoleView #page-studio .studio-settings { padding: 12px 16px 6px; display: grid; grid-template-columns: minmax(88px,.9fr) minmax(96px,1fr) minmax(150px,1.45fr); align-items: center; gap: 8px; } #consoleView #page-studio .studio-model-chip, #consoleView #page-studio .studio-tool-select, #consoleView #page-studio .studio-tool-quality { position: relative; min-width: 0; height: 40px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--work-line); border-radius: 9px; background: rgba(255,255,255,.025); color: #dedee1; } #consoleView #page-studio .studio-model-chip { font-size: 11px; } #consoleView #page-studio .studio-model-chip i, #consoleView #page-studio .studio-tool-quality > i { color: var(--work-muted); font-size: 12px; font-style: normal; } #consoleView #page-studio .studio-tool-select { padding: 0 5px; } #consoleView #page-studio .studio-tool-select svg, #consoleView #page-studio .studio-model-chip svg, #consoleView #page-studio .studio-tool-quality > svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: #bfc0c5; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #consoleView #page-studio .studio-tool-select select { width: auto; min-width: 0; height: 100%; margin: 0; padding: 0 12px 0 0; border: 0; border-radius: 0; background-color: transparent; color: var(--work-text); font: 10px var(--sans); appearance: none; } #consoleView #page-studio .studio-tool-select::after { content: "⌄"; position: absolute; right: 5px; color: var(--work-muted); font-size: 11px; pointer-events: none; } #consoleView #page-studio .studio-tool-quality { justify-content: flex-start; padding: 0 5px; gap: 4px; } #consoleView #page-studio .studio-tool-quality > svg { width: 19px; } #consoleView #page-studio .studio-tool-quality > i { margin-left: auto; } #consoleView #page-studio .studio-tool-quality .quality-choice { min-width: 0; flex: 1; display: flex; gap: 2px; } #consoleView #page-studio .studio-tool-quality .quality-choice label { flex: 1; min-width: 0; } #consoleView #page-studio .studio-tool-quality .quality-choice label > span { min-height: 30px; padding: 0 5px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: transparent; white-space: nowrap; } #consoleView #page-studio .studio-tool-quality .quality-choice b { color: var(--work-muted); font-size: 10px; font-weight: 560; white-space: nowrap; } #consoleView #page-studio .studio-tool-quality .quality-choice input:checked + span { border-color: var(--work-line-strong); background: rgba(255,255,255,.1); box-shadow: none; } #consoleView #page-studio .studio-tool-quality .quality-choice input:checked + span b { color: var(--work-text); } #consoleView #page-studio .studio-tool-quality .quality-choice input:focus-visible + span { outline: 1px solid var(--work-blue); outline-offset: 1px; } #consoleView #page-studio .studio-advanced { margin: 8px 16px 0; border: 1px solid var(--work-line); border-radius: 10px; background: rgba(255,255,255,.025); } #consoleView #page-studio .studio-advanced summary { min-height: 37px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; color: #dedee1; font-size: 11px; cursor: pointer; list-style: none; } #consoleView #page-studio .studio-advanced summary::-webkit-details-marker { display: none; } #consoleView #page-studio .studio-advanced summary::after { content: "+"; color: var(--work-muted); font-size: 17px; } #consoleView #page-studio .studio-advanced[open] summary::after { content: "−"; } #consoleView #page-studio .studio-advanced summary span { color: var(--work-faint); font-size: 10px; } #consoleView #page-studio .studio-advanced-fields { padding: 0 11px 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #consoleView #page-studio .studio-advanced { order: 6; } #consoleView #page-studio #studioFormError { order: 7; } #consoleView #page-studio .studio-submit { order: 8; } #consoleView #page-studio .studio-advanced-fields { grid-template-columns: minmax(0,1fr); } #consoleView #page-studio .studio-advanced-fields #studioSeed { display: none; } #consoleView #page-studio .studio-advanced-fields label { display: grid; gap: 5px; color: var(--work-muted); font-size: 10px; } #consoleView #page-studio .studio-advanced-fields label small { color: var(--work-faint); font-size: 9px; } #consoleView #page-studio .studio-advanced-fields input { width: 100%; min-height: 36px; padding: 7px 9px; font-size: 11px; } #consoleView #page-studio #studioFormError { padding: 0 16px; } #consoleView #page-studio .studio-submit { min-height: 44px; margin: 10px 16px 13px; display: flex; justify-content: center; gap: 12px; border-radius: 11px; } #consoleView #page-studio .studio-submit > span { font-size: 13px; } #consoleView #page-studio .studio-submit > small { font-size: 10px; } #consoleView #page-studio .studio-result { position: static; max-height: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.13) transparent; } #consoleView #page-studio .studio-latest-head { min-height: 29px; padding: 0 1px 8px; display: flex; align-items: center; gap: 13px; } #consoleView #page-studio .studio-latest-head strong { color: var(--work-text); font-size: 13px; font-weight: 620; } #consoleView #page-studio .studio-latest-head span { display: flex; align-items: center; gap: 7px; color: var(--work-muted); font-size: 10px; } #consoleView #page-studio .studio-latest-head i { width: 7px; height: 7px; border-radius: 50%; background: #83c99a; box-shadow: 0 0 12px rgba(131,201,154,.35); } #consoleView #page-studio .result-stage { min-height: 0; aspect-ratio: 16 / 9; border: 0; border-radius: 15px; background: #0b0b0d; } #consoleView #page-studio .result-stage video { border-radius: inherit; } #consoleView #page-studio .result-empty { gap: 8px; } #consoleView #page-studio .result-empty > span { width: 44px; height: 44px; border-color: var(--work-line-strong); color: #e7e7e9; background: rgba(255,255,255,.055); box-shadow: none; } #consoleView #page-studio .result-empty strong { color: #e7e7e9; font-size: 13px; } #consoleView #page-studio .result-empty small { color: var(--work-muted); font-size: 11px; } #consoleView #page-studio .result-progress { padding: 10px 3px 13px; background: transparent; } #consoleView #page-studio .result-progress-head span { color: var(--work-text); font-size: 12px; } #consoleView #page-studio .result-progress-head code { margin-top: 3px; font-size: 9px; } #consoleView #page-studio .result-progress-rail { height: 4px; margin: 9px 0; } #consoleView #page-studio .result-progress p { min-height: 0; font-size: 10px; } #consoleView #page-studio .result-actions { margin-top: 10px; } #consoleView #page-studio .studio-task-center { border: 0; background: transparent; } #consoleView #page-studio .task-center-head { min-height: 38px; padding: 6px 0; border-bottom: 0; } #consoleView #page-studio .task-center-head strong { font-size: 13px; } #consoleView #page-studio .task-center-head small { font-size: 10px; } #consoleView #page-studio .task-refresh { min-height: 29px; } #consoleView #page-studio .task-center-actions { display: flex; align-items: center; gap: 5px; } #consoleView #page-studio .task-carousel-arrow { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--work-line); border-radius: 50%; background: rgba(255,255,255,.025); color: var(--work-muted); cursor: pointer; } #consoleView #page-studio .task-carousel-arrow:hover { border-color: var(--work-line-strong); color: var(--work-text); } #consoleView #page-studio .studio-task-list { grid-auto-flow: column; grid-auto-columns: minmax(190px,1fr); grid-template-columns: none; gap: 11px; padding: 2px 2px 10px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; } #consoleView #page-studio .studio-task-card { min-width: 0; min-height: 142px; overflow: hidden; scroll-snap-align: start; border-radius: 12px; background: #171719; } #consoleView #page-studio .studio-task-card::before { content: "▶"; height: 78px; display: grid; place-items: center; color: rgba(255,255,255,.8); font-size: 17px; background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.09),transparent 26%), linear-gradient(135deg,#34363b,#151619 62%,#27282c); } #consoleView #page-studio .studio-task-card:nth-child(3n + 2)::before { background: radial-gradient(circle at 60% 30%,rgba(234,211,179,.13),transparent 30%), linear-gradient(135deg,#44403a,#171719 65%,#282724); } #consoleView #page-studio .studio-task-card:nth-child(3n)::before { background: radial-gradient(circle at 35% 40%,rgba(167,195,218,.16),transparent 30%), linear-gradient(135deg,#343b41,#161719 65%,#2c3033); } #consoleView #page-studio .studio-task-main { min-height: 0; padding: 0; display: grid; grid-template-columns: 116px minmax(0,1fr); gap: 0; } #consoleView #page-studio .task-card-thumb { min-height: 84px; position: relative; display: grid; place-items: center; overflow: hidden; color: rgba(255,255,255,.88); background: radial-gradient(circle at 50% 40%,rgba(142,175,255,.2),transparent 40%),linear-gradient(135deg,#343944,#1d2026 58%,#272a31); } #consoleView #page-studio .task-card-thumb::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,transparent 35%,rgba(255,255,255,.06)); } #consoleView #page-studio .task-card-thumb > span { width:27px; height:27px; z-index:1; display:grid; place-items:center; padding-left:2px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(0,0,0,.3); font-size:10px; } #consoleView #page-studio .task-card-thumb > i { position:absolute; left:7px; bottom:6px; padding:3px 6px; border-radius:99px; color:#fff; background:rgba(0,0,0,.48); font-size:8px; font-style:normal; } #consoleView #page-studio .task-card-copy { min-width:0; align-self:center; display:grid; gap:7px; padding:10px 11px; } #consoleView #page-studio .task-card-head { min-height: 25px; padding-right: 86px; } #consoleView #page-studio .task-card-head strong { font-size: 11px; } #consoleView #page-studio .task-mini-state { font-size: 8px; } #consoleView #page-studio .task-card-meta { font-size: 8px; } #consoleView #page-studio .task-card-actions { position:absolute; z-index:2; top:6px; right:6px; display:flex; gap:4px; } #consoleView #page-studio .task-note-edit, #consoleView #page-studio .task-delete { position:static; min-width:0; min-height:22px; padding:2px 6px; font-size:8px; opacity:.9; } #consoleView #page-studio .task-card-meta { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #consoleView #page-studio .task-center-empty { padding: 14px 10px; border-style: dashed; border-color: var(--work-line); border-radius: 10px; font-size: 10px; } #consoleView #page-studio .studio-local-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #consoleView #page-studio .studio-local-poster + .result-empty { z-index: 2; padding: 14px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(9,9,11,.66); backdrop-filter: blur(12px); } #consoleView #page-studio .studio-local-poster + .result-empty > span { display: none; } #consoleView #page-studio .studio-local-poster + .result-empty::before { content: "界面示例 · 静态预览"; color: rgba(255,255,255,.74); font-size: 10px; } #consoleView #page-studio .studio-preview-work { min-width: 0; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--work-line); border-radius: 11px; background: #171719; } #consoleView #page-studio .studio-preview-work img { width: 100%; aspect-ratio: 16/9; display: block; object-fit: cover; } #consoleView #page-studio .studio-preview-work div { min-width: 0; padding: 8px 10px 10px; display: grid; gap: 4px; } #consoleView #page-studio .studio-preview-work strong { overflow: hidden; color: var(--work-text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } #consoleView #page-studio .studio-preview-work small { color: var(--work-muted); font-size: 9px; } #consoleView #page-studio .studio-preview-work > span { position: absolute; display: none; } @media (max-height: 900px) and (min-width: 1281px) { #consoleView #page-studio .studio-shell { height: calc(100dvh - 216px); min-height: 620px; } #consoleView #page-studio .studio-section { padding-block: 10px; } #consoleView #page-studio .prompt-section textarea { min-height: 76px; } #consoleView #page-studio .studio-quality-section { padding-block: 8px; } #consoleView #page-studio .quality-choice label > span { min-height: 46px; } #consoleView #page-studio .studio-result { overflow: visible; } } @media (max-width: 1280px) { #consoleView .content { padding-top: 72px; } #consoleView #page-studio .studio-shell { height: auto; min-height: 0; grid-template-columns: minmax(0,1fr); } #consoleView #page-studio .studio-compose { max-height: none; } #consoleView #page-studio .studio-result { max-height: none; overflow: visible; } #consoleView #page-studio .studio-task-list { grid-auto-columns: minmax(210px,42%); } } @media (max-width: 600px) { #consoleView #page-studio .studio-page-head { align-items: flex-start; } #consoleView #page-studio .studio-page-head > div:first-child p { display: block; } #consoleView #page-studio .studio-balance { min-width: 115px; } #consoleView #page-studio .studio-balance strong { font-size: 18px; } #consoleView #page-studio .studio-mode-tabs button { padding-inline: 7px; font-size: 10px; } #consoleView #page-studio .studio-settings { grid-template-columns: 1fr 1fr; } #consoleView #page-studio .studio-tool-quality { min-width: 0; } #consoleView #page-studio .studio-task-list { grid-auto-columns: minmax(190px,76%); } } /* The theme control changes the complete console palette, including the newer workspace layer. */ html[data-theme="light"] #consoleView { --work-bg:#f2f4f7; --work-surface:#ffffff; --work-raised:#f8f9fb; --work-input:#f4f6f9; --work-line:rgba(28,42,59,.10); --work-line-strong:rgba(28,42,59,.18); --work-text:#202b38; --work-muted:#657285; --work-faint:#8792a0; --work-blue:#315fd8; color:var(--work-text); background:var(--work-bg); } html[data-theme="light"] #consoleView .sidebar { border-color:var(--work-line); background:rgba(255,255,255,.92); } html[data-theme="light"] #consoleView .nav button { color:#526174; } html[data-theme="light"] #consoleView .nav button:hover { color:#202b38; border-color:var(--work-line); background:#f1f4f8; } html[data-theme="light"] #consoleView .nav button.active { color:#234eb3; border-color:rgba(49,95,216,.16); background:#edf2ff; box-shadow:inset 2px 0 #315fd8; } html[data-theme="light"] #consoleView .nav button.active .nav-symbol { background:#315fd8; } html[data-theme="light"] #consoleView .identity, html[data-theme="light"] #consoleView .panel, html[data-theme="light"] #consoleView .metric, html[data-theme="light"] #consoleView .studio-compose, html[data-theme="light"] #consoleView .studio-result, html[data-theme="light"] #consoleView .creative-form, html[data-theme="light"] #consoleView .creative-results { border-color:var(--work-line); background:var(--work-surface); box-shadow:0 12px 36px rgba(30,48,72,.055); } html[data-theme="light"] #consoleView .metric.primary-metric { border-color:var(--work-line); background:linear-gradient(145deg,#fff,#f6f8fb 74%); } html[data-theme="light"] #consoleView .app-launch-card { border-color:var(--work-line); background:linear-gradient(145deg,#fff,#f7f9fc); } html[data-theme="light"] #consoleView .app-launch-card:hover { border-color:rgba(49,95,216,.3); background:#fff; } html[data-theme="light"] #consoleView .apps-search { color:var(--work-text); border-color:var(--work-line-strong); background:linear-gradient(120deg,#fff,#f8faff); box-shadow:0 8px 24px rgba(29,46,72,.06); } html[data-theme="light"] #consoleView .apps-search input { color:var(--work-text); background:transparent; } html[data-theme="light"] #consoleView .apps-search input::placeholder { color:#8b96a4; } html[data-theme="light"] #consoleView .apps-search-spark { color:#315fd8; } html[data-theme="light"] #consoleView .apps-examples button, html[data-theme="light"] #consoleView .apps-categories button, html[data-theme="light"] #consoleView .apps-favorites-toggle { color:#657285; } html[data-theme="light"] #consoleView .apps-categories button[aria-selected="true"] { color:#202b38; border-color:#315fd8; } html[data-theme="light"] #consoleView .app-launch-tags i { color:#536174; border-color:var(--work-line); background:#f4f6f9; } html[data-theme="light"] #consoleView .app-recommend-result { color:var(--work-text); border-color:var(--work-line); background:#fff; } html[data-theme="light"] #consoleView .app-recommend-result:hover { border-color:rgba(49,95,216,.3); background:#f7f9ff; } html[data-theme="light"] #consoleView .btn:not(.primary), html[data-theme="light"] #consoleView .task-refresh, html[data-theme="light"] #consoleView .task-carousel-arrow { color:#536174; border-color:var(--work-line-strong); background:#fff; } html[data-theme="light"] #consoleView .btn:not(.primary):hover, html[data-theme="light"] #consoleView .task-refresh:hover { color:#234eb3; border-color:rgba(49,95,216,.3); background:#f3f6ff; } html[data-theme="light"] #consoleView .btn.primary { color:#fff; border-color:#315fd8; background:#315fd8; } html[data-theme="light"] #consoleView .btn.primary:hover { color:#fff; border-color:#244db8; background:#244db8; } html[data-theme="light"] #consoleView input:not([type=file]):not([type=radio]), html[data-theme="light"] #consoleView select, html[data-theme="light"] #consoleView textarea, html[data-theme="light"] #consoleView .creative-page .creative-controls input:not([type=file]), html[data-theme="light"] #consoleView .creative-page .creative-controls select, html[data-theme="light"] #consoleView .creative-page .creative-controls textarea { color:var(--work-text); border-color:var(--work-line-strong); background-color:var(--work-input); } html[data-theme="light"] #consoleView .creative-page .creative-controls .field > label { color:#3d4a5a; } html[data-theme="light"] #consoleView .creative-page .creative-source-preview, html[data-theme="light"] #consoleView .creative-page .creative-role, html[data-theme="light"] #consoleView .creative-page .creative-project-overview { border-color:var(--work-line); background:#f5f7fa; } html[data-theme="light"] #consoleView .studio-section { border-color:var(--work-line); } html[data-theme="light"] #consoleView .studio-section-head > span, html[data-theme="light"] #consoleView .studio-section-head > label, html[data-theme="light"] #consoleView .studio-section-head small, html[data-theme="light"] #consoleView .quality-choice b, html[data-theme="light"] #consoleView .quality-choice em, html[data-theme="light"] #consoleView .quality-choice small { color:var(--work-text); } html[data-theme="light"] #consoleView .studio-mode-tabs, html[data-theme="light"] #consoleView .studio-settings select, html[data-theme="light"] #consoleView .upload-slot, html[data-theme="light"] #consoleView .studio-advanced { border-color:var(--work-line); background:#f7f9fc; } html[data-theme="light"] #consoleView .studio-mode-tabs button { color:#657285; } html[data-theme="light"] #consoleView .studio-mode-tabs button.active { color:#fff; border-color:#315fd8; background:#315fd8; } html[data-theme="light"] #consoleView .quality-choice label > span { border-color:var(--work-line-strong); background:#f7f9fc; } html[data-theme="light"] #consoleView .quality-choice input:checked + span { color:#234eb3; border-color:#315fd8; background:#edf2ff; box-shadow:inset 2px 0 #315fd8; } html[data-theme="light"] #consoleView .studio-advanced summary, html[data-theme="light"] #consoleView .studio-advanced summary span { color:#536174; } html[data-theme="light"] #consoleView .studio-task-center { border-color:var(--work-line); background:transparent; } html[data-theme="light"] #consoleView .studio-task-card { border-color:var(--work-line); background:#fff; } html[data-theme="light"] #consoleView .studio-task-card:hover { border-color:var(--work-line-strong); background:#f8faff; } html[data-theme="light"] #consoleView .studio-task-card.selected { border-color:rgba(49,95,216,.35); background:#f1f5ff; box-shadow:inset 2px 0 #315fd8; } html[data-theme="light"] #consoleView .task-card-thumb { background:radial-gradient(circle at 50% 40%,rgba(49,95,216,.15),transparent 40%),linear-gradient(135deg,#dce4f1,#edf0f5 58%,#dfe5ef); } html[data-theme="light"] #consoleView .task-card-thumb > span { color:#315fd8; border-color:rgba(49,95,216,.32); background:rgba(255,255,255,.72); } html[data-theme="light"] #consoleView .task-card-thumb > i { color:#fff; } html[data-theme="light"] #consoleView .result-progress { background:#fff; } html[data-theme="light"] #consoleView .result-progress-head span, html[data-theme="light"] #consoleView .result-progress-head strong { color:#26364a; } html[data-theme="light"] #consoleView .result-progress-head code, html[data-theme="light"] #consoleView .result-progress p { color:#657285; } html[data-theme="light"] #consoleView .result-progress-rail, html[data-theme="light"] #consoleView .task-mini-progress { background:#e8edf4; } html[data-theme="light"] #consoleView .studio-task-card .task-card-meta { color:#657285; } html[data-theme="light"] #consoleView .studio-task-card .task-note-edit { color:#315fd8; border-color:rgba(49,95,216,.24); background:#f5f7fc; } html[data-theme="light"] #consoleView .studio-task-card .task-delete { color:#a54b4b; border-color:rgba(165,75,75,.2); background:#fbf5f5; } html[data-theme="light"] #consoleView th { color:#526174; background:#f1f4f8; } html[data-theme="light"] #consoleView td { color:#3f4c5b; } html[data-theme="light"] #consoleView tr:hover td { background:#f7f9fc; } html[data-theme="light"] #consoleView .modal { background:rgba(23,35,51,.25); } html[data-theme="light"] #consoleView .modal-card { color:var(--work-text); border-color:var(--work-line); background:#fff; } html[data-theme="light"] #consoleView .app-recommend-status.is-error { color:#a43e43; } html[data-theme="light"] #consoleView .notice { color:#45566b; border-color:var(--work-line); background:#f2f5fa; } html[data-theme="light"] #consoleView .form-error { color:#a43e43; } html[data-theme="light"] #consoleView .status { color:#536174; border-color:var(--work-line); background:#f8f9fb; } html[data-theme="light"] #consoleView .status.completed { color:#28664d; } html[data-theme="light"] #consoleView .status.failed { color:#a43e43; } html[data-theme="light"] #consoleView .creative-page input::file-selector-button { color:#354457; border-color:var(--work-line-strong); background:#edf1f6; } html[data-theme="light"] #consoleView .task-center-empty { color:#657285; border-color:var(--work-line-strong); background:#fafbfd; } html[data-theme="light"] #consoleView .task-mini-state.completed { color:#28664d; border-color:rgba(40,102,77,.2); background:#eef8f2; } html[data-theme="light"] #consoleView .task-mini-state.failed { color:#a43e43; border-color:rgba(164,62,67,.2); background:#fbf1f1; } html[data-theme="light"] #consoleView .studio-task-card.is-running, html[data-theme="light"] #consoleView .studio-task-card.is-dispatching { border-color:rgba(169,112,23,.25); background:#fffaf0; } html[data-theme="light"] #consoleView .creative-gallery-stage { border-color:var(--work-line); background:#fff; } html[data-theme="light"] #consoleView .creative-gallery-head, html[data-theme="light"] #consoleView .creative-gallery-actions { border-color:var(--work-line); } html[data-theme="light"] #consoleView .creative-gallery-head strong, html[data-theme="light"] #consoleView .creative-gallery-caption { color:#26364a; } html[data-theme="light"] #consoleView .creative-gallery-head span, html[data-theme="light"] #consoleView .creative-gallery-empty { color:#657285; } html[data-theme="light"] #consoleView .creative-task { color:var(--work-text); border-color:var(--work-line); background:#fff; } html[data-theme="light"] #consoleView .creative-task.is-selected { border-color:rgba(49,95,216,.38); background:#f3f6ff; } html[data-theme="light"] #consoleView .creative-task-thumb { background:linear-gradient(145deg,#e6ebf3,#f4f6f9); } html[data-theme="light"] #consoleView .creative-task-thumb > span { color:#315fd8; } html[data-theme="light"] #consoleView .creative-task-copy h3 { color:#26364a; } html[data-theme="light"] #consoleView .creative-task-copy .creative-task-meta, html[data-theme="light"] #consoleView .creative-task-copy .creative-task-message, html[data-theme="light"] #consoleView .creative-task-cost { color:#657285; } html[data-theme="light"] #consoleView .music-task-thumb { background:linear-gradient(145deg,#e9edf5,#dce5f7); } /* App artwork supplied by the user is square; Windows and macOS get the same crop and sizing. */ #consoleView #page-apps .app-launch-art { aspect-ratio:1 / 1; } #consoleView #page-apps .app-launch-art img { object-fit:cover; } #consoleView #page-apps .apps-categories { min-width:0; flex:1 1 auto; flex-wrap:nowrap; overscroll-behavior-x:contain; scrollbar-width:none; } #consoleView #page-apps .apps-categories::-webkit-scrollbar { display:none; } #consoleView #page-apps .apps-browse-head { min-width:0; overflow:hidden; } #consoleView #page-apps .apps-categories button { flex:0 0 auto; } #consoleView #page-apps .apps-section-label { justify-content:space-between; } #consoleView #page-apps .app-launch-grid { min-width:0; } @media (min-width:1450px) { #consoleView #page-apps .app-launch-grid { grid-template-columns:repeat(3,minmax(0,260px)); gap:30px 24px; } } @media (max-width:1000px) { #consoleView #page-apps .app-launch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:620px) { #consoleView #page-apps .apps-browse-head { overflow:visible; } #consoleView #page-apps .apps-categories { gap:18px; } #consoleView #page-apps .app-launch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; } #consoleView #page-apps .app-launch-art { aspect-ratio:1; } } /* Creative tools share one large active preview and a compact grid of still-frame cards. */ #consoleView .creative-results { min-width:0; overflow:hidden; } #consoleView .creative-gallery-stage { margin:0; overflow:hidden; border-bottom:1px solid var(--work-line); background:#101012; } #consoleView .creative-gallery-head { min-height:42px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--work-line); } #consoleView .creative-gallery-head strong { color:var(--work-text); font-size:13px; } #consoleView .creative-gallery-head span { color:var(--work-muted); font-size:10px; } #consoleView .creative-gallery-canvas { min-height:120px; max-height:min(58vh,680px); aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; background:#09090b; } #consoleView .creative-gallery-canvas video { width:100%; height:100%; object-fit:contain; background:#09090b; } #consoleView .creative-gallery-canvas img { display:block; max-width:100%; max-height:min(58vh,680px); object-fit:contain; } #consoleView .creative-gallery-canvas audio { width:min(92%,680px); } #consoleView .creative-gallery-empty { color:var(--work-muted); font-size:12px; text-align:center; } #consoleView .creative-gallery-actions { min-height:42px; padding:6px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--work-line); } #consoleView .creative-gallery-caption { overflow:hidden; color:var(--work-text); font-size:11px; text-overflow:ellipsis; white-space:nowrap; } #consoleView .creative-gallery-actions:empty { display:none; } #consoleView .creative-results > [id$="Tasks"] { min-width:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:10px; } #consoleView .creative-task { min-width:0; position:relative; display:grid; grid-template-columns:86px minmax(0,1fr); gap:0; overflow:hidden; border:1px solid var(--work-line); border-radius:12px; background:var(--work-raised); } #consoleView .creative-task.is-selected { border-color:rgba(142,175,255,.58); background:rgba(142,175,255,.08); } #consoleView .creative-task-thumb { width:86px; min-height:100%; aspect-ratio:1; position:relative; display:grid; place-items:center; padding:0; overflow:hidden; border:0; border-radius:0; color:#fff; background:linear-gradient(145deg,#373b45,#17191e); cursor:pointer; } #consoleView .creative-task-thumb img, #consoleView .creative-task-thumb video { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; } #consoleView .creative-task-thumb::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.14); } #consoleView .creative-task-thumb > span { z-index:1; width:28px; height:28px; display:grid; place-items:center; padding-left:2px; border:1px solid rgba(255,255,255,.45); border-radius:50%; color:#fff; background:rgba(0,0,0,.38); font-size:10px; } #consoleView .creative-task-copy { min-width:0; padding:9px 10px; display:grid; align-content:center; gap:5px; } #consoleView .creative-task-copy > header { min-width:0; display:flex; align-items:center; gap:6px; } #consoleView .creative-task-copy h3 { min-width:0; margin:0; overflow:hidden; color:var(--work-text); font-size:11px; text-overflow:ellipsis; white-space:nowrap; } #consoleView .creative-task-copy .task-mini-state { flex:0 0 auto; font-size:8px; } #consoleView .creative-task-copy .creative-task-meta, #consoleView .creative-task-copy .creative-task-message, #consoleView .creative-task-cost { margin:0; overflow:hidden; color:var(--work-muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; } #consoleView .creative-task-copy .creative-task-message { display:none; } #consoleView .creative-task-copy .creative-task-progress { height:3px; margin:0; } #consoleView .creative-task-copy .creative-task-cost { display:none; } #consoleView .creative-task-actions { display:flex; flex-wrap:wrap; gap:4px; } #consoleView .creative-task-actions .btn { min-height:23px; padding:2px 6px; font-size:8px; } #consoleView .creative-task-copy .creative-transcript, #consoleView .creative-task-copy .creative-project-overview { display:none; } #consoleView .music-task-card { grid-template-columns:80px minmax(0,1fr); } #consoleView .music-task-thumb { width:80px; } #consoleView .music-task-thumb > .music-task-play { position:absolute; right:6px; bottom:6px; z-index:2; width:19px; height:19px; font-size:8px; } #consoleView .music-task-card .creative-task-copy { grid-template-rows:none; align-content:center; } #consoleView .music-task-card .creative-task-meta, #consoleView .music-task-card .music-task-error { max-width:100%; margin:0; overflow:hidden; color:var(--work-muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; } #consoleView .music-task-card .music-task-error { color:#dfaaa5; } #consoleView .music-task-card .creative-task-actions { gap:5px; } #consoleView .music-task-card .music-task-delete { color:#d5a4a4; } #consoleView .music-task-card .music-task-delete:disabled { opacity:.4; cursor:not-allowed; } #consoleView .creative-task-thumb:disabled { cursor:default; opacity:.72; } @media (max-width:1100px) { #consoleView .creative-results > [id$="Tasks"] { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:700px) { #consoleView .creative-results > [id$="Tasks"] { grid-template-columns:minmax(0,1fr); } #consoleView .creative-gallery-canvas { max-height:52vh; } } /* Keep the active media preview compact and show its complete source frame, leaving room for the selectable creation cards below. */ #consoleView .creative-gallery-canvas { width:100%; height:clamp(240px, 44vh, 500px); min-height:0; max-height:500px; aspect-ratio:auto; } #consoleView .creative-gallery-canvas video, #consoleView .creative-gallery-canvas img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; object-position:center; } @media (max-height:760px) { #consoleView .creative-gallery-canvas { height:clamp(200px, 40vh, 340px); max-height:340px; } } @media (max-width:700px) { #consoleView .creative-gallery-canvas { height:clamp(220px, 44vh, 380px); max-height:380px; } } /* Keep category navigation and task galleries inside the Windows viewport. */ #consoleView, #consoleView .content, #consoleView .page, #consoleView .creative-shell, #consoleView .creative-results, #consoleView .studio-result { min-width:0; } #consoleView { overflow-x:clip; } #consoleView #page-apps .apps-categories { overflow-x:auto; overflow-y:hidden; } #consoleView #page-apps .apps-categories button:focus:not(:focus-visible) { outline:none; box-shadow:none; } #consoleView #page-apps .apps-categories button:focus-visible { outline:2px solid var(--work-blue); outline-offset:2px; } #consoleView .creative-gallery-canvas > img { width:auto; height:auto; } #consoleView .creative-task-copy { overflow:hidden; } #consoleView .music-task-card .creative-task-copy { grid-template-rows:none; } @media (min-width:1101px) and (max-width:1450px) { #consoleView .creative-results > [id$="Tasks"] { grid-template-columns:repeat(2,minmax(0,1fr)); } #consoleView #page-studio .studio-task-list { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:820px) { #consoleView .creative-page .creative-shell { grid-template-columns:minmax(0,1fr); } #consoleView #page-studio .studio-shell { grid-template-columns:minmax(0,1fr); } #consoleView #page-studio .studio-compose { max-height:none; } } /* Balance the app gallery across wide displays while preserving square artwork. */ #consoleView #page-apps .app-launch-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:26px 22px; align-items:start; } #consoleView #page-apps .apps-section-label { margin-bottom:18px; } #consoleView #page-apps .apps-section-label > div { gap:9px; } #consoleView #page-apps .app-launch-art { aspect-ratio:1 / 1; } #consoleView #page-apps .app-launch-card { width:100%; } @media (min-width:1001px) and (max-width:1450px) { #consoleView #page-apps .app-launch-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 20px; } } @media (max-width:1000px) { #consoleView #page-apps .app-launch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; } } @media (max-width:620px) { #consoleView #page-apps .app-launch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px 12px; } } /* Recent video tasks are compact horizontal cards; the only player stays above. */ #consoleView #page-studio .studio-task-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding:9px 12px 12px; } #consoleView #page-studio .studio-task-card { display:block; height:88px; min-height:0; border-radius:11px; } #consoleView #page-studio .studio-task-card::before { content:none !important; display:none !important; } #consoleView #page-studio .studio-task-main { height:100%; min-height:0; grid-template-columns:72px minmax(0,1fr); align-items:stretch; gap:0; padding:0; overflow:hidden; } #consoleView #page-studio .task-card-thumb { width:72px; height:100%; min-height:0; aspect-ratio:auto; position:relative; display:grid; place-items:center; overflow:hidden; border-radius:10px 0 0 10px; } #consoleView #page-studio .task-card-thumb img, #consoleView #page-studio .task-card-thumb video { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; } #consoleView #page-studio .task-card-thumb > span { position:relative; z-index:1; } #consoleView #page-studio .task-card-copy { min-width:0; height:100%; align-content:center; gap:5px; padding:8px 10px; overflow:hidden; } #consoleView #page-studio .task-card-head { min-height:0; padding:0; } #consoleView #page-studio .task-card-head strong { font-size:11px; } #consoleView #page-studio .task-card-meta { overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; } #consoleView #page-studio .task-mini-progress { height:3px; margin:0; } #consoleView #page-studio .task-card-actions { display:none !important; } @media (max-width:1100px) { #consoleView #page-studio .studio-task-list { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:700px) { #consoleView #page-studio .studio-task-list { grid-template-columns:minmax(0,1fr); } #consoleView #page-studio .studio-task-card { height:80px; } } /* Compact, non-scrolling creation history. The selected task always plays in the large preview above. */ #consoleView #page-studio .studio-compose form { align-content:start; grid-auto-rows:max-content; } #consoleView #page-studio .studio-section { padding-block:13px; } #consoleView #page-studio .studio-compose { max-height:calc(100dvh - 176px); } #consoleView #page-studio .studio-model-chip { display:none !important; } #consoleView #page-studio .studio-result { position:relative; top:auto; height:auto; max-height:none; overflow:visible; display:grid; grid-template-rows:auto auto auto auto; align-content:start; } #consoleView #page-studio .result-stage, #consoleView #page-studio .result-stage.landscape { width:100%; height:auto; min-height:0; max-height:min(56vh,620px); aspect-ratio:16/9; } #consoleView #page-studio .result-stage.portrait { width:100%; height:min(52vh,520px); min-height:300px; max-height:min(52vh,520px); aspect-ratio:9/16; justify-self:center; } #consoleView #page-studio .studio-task-list { grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:8px 0 2px; overflow:visible; scroll-snap-type:none; } #consoleView #page-studio .studio-compose form { grid-template-rows:none; } #consoleView #page-studio .studio-prompt-tip { display:block; margin-top:7px; color:var(--work-muted); font-size:10px; line-height:1.5; } #consoleView #page-studio .studio-task-card { min-height:84px; } #consoleView #page-studio .task-card-head { padding-right:0; align-items:center; } #consoleView #page-studio .task-card-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #consoleView #page-studio .task-mini-state { position:static; } #consoleView #page-studio .task-card-actions { display:none; } #consoleView #page-apps .apps-section-label { align-items:center; } #consoleView #page-apps .apps-section-label > div { display:flex; align-items:baseline; gap:11px; } #consoleView #page-apps .apps-section-label .btn { min-height:31px; } @media (max-width:1100px) { #consoleView #page-studio .studio-task-list { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:700px) { #consoleView #page-studio .studio-task-list { grid-template-columns:minmax(0,1fr); } #consoleView #page-studio .studio-task-main { grid-template-columns:104px minmax(0,1fr); } #consoleView #page-studio .studio-settings { grid-template-columns:repeat(2,minmax(0,1fr)); } #consoleView #page-studio .studio-tool-quality { grid-column:1/-1; } #consoleView #page-studio .result-stage.portrait { height:min(52vh,440px); min-height:260px; } } /* Unified horizontal recent-work rails: latest output stays in the large stage. */ #consoleView #page-studio .studio-task-list, #consoleView .creative-results > [id$="Tasks"] { display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(280px,32%); overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; } #consoleView #page-studio .studio-task-list { padding:9px 12px 12px; gap:9px; } #consoleView .creative-results > [id$="Tasks"] { gap:10px; padding:10px; } #consoleView #page-studio .studio-task-card, #consoleView .creative-results > [id$="Tasks"] > .creative-task { height:132px; min-height:0; scroll-snap-align:start; } #consoleView #page-studio .task-card-actions { top:auto; right:8px; bottom:7px; display:flex !important; gap:4px; } #consoleView #page-studio .task-card-copy { padding-bottom:28px; } #consoleView #page-studio .task-note-edit, #consoleView #page-studio .task-delete { min-height:22px; padding:2px 7px; font-size:9px; } #consoleView .creative-results > [id$="Tasks"] > .creative-task { grid-template-columns:96px minmax(0,1fr); } #consoleView .creative-results > [id$="Tasks"] > .creative-task .creative-task-thumb { width:96px; } #consoleView .creative-results > [id$="Tasks"] > .creative-task .creative-task-actions { margin-top:3px; } #consoleView .creative-results > [id$="Tasks"] > .creative-task:not(.music-task-card) .creative-task-copy h3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; line-height:1.35; } #consoleView .task-carousel-controls { display:inline-flex; align-items:center; gap:5px; } #consoleView .task-carousel-button { width:29px; height:29px; display:grid; place-items:center; padding:0; border:1px solid var(--work-line-strong); border-radius:50%; color:var(--work-text); background:var(--work-input); cursor:pointer; } #consoleView .task-carousel-button:hover { border-color:var(--work-blue); background:rgba(142,175,255,.1); } /* Keep the studio and its media stage inside the content grid at every zoom. */ #consoleView > .content, #consoleView .content, #consoleView.app-shell, #consoleView #page-studio, #consoleView #page-studio .studio-shell, #consoleView #page-studio .studio-compose, #consoleView #page-studio .studio-result, #consoleView #page-studio .result-stage, #consoleView #page-studio .result-progress, #consoleView #page-studio .studio-task-center { min-width:0; max-width:100%; } #consoleView #page-studio { overflow-x:hidden; } #consoleView #page-studio .studio-shell { width:100%; } #consoleView #page-studio .studio-result { overflow:hidden; } #consoleView #page-studio .result-stage { width:100%; overflow:hidden; contain:layout paint; } #consoleView #page-studio .result-stage video { display:block; width:100%; max-width:100%; min-width:0; } #consoleView #page-studio .result-progress-rail, #consoleView #page-studio .task-center-head, #consoleView #page-studio .studio-task-list { min-width:0; max-width:100%; } #consoleView #page-studio .studio-result { display:flex; flex-direction:column; align-items:stretch; } #consoleView #page-studio .studio-result > .result-stage { flex:0 0 auto; } #consoleView #page-studio .result-progress { position:relative; flex:0 0 auto; } #consoleView #page-studio .result-actions { position:static; width:100%; display:flex; align-items:center; justify-content:flex-start; gap:10px; margin:12px 0 2px; } #consoleView #page-studio .result-actions .btn { width:auto; min-width:180px; min-height:42px; flex:0 0 auto; padding-inline:22px; } /* Keep the primary preview from pushing the result controls and recent-work rail below the fold. Explicit height beats intrinsic video dimensions. */ #consoleView #page-studio .result-stage, #consoleView #page-studio .result-stage.landscape { width:100%; height:clamp(260px, 40vh, 520px) !important; min-height:0 !important; max-height:520px !important; aspect-ratio:auto !important; } #consoleView #page-studio .result-stage.portrait { width:100%; height:clamp(260px, 46vh, 460px) !important; min-height:0 !important; max-height:460px !important; aspect-ratio:auto !important; } #consoleView #page-studio .result-stage video { width:100%; height:100%; max-height:100%; object-fit:contain; } #consoleView #page-studio .studio-task-center { min-width:0; } #consoleView #page-studio .studio-task-list { min-width:0; } @media (max-width:700px) { #consoleView #page-studio .result-stage, #consoleView #page-studio .result-stage.landscape { height:clamp(220px, 38vh, 380px) !important; max-height:380px !important; } #consoleView #page-studio .result-stage.portrait { height:clamp(240px, 44vh, 380px) !important; max-height:380px !important; } } /* Leave enough of the page visible below the player on laptop-height screens. The gallery remains the focus, but should not push task controls off-screen. */ @media (max-height:950px) { #consoleView #page-studio .result-stage, #consoleView #page-studio .result-stage.landscape { height:clamp(220px, 32vh, 340px) !important; max-height:340px !important; } #consoleView #page-studio .result-stage.portrait { height:clamp(220px, 34vh, 340px) !important; max-height:340px !important; } } @media (max-height:760px) { #consoleView #page-studio .result-stage, #consoleView #page-studio .result-stage.landscape, #consoleView #page-studio .result-stage.portrait { height:clamp(190px, 30vh, 260px) !important; max-height:260px !important; } } .workflow-specs { min-height:40px; display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:7px 9px; border:1px solid var(--work-line-strong); border-radius:10px; background:var(--work-input); } .workflow-specs span { padding:5px 8px; border-radius:7px; color:var(--work-text); background:rgba(255,255,255,.06); font-size:11px; white-space:nowrap; } @media (max-width:1100px) { #consoleView #page-studio .studio-task-list, #consoleView .creative-results > [id$="Tasks"] { grid-auto-columns:minmax(270px,48%); } } @media (max-width:700px) { #consoleView #page-studio .studio-task-list, #consoleView .creative-results > [id$="Tasks"] { grid-auto-columns:minmax(260px,84%); } #consoleView #page-studio .studio-task-card, #consoleView .creative-results > [id$="Tasks"] > .creative-task { height:124px; } } /* Filtering to one app must not stretch that card across the entire row. */ #consoleView #page-apps .app-launch-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),320px)); justify-content:start; align-items:start; } /* Make playback discoverable even when browser-native video controls fade out. */ #consoleView .creative-gallery-video-wrap { width:100%; height:100%; min-width:0; min-height:0; position:relative; display:grid; place-items:center; overflow:hidden; background:#09090b; } #consoleView .creative-gallery-video-wrap video { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; } #consoleView .creative-gallery-play { position:absolute; top:50%; left:50%; z-index:2; min-height:42px; padding:0 18px; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.42); border-radius:999px; color:#fff; background:rgba(15,16,20,.78); box-shadow:0 8px 28px rgba(0,0,0,.35); font:600 12px var(--sans); cursor:pointer; backdrop-filter:blur(10px); } #consoleView .creative-gallery-play:hover { background:rgba(38,48,73,.9); border-color:rgba(142,175,255,.75); } #consoleView .creative-gallery-play[hidden] { display:none !important; } /* Image editing follows the ImageTo workflow while staying inside EQUAI's dark workbench. */ #consoleView #page-image-edit .image-edit-source { padding: 20px; } #consoleView #page-image-edit .image-edit-dropzone { min-height: 154px; margin: 12px 0 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px dashed #566276; border-radius: 14px; background: linear-gradient(145deg,rgba(144,174,255,.07),rgba(255,255,255,.015)); color: var(--work-text); cursor: pointer; text-align: center; transition: border-color .16s,background .16s; } #consoleView #page-image-edit .image-edit-dropzone:hover, #consoleView #page-image-edit .image-edit-dropzone.is-dragging, #consoleView #page-image-edit .image-edit-dropzone:focus-visible { border-color: #8da9ff; background: rgba(119,148,255,.10); outline: 2px solid transparent; } #consoleView #page-image-edit .image-edit-drop-icon { color: #a9bdff; font-size: 30px; line-height: 1; font-weight: 300; } #consoleView #page-image-edit .image-edit-dropzone strong { font-size: 14px; } #consoleView #page-image-edit .image-edit-dropzone small { margin: 0; color: var(--work-muted); font-size: 10px; } #consoleView #page-image-edit .image-edit-file-input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; clip-path:inset(50%); } #consoleView #page-image-edit .image-edit-file-input:focus-visible + .image-edit-selected-head { outline:2px solid #8da9ff; outline-offset:3px; } #consoleView #page-image-edit .image-edit-selected-head { display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--work-text); font-size:11px; } #consoleView #page-image-edit .image-edit-selected-head span { color:var(--work-muted); font-variant-numeric:tabular-nums; } #consoleView #page-image-edit .image-edit-previews { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; } #consoleView #page-image-edit .image-edit-previews figure, #consoleView #page-image-edit .image-edit-previews figure:first-child { position:relative; grid-column:auto; min-width:0; padding:5px; border:1px solid var(--work-line); border-radius:10px; background:rgba(255,255,255,.025); } #consoleView #page-image-edit .image-edit-previews img { display:block; width:100%; height:86px; max-height:none; object-fit:contain; border-radius:6px; } #consoleView #page-image-edit .image-edit-previews figcaption { margin:5px 2px 2px; overflow:hidden; color:var(--work-muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; } #consoleView #page-image-edit .image-edit-remove { position:absolute; top:8px; right:8px; padding:4px 7px; border:1px solid rgba(255,255,255,.24); border-radius:7px; background:rgba(12,13,16,.84); color:#f0f1f4; font-size:9px; cursor:pointer; } #consoleView #page-image-edit .image-edit-controls { display:grid; gap:14px; } #consoleView #page-image-edit .image-edit-controls .field { margin:0; } #consoleView #page-image-edit .image-edit-controls textarea { min-height:120px; font-size:12px; } #consoleView #page-image-edit #editPromptCount { display:block; margin-top:5px; text-align:right; color:var(--work-faint); font-size:10px; } #consoleView #page-image-edit .image-edit-ratios { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; } #consoleView #page-image-edit .image-edit-ratio { min-height:34px; border:1px solid var(--work-line-strong); border-radius:8px; background:rgba(255,255,255,.025); color:var(--work-muted); font-size:10px; cursor:pointer; } #consoleView #page-image-edit .image-edit-ratio[aria-pressed="true"] { border-color:#8da9ff; background:rgba(119,148,255,.13); color:#c4d0ff; box-shadow:inset 0 0 0 1px rgba(141,169,255,.3); } #consoleView #page-image-edit .image-edit-count-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 12px; color:var(--work-text); font-size:12px; } #consoleView #page-image-edit .image-edit-count-row output { padding:5px 9px; border-radius:8px; background:rgba(255,255,255,.08); color:#c4d0ff; font-variant-numeric:tabular-nums; } #consoleView #page-image-edit .image-edit-count-row input { grid-column:1/-1; width:100%; accent-color:#91a9ff; } #consoleView #page-image-edit .image-edit-models { display:grid; gap:7px; } #consoleView #page-image-edit .image-edit-model-card { display:flex; width:100%; min-width:0; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--work-line); border-radius:11px; background:rgba(255,255,255,.025); color:var(--work-text); text-align:left; cursor:pointer; } #consoleView #page-image-edit .image-edit-model-card[aria-checked="true"] { border-color:#8da9ff; background:rgba(119,148,255,.09); box-shadow:inset 0 0 0 1px rgba(141,169,255,.23); } #consoleView #page-image-edit .image-edit-model-copy, #consoleView #page-image-edit .image-edit-model-price { display:grid; gap:4px; min-width:0; } #consoleView #page-image-edit .image-edit-model-copy strong { font-size:11px; } #consoleView #page-image-edit .image-edit-model-copy small { overflow:hidden; color:var(--work-muted); font-size:9px; text-overflow:ellipsis; } #consoleView #page-image-edit .image-edit-model-price { flex:none; text-align:right; } #consoleView #page-image-edit .image-edit-model-price strong { color:#b6c5ff; font-size:12px; font-variant-numeric:tabular-nums; } #consoleView #page-image-edit .image-edit-model-price small { color:var(--work-faint); font-size:8px; } #consoleView #page-image-edit .image-edit-hint { margin:0; } #consoleView #page-image-edit .image-edit-output-strip { display:flex; gap:8px; width:100%; padding:10px 12px; overflow-x:auto; } #consoleView #page-image-edit .image-edit-output-thumb { flex:none; width:64px; height:64px; padding:3px; overflow:hidden; border:1px solid var(--work-line); border-radius:9px; background:#111; cursor:pointer; } #consoleView #page-image-edit .image-edit-output-thumb[aria-current="true"] { border-color:#8da9ff; box-shadow:0 0 0 1px #8da9ff; } #consoleView #page-image-edit .image-edit-output-thumb img { width:100%; height:100%; object-fit:cover; } @media (max-width:700px) { #consoleView #page-image-edit .image-edit-ratios { grid-template-columns:repeat(4,minmax(0,1fr)); } #consoleView #page-image-edit .image-edit-previews { grid-template-columns:repeat(4,minmax(0,1fr)); } } /* Let still images set the preview height from their intrinsic aspect ratio. */ #consoleView .creative-gallery-canvas.is-image-preview { height:auto; min-height:0; max-height:none; aspect-ratio:auto; padding:12px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; } #consoleView .creative-gallery-canvas.is-image-preview > img { width:auto; height:auto; max-width:100%; max-height:min(58vh,680px); flex:0 1 auto; } #consoleView .creative-gallery-canvas.is-image-preview .image-edit-output-strip { width:100%; flex:0 0 auto; } @media (max-width:700px) { #consoleView .creative-gallery-canvas.is-image-preview > img { max-height:52vh; } } /* Multi-image results stay compact so the thumbnails and task cards remain reachable. */ #consoleView .creative-gallery-canvas.is-multiple-image-preview { height:clamp(280px,48vh,520px); min-height:0; max-height:min(58vh,520px); padding:12px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; } #consoleView .creative-gallery-canvas.is-multiple-image-preview > img { min-height:0; max-height:calc(100% - 92px); flex:1 1 auto; } #consoleView .creative-gallery-canvas.is-multiple-image-preview .image-edit-output-strip { width:100%; min-height:76px; flex:0 0 auto; justify-content:center; padding:6px 12px; } #consoleView .creative-gallery-canvas.is-multiple-image-preview .image-edit-output-thumb { width:64px; height:64px; flex:0 0 64px; padding:3px; overflow:hidden; border:1px solid var(--work-line); border-radius:9px; background:#111; cursor:pointer; } #consoleView .creative-gallery-canvas.is-multiple-image-preview .image-edit-output-thumb[aria-current="true"] { border-color:#8da9ff; box-shadow:0 0 0 2px #8da9ff; } #consoleView .creative-gallery-canvas.is-multiple-image-preview .image-edit-output-thumb img { width:100%; height:100%; object-fit:cover; } @media (max-height:760px) { #consoleView .creative-gallery-canvas.is-multiple-image-preview { height:clamp(240px,42vh,420px); max-height:52vh; } } @media (max-width:700px) { #consoleView .creative-gallery-canvas.is-multiple-image-preview { height:clamp(240px,44vh,400px); max-height:52vh; } } /* 视频高清 tiers: same card language as the image-edit model picker. */ #consoleView #page-video-enhance .video-enhance-tiers { display:grid; gap:7px; } #consoleView #page-video-enhance .video-enhance-tier { display:flex; width:100%; min-width:0; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--work-line); border-radius:11px; background:rgba(255,255,255,.025); color:var(--work-text); text-align:left; cursor:pointer; } #consoleView #page-video-enhance .video-enhance-tier[aria-checked="true"] { border-color:#8da9ff; background:rgba(119,148,255,.09); box-shadow:inset 0 0 0 1px rgba(141,169,255,.23); } #consoleView #page-video-enhance .video-enhance-tier:disabled { cursor:not-allowed; opacity:.5; } #consoleView #page-video-enhance .video-enhance-tier-copy, #consoleView #page-video-enhance .video-enhance-tier-price { display:grid; gap:4px; min-width:0; } #consoleView #page-video-enhance .video-enhance-tier-copy strong { font-size:13px; } #consoleView #page-video-enhance .video-enhance-tier-copy small { color:var(--work-muted); font-size:11px; } #consoleView #page-video-enhance .video-enhance-tier-price { flex:none; text-align:right; } #consoleView #page-video-enhance .video-enhance-tier-price strong { color:#b6c5ff; font-size:13px; font-variant-numeric:tabular-nums; } #consoleView #page-video-enhance .video-enhance-tier-price small { color:var(--work-faint); font-size:10px; }