/* 食易安后台 — design tokens + components. Token-driven so colors/spacing/type stay consistent and themeable. */ :root { color-scheme: light; /* Surfaces & lines */ --bg: #f1f5f9; --panel: #ffffff; --panel-soft: #f8fafc; --line: #dce3ec; --line-soft: #edf1f6; --line-strong: #cbd5e1; --hover-soft: #f6f9ff; --selected-line: #c8dbff; --danger-line: #ffd0d0; --skeleton-a: #eef2f7; --skeleton-b: #e3e9f1; --chart-grid: #e2e8f0; --chart-bar: #34d399; --chart-bar-strong: #10b981; --chart-positive: #ef4444; --chart-invalid: #f59e0b; /* Text */ --text: #0f172a; --text-2: #334155; --muted: #64748b; /* Brand (Shi Yi An safety green) + status pairs (color always paired with text) */ --brand: #10b981; --brand-strong: #059669; --brand-soft: #ecfdf5; --on-brand: #ffffff; --ok: #067647; --ok-soft: #ecfdf3; --warn: #b54708; --warn-soft: #fffaeb; --danger: #b42318; --danger-soft: #fef3f2; --focus: #10b981; /* Spacing scale (4 / 8 rhythm) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* Radius */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; /* Type scale */ --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-22: 22px; --fs-24: 24px; /* Elevation */ --e-1: 0 1px 2px rgba(16, 24, 40, 0.06); --e-2: 0 4px 12px rgba(16, 24, 40, 0.08); --e-3: 0 16px 40px rgba(16, 24, 40, 0.18); /* z-index layers */ --z-sticky: 10; --z-toast: 1000; --z-modal: 1100; --dur: 180ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); } /* ── Dark theme (toggled via data-theme on , persisted) ── */ [data-theme="dark"] { color-scheme: dark; --bg: #0b1220; --panel: #111a2c; --panel-soft: #0e1626; --line: #233044; --line-soft: #1d293c; --line-strong: #334155; --hover-soft: #16233a; --selected-line: #2b4a76; --danger-line: #5c2626; --skeleton-a: #1a2638; --skeleton-b: #223049; --chart-grid: #233044; --text: #e6edf7; --text-2: #b9c5d6; --muted: #7e8ca1; --brand: #34d399; --brand-strong: #10b981; --brand-soft: rgba(16, 185, 129, 0.12); --on-brand: #06281c; --ok: #4ade80; --ok-soft: rgba(34, 197, 94, 0.14); --warn: #fbbf24; --warn-soft: rgba(245, 158, 11, 0.14); --danger: #f87171; --danger-soft: rgba(239, 68, 68, 0.14); --focus: #34d399; --e-1: 0 1px 2px rgba(0, 0, 0, 0.4); --e-2: 0 4px 14px rgba(0, 0, 0, 0.45); --e-3: 0 16px 44px rgba(0, 0, 0, 0.6); } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif; font-size: var(--fs-14); line-height: 1.5; } /* Tabular figures keep numeric columns from shifting width. */ .mono, .num { font-variant-numeric: tabular-nums; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* Visible, consistent keyboard focus everywhere. */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } a { color: var(--brand); } .shell { min-height: 100dvh; display: flex; flex-direction: column; } /* Skip link for keyboard users. */ .skip-link { position: absolute; left: -999px; top: 8px; z-index: var(--z-modal); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; } .skip-link:focus { left: 12px; } /* ── Topbar ─────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--panel); border-bottom: 1px solid var(--line); padding: var(--sp-5) var(--sp-6) var(--sp-4); } .topbar-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); } .brand-heading { display: flex; min-width: 0; align-items: center; gap: var(--sp-3); } .brand-mark { flex: none; width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.18); } .brand-copy { min-width: 0; } .eyebrow { font-size: var(--fs-12); color: var(--muted); } .title { margin: 0; font-size: var(--fs-22); font-weight: 700; } .subtitle { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-14); } .topbar-meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; justify-content: flex-end; } .meta-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--panel-soft); color: var(--muted); font-size: var(--fs-12); } .scope-control { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 34px; padding: 0 var(--sp-2) 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--brand-soft); color: var(--text-2); font-size: var(--fs-12); } .scope-control[hidden] { display: none !important; } .scope-control label { color: var(--muted); white-space: nowrap; } .scope-control select { min-width: 124px; height: 28px; border: 0; border-radius: var(--r-pill); background: var(--panel); color: var(--text); font-size: var(--fs-12); padding: 0 var(--sp-3); } .role-pill, .permission-pill { color: var(--text-2); background: var(--panel); } .system-info { position: relative; } .system-info-trigger { min-height: 34px; border-radius: var(--r-pill); } .system-info-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(320px, calc(100vw - 32px)); display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--e-3); z-index: var(--z-modal); } .system-info-panel[hidden] { display: none !important; } .system-info-row { min-height: 36px; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); border-bottom: 1px solid var(--line-soft); } .system-info-row:last-child { border-bottom: 0; } .system-info-row span { color: var(--muted); } .system-info-row strong { text-align: right; overflow-wrap: anywhere; } .workspace { padding: var(--sp-4) var(--sp-6) var(--sp-6); display: grid; gap: var(--sp-3); } /* ── Multi-page admin shell ─────────────────────────────── */ .admin-workspace { grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: var(--sp-4); } .admin-nav { position: sticky; top: 96px; display: grid; gap: var(--sp-2); align-self: start; } .admin-nav-link { min-height: 56px; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--text-2); text-decoration: none; display: grid; align-items: center; box-shadow: var(--e-1); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease); } .nav-copy { min-width: 0; display: grid; gap: 1px; } .nav-copy span { font-size: var(--fs-14); font-weight: 700; } .nav-copy small { color: var(--muted); font-size: var(--fs-12); } .admin-nav-link:hover { border-color: var(--brand); color: var(--brand); } .admin-nav-link.is-active, .admin-nav-link[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: var(--e-2); } .admin-nav-link.is-active small, .admin-nav-link[aria-current="page"] small { color: rgba(255, 255, 255, 0.82); } .admin-nav-link[aria-disabled="true"] { opacity: 0.72; } .login-gate { min-width: 0; grid-column: 2; } .login-gate[hidden] { display: none !important; } .login-gate-panel { min-height: 360px; display: grid; align-content: center; justify-items: start; gap: var(--sp-3); padding: var(--sp-8); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--e-1); } .login-gate-panel h2 { margin: 0; font-size: var(--fs-24); } .login-gate-panel p { max-width: 620px; margin: 0; color: var(--muted); font-size: var(--fs-16); } .login-gate-form { width: min(440px, 100%); display: grid; gap: var(--sp-3); margin-top: var(--sp-2); } .login-gate-form .button { width: 100%; } .login-gate-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .login-gate-note { color: var(--muted); font-size: var(--fs-13); } .admin-page { min-width: 0; display: grid; gap: var(--sp-4); } .admin-page[hidden] { display: none !important; } .page-heading { min-width: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--e-1); } .page-heading h2 { margin: 0; font-size: var(--fs-22); line-height: 1.25; } .page-heading p { margin: var(--sp-1) 0 0; color: var(--muted); } .page-actions { display: flex; gap: var(--sp-2); align-items: center; justify-content: flex-end; flex-wrap: wrap; } .quick-action-grid, .page-grid, .workbench-grid { display: grid; gap: var(--sp-3); } .quick-action-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .quick-action { min-height: 96px; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--text); text-align: left; cursor: pointer; display: grid; align-content: start; gap: var(--sp-2); box-shadow: var(--e-1); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .quick-action:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .quick-action:active { transform: translateY(1px); } .quick-action span { font-size: var(--fs-16); font-weight: 700; } .quick-action small { color: var(--muted); font-size: var(--fs-12); } .workbench-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .workbench-grid .recent-panel { grid-column: 1 / -1; } .page-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .task-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: stretch; } .task-board .side-card { min-height: 220px; } .section-kicker { margin-bottom: 2px; color: var(--muted); font-size: var(--fs-11); font-weight: 700; letter-spacing: 0; } .span-full { grid-column: 1 / -1; } .workbench-insights { display: grid; gap: var(--sp-2); } .insight-row { min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-soft); } .insight-row span { color: var(--muted); } .insight-row strong { font-size: var(--fs-18); font-variant-numeric: tabular-nums; } .recent-panel { min-height: 0; } .compact-table { min-width: 0; } /* ── Summary strip ──────────────────────────────────────── */ .summary-strip { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: var(--sp-3); align-items: stretch; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); box-shadow: var(--e-1); } .summary-title { display: flex; align-items: center; padding: 0 var(--sp-3) 0 var(--sp-1); color: var(--muted); font-size: var(--fs-13); border-right: 1px solid var(--line); white-space: nowrap; } .stat-pill { border: 1px solid var(--line); background: var(--panel-soft); border-radius: var(--r-md); min-height: 62px; padding: var(--sp-3); display: grid; gap: var(--sp-1); } .stat-label { color: var(--muted); font-size: var(--fs-12); } .stat-value { font-size: var(--fs-24); font-weight: 700; font-variant-numeric: tabular-nums; } .stat-value.compact { font-size: var(--fs-18); } /* ── Layout grid ────────────────────────────────────────── */ .content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-3); align-items: start; } .main-column, .side-column { display: grid; gap: var(--sp-3); min-width: 0; } .side-column { align-self: start; } .toolbar, .table-panel, .side-card { min-width: 0; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-md); box-shadow: var(--e-1); } .toolbar { padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-3); } .toolbar-header { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .toolbar-left { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } /* ── Segmented tabs ─────────────────────────────────────── */ .segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--panel-soft); } .segmented button { border: 0; background: transparent; color: var(--muted); padding: 9px 14px; font-size: var(--fs-14); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .segmented button:hover { color: var(--text-2); } .segmented button[aria-selected="true"] { background: var(--brand); color: var(--on-brand); } .status-line { color: var(--muted); font-size: var(--fs-13); white-space: nowrap; } .toolbar-body { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); align-items: end; } .filters-block { display: grid; gap: var(--sp-3); } .filters-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); } .filters-title { font-size: var(--fs-14); font-weight: 600; } .toolbar-label { color: var(--muted); font-size: var(--fs-13); } .filters { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-items: end; } .advanced-filters { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-soft); } .advanced-filters summary { min-height: 42px; padding: 0 var(--sp-3); display: flex; align-items: center; color: var(--text-2); font-size: var(--fs-13); font-weight: 600; cursor: pointer; } .advanced-filter-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); padding: 0 var(--sp-3) var(--sp-3); } /* ── Fields & buttons ───────────────────────────────────── */ .field, .upload-grid { display: grid; gap: var(--sp-2); min-width: 0; } .field label, .upload-grid label { color: var(--text-2); font-size: var(--fs-12); font-weight: 500; } .field input, .field select, .upload-grid input, .upload-grid select { width: 100%; min-width: 0; height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font-size: var(--fs-14); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field input:hover, .field select:hover, .upload-grid input:hover, .upload-grid select:hover { border-color: var(--muted); } .field input:focus-visible, .field select:focus-visible, .upload-grid input:focus-visible, .upload-grid select:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .field input[type="file"], .upload-grid input[type="file"] { padding: var(--sp-2) var(--sp-3); height: auto; min-height: 40px; } .check-field { display: inline-flex; min-height: 40px; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--panel); cursor: pointer; } .check-field input { width: 16px; height: 16px; padding: 0; margin: 0; } .check-field span { color: var(--text); font-size: var(--fs-13); font-weight: 600; } .field-hint { color: var(--muted); font-size: var(--fs-12); } .field-hint:empty, .card-note:empty, .directory-note:empty, .table-note:empty, .upload-status:empty { display: none; } .actions, .upload-actions { display: flex; gap: var(--sp-2); align-items: end; flex-wrap: wrap; } .button { min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font-size: var(--fs-14); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .button:hover { background: var(--panel-soft); } .button:active { transform: translateY(1px); } .button.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .button.primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); } .button.ghost { background: var(--panel-soft); } .button.danger { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); } .button:disabled, .button[data-loading="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* Inline spinner inside busy buttons. */ .button[data-loading="true"]::before { content: ""; width: 14px; height: 14px; border-radius: var(--r-pill); border: 2px solid currentColor; border-top-color: transparent; animation: spin 0.7s linear infinite; } /* ── Table ──────────────────────────────────────────────── */ .table-panel { display: grid; min-height: 560px; } .table-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); } .table-title { font-size: var(--fs-16); font-weight: 600; } .table-note { color: var(--muted); font-size: var(--fs-13); } .table-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; } .column-control { position: relative; } .column-control summary { min-height: 36px; display: inline-flex; align-items: center; padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--text); font-weight: 700; cursor: pointer; list-style: none; } .column-control summary::-webkit-details-marker { display: none; } .column-control-menu { position: absolute; right: 0; z-index: 20; min-width: 180px; margin-top: var(--sp-2); padding: var(--sp-3); display: grid; gap: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--e-2); } .column-control-menu label { display: flex; align-items: center; gap: var(--sp-2); color: var(--text); font-size: var(--fs-13); white-space: nowrap; } .pagination-controls { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-1); } .pagination-status { min-width: 136px; color: var(--muted); font-size: var(--fs-13); text-align: center; font-variant-numeric: tabular-nums; } .table-scroll { overflow: auto; min-height: 0; min-width: 0; max-width: 100%; } table { width: 100%; min-width: 1080px; border-collapse: collapse; } thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-soft); color: var(--muted); font-size: var(--fs-13); font-weight: 600; text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); } tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size: var(--fs-14); } tbody tr { cursor: pointer; transition: background var(--dur) var(--ease); } tbody tr:hover { background: var(--hover-soft); } tbody tr.is-selected { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); } tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } tbody tr:last-child td { border-bottom: 0; } .cell-main { font-weight: 600; } .cell-sub { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-12); } /* ── Badges (text + color, never color-only) ────────────── */ .badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 4px 10px; font-size: var(--fs-12); font-weight: 600; white-space: nowrap; } .badge::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-pill); background: currentColor; flex: none; } .badge.result-positive { color: var(--danger); background: var(--danger-soft); } .badge.result-negative { color: var(--ok); background: var(--ok-soft); } .badge.result-invalid, .badge.status-recognize_failed { color: var(--danger); background: var(--danger-soft); } .badge.status-confirmed { color: var(--brand); background: var(--brand-soft); } /* ── Empty / skeleton / error states ────────────────────── */ .empty, .state-cell { padding: 48px 16px; text-align: center; color: var(--muted); } .state-title { font-weight: 600; color: var(--text-2); margin-bottom: var(--sp-1); } .state-hint { font-size: var(--fs-13); } .state-cell .button { margin-top: var(--sp-3); } .skeleton-line { height: 12px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 37%, var(--skeleton-a) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; } .skeleton-line.short { width: 45%; } .skeleton-line + .skeleton-line { margin-top: 8px; } /* ── Side panel sections ────────────────────────────────── */ .side-card { padding: var(--sp-4); display: grid; gap: var(--sp-3); } .operations-panel { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-md); box-shadow: var(--e-1); overflow: hidden; } .panel-header { padding: var(--sp-4); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%); display: grid; gap: var(--sp-1); } .panel-kicker { color: var(--muted); font-size: var(--fs-12); } .panel-title { font-size: var(--fs-16); font-weight: 700; } .panel-group { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--panel-soft); } .panel-section { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); overflow: hidden; } .section-summary { min-height: 44px; padding: var(--sp-3); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); cursor: pointer; list-style: none; user-select: none; } .section-summary::-webkit-details-marker { display: none; } .section-summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } .section-title { font-size: var(--fs-14); font-weight: 700; } .section-meta { color: var(--muted); font-size: var(--fs-12); white-space: nowrap; } .section-summary::after { content: "展开"; flex: none; border-radius: var(--r-pill); background: var(--panel-soft); color: var(--muted); border: 1px solid var(--line); padding: 3px 8px; font-size: var(--fs-11); } .panel-section[open] .section-summary { border-bottom: 1px solid var(--line-soft); background: var(--panel-soft); } .panel-section[open] .section-summary::after { content: "收起"; background: var(--brand-soft); color: var(--brand); border-color: var(--selected-line); } .section-body { display: grid; gap: var(--sp-4); padding: var(--sp-3); } .panel-section .side-card { border: 0; box-shadow: none; padding: 0; background: transparent; } .panel-section .side-card + .side-card { border-top: 1px solid var(--line-soft); padding-top: var(--sp-4); } .panel-section:not(details) .section-summary { cursor: default; } .panel-section:not(details) .section-summary::after { content: none; } .panel-section .page-grid .side-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--e-1); padding: var(--sp-4); } .panel-section .page-grid .side-card + .side-card { border-top: 1px solid var(--line); padding-top: var(--sp-4); } .admin-page .side-card .upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .drawer .upload-grid, .account-popover .upload-grid { grid-template-columns: 1fr; } .card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); } .card-title { font-size: var(--fs-14); font-weight: 600; } .card-note { color: var(--muted); font-size: var(--fs-12); } .upload-grid { grid-template-columns: 1fr; } .form-subsection { display: grid; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line); } .form-subtitle { color: var(--text-2); font-size: var(--fs-13); font-weight: 700; } .upload-status { min-height: 20px; color: var(--muted); font-size: var(--fs-12); } .upload-status[data-tone="ok"] { color: var(--ok); } .upload-status[data-tone="warn"] { color: var(--warn); } .upload-status[data-tone="danger"] { color: var(--danger); } .item-list, .chip-list { display: grid; gap: var(--sp-2); } .mini-list-item { width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--text); text-align: left; cursor: pointer; display: grid; gap: 2px; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .mini-list-item:hover { background: var(--hover-soft); border-color: var(--selected-line); } .mini-list-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .mini-list-item.danger { border-color: var(--danger-line); background: var(--danger-soft); } .mini-list-item.read-only { cursor: default; background: var(--panel-soft); } .mini-main { font-size: var(--fs-13); font-weight: 650; } .mini-sub { color: var(--muted); font-size: var(--fs-12); } .item-list.compact .mini-list-item { min-height: 38px; } .chip-list { display: flex; flex-wrap: wrap; } .chip-button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel); color: var(--text-2); cursor: pointer; font-size: var(--fs-12); } .chip-button:hover { background: var(--brand-soft); border-color: var(--selected-line); color: var(--brand); } .chip-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .empty-mini { color: var(--muted); font-size: var(--fs-12); padding: var(--sp-2) 0; } /* ── Management pages: tabs, directories, drawers ───────── */ .management-tabs { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--e-1); overflow-x: auto; } .management-tabs button { min-height: 38px; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); font-size: var(--fs-14); font-weight: 600; white-space: nowrap; cursor: pointer; } .management-tabs button:hover { color: var(--brand); background: var(--brand-soft); } .management-tabs button[aria-selected="true"] { color: var(--on-brand); background: var(--brand); } .directory-panel { min-width: 0; display: grid; gap: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--e-1); padding: var(--sp-4); } .directory-panel[hidden], .management-form-panel[hidden] { display: none !important; } .directory-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); } .directory-title { font-size: var(--fs-16); font-weight: 700; } .directory-note { color: var(--muted); font-size: var(--fs-13); } .directory-grid, .project-overview-grid { display: grid; gap: var(--sp-4); min-width: 0; } .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-overview-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: start; } .management-layout.directory-only { grid-template-columns: minmax(0, 1fr); } .directory-subpanel { min-width: 0; display: grid; gap: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-soft); padding: var(--sp-4); } .directory-subtitle { font-size: var(--fs-14); font-weight: 700; } .directory-list { display: grid; gap: var(--sp-2); min-width: 0; } .directory-list.compact { align-content: start; } .directory-item { width: 100%; min-height: 68px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--text); padding: var(--sp-3); text-align: left; cursor: pointer; display: grid; gap: var(--sp-1); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .directory-item:hover { border-color: var(--selected-line); background: var(--hover-soft); box-shadow: 0 0 0 3px var(--brand-soft); } .directory-item:active { transform: translateY(1px); } .directory-item.is-selected { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); } .directory-item.compact { min-height: 52px; } .directory-main { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); min-width: 0; } .directory-main strong { min-width: 0; overflow-wrap: anywhere; } .directory-meta { color: var(--muted); font-size: var(--fs-12); overflow-wrap: anywhere; } .directory-search { max-width: 520px; } .batch-toolbar { display: flex; align-items: end; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-soft); } .batch-field { min-width: 220px; } .batch-status { min-width: 180px; flex: 1; } .empty-state { min-height: 280px; display: grid; align-content: center; justify-items: center; gap: var(--sp-3); padding: var(--sp-8); border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--panel); color: var(--text-2); text-align: center; } .empty-state[hidden] { display: none !important; } .empty-state-title { font-size: var(--fs-18); font-weight: 700; } .empty-state p { max-width: 520px; margin: 0; color: var(--muted); } .permission-empty { box-shadow: var(--e-1); } .status-badge { flex: none; display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 700; } .status-badge--ok { color: var(--ok); background: var(--ok-soft); } .status-badge--muted, .status-badge--neutral { color: var(--muted); background: var(--panel-soft); border: 1px solid var(--line); } .status-badge--warn { color: var(--warn); background: var(--warn-soft); } .status-badge--danger { color: var(--danger); background: var(--danger-soft); } .summary-detail-list { display: grid; gap: var(--sp-2); } .summary-detail-row { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line-soft); } .summary-detail-row span { color: var(--muted); font-size: var(--fs-12); } .summary-detail-row strong { text-align: right; font-size: var(--fs-13); overflow-wrap: anywhere; } .drawer-wide { width: min(560px, 100%); } .report-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); } .report-kpi { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-soft); padding: var(--sp-3); } .report-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); } /* ── System status ─────────────────────────────────────── */ .system-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } .status-card { min-width: 0; } .system-status-list, .system-check-list { display: grid; gap: var(--sp-2); } .system-status-row, .system-check-row { display: grid; grid-template-columns: 84px auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); min-height: 42px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-soft); } .system-status-row:last-child, .system-check-row:last-child { border-bottom: 0; } .system-status-row span, .system-check-row span { color: var(--text); font-size: var(--fs-13); font-weight: 700; } .system-status-row small, .system-check-row small { min-width: 0; color: var(--muted); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .system-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); } .system-metric { min-width: 0; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-soft); } .system-metric span { display: block; color: var(--muted); font-size: var(--fs-12); } .system-metric strong { display: block; margin-top: 4px; color: var(--text); font-family: var(--font-mono); font-size: var(--fs-18); } /* ── Detail panel ───────────────────────────────────────── */ .detail-grid { display: grid; gap: var(--sp-3); } .detail-row { display: grid; gap: var(--sp-1); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-soft); } .detail-row:last-child { border-bottom: 0; padding-bottom: 0; } .detail-label { color: var(--muted); font-size: var(--fs-12); } .detail-value { font-size: var(--fs-14); font-weight: 600; word-break: break-word; } .detail-image { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--r-md); border: 1px solid var(--line); object-fit: contain; background: var(--panel); cursor: zoom-in; } .debug-image-frame { display: grid; place-items: center; width: 100%; min-height: 260px; max-height: 560px; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel-soft); } .line-debug-image { display: block; width: 100%; max-height: 560px; object-fit: contain; background: var(--panel); } .line-debug-image[hidden] { display: none; } .line-debug-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); color: var(--muted); font-size: var(--fs-12); } .line-debug-legend span { display: inline-flex; align-items: center; gap: 6px; } .line-debug-legend i { width: 18px; height: 4px; display: inline-block; border-radius: 999px; } .legend-c { background: #2563eb; } .legend-t { background: #dc2626; } .legend-window { background: #94a3b8; } .training-issue-panel { display: grid; gap: var(--sp-3); } .training-issue-panel textarea { width: 100%; resize: vertical; } /* ── Toasts ─────────────────────────────────────────────── */ .toast-region { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: var(--z-toast); display: grid; gap: var(--sp-2); max-width: min(360px, calc(100vw - 32px)); } .toast { border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--e-2); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-13); color: var(--text-2); border-left: 4px solid var(--muted); animation: toast-in var(--dur) var(--ease); } .toast--ok { border-left-color: var(--ok); } .toast--danger { border-left-color: var(--danger); } .toast--warn { border-left-color: var(--warn); } /* ── Confirm modal ──────────────────────────────────────── */ .modal-scrim { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(15, 23, 42, 0.5); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); } .modal-scrim[hidden] { display: none; } .modal { width: min(420px, 100%); background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--e-3); padding: var(--sp-5); display: grid; gap: var(--sp-4); animation: modal-in var(--dur) var(--ease); } .modal-title { font-size: var(--fs-16); font-weight: 700; } .modal-message { color: var(--text-2); font-size: var(--fs-14); } .modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); } .image-preview-dialog { width: min(920px, calc(100vw - 32px)); } .image-preview-large { display: block; width: 100%; max-height: min(78vh, 820px); margin-top: var(--sp-3); object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); } /* ── Animations (respect reduced motion) ────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes modal-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ── Responsive ─────────────────────────────────────────── */ @media (max-width: 980px) { .admin-workspace { grid-template-columns: 1fr; } .login-gate { grid-column: 1; } .admin-nav { position: static; display: flex; overflow-x: auto; padding-bottom: var(--sp-1); scroll-snap-type: x mandatory; } .admin-nav-link { min-width: 168px; scroll-snap-align: start; } .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .summary-title { border-right: 0; padding: 0; grid-column: 1 / -1; } .content-grid { grid-template-columns: 1fr; } .quick-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .workbench-grid, .page-grid.two, .task-board, .directory-grid, .project-overview-grid, .report-columns, .system-status-grid { grid-template-columns: 1fr; } .toolbar-body { grid-template-columns: 1fr; } .summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .filters { grid-template-columns: 1fr 1fr; } .advanced-filter-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .topbar-inner { align-items: flex-start; flex-direction: column; } .brand-heading { align-items: flex-start; } .brand-mark { width: 40px; height: 40px; border-radius: 10px; } .topbar-meta { width: 100%; justify-content: flex-start; } .system-info, .system-info-trigger { width: 100%; } .system-info-panel { left: 0; right: auto; } .workspace { padding: var(--sp-3); } .login-gate-panel { min-height: 320px; padding: var(--sp-5); } .page-heading { align-items: flex-start; flex-direction: column; } .page-actions, .page-actions .button { width: 100%; } .quick-action-grid { grid-template-columns: 1fr; } .admin-page .side-card .upload-grid { grid-template-columns: 1fr; } .summary-strip, .filters, .advanced-filter-grid, .report-columns, .system-status-grid, .system-metric-grid { grid-template-columns: 1fr; } .system-status-row, .system-check-row { grid-template-columns: 1fr; align-items: start; gap: 6px; } .system-status-row small, .system-check-row small { white-space: normal; } .table-actions, .pagination-controls { width: 100%; justify-content: space-between; } .pagination-status { flex: 1; min-width: 0; } /* Table becomes stacked cards — no forced horizontal scroll. */ .table-scroll { overflow: visible; } table { min-width: 0; } thead { display: none; } table, tbody, tbody tr, tbody td { display: block; width: 100%; } tbody tr { border: 1px solid var(--line); border-radius: var(--r-md); margin: 0 var(--sp-3) var(--sp-3); padding: var(--sp-2) var(--sp-3); box-shadow: var(--e-1); } tbody tr.is-selected { box-shadow: inset 0 0 0 2px var(--brand); } tbody td { border: 0; padding: 6px 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } tbody td::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-12); font-weight: 500; flex: none; } tbody td .cell-sub { text-align: right; } .state-cell, .empty { display: block; } } /* ── Topbar right + account menu ────────────────────────── */ .topbar-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); } .account-menu { position: relative; } .account-trigger { gap: var(--sp-2); } .account-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--muted); flex: none; } .account-menu[data-signed-in="true"] .account-dot { background: var(--ok); } .account-caret { color: var(--muted); font-size: var(--fs-12); } .account-popover { position: absolute; right: 0; top: calc(100% + var(--sp-2)); width: 300px; max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-3); padding: var(--sp-4); display: grid; gap: var(--sp-3); z-index: var(--z-modal); animation: modal-in var(--dur) var(--ease); } .account-popover[hidden] { display: none; } .account-section { display: grid; gap: var(--sp-3); } .account-id { font-size: var(--fs-14); font-weight: 600; } .account-password-panel { display: grid; gap: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-3); } .account-password-panel[hidden] { display: none; } .account-demo { border-top: 1px solid var(--line); padding-top: var(--sp-3); display: grid; gap: var(--sp-2); } .account-demo-label { font-size: var(--fs-12); color: var(--muted); } /* ── Toolbar tools + clickable stat cards ───────────────── */ .toolbar-tools { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } button.stat-pill { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } button.stat-pill:disabled { cursor: default; } button.stat-pill:hover:not(:disabled) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } /* ── Nested settings sections ───────────────────────────── */ .panel-section.nested { box-shadow: none; } .panel-section.nested + .panel-section.nested { margin-top: var(--sp-2); } /* ── Right-side drawer ──────────────────────────────────── */ .drawer-scrim { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(15, 23, 42, 0.5); display: flex; justify-content: flex-end; } .drawer-scrim[hidden] { display: none; } .drawer { width: min(440px, 100%); height: 100%; background: var(--panel); box-shadow: var(--e-3); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur) var(--ease); } .drawer-scrim.is-open .drawer { transform: none; } .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); } .drawer-title { font-size: var(--fs-16); font-weight: 700; } .drawer-close { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-soft); color: var(--text-2); font-size: 20px; line-height: 1; cursor: pointer; } .drawer-close:hover { background: var(--bg); } .drawer-body { overflow: auto; padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-4); padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); } @media (max-width: 720px) { .topbar-right { width: 100%; align-items: stretch; } .account-popover { position: fixed; left: var(--sp-4); right: var(--sp-4); top: auto; bottom: var(--sp-4); width: auto; } .drawer { width: 100%; } } /* ════════════════════════════════════════════════════════════ 2026-06 UI 升级：主题切换 / 导航图标 / KPI / 图表 / 排序 / 打印 ════════════════════════════════════════════════════════════ */ /* ── Theme toggle ── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel); color: var(--text-2); cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); } .theme-toggle:hover { border-color: var(--brand); color: var(--brand); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ── Nav icons + refined active state ── */ .admin-nav-link { position: relative; overflow: hidden; } .admin-nav-link::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; transition: background var(--dur) var(--ease); } .admin-nav-link.is-active::before, .admin-nav-link[aria-current="page"]::before { background: var(--on-brand); opacity: 0.85; } /* ── Workbench KPI accents ── */ .stat-pill { position: relative; overflow: hidden; } .stat-pill::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--line); opacity: 0.7; transition: background var(--dur) var(--ease); } .stat-pill[data-stat="total"]::after { background: var(--brand); } .stat-pill[data-stat="positive"]::after { background: var(--chart-positive); } .stat-pill[data-stat="invalid"]::after { background: var(--chart-invalid); } .stat-pill[data-stat="samples"]::after, .stat-pill[data-stat="projects"]::after { background: var(--line-strong); } .stat-pill:not(:disabled):hover { border-color: var(--brand); } .stat-trend { font-size: var(--fs-12); color: var(--muted); display: inline-flex; align-items: center; gap: 3px; } .stat-trend.up { color: var(--danger); } .stat-trend.down { color: var(--ok); } /* ── Charts (dependency-free inline SVG) ── */ .chart-card .card-head { margin-bottom: var(--sp-2); } .chart-box { width: 100%; overflow: hidden; } .chart-box svg { display: block; width: 100%; height: auto; } .chart-empty { color: var(--muted); font-size: var(--fs-13); padding: var(--sp-6) 0; text-align: center; } .chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-12); color: var(--muted); } .chart-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; } .chart-bar-rect { transition: opacity var(--dur) var(--ease); } .chart-bar-rect:hover { opacity: 0.75; } .donut-center-value { font-size: 26px; font-weight: 800; fill: var(--text); } .donut-center-label { font-size: 12px; fill: var(--muted); } .chart-axis-text { font-size: 10px; fill: var(--muted); } .report-overview-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-4); align-items: stretch; } .rank-bar-list { display: grid; gap: var(--sp-2); } .rank-bar-item { display: grid; gap: 3px; padding: var(--sp-2) var(--sp-3); border: 1px solid transparent; border-radius: var(--r-md); background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .rank-bar-item:hover { border-color: var(--selected-line); background: var(--hover-soft); } .rank-bar-row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-13); } .rank-bar-row .rank-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-weight: 600; } .rank-bar-row .rank-count { color: var(--muted); font-variant-numeric: tabular-nums; } .rank-bar-track { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; } .rank-bar-fill { height: 100%; border-radius: 3px; background: var(--chart-bar); transition: width 360ms var(--ease); } /* ── Sortable table headers ── */ thead th[data-sort-key] { cursor: pointer; user-select: none; white-space: nowrap; } thead th[data-sort-key]:hover { color: var(--text-2); } thead th[data-sort-key]::after { content: "↕"; margin-left: 4px; opacity: 0.4; font-size: var(--fs-11); } thead th[data-sort-key][data-sort-dir="asc"]::after { content: "↑"; opacity: 1; color: var(--brand-strong); } thead th[data-sort-key][data-sort-dir="desc"]::after { content: "↓"; opacity: 1; color: var(--brand-strong); } /* ── Numeric cells align right for scanability ── */ td[data-ledger-column="tc"], td[data-ledger-column="confidence"], th[data-ledger-column="tc"], th[data-ledger-column="confidence"] { text-align: right; } /* ── Print: reports & ledger become clean documents ── */ @media print { body { background: #fff; } .topbar, .admin-nav, .toolbar, .page-actions, .table-actions, .pagination-controls, .quick-action-grid, .theme-toggle, .skip-link, .toast-stack { display: none !important; } .admin-workspace { grid-template-columns: 1fr; } .table-panel, .side-card, .toolbar { box-shadow: none; border-color: #ccc; } table { min-width: 0; } .admin-page[hidden] { display: none !important; } } /* ── Dark-mode specific photo handling ── */ [data-theme="dark"] .preview-image, [data-theme="dark"] #line-debug-image { filter: brightness(0.92); } /* ════ 2026-06 UX 升级：详情 hero / 折叠区 / 抽屉状态行 ════ */ /* ── 详情抽屉顶部结果摘要 ── */ .detail-hero { display: grid; gap: var(--sp-4); } .detail-hero-main { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .detail-hero-badge { flex: none; display: inline-flex; align-items: center; padding: 6px 16px; border-radius: var(--r-pill); font-size: var(--fs-16); font-weight: 800; background: var(--panel-soft); color: var(--muted); border: 1px solid var(--line); } .detail-hero-badge.hero-positive { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .detail-hero-badge.hero-negative { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .detail-hero-badge.hero-invalid { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .detail-hero-sample { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-16); font-weight: 700; color: var(--text); } .detail-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-2); } .detail-hero-stat { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--panel-soft); } .detail-hero-stat span { font-size: var(--fs-12); color: var(--muted); } .detail-hero-stat strong { font-size: var(--fs-14); color: var(--text); overflow-wrap: anywhere; } /* ── 折叠区（详情归属信息 / 表单基础资料） ── */ .detail-collapse, .form-collapse { border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--panel-soft); padding: 0; } .detail-collapse summary, .form-collapse summary { cursor: pointer; user-select: none; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-13); font-weight: 600; color: var(--text-2); list-style: none; display: flex; align-items: center; gap: var(--sp-2); } .detail-collapse summary::-webkit-details-marker, .form-collapse summary::-webkit-details-marker { display: none; } .detail-collapse summary::before, .form-collapse summary::before { content: "▸"; color: var(--muted); transition: transform var(--dur) var(--ease); } .detail-collapse[open] summary::before, .form-collapse[open] summary::before { transform: rotate(90deg); } .detail-collapse > .detail-grid, .form-collapse > .upload-grid { padding: 0 var(--sp-4) var(--sp-4); } /* ── 抽屉底部共享状态行 ── */ .drawer-status { position: sticky; bottom: 0; margin: 0 calc(-1 * var(--sp-5)); padding: var(--sp-2) var(--sp-5); background: var(--panel); border-top: 1px solid var(--line-soft); } .drawer-status:empty { display: none; } /* ── 表单上下文提示（如：为哪个企业创建管理员） ── */ .form-context { padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--brand); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--brand-soft); color: var(--text-2); font-size: var(--fs-13); }