:root {
  color-scheme: light;
  --bg: oklch(1 0 0);
  --surface: oklch(0.965 0.004 20);
  --surface-strong: oklch(0.93 0.006 20);
  --ink: oklch(0.22 0.018 15);
  --muted: oklch(0.48 0.018 15);
  --line: oklch(0.86 0.008 20);
  --primary: oklch(0.52 0.19 11);
  --primary-hover: oklch(0.46 0.18 11);
  --accent: oklch(0.48 0.105 205);
  --success: oklch(0.48 0.12 150);
  --warning: oklch(0.62 0.14 75);
  --danger: oklch(0.48 0.19 25);
  --focus: oklch(0.62 0.16 230);
  --sidebar: oklch(0.18 0.012 15);
  --sidebar-ink: oklch(0.96 0.004 20);
  --radius: 6px;
  --topbar-height: 58px;
  --sidebar-width: 224px;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(0.16 0.008 15);
  --surface: oklch(0.2 0.01 15);
  --surface-strong: oklch(0.25 0.012 15);
  --ink: oklch(0.94 0.006 20);
  --muted: oklch(0.7 0.012 20);
  --line: oklch(0.34 0.012 15);
  --primary: oklch(0.64 0.19 11);
  --primary-hover: oklch(0.7 0.18 11);
  --accent: oklch(0.7 0.11 205);
  --success: oklch(0.7 0.13 150);
  --warning: oklch(0.76 0.13 75);
  --danger: oklch(0.66 0.18 25);
  --focus: oklch(0.72 0.15 230);
  --sidebar: oklch(0.1 0.006 15);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 14px; letter-spacing: 0; }
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button, select { cursor: pointer; }
button:disabled, input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; opacity: .55; }
[hidden] { display: none !important; }
svg { width: 18px; height: 18px; stroke-width: 1.8; }

.login-screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--surface); }
.login-panel { width: min(380px, 100%); padding: 34px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.login-panel h1 { margin: 18px 0 6px; font-size: 24px; line-height: 1.2; }
.login-panel > p { margin: 0 0 26px; color: var(--muted); }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; background: var(--primary); color: oklch(1 0 0); border-radius: 8px; }
.brand-mark.small { width: 32px; height: 32px; border-radius: 6px; flex: 0 0 auto; }
.brand-mark.small svg { width: 17px; height: 17px; }
.stack-form, .form-panel { display: flex; flex-direction: column; gap: 16px; }
label { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 13px; }
label > span { color: var(--ink); font-weight: 600; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); padding: 10px 11px; outline: none; }
textarea { resize: vertical; min-height: 82px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-error { min-height: 20px; margin: 0; color: var(--danger); }

.app-shell { min-height: 100dvh; display: grid; grid-template: var(--topbar-height) 1fr / var(--sidebar-width) 1fr; }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--topbar-height); padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 30; }
.topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-brand div { display: flex; flex-direction: column; line-height: 1.25; }
.topbar-brand strong { font-size: 14px; }
.topbar-brand span { color: var(--muted); font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.service-state { display: inline-flex; align-items: center; gap: 7px; padding-right: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.service-state.online .state-dot { background: var(--success); }
.service-state.offline .state-dot { background: var(--danger); }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); }
.icon-button:hover { background: var(--surface); color: var(--ink); }
.mobile-nav-button { display: none; }

.sidebar { grid-row: 2; padding: 14px 10px; background: var(--sidebar); color: var(--sidebar-ink); display: flex; flex-direction: column; justify-content: space-between; min-height: calc(100dvh - var(--topbar-height)); position: sticky; top: var(--topbar-height); align-self: start; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 0; border-radius: var(--radius); background: transparent; color: oklch(0.76 0.008 20); text-align: left; }
.nav-item:hover { background: oklch(0.25 0.014 15); color: var(--sidebar-ink); }
.nav-item.active { background: oklch(0.31 0.05 12); color: oklch(0.98 0.004 20); }
.sidebar-foot { display: flex; flex-direction: column; gap: 3px; padding: 12px 10px; color: oklch(0.66 0.008 20); font-size: 11px; }
.sidebar-foot span:first-child { color: var(--sidebar-ink); font-size: 12px; }

