/* ==========================================================================
   TK Workbench — theme layer
   Design system: ui-ux-pro-max
     style      Dark Mode (OLED)
     palette    #3B82F6 / #60A5FA / #F97316 on #0B1120
     type       Fira Sans (body) + Fira Code (numerals, codes)
   Loaded last so it can re-token and restyle every component below it.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap");

:root {
  color-scheme: dark;

  /* surfaces */
  --tk-bg: #0b1120;
  --tk-bg-soft: #0f172a;
  --tk-surface: #111827;
  --tk-surface-2: #16203a;
  --tk-surface-3: #1e293b;
  --tk-overlay: rgba(2, 6, 23, 0.72);

  /* lines */
  --tk-line: #1e293b;
  --tk-line-soft: rgba(148, 163, 184, 0.18);
  --tk-line-strong: rgba(148, 163, 184, 0.34);

  /* text */
  --tk-text: #e6edf7;
  --tk-text-soft: #b6c2d4;
  --tk-muted: #8b9ab0;
  --tk-faint: #64748b;

  /* brand */
  --tk-primary: #3b82f6;
  --tk-primary-hover: #2563eb;
  --tk-primary-soft: rgba(59, 130, 246, 0.16);
  --tk-secondary: #60a5fa;
  --tk-cta: #f97316;
  --tk-cta-hover: #ea580c;
  --tk-cta-soft: rgba(249, 115, 22, 0.16);

  /* state */
  --tk-ok: #10b981;
  --tk-ok-soft: rgba(16, 185, 129, 0.14);
  --tk-warn: #f59e0b;
  --tk-warn-soft: rgba(245, 158, 11, 0.14);
  --tk-danger: #ef4444;
  --tk-danger-soft: rgba(239, 68, 68, 0.14);

  /* shape + motion */
  --tk-r-sm: 8px;
  --tk-r: 12px;
  --tk-r-lg: 16px;
  --tk-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --tk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --tk-glow: 0 0 0 3px rgba(59, 130, 246, 0.28);
  --tk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tk-dur: 200ms;

  /* z-index scale */
  --tk-z-base: 1;
  --tk-z-sticky: 10;
  --tk-z-dropdown: 30;
  --tk-z-toast: 50;

  /* legacy token remap so existing rules inherit the new palette */
  --ink: var(--tk-text);
  --muted: var(--tk-muted);
  --subtle: var(--tk-faint);
  --line: var(--tk-line);
  --paper: var(--tk-bg);
  --white: var(--tk-surface);
  --teal: var(--tk-primary);
  --teal-dark: var(--tk-primary-hover);
  --teal-soft: var(--tk-primary-soft);
  --coral: var(--tk-cta);
  --amber: var(--tk-warn);
  --blue: var(--tk-secondary);
  --red: var(--tk-danger);

  font-family: "Fira Sans", Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

/* --------------------------------------------------------------- base ---- */

body {
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(59, 130, 246, 0.1), transparent 60%),
    radial-gradient(900px 460px at 92% 4%, rgba(249, 115, 22, 0.07), transparent 62%),
    var(--tk-bg);
  color: var(--tk-text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand strong {
  font-family: "Fira Code", "Fira Sans", monospace;
  letter-spacing: -0.01em;
  color: var(--tk-text);
}

h1 { font-size: 26px; font-weight: 600; }
h2 { font-size: 18px; font-weight: 600; }

/* numerals read as data, not prose */
.metrics strong,
.price,
td,
.mono,
table td,
.echotik-monitor-meta,
.title-monitor-card strong,
.stat-value {
  font-variant-numeric: tabular-nums;
}

::selection { background: rgba(59, 130, 246, 0.32); color: #fff; }

/* focus ring on every interactive surface */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--tk-secondary);
  outline-offset: 2px;
  border-radius: var(--tk-r-sm);
}

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: #2a3852 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #26344d;
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: #35486b; background-clip: content-box; }

