:root { color-scheme: dark; --design-w: 1600; --design-h: 980; font-family: "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #07090d; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.demo-viewport { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 10%, #1b253a, #07090d 56%); }
.app { --bg:#0e1014; --panel:#151922; --panel-2:#1b202b; --card:#222837; --line:#2e3647; --text:#f4f7fb; --muted:#9aa4b2; --weak:#626d7d; --blue:#4f8cff; --green:#22c55e; --orange:#f59e0b; --red:#ef4444; --top:#10131a; --media:#10131a; --selected:rgba(79,140,255,.16); --selected-line:rgba(79,140,255,.46); position: absolute; left: 50%; top: 50%; width: 1600px; height: 980px; overflow: hidden; transform-origin: center; background: var(--bg); color: var(--text); box-shadow: 0 30px 100px rgba(0,0,0,.5); }
.app[data-app-theme="light"] { --bg:#f5f7fb; --panel:#fff; --panel-2:#eef2f7; --card:#fff; --line:#d5dce8; --text:#172033; --muted:#5e6b7e; --weak:#8a96a8; --blue:#2563eb; --green:#16a34a; --orange:#d97706; --red:#dc2626; --top:#fff; --media:#e7ecf4; --selected:rgba(37,99,235,.12); --selected-line:rgba(37,99,235,.34); }
.app button:focus-visible, .app input:focus-visible, .app select:focus-visible, .app textarea:focus-visible { outline: 3px solid rgba(79,140,255,.5); outline-offset: 2px; }

.top-command-bar { height: 64px; padding: 0 18px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); background: var(--top); }
.app-name { flex: 0 0 92px; overflow: hidden; font-size: 22px; font-weight: 900; white-space: nowrap; }
.project-chip { flex: 0 1 170px; min-width: 130px; height: 40px; padding: 0 12px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-tabs { display: flex; align-items: center; gap: 0; }
.workspace-tab { position: relative; width: var(--tab-width); height: 36px; border: 1px solid transparent; border-radius: 18px; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 550; white-space: nowrap; }
.workspace-tab.is-active { border-color: var(--selected-line); background: var(--selected); color: var(--text); }
.workspace-tab:disabled { opacity: .44; cursor: default; }
.tab-badge { position: absolute; right: 4px; top: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; }
.global-search { margin-left: auto; width: 220px; }
.global-search input, .filter-control, .text-field, .select-field, .settings-dialog input, .settings-dialog select, .settings-dialog textarea { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); }
.global-search input::placeholder, .text-field::placeholder { color: var(--weak); }
.action-button { min-width: 64px; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 650; }
.action-button:hover { background: color-mix(in srgb, var(--card) 78%, var(--blue)); }
.action-button:disabled { opacity: .42; cursor: default; }
.action-button--primary { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 86%, #172033); color: #fff; }
.action-button--danger { color: var(--red); }
.settings-button { flex: 0 0 64px; }

.app-main { height: calc(100% - 64px); display: flex; overflow: hidden; }
.workspace { flex: 1; min-width: 0; height: 100%; overflow: hidden; background: var(--bg); }
.workspace.has-jobbar { height: calc(100% - 68px); }
.workspace-scroll { height: 100%; overflow: auto; padding: 20px; scrollbar-color: var(--line) transparent; }
.workspace-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.workspace-title { flex: 1; min-width: 0; }
.workspace-title h1 { margin: 0; overflow: hidden; font-size: 28px; line-height: 1.25; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.workspace-title p { margin: 6px 0 0; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-actions { display: flex; align-items: center; gap: 10px; }
.section-panel { border: 1px solid var(--line); border-radius: 20px; background: var(--panel-2); }

.project-workspace .workspace-scroll { padding: 20px; }
.project-grid { display: grid; grid-template-columns: repeat(4, 286px); grid-auto-rows: 204px; gap: 20px; align-content: start; }
.project-card { height: 204px; padding: 14px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); cursor: pointer; text-align: left; }
.project-card:hover, .project-card.is-current { border-color: var(--selected-line); background: var(--selected); }
.project-card__top { display: flex; align-items: center; gap: 8px; }
.project-card__top strong { flex: 1; overflow: hidden; font-size: 17px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.status-chip { padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--green) 11%, transparent); color: var(--green); font-size: 10px; font-weight: 750; }
.project-card__path { height: 38px; margin: 8px 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 19px; overflow-wrap: anywhere; }
.project-card__rule { height: 1px; margin: 3px 0 8px; background: var(--line); }
.project-card__meta { color: var(--weak); font-size: 11px; }
.project-card__entry { margin-top: 7px; color: var(--blue); font-size: 12px; font-weight: 650; }
.project-card__stats { margin-top: auto; display: flex; gap: 8px; }
.project-card__stats span { flex: 1; padding: 5px 6px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--muted); font-size: 10px; text-align: center; }

.source-rail { flex: 0 0 270px; height: calc(100% - 68px); display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel); }
.source-rail__header { height: 72px; padding: 15px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.source-rail__header div { display: grid; }.source-rail__header strong { font-size: 16px; }.source-rail__header span { color: var(--muted); font-size: 11px; }.source-rail__header button { width: 34px; min-width: 34px; padding: 0; }
.source-list { flex: 1; overflow: auto; padding: 10px; }
.source-card { width: 100%; min-height: 98px; margin-bottom: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); color: var(--text); cursor: pointer; text-align: left; }
.source-card.is-active { border-color: var(--selected-line); background: var(--selected); }.source-card strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.source-card p { margin: 5px 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.source-card footer { display: flex; justify-content: space-between; color: var(--weak); font-size: 10px; }.source-card footer em { color: var(--green); font-style: normal; }
.source-rail__footer { padding: 12px; border-top: 1px solid var(--line); }.source-rail__footer button { width: 100%; }

.library-workspace { width: calc(100% - 600px); height: calc(100% - 68px); }
.asset-grid { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 14px; align-content: start; }
.asset-card { min-width: 0; height: 250px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-2); color: var(--text); cursor: pointer; text-align: left; }
.asset-card.is-selected { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.media-thumb { position: relative; height: 146px; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(140deg, #16305a, #10131a); }
.media-thumb::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.13)), radial-gradient(circle at 65% 30%, rgba(121,168,255,.5), transparent 27%); }
.media-thumb::after { content: attr(data-ext); position: absolute; right: 12px; bottom: 12px; padding: 4px 12px; border: 1px solid rgba(79,140,255,.58); border-radius: 12px; background: rgba(9,11,15,.78); color: #fff; font-size: 11px; font-weight: 750; }
.media-thumb--city { background: linear-gradient(155deg, #0a1e3b, #5b7594 55%, #dfa76d); }.media-thumb--people { background: linear-gradient(140deg, #322146, #bf6b73 50%, #f1b67a); }.media-thumb--mountain { background: linear-gradient(155deg, #0f2b36, #2f6570 52%, #a9ced2); }.media-thumb--night { background: linear-gradient(140deg, #070d24, #1e3a8a 48%, #8b5cf6); }.media-thumb--office { background: linear-gradient(150deg, #18304a, #627b8a 55%, #d7c0a2); }.media-thumb--audio { background: linear-gradient(135deg, #103a2d, #1f8b5a); }.media-thumb--document { background: linear-gradient(135deg, #0b3850, #38bdf8); }
.asset-favorite { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,209,90,.72); border-radius: 15px; background: rgba(9,11,15,.72); color: #ffd15a; font-size: 17px; }
.asset-card__copy { padding: 12px 14px; }.asset-card__copy strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.asset-card__copy p { margin: 5px 0; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.asset-card__copy footer { display: flex; justify-content: space-between; color: var(--weak); font-size: 10px; }
.asset-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 12px; }.asset-table th { padding: 8px 12px; color: var(--muted); text-align: left; }.asset-table td { padding: 13px 12px; background: var(--panel-2); border-block: 1px solid var(--line); }.asset-table td:first-child { border-left: 1px solid var(--line); border-radius: 12px 0 0 12px; }.asset-table td:last-child { border-right: 1px solid var(--line); border-radius: 0 12px 12px 0; }.asset-table tr.is-selected td { border-color: var(--blue); background: var(--selected); }
.check-label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }.check-label input { accent-color: var(--blue); }

.inspector { flex: 0 0 330px; height: calc(100% - 68px); overflow: auto; padding: 18px; border-left: 1px solid var(--line); background: var(--panel); }
.inspector h2 { margin: 0; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }.inspector > p { margin: 7px 0 14px; color: var(--muted); font-size: 13px; }.inspector-preview { height: 210px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 16px; background: var(--media); }.inspector-preview .media-thumb { width: 100%; height: 100%; border: 0; border-radius: 16px; }.inspector-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }.inspector-section h3 { margin: 0 0 9px; font-size: 13px; }.detail-row { display: grid; grid-template-columns: 74px 1fr; gap: 8px; margin: 7px 0; font-size: 11px; }.detail-row span { color: var(--muted); }.detail-row strong { overflow: hidden; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }

.job-timeline { position: absolute; left: 0; right: 0; bottom: 0; height: 68px; display: none; align-items: center; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--top); }
.job-timeline.is-visible { display: flex; }.job-timeline__title { min-width: 180px; display: grid; }.job-timeline__title strong { font-size: 13px; }.job-timeline__title span { color: var(--muted); font-size: 10px; }.progress-track { flex: 1; height: 9px; overflow: hidden; border-radius: 5px; background: var(--panel-2); }.progress-track i { display: block; width: var(--progress,0%); height: 100%; border-radius: inherit; background: var(--blue); transition: width .4s; }.job-timeline__percent { width: 52px; font-size: 14px; font-weight: 800; text-align: right; }

.center-workspace .workspace-scroll { display: flex; flex-direction: column; gap: 14px; }.center-hero { flex: 0 0 138px; padding: 18px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 20px; background: var(--panel-2); }.center-hero .workspace-title p { max-width: 650px; }.center-filter { padding: 14px 18px; display: grid; grid-template-columns: 1.3fr repeat(4, .65fr); gap: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-2); }.center-content { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 14px; }.center-results, .center-detail { min-height: 0; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel-2); }.center-result { width: 100%; height: 118px; margin-bottom: 10px; padding: 12px; display: grid; grid-template-columns: 164px 1fr 88px; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--text); cursor: pointer; text-align: left; }.center-result.is-selected { border-color: var(--blue); background: var(--selected); }.center-result .media-thumb { height: 92px; border: 1px solid var(--line); border-radius: 14px; }.center-result__copy { min-width: 0; }.center-result__copy strong, .center-result__copy p, .center-result__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.center-result__copy strong { font-size: 16px; }.center-result__copy span, .center-result__copy small { color: var(--muted); font-size: 12px; }.center-result__copy p { margin: 7px 0; font-size: 13px; }.center-result__copy footer { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }.center-result__state { width: 82px; padding: 7px; border-radius: 9px; background: var(--card); color: var(--text); font-size: 11px; text-align: center; }.center-detail h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.35; }.center-detail .inspector-preview { height: 210px; }.center-detail__meta { margin: 10px 0; color: var(--muted); font-size: 12px; }.center-detail__actions { display: flex; flex-wrap: wrap; gap: 8px; }.analysis-card { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }.analysis-card h3 { margin: 0 0 8px; font-size: 14px; }.analysis-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }.keyword-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }.keyword-list span { padding: 4px 8px; border-radius: 7px; background: var(--card); color: var(--muted); font-size: 10px; }

