| |
| :root { |
| --paper: #f5f1eb; |
| --paper-deep: #efe9de; |
| --paper-sunk: #e8e0d0; |
| --ink: #2b1d14; |
| --ink-muted: #5f4d41; |
| --ink-faint: #8a7868; |
| --accent: #cc785c; |
| --accent-hover: #b8684f; |
| --accent-soft: #f4e4d6; |
| --line: rgba(43, 29, 20, 0.10); |
| --line-strong: rgba(43, 29, 20, 0.18); |
| --line-faint: rgba(43, 29, 20, 0.05); |
| --success: #45624f; |
| --warning: #a4643f; |
| --error: #a04740; |
| --shadow-soft: 0 1px 0 rgba(43, 29, 20, 0.04), 0 1px 2px rgba(43, 29, 20, 0.04); |
| --shadow-panel: 0 1px 0 rgba(43, 29, 20, 0.04), 0 8px 24px rgba(43, 29, 20, 0.06); |
|
|
| --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; |
| --font-display: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; |
| --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; |
|
|
| --r-xs: 4px; |
| --r-sm: 6px; |
| --r-md: 10px; |
| --r-lg: 14px; |
| --r-pill: 999px; |
| } |
|
|
| * { box-sizing: border-box; } |
| html, body { margin: 0; padding: 0; } |
| html { font-size: 14px; } |
| body { |
| min-height: 100vh; |
| color: var(--ink); |
| background: var(--paper); |
| font-family: var(--font-sans); |
| font-feature-settings: "ss01", "cv11"; |
| font-variant-numeric: tabular-nums; |
| line-height: 1.55; |
| -webkit-font-smoothing: antialiased; |
| text-rendering: optimizeLegibility; |
| } |
| button { cursor: pointer; font: inherit; color: inherit; background: none; border: 0; padding: 0; } |
| input, select, textarea { font: inherit; color: inherit; } |
| :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } |
|
|
| |
| .app { |
| display: grid; |
| grid-template-rows: 44px 1fr 28px; |
| height: 100vh; |
| width: 100vw; |
| background: |
| linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%); |
| } |
|
|
| |
| .topbar { |
| display: grid; |
| grid-template-columns: 280px 1fr auto; |
| align-items: center; |
| border-bottom: 1px solid var(--line); |
| background: rgba(245, 241, 235, 0.85); |
| backdrop-filter: saturate(140%) blur(8px); |
| position: relative; |
| z-index: 10; |
| } |
| .topbar-brand { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 0 16px; |
| border-right: 1px solid var(--line); |
| height: 100%; |
| } |
| .brand-mark { |
| width: 22px; height: 22px; |
| border-radius: var(--r-xs); |
| background: var(--ink); |
| display: grid; place-items: center; |
| color: var(--paper); |
| font-family: var(--font-display); |
| font-weight: 700; |
| font-size: 13px; |
| letter-spacing: -0.02em; |
| } |
| .brand-title { |
| font-family: var(--font-display); |
| font-size: 13px; |
| font-weight: 600; |
| letter-spacing: -0.005em; |
| } |
| .brand-sub { |
| font-family: var(--font-mono); |
| font-size: 10.5px; |
| color: var(--ink-faint); |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| margin-left: auto; |
| } |
| .view-tabs { |
| display: flex; |
| align-items: stretch; |
| height: 100%; |
| padding-left: 4px; |
| } |
| .view-tab { |
| position: relative; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 0 14px; |
| height: 100%; |
| font-size: 12.5px; |
| color: var(--ink-muted); |
| border-right: 1px solid var(--line-faint); |
| transition: color 120ms ease, background 120ms ease; |
| } |
| .view-tab:hover { color: var(--ink); background: rgba(43,29,20,0.025); } |
| .view-tab.is-active { |
| color: var(--ink); |
| background: var(--paper); |
| } |
| .view-tab.is-active::after { |
| content: ""; |
| position: absolute; |
| left: 0; right: 0; bottom: -1px; |
| height: 2px; |
| background: var(--accent); |
| } |
| .view-tab-num { |
| font-family: var(--font-mono); |
| font-size: 10px; |
| color: var(--ink-faint); |
| letter-spacing: 0.04em; |
| } |
| .view-tab.is-active .view-tab-num { color: var(--accent); } |
| .topbar-right { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 0 14px; |
| height: 100%; |
| } |
|
|
| |
| .statusbar { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| padding: 0 14px; |
| font-family: var(--font-mono); |
| font-size: 10.5px; |
| color: var(--ink-faint); |
| border-top: 1px solid var(--line); |
| background: var(--paper-deep); |
| letter-spacing: 0.02em; |
| } |
| .statusbar-item { display: flex; align-items: center; gap: 6px; } |
| .statusbar-item strong { color: var(--ink-muted); font-weight: 500; } |
| .statusbar-spacer { flex: 1; } |
| .status-dot { |
| width: 6px; height: 6px; border-radius: 50%; |
| background: var(--success); |
| } |
| .status-dot.warn { background: var(--warning); } |
| .status-dot.err { background: var(--error); } |
| .status-dot.idle { background: var(--ink-faint); } |
|
|
| |
| .workspace { |
| display: grid; |
| grid-template-columns: 280px 1fr 380px; |
| min-height: 0; |
| overflow: hidden; |
| } |
| .workspace.no-inspector { grid-template-columns: 280px 1fr; } |
|
|
| |
| .pane { |
| display: flex; |
| flex-direction: column; |
| min-height: 0; |
| background: var(--paper); |
| } |
| .pane + .pane { border-left: 1px solid var(--line); } |
| .pane-head { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 8px; |
| padding: 10px 14px; |
| border-bottom: 1px solid var(--line); |
| min-height: 38px; |
| background: rgba(255,255,255,0.35); |
| } |
| .pane-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; } |
| .pane-kicker { |
| font-family: var(--font-mono); |
| font-size: 10px; |
| color: var(--ink-faint); |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| } |
| .pane-title { |
| font-family: var(--font-display); |
| font-size: 13px; |
| font-weight: 600; |
| letter-spacing: -0.005em; |
| color: var(--ink); |
| } |
| .pane-body { |
| flex: 1; |
| min-height: 0; |
| overflow: auto; |
| position: relative; |
| } |
| .pane-body.dotted { |
| background-image: radial-gradient(rgba(43,29,20,0.06) 1px, transparent 1px); |
| background-size: 14px 14px; |
| background-position: 0 0; |
| } |
|
|
| |
| .btn { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| height: 28px; |
| padding: 0 10px; |
| border: 1px solid var(--line-strong); |
| border-radius: var(--r-sm); |
| background: var(--paper); |
| font-size: 12px; |
| color: var(--ink); |
| white-space: nowrap; |
| transition: background 120ms, border-color 120ms, color 120ms; |
| } |
| .btn:hover { background: var(--paper-deep); border-color: var(--ink-muted); } |
| .btn.btn-primary { |
| background: var(--ink); |
| color: var(--paper); |
| border-color: var(--ink); |
| } |
| .btn.btn-primary:hover { background: #1a110a; } |
| .btn.btn-accent { |
| background: var(--accent); |
| color: #fff; |
| border-color: var(--accent); |
| } |
| .btn.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); } |
| .btn.btn-danger { |
| background: var(--error); |
| color: #fff; |
| border-color: var(--error); |
| } |
| .btn.btn-stop-analysis { |
| height: 30px; |
| padding: 0 14px; |
| background: #a7342d; |
| color: #fff; |
| border-color: #7f211b; |
| font-size: 12.5px; |
| font-weight: 700; |
| box-shadow: 0 0 0 3px rgba(167, 52, 45, 0.16), 0 8px 18px rgba(167, 52, 45, 0.24); |
| } |
| .btn.btn-stop-analysis:hover { |
| background: #85231d; |
| border-color: #651712; |
| } |
| .btn.btn-stop-analysis svg { |
| width: 12px; |
| height: 12px; |
| } |
| .btn.btn-clear-queue { |
| color: var(--error); |
| } |
| .btn.btn-clear-queue:hover { |
| background: rgba(160,71,64,0.08); |
| border-color: rgba(160,71,64,0.24); |
| color: var(--error); |
| } |
| .btn.btn-ghost { |
| border-color: transparent; |
| background: transparent; |
| color: var(--ink-muted); |
| } |
| .btn.btn-ghost:hover { background: rgba(43,29,20,0.06); color: var(--ink); } |
| .btn.btn-sm { height: 24px; padding: 0 8px; font-size: 11.5px; } |
| .btn.btn-lg { height: 32px; padding: 0 12px; font-size: 13px; } |
| .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } |
| .btn .kbd { |
| font-family: var(--font-mono); |
| font-size: 10px; |
| color: var(--ink-faint); |
| border: 1px solid var(--line); |
| border-radius: 3px; |
| padding: 0 4px; |
| margin-left: 4px; |
| background: var(--paper-deep); |
| } |
| .btn-primary .kbd { color: rgba(245,241,235,0.7); border-color: rgba(245,241,235,0.2); background: rgba(245,241,235,0.08); } |
|
|
| .input, .select, .textarea { |
| width: 100%; |
| border: 1px solid var(--line-strong); |
| background: var(--paper); |
| border-radius: var(--r-sm); |
| padding: 7px 10px; |
| font-size: 12.5px; |
| color: var(--ink); |
| transition: border-color 120ms, background 120ms; |
| } |
| .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); outline: none; background: #fff; } |
| .textarea { resize: vertical; line-height: 1.55; font-family: var(--font-mono); font-size: 12px; } |
|
|
| .field-label { |
| display: block; |
| font-family: var(--font-mono); |
| font-size: 10px; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--ink-faint); |
| margin-bottom: 6px; |
| } |
|
|
| |
| .queue-search { |
| position: relative; |
| padding: 10px 12px; |
| border-bottom: 1px solid var(--line); |
| } |
| .queue-search .input { padding-left: 28px; height: 28px; font-size: 12px; } |
| .queue-search-icon { |
| position: absolute; left: 22px; top: 50%; transform: translateY(-50%); |
| width: 12px; height: 12px; color: var(--ink-faint); |
| } |
| .queue-stats { |
| display: flex; |
| gap: 0; |
| border-bottom: 1px solid var(--line); |
| background: var(--paper-deep); |
| } |
| .queue-stat { |
| flex: 1; |
| padding: 8px 12px; |
| border-right: 1px solid var(--line-faint); |
| } |
| .queue-stat:last-child { border-right: 0; } |
| .queue-stat-num { |
| font-family: var(--font-display); |
| font-size: 18px; |
| font-weight: 600; |
| letter-spacing: -0.02em; |
| line-height: 1; |
| } |
| .queue-stat-num.accent { color: var(--accent); } |
| .queue-stat-num.success { color: var(--success); } |
| .queue-stat-num.error { color: var(--error); } |
| .queue-stat-label { |
| font-family: var(--font-mono); |
| font-size: 9.5px; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--ink-faint); |
| margin-top: 4px; |
| } |
| .queue-list { list-style: none; margin: 0; padding: 0; } |
| .queue-item { |
| display: grid; |
| grid-template-columns: 28px 1fr; |
| gap: 8px; |
| padding: 10px 12px 10px 10px; |
| border-bottom: 1px solid var(--line-faint); |
| cursor: pointer; |
| transition: background 120ms; |
| align-items: start; |
| } |
| .queue-item:hover { background: rgba(43,29,20,0.025); } |
| .queue-item.is-active { |
| background: var(--accent-soft); |
| } |
| .queue-item.is-active::before { |
| content: ""; |
| position: absolute; |
| left: 0; top: 0; bottom: 0; width: 2px; |
| background: var(--accent); |
| } |
| .queue-item { position: relative; } |
| .queue-idx { |
| font-family: var(--font-mono); |
| font-size: 10px; |
| color: var(--ink-faint); |
| padding-top: 2px; |
| letter-spacing: 0.04em; |
| } |
| .queue-item.is-active .queue-idx { color: var(--accent); } |
| .queue-text { |
| font-size: 12.5px; |
| line-height: 1.45; |
| color: var(--ink); |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
| .queue-meta { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| margin-top: 6px; |
| font-family: var(--font-mono); |
| font-size: 10px; |
| color: var(--ink-faint); |
| } |
|
|
| |
| .pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 5px; |
| height: 18px; |
| padding: 0 7px; |
| border-radius: 3px; |
| font-family: var(--font-mono); |
| font-size: 10px; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| background: var(--paper-deep); |
| color: var(--ink-muted); |
| border: 1px solid var(--line); |
| } |
| .pill.idle { background: var(--paper-deep); color: var(--ink-faint); } |
| .pill.queued { background: rgba(204,120,92,0.08); color: var(--accent); border-color: rgba(204,120,92,0.2); } |
| .pill.running { background: rgba(204,120,92,0.14); color: var(--accent); border-color: rgba(204,120,92,0.3); } |
| .pill.running .pill-dot { animation: pulse 1.2s ease-in-out infinite; } |
| .pill.done { background: rgba(69,98,79,0.1); color: var(--success); border-color: rgba(69,98,79,0.2); } |
| .pill.failed { background: rgba(160,71,64,0.1); color: var(--error); border-color: rgba(160,71,64,0.2); } |
| .pill.stopped { background: rgba(138,120,104,0.14); color: var(--ink-faint); border-color: rgba(138,120,104,0.24); } |
| .pill-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } |
|
|
| @keyframes pulse { |
| 0%, 100% { opacity: 1; transform: scale(1); } |
| 50% { opacity: 0.4; transform: scale(0.8); } |
| } |
|
|
| |
| .empty { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| height: 100%; |
| padding: 32px; |
| color: var(--ink-faint); |
| } |
| .empty-mark { |
| width: 32px; height: 32px; |
| border: 1px dashed var(--line-strong); |
| border-radius: var(--r-md); |
| margin-bottom: 14px; |
| display: grid; place-items: center; |
| color: var(--ink-faint); |
| } |
| .empty-title { font-family: var(--font-display); font-size: 14px; color: var(--ink-muted); font-weight: 600; margin-bottom: 4px; } |
| .empty-text { font-size: 12px; color: var(--ink-faint); max-width: 280px; line-height: 1.6; } |
|
|
| |
| .modes-rail { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 0; |
| border-bottom: 1px solid var(--line); |
| background: var(--paper-deep); |
| } |
| .mode-tab { |
| display: grid; |
| grid-template-columns: auto 1fr; |
| gap: 10px; |
| align-items: start; |
| padding: 14px 16px; |
| text-align: left; |
| border-right: 1px solid var(--line-faint); |
| position: relative; |
| cursor: pointer; |
| transition: background 120ms; |
| } |
| .mode-tab:last-child { border-right: 0; } |
| .mode-tab:hover { background: rgba(43,29,20,0.025); } |
| .mode-tab.is-active { |
| background: var(--paper); |
| } |
| .mode-tab.is-active::after { |
| content: ""; |
| position: absolute; |
| left: 0; right: 0; bottom: -1px; |
| height: 2px; |
| background: var(--accent); |
| } |
| .mode-tab-num { |
| font-family: var(--font-mono); |
| font-size: 11px; |
| color: var(--ink-faint); |
| letter-spacing: 0.04em; |
| padding-top: 1px; |
| } |
| .mode-tab.is-active .mode-tab-num { color: var(--accent); } |
| .mode-tab-title { |
| font-family: var(--font-display); |
| font-size: 13px; |
| font-weight: 600; |
| letter-spacing: -0.005em; |
| color: var(--ink); |
| margin-bottom: 2px; |
| } |
| .mode-tab-desc { |
| font-size: 11.5px; |
| color: var(--ink-faint); |
| line-height: 1.45; |
| } |
|
|
| .import-stage { |
| padding: 18px; |
| display: grid; |
| gap: 16px; |
| } |
| .import-stage-grid { |
| display: grid; |
| grid-template-columns: 1fr 220px; |
| gap: 14px; |
| } |
| @media (max-width: 1280px) { .import-stage-grid { grid-template-columns: 1fr; } } |
|
|
| .scene-card { |
| background: var(--paper); |
| border: 1px solid var(--line); |
| border-radius: var(--r-md); |
| padding: 14px; |
| } |
| .scene-card.flat { background: var(--paper-deep); } |
|
|
| .split-fields { display: flex; flex-direction: column; gap: 12px; } |
|
|
| .radio-stack { display: flex; flex-direction: column; gap: 6px; } |
| .radio-row { |
| display: flex; align-items: center; gap: 8px; |
| padding: 8px 10px; |
| border: 1px solid var(--line); |
| border-radius: var(--r-sm); |
| background: var(--paper); |
| cursor: pointer; |
| transition: border-color 120ms; |
| font-size: 12.5px; |
| } |
| .radio-row:hover { border-color: var(--ink-muted); } |
| .radio-row.is-checked { border-color: var(--accent); background: var(--accent-soft); } |
| .radio-row input { accent-color: var(--accent); } |
|
|
| .upload-drop { |
| border: 1.5px dashed var(--line-strong); |
| border-radius: var(--r-md); |
| padding: 32px 20px; |
| text-align: center; |
| background: var(--paper-deep); |
| cursor: pointer; |
| transition: border-color 120ms, background 120ms; |
| } |
| .upload-drop:hover, .upload-drop.is-drag { |
| border-color: var(--accent); |
| background: var(--accent-soft); |
| } |
| .upload-title { font-family: var(--font-display); font-weight: 600; font-size: 13px; margin-bottom: 4px; } |
| .upload-hint { font-size: 11.5px; color: var(--ink-faint); } |
| .upload-hint code { font-family: var(--font-mono); font-size: 11px; padding: 1px 4px; background: var(--paper); border-radius: 3px; } |
|
|
| |
| .preview-frame { |
| border: 1px solid var(--line); |
| border-radius: var(--r-md); |
| overflow: hidden; |
| background: var(--paper); |
| } |
| .preview-frame-head { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 8px 12px; |
| background: var(--paper-deep); |
| border-bottom: 1px solid var(--line); |
| font-family: var(--font-mono); |
| font-size: 10.5px; |
| color: var(--ink-faint); |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| } |
| .ptable { width: 100%; border-collapse: collapse; font-size: 12px; } |
| .ptable th, .ptable td { |
| text-align: left; |
| padding: 8px 12px; |
| border-bottom: 1px solid var(--line-faint); |
| vertical-align: top; |
| } |
| .ptable th { |
| font-family: var(--font-mono); |
| font-size: 10.5px; |
| font-weight: 500; |
| color: var(--ink-faint); |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| background: var(--paper-deep); |
| } |
| .ptable td.col-task { font-weight: 500; } |
| .ptable td.col-mark { background: rgba(204,120,92,0.06); } |
|
|
| |
| .detail-stack { |
| padding: 18px; |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| } |
| .detail-section { |
| border: 1px solid var(--line); |
| border-radius: var(--r-md); |
| background: var(--paper); |
| overflow: hidden; |
| } |
| .detail-section-head { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 10px 12px; |
| border-bottom: 1px solid var(--line); |
| background: var(--paper-deep); |
| } |
| .detail-section-title { |
| font-family: var(--font-mono); |
| font-size: 10.5px; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--ink-muted); |
| } |
| .detail-section-body { |
| padding: 12px 14px; |
| font-size: 12.5px; |
| line-height: 1.6; |
| color: var(--ink); |
| } |
| .detail-section-body.mono { font-family: var(--font-mono); font-size: 12px; line-height: 1.65; } |
| .detail-section-body p { margin: 0 0 8px; } |
| .detail-section-body p:last-child { margin-bottom: 0; } |
|
|
| .diff-line { |
| display: grid; |
| grid-template-columns: 16px 1fr; |
| gap: 6px; |
| font-family: var(--font-mono); |
| font-size: 11.5px; |
| padding: 2px 0; |
| } |
| .diff-line .diff-mark { color: var(--ink-faint); } |
| .diff-line.add { background: rgba(69,98,79,0.06); } |
| .diff-line.add .diff-mark { color: var(--success); } |
| .diff-line.del { background: rgba(160,71,64,0.05); color: var(--ink-muted); text-decoration: line-through; } |
| .diff-line.del .diff-mark { color: var(--error); } |
|
|
| .kv-grid { |
| display: grid; |
| grid-template-columns: 92px 1fr; |
| gap: 4px 12px; |
| font-size: 12px; |
| } |
| .kv-grid dt { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); padding-top: 2px; } |
| .kv-grid dd { margin: 0; } |
|
|
| |
| .iter-list { display: flex; flex-direction: column; gap: 8px; } |
| .iter-row { |
| display: grid; |
| grid-template-columns: 22px 1fr auto; |
| gap: 10px; |
| align-items: center; |
| padding: 8px 12px; |
| border: 1px solid var(--line); |
| border-radius: var(--r-sm); |
| background: var(--paper); |
| font-size: 12px; |
| } |
| .iter-row.done { background: rgba(69,98,79,0.05); border-color: rgba(69,98,79,0.18); } |
| .iter-row.running { background: var(--accent-soft); border-color: rgba(204,120,92,0.3); } |
| .iter-row.pending { opacity: 0.6; } |
| .iter-num { |
| width: 22px; height: 22px; |
| border-radius: 50%; |
| display: grid; place-items: center; |
| font-family: var(--font-mono); |
| font-size: 10px; |
| color: var(--ink-muted); |
| background: var(--paper-deep); |
| } |
| .iter-row.done .iter-num { background: var(--success); color: #fff; } |
| .iter-row.running .iter-num { background: var(--accent); color: #fff; } |
| .iter-label { font-weight: 500; } |
| .iter-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); } |
|
|
| |
| .score-gauge { |
| display: grid; |
| grid-template-columns: auto 1fr; |
| gap: 14px; |
| align-items: center; |
| padding: 14px; |
| background: var(--paper-deep); |
| border-radius: var(--r-md); |
| } |
| .score-big { |
| font-family: var(--font-display); |
| font-size: 36px; |
| font-weight: 600; |
| letter-spacing: -0.04em; |
| line-height: 1; |
| } |
| .score-big small { font-size: 18px; color: var(--ink-faint); margin-left: 2px; font-weight: 500; } |
| .score-bars { display: grid; gap: 6px; } |
| .score-bar { display: grid; grid-template-columns: 80px 1fr 28px; gap: 8px; align-items: center; font-size: 11px; } |
| .score-bar .label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; } |
| .score-bar .track { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; } |
| .score-bar .fill { height: 100%; background: var(--accent); border-radius: 2px; } |
| .score-bar .num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); text-align: right; } |
| .judge-history { |
| margin-top: 10px; |
| display: grid; |
| gap: 6px; |
| } |
| .judge-history-head, |
| .judge-history-row { |
| display: grid; |
| grid-template-columns: 72px 70px 1fr; |
| align-items: center; |
| gap: 8px; |
| } |
| .judge-history-head { |
| font-family: var(--font-mono); |
| font-size: 10.5px; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| color: var(--ink-faint); |
| } |
| .judge-history-head span:last-child { text-align: right; grid-column: 3; } |
| .judge-history-row { |
| min-height: 30px; |
| padding: 6px 10px; |
| border: 1px solid var(--line); |
| border-radius: var(--r-sm); |
| background: var(--paper-deep); |
| font-size: 12px; |
| } |
| .judge-history-row.is-best { |
| border-color: rgba(69,98,79,0.24); |
| background: rgba(69,98,79,0.06); |
| } |
| .judge-history-iter { |
| font-family: var(--font-mono); |
| font-size: 10.5px; |
| color: var(--ink-faint); |
| } |
| .judge-history-score { |
| font-family: var(--font-display); |
| font-size: 18px; |
| font-weight: 600; |
| line-height: 1; |
| } |
| .judge-history-score small { |
| margin-left: 2px; |
| font-size: 11px; |
| color: var(--ink-faint); |
| font-weight: 500; |
| } |
| .judge-history-verdict { |
| min-width: 0; |
| font-family: var(--font-mono); |
| font-size: 10.5px; |
| color: var(--ink-muted); |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| .judge-history-empty { |
| padding: 8px 10px; |
| border: 1px dashed var(--line); |
| border-radius: var(--r-sm); |
| color: var(--ink-faint); |
| font-size: 12px; |
| } |
|
|
| |
| .code-block { |
| background: var(--ink); |
| color: #f5e8d8; |
| padding: 12px 14px; |
| border-radius: var(--r-sm); |
| font-family: var(--font-mono); |
| font-size: 11.5px; |
| line-height: 1.65; |
| overflow-x: auto; |
| white-space: pre; |
| } |
| .code-block .tok-key { color: #e8a87c; } |
| .code-block .tok-str { color: #c4d6b0; } |
| .code-block .tok-num { color: #f4e4d6; } |
| .code-block .tok-cmt { color: rgba(245,232,216,0.4); } |
|
|
| |
| .group-card { |
| border: 1px solid var(--line); |
| border-radius: var(--r-md); |
| padding: 12px 14px; |
| background: var(--paper); |
| } |
| .group-card + .group-card { margin-top: 8px; } |
| .group-card-head { |
| display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; |
| } |
| .group-card-id { |
| font-family: var(--font-mono); |
| font-size: 10px; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| color: var(--accent); |
| background: var(--accent-soft); |
| padding: 1px 6px; |
| border-radius: 3px; |
| } |
| .group-card-name { font-family: var(--font-display); font-weight: 600; font-size: 13px; } |
| .group-card-desc { font-size: 12px; color: var(--ink-muted); margin-bottom: 8px; line-height: 1.55; } |
| .group-card-calls { display: flex; flex-wrap: wrap; gap: 4px; } |
| .call-chip { |
| font-family: var(--font-mono); |
| font-size: 10.5px; |
| color: var(--ink-muted); |
| background: var(--paper-deep); |
| padding: 2px 6px; |
| border-radius: 3px; |
| border: 1px solid var(--line); |
| } |
| .call-chip .verb { color: var(--accent); font-weight: 600; margin-right: 4px; } |
|
|
| .rubric-card { |
| border: 1px solid var(--line); |
| border-radius: var(--r-md); |
| padding: 12px 14px; |
| background: var(--paper); |
| } |
| .rubric-card + .rubric-card { margin-top: 8px; } |
| .rubric-card-head { |
| display: flex; align-items: center; gap: 8px; margin-bottom: 6px; |
| } |
| .rubric-card-cat { |
| font-family: var(--font-mono); |
| font-size: 10px; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| padding: 1px 6px; |
| border-radius: 3px; |
| border: 1px solid var(--line); |
| } |
| .rubric-card-cat.outcome { background: rgba(204,120,92,0.1); color: var(--accent); border-color: rgba(204,120,92,0.25); } |
| .rubric-card-cat.process { background: rgba(69,98,79,0.1); color: var(--success); border-color: rgba(69,98,79,0.25); } |
| .rubric-card-cat.state { background: rgba(43,29,20,0.06); color: var(--ink-muted); } |
| .rubric-card-weight { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin-left: auto; } |
| .rubric-card-text { font-size: 12.5px; line-height: 1.6; } |
|
|
| |
| .tag { |
| display: inline-flex; |
| align-items: center; |
| height: 18px; |
| padding: 0 6px; |
| font-family: var(--font-mono); |
| font-size: 10px; |
| letter-spacing: 0.04em; |
| color: var(--ink-muted); |
| background: var(--paper-deep); |
| border-radius: 3px; |
| border: 1px solid var(--line); |
| } |
|
|
| |
| .scrim { |
| position: fixed; inset: 0; |
| background: rgba(43,29,20,0.3); |
| backdrop-filter: blur(2px); |
| z-index: 100; |
| animation: fadeIn 160ms ease-out; |
| } |
| @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } |
| .drawer { |
| position: fixed; |
| top: 0; bottom: 0; right: 0; |
| width: 480px; |
| background: var(--paper); |
| border-left: 1px solid var(--line); |
| z-index: 101; |
| display: flex; |
| flex-direction: column; |
| animation: slideIn 200ms cubic-bezier(0.16, 1, 0.3, 1); |
| box-shadow: -8px 0 32px rgba(43,29,20,0.08); |
| } |
| @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } |
| .drawer-head { |
| display: flex; align-items: center; justify-content: space-between; |
| padding: 14px 18px; |
| border-bottom: 1px solid var(--line); |
| } |
| .drawer-body { flex: 1; overflow: auto; padding: 18px; } |
| .drawer-section { margin-bottom: 22px; } |
| .drawer-section-head { |
| font-family: var(--font-mono); |
| font-size: 10.5px; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--ink-faint); |
| margin-bottom: 10px; |
| padding-bottom: 6px; |
| border-bottom: 1px solid var(--line); |
| } |
| .field { margin-bottom: 12px; } |
| .field.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } |
| .field.checkbox { display: flex; align-items: center; gap: 8px; } |
| .field.checkbox input { accent-color: var(--accent); } |
| .field.checkbox label { font-size: 12.5px; } |
| .credential-actions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin: -2px 0 12px; |
| } |
|
|
| |
| .section-divider { |
| display: flex; align-items: center; gap: 10px; |
| font-family: var(--font-mono); |
| font-size: 10px; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--ink-faint); |
| margin: 4px 0 10px; |
| } |
| .section-divider::before, .section-divider::after { |
| content: ""; flex: 1; height: 1px; background: var(--line); |
| } |
|
|
| .notice { |
| display: flex; align-items: center; gap: 8px; |
| padding: 8px 12px; |
| background: var(--accent-soft); |
| border: 1px solid rgba(204,120,92,0.25); |
| border-radius: var(--r-sm); |
| font-size: 12px; |
| color: var(--ink); |
| } |
| .notice .pill-dot { background: var(--accent); } |
| .notice.error { |
| background: rgba(160,71,64,0.08); |
| border-color: rgba(160,71,64,0.22); |
| color: var(--error); |
| } |
|
|
| .toolbar { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 8px 14px; |
| border-bottom: 1px solid var(--line); |
| background: rgba(255,255,255,0.4); |
| } |
| .toolbar .spacer { flex: 1; } |
| .toolbar-divider { width: 1px; height: 18px; background: var(--line); margin: 0 4px; } |
| .file-input { display: none; } |
| .progress-track { |
| height: 4px; |
| background: var(--line); |
| border-radius: 999px; |
| overflow: hidden; |
| margin-top: 6px; |
| } |
| .progress-fill { |
| height: 100%; |
| background: var(--accent); |
| border-radius: 999px; |
| transition: width 160ms ease; |
| } |
|
|
| .zip-card { |
| display: grid; |
| grid-template-columns: 28px 1fr auto; |
| gap: 10px; |
| padding: 10px 12px; |
| border: 1px solid var(--line); |
| border-radius: var(--r-md); |
| background: var(--paper); |
| cursor: pointer; |
| align-items: center; |
| transition: border-color 120ms, background 120ms; |
| } |
| .zip-card:hover { border-color: var(--ink-muted); } |
| .zip-card.is-active { border-color: var(--accent); background: var(--accent-soft); } |
| .zip-icon { |
| width: 28px; height: 28px; |
| background: var(--ink); |
| color: var(--paper); |
| border-radius: var(--r-sm); |
| display: grid; place-items: center; |
| font-family: var(--font-mono); |
| font-size: 9px; |
| letter-spacing: 0.04em; |
| font-weight: 600; |
| } |
| .zip-card.is-active .zip-icon { background: var(--accent); } |
| .zip-name { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); } |
| .zip-meta { |
| font-size: 11px; |
| color: var(--ink-faint); |
| margin-top: 2px; |
| font-family: var(--font-mono); |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .evidence-table { |
| width: 100%; |
| border-collapse: collapse; |
| font-family: var(--font-mono); |
| font-size: 11px; |
| } |
| .evidence-table th, .evidence-table td { |
| text-align: left; |
| padding: 6px 10px; |
| border-bottom: 1px solid var(--line-faint); |
| } |
| .evidence-table th { |
| font-size: 10px; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| color: var(--ink-faint); |
| font-weight: 500; |
| background: var(--paper-deep); |
| position: sticky; top: 0; |
| } |
| .evidence-table .verb { font-weight: 600; } |
| .evidence-table .verb.GET { color: var(--success); } |
| .evidence-table .verb.POST { color: var(--accent); } |
| .evidence-table .verb.DELETE { color: var(--error); } |
| .evidence-table .verb.PATCH, .evidence-table .verb.PUT { color: var(--warning); } |
|
|
| |
| .toggle { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| cursor: pointer; |
| font-size: 12px; |
| } |
| .toggle-track { |
| width: 28px; height: 16px; |
| border-radius: 999px; |
| background: var(--line-strong); |
| position: relative; |
| transition: background 160ms; |
| } |
| .toggle-track::after { |
| content: ""; |
| position: absolute; |
| top: 2px; left: 2px; |
| width: 12px; height: 12px; |
| background: #fff; |
| border-radius: 50%; |
| transition: transform 160ms; |
| box-shadow: 0 1px 2px rgba(0,0,0,0.15); |
| } |
| .toggle.on .toggle-track { background: var(--accent); } |
| .toggle.on .toggle-track::after { transform: translateX(12px); } |
|
|
| |
| ::-webkit-scrollbar { width: 10px; height: 10px; } |
| ::-webkit-scrollbar-track { background: transparent; } |
| ::-webkit-scrollbar-thumb { |
| background: rgba(43,29,20,0.12); |
| border-radius: 999px; |
| border: 2px solid transparent; |
| background-clip: padding-box; |
| } |
| ::-webkit-scrollbar-thumb:hover { background: rgba(43,29,20,0.25); border: 2px solid transparent; background-clip: padding-box; } |
|
|
| |
| @media (max-width: 1480px) { |
| .workspace { grid-template-columns: 260px 1fr 340px; } |
| } |
| @media (max-width: 1280px) { |
| .workspace { grid-template-columns: 240px 1fr 320px; } |
| .topbar { grid-template-columns: 240px 1fr auto; } |
| .topbar-brand { padding: 0 12px; } |
| } |
|
|
| @media (max-width: 980px) { |
| .app { height: auto; min-height: 100vh; grid-template-rows: auto 1fr auto; } |
| .topbar { grid-template-columns: 1fr; gap: 8px; padding-bottom: 8px; } |
| .topbar-brand { border-right: 0; padding: 10px 12px 0; } |
| .view-tabs { overflow-x: auto; padding-left: 8px; min-height: 38px; } |
| .topbar-right { padding: 0 12px; } |
| .workspace, |
| .workspace.no-inspector { |
| grid-template-columns: 1fr; |
| overflow: visible; |
| } |
| .pane + .pane { border-left: 0; border-top: 1px solid var(--line); } |
| .pane { min-height: 320px; } |
| .modes-rail { grid-template-columns: 1fr; } |
| .field.row { grid-template-columns: 1fr; } |
| .drawer { width: min(100vw, 480px); } |
| .statusbar { flex-wrap: wrap; min-height: 28px; height: auto; padding: 6px 12px; } |
| } |
|
|