/* ------------------------------------------------------------- shell ---- */

.sidebar {
  background: linear-gradient(180deg, #0d1526 0%, #0a101e 100%);
  border-right: 1px solid var(--tk-line);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.02);
}

.brand { border-bottom: 1px solid var(--tk-line); }
.brand small { color: var(--tk-faint); letter-spacing: 2.4px; }
.brand strong { font-size: 20px; }

.side-nav { gap: 4px; }

.nav-item {
  height: 42px;
  border-radius: var(--tk-r-sm);
  color: var(--tk-muted);
  font-weight: 500;
  transition: background var(--tk-dur) var(--tk-ease),
              color var(--tk-dur) var(--tk-ease),
              box-shadow var(--tk-dur) var(--tk-ease);
}

.nav-item svg { width: 18px; height: 18px; flex: 0 0 auto; }

.nav-item:hover {
  background: rgba(148, 163, 184, 0.08);
  color: var(--tk-text);
}

.nav-item.active {
  background: var(--tk-primary-soft);
  color: #dbeafe;
  box-shadow: inset 3px 0 0 var(--tk-primary);
}

.source-status { border-top: 1px solid var(--tk-line); }
.source-status strong { color: var(--tk-text-soft); }
.source-status small { color: var(--tk-faint); }
.status-dot { background: var(--tk-ok); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14); }

.workspace { padding: 0 32px 48px; }

.topbar { border-bottom: 1px solid var(--tk-line); }
.eyebrow { color: var(--tk-secondary); letter-spacing: 1.6px; }

.icon-button {
  background: var(--tk-surface);
  border: 1px solid var(--tk-line);
  color: var(--tk-muted);
  border-radius: var(--tk-r-sm);
  transition: color var(--tk-dur) var(--tk-ease),
              border-color var(--tk-dur) var(--tk-ease),
              background var(--tk-dur) var(--tk-ease);
}
.icon-button:hover {
  color: var(--tk-secondary);
  border-color: var(--tk-line-strong);
  background: var(--tk-surface-2);
}

.operator { border-left: 1px solid var(--tk-line); }
.operator > span { background: var(--tk-primary-soft); color: var(--tk-secondary); }
.operator strong { color: var(--tk-text-soft); }
.operator small { color: var(--tk-faint); }

/* ----------------------------------------------------------- surfaces ---- */

.metrics,
.control-band,
.results-band,
.studio-card,
.nav-panel,
.video-task,
.title-monitor,
.account-health-row,
.echotik-monitor,
.ali1688-control,
.extension-download,
.profile-box,
.settings-dialog {
  background: var(--tk-surface);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-r);
  box-shadow: var(--tk-shadow-sm);
}

.metrics {
  gap: 1px;
  background: var(--tk-line);
  overflow: hidden;
  border-radius: var(--tk-r);
}

.metrics article {
  background: var(--tk-surface);
  transition: background var(--tk-dur) var(--tk-ease);
}
.metrics article:hover { background: var(--tk-surface-2); }
.metrics small { color: var(--tk-muted); letter-spacing: 0.02em; }
.metrics strong { color: var(--tk-text); font-size: 23px; }

.metric-icon { border-radius: var(--tk-r-sm); }
.metric-icon.teal { color: var(--tk-secondary); background: var(--tk-primary-soft); }
.metric-icon.amber { color: var(--tk-warn); background: var(--tk-warn-soft); }
.metric-icon.blue { color: var(--tk-secondary); background: var(--tk-primary-soft); }
.metric-icon.red { color: var(--tk-danger); background: var(--tk-danger-soft); }

.panel-heading h2 { color: var(--tk-text); }
.panel-heading p { color: var(--tk-muted); }

.section-heading p,
.results-head p { color: var(--tk-muted); }