.jobs-layout { height: calc(100% - 68px); display: grid; grid-template-columns: minmax(0,1fr) 330px; }.jobs-main { overflow: auto; padding: 20px; }.batch-panel { height: 182px; padding: 18px; }.batch-panel__head { display: flex; align-items: center; }.batch-panel h2 { margin: 0; font-size: 18px; }.batch-panel p { margin: 4px 0; color: var(--muted); font-size: 13px; }.batch-percent { margin-left: auto; width: 112px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 20px; font-weight: 900; }.batch-panel .progress-track { width: 100%; margin: 12px 0; }.batch-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }.batch-stats span { height: 52px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--muted); font-size: 10px; }.batch-stats strong { display: block; color: var(--text); font-size: 15px; }.job-list { margin-top: 14px; }.job-row { min-height: 80px; margin-bottom: 10px; padding: 14px; display: grid; grid-template-columns: 1fr 110px 70px; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); }.job-row strong { display: block; font-size: 14px; }.job-row p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }.job-state { color: var(--blue); font-size: 12px; text-align: center; }.job-percent { font-size: 15px; font-weight: 800; text-align: right; }.job-inspector { padding: 18px; border-left: 1px solid var(--line); background: var(--panel); }.job-inspector h2 { margin: 0; font-size: 18px; }.job-inspector p { color: var(--muted); font-size: 12px; line-height: 1.7; }