.workspace { grid-column: 2; min-width: 0; padding: 28px clamp(18px, 3vw, 44px) 60px; }
.view { display: none; max-width: 1280px; margin: 0 auto; }
.view.active { display: block; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-heading h1 { margin: 0; font-size: 24px; line-height: 1.25; text-wrap: balance; }
.page-heading p { margin: 7px 0 0; color: var(--muted); max-width: 68ch; line-height: 1.5; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h2, .result-panel h2 { margin: 0; font-size: 15px; }

.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; padding: 8px 13px; border-radius: var(--radius); border: 1px solid transparent; font-weight: 650; }
.button.primary { background: var(--primary); color: oklch(1 0 0); }
.button.primary:hover { background: var(--primary-hover); }
.button.secondary { background: var(--bg); color: var(--ink); border-color: var(--line); }
.button.secondary:hover { background: var(--surface); }
.button.danger { background: var(--danger); color: oklch(1 0 0); }
.button.full { width: 100%; }
.text-button { border: 0; background: transparent; color: var(--accent); padding: 4px; }
.text-button:hover { text-decoration: underline; }

.status-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 30px; }
.module-state { padding: 15px 16px; border-right: 1px solid var(--line); background: var(--bg); }
.module-state:last-child { border-right: 0; }
.module-state strong { display: block; margin-bottom: 5px; }
.module-state span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.module-state span.online .state-dot { background: var(--success); }
.content-section { padding-top: 4px; }
.job-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.job-item { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.4fr) auto; align-items: center; gap: 14px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.job-meta { min-width: 0; }
.job-meta strong, .job-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-meta span { color: var(--muted); font-size: 11px; margin-top: 3px; }
.job-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.job-actions a { color: var(--accent); text-decoration: none; font-size: 12px; }
.job-actions a:hover { text-decoration: underline; }

.tool-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 32px; align-items: start; }
.form-panel { min-width: 0; }
.result-panel { position: sticky; top: calc(var(--topbar-height) + 24px); min-height: 280px; border-left: 1px solid var(--line); padding-left: 28px; }
.result-panel h2 { margin-bottom: 14px; }
.result-empty { color: var(--muted); padding: 18px 0; line-height: 1.6; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.compact-field { max-width: 160px; }
.segmented { display: inline-flex; width: fit-content; padding: 3px; background: var(--surface-strong); border-radius: var(--radius); }
.segmented button { min-width: 80px; padding: 7px 11px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); }
.segmented button.selected { background: var(--bg); color: var(--ink); box-shadow: 0 1px 4px oklch(0.2 0 0 / .12); }
.result-block { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface); border-radius: var(--radius); }
.result-line { display: flex; justify-content: space-between; gap: 16px; }
.result-line span { color: var(--muted); }
.result-message { margin: 2px 0; color: var(--muted); line-height: 1.55; }
.error-text { color: var(--danger); }
.json-output { max-height: 420px; margin: 2px 0 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font: 12px/1.55 ui-monospace, "Cascadia Code", Consolas, monospace; }
.download-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.download-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--accent); text-decoration: none; background: var(--bg); }

.search-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 140px 105px auto auto; align-items: end; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.search-box { position: relative; }
.search-box svg { position: absolute; left: 10px; bottom: 10px; color: var(--muted); }
.search-box input { padding-left: 36px; }
.check-control { flex-direction: row; align-items: flex-start; gap: 8px; color: var(--ink); }
.check-control input { width: 16px; height: 16px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--primary); }
.check-control span { font-weight: 500; }
.search-toolbar .check-control { align-items: center; height: 38px; white-space: nowrap; }
.search-summary { min-height: 42px; display: flex; align-items: center; color: var(--muted); }
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; min-width: 880px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 650; }
tbody tr:last-child td { border-bottom: 0; }
td:nth-child(1), td:nth-child(5) { white-space: nowrap; }
.paper-title { min-width: 260px; font-weight: 600; line-height: 1.45; }
.paper-muted { color: var(--muted); }
.pagination { display: flex; justify-content: flex-end; gap: 6px; padding-top: 14px; }
.pagination button { min-width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); }
.pagination button.active { background: var(--primary); color: oklch(1 0 0); border-color: var(--primary); }