.api-badge {
  background: var(--tk-ok-soft);
  border: 1px solid rgba(16, 185, 129, 0.32);
  color: #6ee7b7;
  letter-spacing: 0.9px;
  font-weight: 700;
}
.api-badge span { background: var(--tk-ok); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16); }

/* -------------------------------------------------------------- form ---- */

fieldset { border: 0; }

legend,
.filter-grid label > span,
.settings-label,
.rules-grid label > span,
.video-options label > span,
.video-label-row > span,
.title-optimizer-form label > span,
.studio-field > span {
  color: var(--tk-text-soft);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea {
  background: var(--tk-bg-soft);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-r-sm);
  color: var(--tk-text);
  transition: border-color var(--tk-dur) var(--tk-ease),
              box-shadow var(--tk-dur) var(--tk-ease),
              background var(--tk-dur) var(--tk-ease);
}

input::placeholder,
textarea::placeholder { color: var(--tk-faint); }

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):hover,
select:hover,
textarea:hover { border-color: var(--tk-line-strong); }

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
select:focus,
textarea:focus {
  border-color: var(--tk-primary);
  box-shadow: var(--tk-glow);
  background: var(--tk-surface);
  outline: none;
}

select option { background: var(--tk-surface-2); color: var(--tk-text); }

.field-help,
.settings-help,
.video-field > small,
.file-drop small,
.studio-hint,
.rules-inline-title small {
  color: var(--tk-muted);
}

.check-option { color: var(--tk-text-soft); }
.check-option input { accent-color: var(--tk-primary); }

/* category picker */
.category-option {
  background: var(--tk-bg-soft);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-r);
  transition: border-color var(--tk-dur) var(--tk-ease),
              background var(--tk-dur) var(--tk-ease),
              box-shadow var(--tk-dur) var(--tk-ease);
}
.category-option:hover { border-color: var(--tk-line-strong); background: var(--tk-surface-2); }
.category-option.active {
  border-color: var(--tk-primary);
  background: var(--tk-primary-soft);
  box-shadow: 0 0 0 1px var(--tk-primary);
}
.category-option strong { color: var(--tk-text); }
.category-option small { color: var(--tk-muted); }

/* file drop */
.file-drop {
  background: var(--tk-bg-soft);
  border: 1px dashed var(--tk-line-strong);
  border-radius: var(--tk-r);
  color: var(--tk-text-soft);
  transition: border-color var(--tk-dur) var(--tk-ease), background var(--tk-dur) var(--tk-ease);
}
.file-drop:hover,
.file-drop.dragover {
  border-color: var(--tk-primary);
  background: var(--tk-primary-soft);
}
.file-drop strong { color: var(--tk-text); }
.file-drop svg { color: var(--tk-secondary); }

/* ------------------------------------------------------------ buttons ---- */

.run-button,
.download-button,
.auto-button,
.secondary-button,
.task-retry {
  border-radius: var(--tk-r-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--tk-dur) var(--tk-ease),
              border-color var(--tk-dur) var(--tk-ease),
              color var(--tk-dur) var(--tk-ease),
              box-shadow var(--tk-dur) var(--tk-ease);
}

.run-button,
.download-button {
  background: var(--tk-primary);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 6px 18px -8px rgba(59, 130, 246, 0.75);
}
.run-button:hover,
.download-button:hover { background: var(--tk-primary-hover); }
.run-button:disabled,
.download-button:disabled { opacity: 0.6; cursor: wait; box-shadow: none; }

.secondary-button,
.auto-button {
  background: var(--tk-surface-2);
  border: 1px solid var(--tk-line);
  color: var(--tk-text-soft);
}
.secondary-button:hover,
.auto-button:hover {
  background: var(--tk-surface-3);
  border-color: var(--tk-line-strong);
  color: var(--tk-text);
}
.secondary-button.active,
.auto-button.active {
  background: var(--tk-primary-soft);
  border-color: var(--tk-primary);
  color: #dbeafe;
}

.download-button.disabled { opacity: 0.4; }