.report-layout { height: 100%; display: grid; grid-template-columns: 420px 1fr; gap: 14px; padding: 20px; }.report-form, .report-preview { overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel-2); }.report-form h1, .report-preview h2 { margin: 0; font-size: 28px; }.report-form p { color: var(--muted); font-size: 12px; }.report-fields { display: grid; gap: 10px; margin-top: 18px; }.report-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }.report-preview__toolbar { display: flex; align-items: center; gap: 8px; }.report-preview__toolbar h2 { flex: 1; font-size: 20px; }.paper { width: 560px; min-height: 720px; margin: 18px auto; padding: 54px; background: #fff; color: #172033; box-shadow: 0 16px 40px rgba(0,0,0,.28); }.paper h1 { margin: 80px 0 12px; font-size: 38px; }.paper p { color: #64748b; }.paper-rule { height: 4px; margin: 28px 0; background: #2563eb; }.paper-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 40px; }.paper-grid span { padding: 16px; background: #eef2f7; text-align: center; }.paper-grid strong { display: block; font-size: 20px; }

.feedback-layout { height: 100%; display: grid; grid-template-columns: 280px 1fr; }.conversation-list { padding: 18px; border-right: 1px solid var(--line); background: var(--panel); }.conversation-list h1 { margin: 0 0 18px; font-size: 22px; }.conversation-card { padding: 14px; border: 1px solid var(--selected-line); border-radius: 14px; background: var(--selected); }.conversation-card strong { font-size: 14px; }.conversation-card p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }.chat-panel { display: flex; flex-direction: column; }.chat-header { height: 64px; padding: 14px 18px; border-bottom: 1px solid var(--line); }.chat-header strong { display: block; }.chat-header span { color: var(--green); font-size: 11px; }.messages { flex: 1; overflow: auto; padding: 28px; }.message { max-width: 70%; margin-bottom: 16px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); font-size: 13px; }.message.is-user { margin-left: auto; background: color-mix(in srgb, var(--card) 70%, var(--blue)); }.message small { display: block; margin-top: 5px; color: var(--muted); }.chat-compose { padding: 14px 18px; display: flex; gap: 10px; border-top: 1px solid var(--line); background: var(--panel); }.chat-compose input { flex: 1; }