.eplan-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
.danger-zone { padding-left: 32px; border-left: 1px solid var(--line); }
.status-label { padding: 4px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-label.info { color: var(--accent); background: oklch(0.92 0.04 205); }
.status-label.warning { color: oklch(0.35 0.1 75); background: oklch(0.92 0.07 75); }
html[data-theme="dark"] .status-label.info { color: oklch(0.82 0.09 205); background: oklch(0.28 0.04 205); }
html[data-theme="dark"] .status-label.warning { color: oklch(0.85 0.1 75); background: oklch(0.3 0.05 75); }
.confirmation { padding: 12px; border: 1px solid var(--warning); border-radius: var(--radius); background: oklch(0.97 0.025 75); line-height: 1.45; }
html[data-theme="dark"] .confirmation { background: oklch(0.25 0.025 75); }

.status-badge { display: inline-flex; align-items: center; width: fit-content; padding: 4px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-badge.queued, .status-badge.processing, .status-badge.running, .status-badge.ai_processing { color: oklch(0.37 0.1 75); background: oklch(0.92 0.06 75); }
.status-badge.completed { color: oklch(0.34 0.11 150); background: oklch(0.92 0.055 150); }
.status-badge.failed, .status-badge.cancelled { color: oklch(0.4 0.16 25); background: oklch(0.93 0.045 25); }
html[data-theme="dark"] .status-badge { background: var(--surface-strong); color: var(--ink); }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 36px)); }
.toast { padding: 12px 14px; border-radius: var(--radius); background: var(--ink); color: var(--bg); box-shadow: 0 4px 8px oklch(0.1 0 0 / .2); animation: toast-in 180ms ease-out; }
.toast.error { background: var(--danger); color: oklch(1 0 0); }
@keyframes toast-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 980px) {
  .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-state:nth-child(2) { border-right: 0; }
  .module-state:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .tool-layout, .eplan-layout { grid-template-columns: 1fr; }
  .result-panel, .danger-zone { position: static; border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
  .search-toolbar { grid-template-columns: minmax(240px, 1fr) 130px 100px; }
  .search-toolbar .button, .search-toolbar .check-control { grid-row: 2; }
}

@media (max-width: 720px) {
  :root { --sidebar-width: 0px; }
  .app-shell { grid-template-columns: 1fr; }
  .mobile-nav-button { display: grid; }
  .topbar-brand { flex: 1; }
  .topbar-brand > .brand-mark { display: none; }
  .service-state { display: none; }
  .sidebar { position: fixed; z-index: 50; top: var(--topbar-height); left: 0; width: 224px; transform: translateX(-100%); transition: transform 180ms ease-out; box-shadow: 4px 0 8px oklch(0.1 0 0 / .2); }
  .sidebar.open { transform: translateX(0); }
  .workspace { grid-column: 1; padding: 22px 16px 48px; }
  .page-heading { flex-direction: column; margin-bottom: 22px; }
  .page-heading h1 { font-size: 21px; }
  .status-strip { grid-template-columns: 1fr; }
  .module-state { border-right: 0; border-bottom: 1px solid var(--line); }
  .module-state:last-child { border-bottom: 0; }
  .field-row, .search-toolbar { grid-template-columns: 1fr; }
  .search-toolbar .button, .search-toolbar .check-control { grid-row: auto; }
  .job-item { grid-template-columns: 1fr; }
  .job-actions { justify-content: flex-start; flex-wrap: wrap; }
  .login-panel { padding: 26px 22px; }
}

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