/* -------------------------------------------------------------- table ---- */

.table-wrap { border-radius: var(--tk-r); }

table { color: var(--tk-text-soft); }

th {
  background: var(--tk-bg-soft);
  color: var(--tk-muted);
  border-bottom: 1px solid var(--tk-line);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 10px;
}

td {
  border-bottom: 1px solid var(--tk-line-soft);
  color: var(--tk-text-soft);
}

tbody tr { transition: background var(--tk-dur) var(--tk-ease); }
tbody tr:hover { background: rgba(148, 163, 184, 0.05); }

.product-cell img {
  border: 1px solid var(--tk-line);
  background: var(--tk-surface-3);
  border-radius: var(--tk-r-sm);
}
.product-cell strong { color: var(--tk-text); }
.product-cell small { color: var(--tk-faint); }

.keyword-pill {
  background: var(--tk-surface-3);
  color: var(--tk-text-soft);
  border-radius: 6px;
}

.price { color: var(--tk-secondary); font-weight: 700; }

.ready {
  background: var(--tk-ok-soft);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.row-link { color: var(--tk-secondary); }
.row-link:hover { background: var(--tk-primary-soft); }

.table-footer { color: var(--tk-muted); }

/* search box */
.search-box {
  background: var(--tk-bg-soft);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-r-sm);
}
.search-box svg { color: var(--tk-faint); }
.search-box input { color: var(--tk-text); }

/* ------------------------------------------------------- feedback ------ */

.task-progress {
  background: var(--tk-primary-soft);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: var(--tk-r);
}
.task-progress strong { color: var(--tk-text); }
.task-progress small { color: var(--tk-muted); }

.spinner {
  border: 2px solid rgba(96, 165, 250, 0.25);
  border-top-color: var(--tk-secondary);
}

.result-reason,
.task-error {
  background: var(--tk-warn-soft);
  border: 1px solid rgba(245, 158, 11, 0.32);
  color: #fcd34d;
  border-radius: var(--tk-r-sm);
}

.video-notice {
  background: var(--tk-surface-2);
  border: 1px solid var(--tk-line);
  color: var(--tk-text-soft);
  border-radius: var(--tk-r-sm);
}

.empty-state { color: var(--tk-muted); }
.empty-state svg { color: var(--tk-faint); }
.empty-state strong { color: var(--tk-text-soft); }

.toast {
  background: var(--tk-surface-3);
  color: var(--tk-text);
  border: 1px solid var(--tk-line-strong);
  border-radius: var(--tk-r);
  box-shadow: var(--tk-shadow);
  z-index: var(--tk-z-toast);
}
.toast.error {
  background: #3b1418;
  border-color: rgba(239, 68, 68, 0.5);
  color: #fecaca;
}

/* --------------------------------------------------------- monitors ---- */

.echotik-tabs button {
  background: transparent;
  border: 1px solid var(--tk-line);
  color: var(--tk-muted);
  border-radius: var(--tk-r-sm);
  transition: all var(--tk-dur) var(--tk-ease);
}
.echotik-tabs button:hover { color: var(--tk-text); border-color: var(--tk-line-strong); }
.echotik-tabs button.active {
  background: var(--tk-primary-soft);
  border-color: var(--tk-primary);
  color: #dbeafe;
}

.echotik-monitor strong { color: var(--tk-text-soft); }

.echotik-monitor-dot,
.title-monitor-dot { background: var(--tk-faint); box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.18); }
.echotik-monitor-dot.live,
.title-monitor-dot.ok { background: var(--tk-ok); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.echotik-monitor-dot.running,
.title-monitor-dot.warn { background: var(--tk-warn); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
.echotik-monitor-dot.error,
.title-monitor-dot.bad { background: var(--tk-danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }

.title-monitor {
  background: var(--tk-bg-soft);
  border: 1px solid var(--tk-line);
}
.title-monitor-card {
  background: var(--tk-surface-2);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-r-sm);
}
.title-monitor-card span { color: var(--tk-muted); }
.title-monitor-card strong { color: var(--tk-text); }

.title-monitor-trend {
  background: var(--tk-surface-2);
  border: 1px solid var(--tk-line);
  border-radius: 999px;
  color: var(--tk-text-soft);
}
.title-monitor-trend.ok { border-color: rgba(16, 185, 129, 0.4); color: #6ee7b7; }
.title-monitor-trend.bad { border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; }

.title-lang-row select,
.title-scope-list {
  background: var(--tk-bg-soft);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-r-sm);
  color: var(--tk-text);
}

.account-health-row { background: var(--tk-bg-soft); }
.account-health-row.ok { border-color: rgba(16, 185, 129, 0.4); }
.account-health-row.bad { border-color: rgba(239, 68, 68, 0.4); }
.account-health-kind { background: var(--tk-surface-3); color: var(--tk-text-soft); }
.account-health-row.ok .account-health-kind { background: var(--tk-ok-soft); color: #6ee7b7; }
.account-health-row.bad .account-health-kind { background: var(--tk-danger-soft); color: #fca5a5; }
.account-health-msg { color: var(--tk-muted); }
.account-health-head { color: var(--tk-text-soft); }

.profile-box label { color: var(--tk-text-soft); }
.profile-box textarea {
  background: var(--tk-bg-soft);
  border: 1px solid var(--tk-line);
  color: var(--tk-text);
}

/* ---------------------------------------------------------- settings ---- */

.settings-dialog {
  background: var(--tk-surface);
  border: 1px solid var(--tk-line);
  box-shadow: var(--tk-shadow);
}
.settings-divider { background: var(--tk-line); }
.ali-api-settings span { color: var(--tk-muted); }
.ali-api-settings select {
  background: var(--tk-bg-soft);
  border: 1px solid var(--tk-line);
  color: var(--tk-text);
}

/* -------------------------------------------------------------- misc ---- */

.echo-product,
.echo-no-image,
.video-task,
.video-preview,
.studio-card { background: var(--tk-surface); }

.echo-no-image { color: var(--tk-faint); background: var(--tk-surface-3); }

.extension-download {
  background: var(--tk-surface-2);
  border: 1px solid var(--tk-line);
  color: var(--tk-text-soft);
  border-radius: var(--tk-r-sm);
}
.extension-download:hover {
  background: var(--tk-surface-3);
  border-color: var(--tk-primary);
  color: var(--tk-text);
}

/* -------------------------------------------------------- responsive ---- */

@media (max-width: 1000px) {
  .workspace { padding: 0 22px 40px; }
}

@media (max-width: 720px) {
  .sidebar {
    background: var(--tk-bg-soft);
    border-right: 0;
    border-bottom: 1px solid var(--tk-line);
  }
  .workspace { padding: 0 14px 32px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  body { font-size: 15px; }
}

/* tables scroll rather than break the layout on narrow screens */
@media (max-width: 900px) {
  .table-wrap,
  .echotik-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ------------------------------------------------------ a11y motion ---- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .spinner { animation: none; }
}

/* ------------------------------------------------ legacy auto.css dark pass ---- */
.auto-button,
.mini-button,
.video-filters button,
.video-job-cancel,
.gen-tab,
.studio-pill.ghost {
  background: var(--tk-surface-2);
  border-color: var(--tk-line);
  color: var(--tk-text-soft);
}
.auto-button:hover,
.mini-button:hover,
.video-filters button:hover,
.video-job-cancel:hover,
.gen-tab:hover,
.gen-tab.active,
.studio-pill.ghost:hover {
  background: var(--tk-surface-3);
  border-color: var(--tk-primary);
  color: var(--tk-text);
}

.video-options select,
.echotik-actions select,
.video-connect-fields input,
.video-script-tools input,
.jinluopan-lang select,
.image-options select,
.image-options input[type="color"],
.gen-grid textarea,
.gen-grid select,
.gen-grid input[type="text"],
.studio-card textarea,
.studio-input,
.studio-field select,
.studio-field input[type="color"] {
  background: var(--tk-bg-soft);
  border-color: var(--tk-line);
  color: var(--tk-text);
  color-scheme: dark;
}
.video-options select:focus,
.echotik-actions select:focus,
.video-connect-fields input:focus,
.video-script-tools input:focus,
.jinluopan-lang select:focus,
.image-options select:focus,
.gen-grid textarea:focus,
.gen-grid select:focus,
.gen-grid input[type="text"]:focus,
.studio-card textarea:focus,
.studio-input:focus,
.studio-field select:focus {
  border-color: var(--tk-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
  outline: none;
}

.video-notice,
.video-task,
.echotik-monitor,
.echotik-kpi,
.echotik-overview-empty,
.nav-panel,
.shop-history-item,
.plugin-guide,
.video-connect,
.file-drop,
.jinluopan-title-opt,
.image-card,
.title-tool-result,
.studio-tabs,
.studio-card,
.scene-card {
  background: var(--tk-surface);
  border-color: var(--tk-line);
  color: var(--tk-text);
  box-shadow: var(--tk-shadow-sm);
}
.file-drop:hover,
.studio-card:hover,
.scene-card:hover,
.image-card:hover {
  background: var(--tk-surface-2);
  border-color: var(--tk-line-strong);
}

.api-badge.ali,
.shop-state-badge.collected {
  background: rgba(16, 185, 129, .14);
  border-color: rgba(16, 185, 129, .32);
  color: #6ee7b7;
}
.shop-state-badge.running {
  background: rgba(59, 130, 246, .14);
  border-color: rgba(59, 130, 246, .34);
  color: #93c5fd;
}
.video-job-icon.failed {
  background: rgba(239, 68, 68, .14);
  border-color: rgba(239, 68, 68, .32);
  color: #fca5a5;
}
.ali1688-mode label.active {
  background: rgba(59, 130, 246, .16);
  border-color: var(--tk-primary);
  color: #bfdbfe;
}
.video-ratios span {
  background: var(--tk-bg-soft);
  border-color: var(--tk-line);
  color: var(--tk-text-soft);
}
.video-job:hover { background: var(--tk-surface-2); }

.auto-button,
.mini-button,
.video-filters button,
.gen-tab,
.video-job-cancel,
.video-options select,
.echotik-actions select { min-height: 44px; }

input::placeholder,
textarea::placeholder { color: var(--tk-faint); opacity: 1; }
select option { background: #111827; color: #e5e7eb; }
/* Jinluopan conversion history */
.jinluopan-history-panel { margin-top: 18px; padding: 18px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 16px; background: rgba(15, 23, 42, .42); }
.jinluopan-history-heading { margin-bottom: 12px; }
.jinluopan-history-heading p { margin: 4px 0 0; color: var(--muted, #94a3b8); }
.jinluopan-history-rows { display: grid; gap: 10px; }
.jinluopan-history-item { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 16px; align-items: center; padding: 13px 14px; border: 1px solid rgba(148, 163, 184, .16); border-radius: 12px; background: rgba(15, 23, 42, .56); }
.jinluopan-history-main { min-width: 0; display: grid; gap: 4px; }
.jinluopan-history-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jinluopan-history-main small { color: var(--muted, #94a3b8); }
.jinluopan-history-stats { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted, #94a3b8); font-size: 13px; }
.jinluopan-history-stats span { padding: 4px 8px; border-radius: 999px; background: rgba(148, 163, 184, .1); }
.jinluopan-history-stats .error { color: #fca5a5; background: rgba(239, 68, 68, .12); }
@media (max-width: 820px) { .jinluopan-history-item { grid-template-columns: 1fr; } .jinluopan-history-item .secondary-button { justify-self: start; } }