.empty-state { height: 100%; display: grid; place-items: center; text-align: center; }.empty-state div { max-width: 520px; }.empty-state h1 { margin: 0; font-size: 24px; }.empty-state p { color: var(--muted); font-size: 13px; }
.demo-watermark { position: absolute; z-index: 25; left: 18px; bottom: 10px; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--muted); font-size: 9px; pointer-events: none; }.demo-watermark span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.toast { position: absolute; z-index: 80; right: 22px; bottom: 24px; max-width: 420px; padding: 13px 16px; border: 1px solid var(--selected-line); border-radius: 12px; background: var(--card); color: var(--text); box-shadow: 0 18px 42px rgba(0,0,0,.28); font-size: 12px; }

.dialog-layer { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; }.dialog-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(12px); }.settings-dialog { position: relative; width: 900px; height: 790px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: 0 36px 100px rgba(0,0,0,.46); }.settings-dialog > header { height: 94px; padding: 18px 22px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }.settings-dialog > header > div:first-child { flex: 1; }.settings-dialog > header > div:last-child { display: flex; gap: 8px; }.settings-dialog h2 { margin: 0; font-size: 24px; }.settings-dialog header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }.settings-scroll { height: calc(100% - 94px); overflow: auto; padding: 18px; }.settings-section { margin-bottom: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-2); }.settings-section h3 { margin: 0 0 14px; font-size: 17px; }.setting-row { display: flex; align-items: center; gap: 18px; }.setting-row > div:first-child { flex: 1; display: grid; }.setting-row strong { font-size: 13px; }.setting-row span { color: var(--muted); font-size: 11px; }.switch { width: 46px; height: 26px; padding: 3px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); cursor: pointer; }.switch i { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--weak); transition: transform .2s; }.switch.is-on { background: var(--blue); }.switch.is-on i { transform: translateX(18px); background: #fff; }.setting-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }.setting-grid--three { grid-template-columns: repeat(3,1fr); }.setting-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }.theme-options { display: flex; gap: 8px; }.theme-options button { min-width: 80px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); cursor: pointer; }.theme-options button.is-active { border-color: var(--blue); background: var(--selected); }.setting-note { margin-top: 14px; padding: 11px; border-radius: 10px; background: var(--bg); color: var(--muted); font-size: 11px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }