:root { color-scheme: light; --ink:#17202a; --muted:#6b7280; --line:#d9dee5; --paper:#f6f7f9; --white:#fff; --accent:#0f766e; --accent-dark:#115e59; --danger:#b42318; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:14px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; }
button, input, textarea, select { font:inherit; }
button { cursor:pointer; }
.shell { max-width:1260px; margin:0 auto; padding:28px 22px 36px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:20px; }
.topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.settings-panel { padding:14px 16px; margin-bottom:18px; }
.settings-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.settings-panel > label { margin:0; }
.settings-actions { display:flex; align-items:end; justify-content:flex-end; gap:8px; margin-top:10px; flex-wrap:wrap; }
.auth-inline { display:flex; align-items:center; gap:8px; margin:0; font-size:12px; font-weight:600; }
.auth-inline input { width:220px; padding:7px 8px; }
.settings-note { margin-top:8px; font-size:12px; }
.settings-message { margin-top:8px; padding:8px 10px; border:1px solid #b9dfd8; background:#f0fbf9; color:var(--accent-dark); font-size:12px; overflow-wrap:anywhere; }
.settings-message.fail { border-color:#efb4ad; background:#fff5f3; color:var(--danger); }
h1,h2,p { margin:0; } h1 { font-size:28px; letter-spacing:0; } h2 { font-size:18px; letter-spacing:0; }
.muted { color:var(--muted); } .eyebrow { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:1.4px; margin-bottom:5px; }
.status { border:1px solid var(--line); background:var(--white); padding:8px 12px; font-size:12px; }
.status.ok { color:var(--accent-dark); border-color:#9ed7cf; background:#f0fbf9; }
.setup-area { display:block; }
.setup-area.collapsed { display:none; }
.panel { background:var(--white); border:1px solid var(--line); border-radius:7px; box-shadow:0 2px 10px #16202a0a; }
.keybar { display:flex; flex-direction:column; align-items:stretch; gap:9px; padding:12px; margin-bottom:18px; } .key-row { display:flex; align-items:center; gap:10px; } .key-row label { font-weight:600; white-space:nowrap; min-width:112px; margin:0; } .key-row input { flex:1; min-width:0; }
.diagnostic { display:grid; grid-template-columns:minmax(180px,auto) auto minmax(0,1fr); align-items:center; gap:14px; padding:12px; margin-bottom:18px; }
.diagnostic h2 { font-size:16px; }
.diagnostic-actions { display:flex; gap:8px; flex-wrap:wrap; }
.diagnostic-results { min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; }
.diagnostic-results.ok { color:var(--accent-dark); }
.diagnostic-results.fail { color:var(--danger); }
.diagnostic-options { grid-column:1/-1; display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap; padding-top:9px; border-top:1px solid var(--line); } .diagnostic-options label { display:flex; align-items:center; gap:6px; margin:0; font-size:12px; font-weight:600; cursor:pointer; } .diagnostic-options input { width:16px; height:16px; margin:0; padding:0; accent-color:var(--accent); }
.assistant-panel { padding:14px 16px; margin-bottom:18px; }
input, textarea, select { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:5px; padding:9px 10px; outline:none; }
input:focus, textarea:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px #0f766e18; }
#apiKey { flex:1; min-width:0; }
.button { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:5px; padding:9px 14px; font-weight:600; }
.button:hover { border-color:#9aa5b1; } .button.primary { background:var(--accent); border-color:var(--accent); color:#fff; } .button.primary:hover { background:var(--accent-dark); }
.button.ghost { background:transparent; } .button.small { padding:5px 9px; font-size:12px; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.tab { border:0; background:transparent; color:var(--muted); padding:10px 15px; border-bottom:2px solid transparent; font-weight:600; }
.tab.active { color:var(--accent-dark); border-bottom-color:var(--accent); }
.workspace { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:18px; align-items:start; }
.form-panel, .results-panel { padding:18px; } .form-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px; }
.model-chip { border:1px solid #bfe5df; color:var(--accent-dark); background:#f2fbf9; padding:5px 8px; font-size:12px; white-space:nowrap; }
label { display:grid; gap:6px; font-weight:600; margin-bottom:14px; } textarea { width:100%; resize:vertical; min-height:150px; font-weight:400; }
.field-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .field-grid label { margin:0; }
.local-prompt-notice { color:#44505c; background:#f2fbf9; border:1px solid #caebe6; border-radius:5px; padding:9px 10px; margin-bottom:14px; font-size:13px; }
.size-note { display:grid; gap:3px; color:var(--accent-dark); background:#f2fbf9; border:1px solid #caebe6; border-radius:5px; padding:8px 10px; margin:14px 0; font-size:13px; }
.four-k-note { color:#44505c; font-size:12px; }
.upload-area { border:1px dashed #aeb8c3; padding:12px; margin:14px 0; } .upload-button { display:inline-flex; width:max-content; background:#f6f8fa; border:1px solid var(--line); padding:8px 11px; border-radius:5px; cursor:pointer; margin:0 10px 6px 0; } .upload-button input { display:none; }
.thumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .thumbs img { width:68px; height:68px; object-fit:cover; border:1px solid var(--line); border-radius:4px; }
.panel-inset { background:#f8fafb; border:1px solid var(--line); padding:11px; margin-top:16px; color:#44505c; min-height:44px; }
.error-message { margin-top:10px; padding:10px 11px; border:1px solid #efb4ad; border-radius:5px; background:#fff5f3; color:var(--danger); overflow-wrap:anywhere; }
.review strong { color:var(--ink); } .submit { width:100%; margin-top:14px; position:sticky; bottom:12px; z-index:4; box-shadow:0 4px 14px #16202a24; }
.result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; min-height:420px; } .result-card { position:relative; border:1px solid var(--line); background:#fbfcfd; } .result-card img { display:block; width:100%; aspect-ratio:1/1; object-fit:contain; background:#eef1f4; } .result-card a { display:block; padding:8px 9px; color:var(--accent-dark); text-decoration:none; overflow-wrap:anywhere; } .result-select { position:absolute; z-index:1; top:6px; left:6px; display:flex; align-items:center; gap:4px; margin:0; padding:4px 6px; background:#fffffff0; border:1px solid var(--line); border-radius:4px; font-size:11px; font-weight:600; } .result-select input { width:14px; height:14px; margin:0; padding:0; accent-color:var(--accent); }
.empty-state { grid-column:1/-1; display:grid; place-items:center; color:var(--muted); border:1px dashed var(--line); min-height:230px; }
.progress-area { margin:-5px 0 14px; } .progress-note { color:#44505c; font-size:12px; margin-bottom:5px; } .progress { height:8px; background:#e6ebef; border-radius:4px; overflow:hidden; } .progress span { display:block; height:100%; width:0; background:var(--accent); transition:width .35s ease; } .progress-percent { color:var(--accent-dark); text-align:right; font-size:12px; font-variant-numeric:tabular-nums; margin-top:3px; } .job-status { min-height:20px; margin-top:5px; color:#44505c; font-size:12px; overflow-wrap:anywhere; } .result-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.history-area { margin-top:18px; border-top:1px solid var(--line); padding-top:12px; } .history-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; } .history-heading h3 { margin:0; font-size:14px; } .history-list { display:grid; gap:8px; max-height:430px; overflow:auto; } .history-item { border:1px solid var(--line); background:#fbfcfd; padding:9px; font-size:12px; } .history-item p { margin:5px 0; color:#44505c; overflow-wrap:anywhere; } .history-images { display:flex; gap:6px; overflow:auto; } .history-images img { display:block; width:58px; height:58px; object-fit:cover; border:1px solid var(--line); border-radius:3px; }
.local-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#44505c; margin-bottom:8px; font-size:13px; } .tool-segments { display:flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:5px; overflow:hidden; } .tool-button { border:0; border-right:1px solid var(--line); background:#fff; color:var(--muted); min-width:58px; padding:7px 10px; font-weight:600; } .tool-button:last-child { border-right:0; } .tool-button.active { background:var(--accent); color:#fff; } .local-actions { display:flex; gap:6px; } .canvas-wrap { position:relative; width:100%; background:#e9edf1; border:1px solid var(--line); overflow:hidden; } #annotationCanvas { display:block; width:100%; height:auto; max-height:520px; object-fit:contain; cursor:crosshair; touch-action:none; } .empty-canvas { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); pointer-events:none; min-height:180px; } .local-note { margin-top:8px; font-size:12px; }
.range-field { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:9px; margin:10px 0 0; font-size:12px; } .range-field input { width:100%; padding:0; accent-color:var(--accent); }
.region-list { display:grid; gap:7px; margin-top:10px; } .empty-regions { border:1px dashed var(--line); color:var(--muted); padding:10px; text-align:center; font-size:12px; } .region-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; border:1px solid var(--line); background:#f8fafb; padding:7px; } .region-item.selected { border-color:#72b9b1; box-shadow:0 0 0 2px #0f766e12; } .region-number { display:grid; place-items:center; width:26px; height:26px; color:#fff; border-radius:50%; font-weight:700; font-size:12px; } .region-prompt { width:100%; min-width:0; padding:7px 8px; } .region-remove { width:30px; height:30px; padding:0; font-size:18px; line-height:1; }
.prompt-assistant { margin:0 0 12px; } .assistant-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:7px; } .assistant-heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; } .prompt-assistant textarea { min-height:82px; margin-bottom:8px; } .assistant-controls { display:flex; align-items:end; justify-content:flex-end; gap:8px; margin-top:10px; } .assistant-controls label { display:flex; align-items:center; gap:7px; margin:0; font-size:12px; font-weight:600; } .assistant-controls select { width:220px; padding:7px 8px; } .assistant-skill-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:9px; } .skill-toggle { display:inline-flex; align-items:center; gap:6px; width:max-content; margin:0; font-size:12px; font-weight:600; } .skill-toggle input { accent-color:var(--accent); } .skill-upload { display:inline-flex; width:max-content; background:#f6f8fa; border:1px solid var(--line); padding:7px 10px; border-radius:5px; cursor:pointer; margin:0; font-size:12px; font-weight:600; } .skill-upload input { display:none; } .assistant-skill-note { margin-top:5px; font-size:12px; } .assistant-output { margin-top:12px; } .assistant-output > label { display:block; margin-bottom:6px; font-size:12px; } .assistant-output textarea { min-height:130px; background:#fbfcfd; } .assistant-output-actions { display:flex; justify-content:flex-end; margin-top:6px; } .assistant-reply { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:12px; } .assistant-reply.fail { color:var(--danger); }
.hidden { display:none !important; } .footer { margin-top:18px; text-align:center; font-size:12px; }
@media (max-width:860px) { .workspace { grid-template-columns:1fr; } .result-grid { min-height:220px; } }
@media (max-width:560px) { .shell { padding:18px 12px 26px; } .topbar, .keybar, .diagnostic { align-items:stretch; flex-direction:column; } .topbar-actions { justify-content:space-between; } .key-row { align-items:stretch; flex-direction:column; } .key-row label { min-width:0; } .field-grid { grid-template-columns:1fr; } .tabs { overflow:auto; } .tab { white-space:nowrap; padding-inline:11px; } }
@media (max-width:560px) { .workspace, .form-panel, .results-panel, .form-heading { min-width:0; } .form-heading { flex-wrap:wrap; } .model-chip { white-space:normal; } input, textarea, select, .button { max-width:100%; } .keybar > * { width:100%; } }
@media (max-width:560px) { .local-toolbar { align-items:stretch; flex-direction:column; } .tool-segments { width:100%; } .tool-button { flex:1; min-width:52px; padding-inline:6px; } .local-actions .button { flex:1; } .region-item { grid-template-columns:auto minmax(0,1fr) auto; } .assistant-heading, .assistant-heading-actions { align-items:stretch; flex-direction:column; } .assistant-heading-actions { align-items:flex-end; } .assistant-controls { align-items:stretch; flex-direction:column; } .assistant-controls label { align-items:stretch; flex-direction:column; } .assistant-controls select { width:100%; } .settings-heading { align-items:stretch; flex-direction:column; } .settings-actions { align-items:stretch; flex-direction:column; } .auth-inline { align-items:stretch; flex-direction:column; } .auth-inline input { width:100%; } }