:root {
  --bg: #f4f6f8; --card: #fff; --ink: #1c2530; --muted: #667; --line: #dde3ea;
  --brand: #14527a; --brand-ink: #fff; --err: #b3261e; --note: #14527a;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1418; --card:#161c22; --ink:#e6ecf2; --muted:#9aa7b3;
          --line:#2a333c; --brand:#2b7fb8; --err:#ff6b5e; --note:#7fc0e8; }
}
* { box-sizing: border-box; }
/* the hidden attribute must always win over display rules below (a class like
   .modal{display:flex} otherwise overrides [hidden] and shows it on load) */
[hidden] { display: none !important; }
body { margin:0; font:15px/1.5 system-ui,Segoe UI,Roboto,"Microsoft YaHei",sans-serif;
       background:var(--bg); color:var(--ink); }
.topbar { display:flex; justify-content:space-between; align-items:center;
          padding:10px 18px; background:var(--brand); color:var(--brand-ink); }
.brand { font-weight:600; display:flex; align-items:center; gap:12px;
         color:inherit; text-decoration:none; }
a.brand:hover { opacity:.85; }
.logo-chip { background:#fff; border-radius:6px; padding:4px 10px; display:flex;
             align-items:center; }
.logo { height:22px; display:block; }
.topbar-right { display:flex; gap:14px; align-items:center; font-size:13px; }
.lang a { color:var(--brand-ink); opacity:.65; text-decoration:none; margin:0 3px; }
.lang a.active { opacity:1; text-decoration:underline; font-weight:600; }
.who { opacity:.9; }
button, .link { cursor:pointer; }
button { background:var(--brand); color:var(--brand-ink); border:0; border-radius:6px;
         padding:11px 18px; font-size:15px; }
.link { background:transparent; color:var(--brand-ink); border:1px solid rgba(255,255,255,.5);
        border-radius:6px; padding:4px 10px; }
.content { max-width:min(1600px, 96vw); margin:22px auto; padding:0 16px; }
.layout { grid-template-columns:minmax(360px,460px) 1fr; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
        padding:20px; margin-bottom:18px; }
.card h1 { margin:0 0 14px; font-size:18px; }
.card h2 { font-size:15px; margin:18px 0 6px; color:var(--muted); }
.login { max-width:420px; margin:6vh auto; }
.layout { display:grid; grid-template-columns:minmax(320px,420px) 1fr; gap:18px; align-items:start; }
@media (max-width:820px){ .layout { grid-template-columns:1fr; } }
label { display:block; margin:10px 0; font-size:13px; color:var(--muted); }
input, select { width:100%; margin-top:4px; padding:8px 10px; font-size:14px;
                border:1px solid var(--line); border-radius:6px;
                background:var(--bg); color:var(--ink); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hint { font-size:12px; color:var(--muted); margin:2px 0 8px; }
.error { color:var(--err); font-size:13px; }
.sales-note { color:var(--note); font-size:13px; }
.mono { font-family:ui-monospace,Consolas,"Courier New",monospace; font-size:12.5px;
        white-space:pre; overflow-x:auto; background:var(--bg); padding:12px;
        border-radius:6px; border:1px solid var(--line); }
.navlink { color:var(--brand-ink); text-decoration:none; opacity:.85; font-size:13px; }
.navlink:hover { opacity:1; text-decoration:underline; }
.tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.tabs button { background:var(--bg); color:var(--ink); border:1px solid var(--line); }
.tabs button.active { background:var(--brand); color:var(--brand-ink); }
.tablewrap { overflow-x:auto; }
#adminTable { border-collapse:collapse; width:100%; font-size:13px; }
#adminTable th, #adminTable td { border:1px solid var(--line); padding:4px 6px;
        text-align:left; white-space:nowrap; }
#adminTable input[type=text], #adminTable select { min-width:70px; padding:4px 6px; }
.addrow { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin-bottom:12px;
        padding:10px; border:1px dashed var(--line); border-radius:8px; }
.addrow label { margin:0; font-size:12px; }
button.mini { padding:5px 11px; font-size:13px; margin-right:4px; }
button.danger { background:var(--err); }
#historyTable { border-collapse:collapse; width:100%; font-size:13px; }
#historyTable th, #historyTable td { border-bottom:1px solid var(--line);
        padding:5px 8px; text-align:left; }
#historyTable tr:hover td { background:var(--bg); cursor:pointer; }
.ai-box textarea, textarea { width:100%; margin-top:4px; padding:8px 10px;
        font-size:14px; border:1px solid var(--line); border-radius:6px;
        background:var(--bg); color:var(--ink); font-family:inherit; resize:vertical; }
.ai-actions { display:flex; gap:10px; align-items:center; margin-top:8px;
        flex-wrap:wrap; }
.ai-actions input[type=file] { width:auto; flex:1; min-width:220px; }
#adminTable textarea { min-width:220px; font-size:12.5px; }
.ico { width:20px; height:20px; fill:var(--brand); vertical-align:-3px;
       margin-right:8px; }
@media (prefers-color-scheme: dark) { .ico { fill:var(--note); } }
.ai-flex { display:flex; gap:20px; align-items:stretch; }
.ai-main { flex:1; min-width:0; }
.ph-figure { margin:0; flex:0 0 150px; display:flex; flex-direction:column;
             align-items:center; justify-content:center; gap:6px; }
.ph-figure img { max-width:150px; max-height:190px; object-fit:contain;
                 filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.ph-figure figcaption { font-size:12px; color:var(--muted); letter-spacing:.08em; }
@media (max-width:640px) { .ph-figure { display:none; } }
.run-row { display:flex; gap:10px; margin-top:6px; }
.run-row.col { flex-direction:column; align-items:stretch; }  /* New below Run */
button.secondary { background:var(--bg); color:var(--ink);
        border:1px solid var(--line); }
/* larger action buttons */
button.btn-lg { padding:12px 22px; font-size:15px; font-weight:600; }
/* status + save + review-select + send-for-review all on one row */
.status-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap;
        margin:10px 0 12px; }
.status-wrap { display:inline-flex; align-items:center; gap:8px; }
#workflowActions { display:inline-flex; gap:10px; flex-wrap:wrap; }
#recommendOut { display:inline-block; margin-left:8px; font-weight:600; }
.right-col { display:flex; flex-direction:column; gap:18px; min-width:0; }
.report-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap;
        margin:8px 0 12px; }
.mini-select { width:auto; padding:4px 8px; font-size:13px; }
table.perf { border-collapse:collapse; width:100%; font-size:13px; }
table.perf th, table.perf td { border:1px solid var(--line); padding:4px 8px;
        text-align:right; white-space:nowrap; }
table.perf th { background:var(--bg); }
table.perf td:first-child, table.perf th:first-child { text-align:center; }
.status-ok { color:#1a7f37; font-weight:600; }
.status-bad { color:var(--err); font-weight:700; }
/* review-workflow status badges */
.status-badge { display:inline-block; padding:2px 8px; border-radius:10px;
  font-size:12px; font-weight:700; white-space:nowrap; }
.st-draft { background:#e5e7eb; color:#374151; }
.st-in_review { background:#fef3c7; color:#92400e; }
.st-approved { background:#dcfce7; color:#166534; }
.st-unlock_requested { background:#ffe4e6; color:#9f1239; }
.order-note { background:#f8fafc; border-left:3px solid var(--brand);
  padding:6px 10px; border-radius:4px; }
.pw-box { max-width:380px; }
.pw-box label { display:block; margin:8px 0; }
.pw-box input { width:100%; }
.admin-search { display:block; width:min(360px,100%); margin:0 0 10px; padding:8px 10px; }
/* wide admin tables: bounded scroll region so the horizontal scrollbar stays
   on screen (no scrolling to the very bottom of a long table), sticky header */
.admin-scroll { max-height:72vh; overflow:auto; border:1px solid var(--line); border-radius:8px; }
/* natural (content) width so wide tables overflow -> a horizontal scrollbar
   sits at the bottom of this bounded region (width:100% would squish instead). */
.admin-scroll #adminTable { margin:0; width:max-content; min-width:100%; }
.admin-scroll #adminTable tr:first-child th { position:sticky; top:0; z-index:2;
  background:var(--card); box-shadow:0 1px 0 var(--line); }
/* friendly home production table with vertical column lines */
#productionTable { border-collapse:collapse; width:100%; font-size:14px; }
#productionTable th, #productionTable td { border:1px solid var(--line); padding:7px 10px; }
#productionTable thead th { text-align:left; background:var(--bg);
  position:sticky; top:0; }
#productionTable .prod-detail td { background:var(--bg); }
.prod-row { cursor:pointer; }
.prod-toggle { width:22px; text-align:center; color:var(--brand); user-select:none; }
.prod-row:hover { background:rgba(0,0,0,.03); }
.prod-detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:6px 18px; padding:8px 4px; font-size:13px; }
@media (prefers-color-scheme: dark) { .prod-row:hover { background:rgba(255,255,255,.05); } }
.perm-legend { margin-top:14px; font-size:13px; }
.perm-legend h3 { margin:0 0 6px; font-size:14px; }
.perm-legend ul { margin:0; padding-left:18px; }
.perm-legend li { margin:3px 0; color:var(--muted, #555); }
@media (prefers-color-scheme: dark) {
  .st-draft { background:#374151; color:#e5e7eb; }
  .st-in_review { background:#78350f; color:#fde68a; }
  .st-approved { background:#14532d; color:#bbf7d0; }
  .st-unlock_requested { background:#881337; color:#fecdd3; }
  .order-note { background:#1f2937; }
}
.suggest-model { font-size:16px; font-weight:700; color:var(--brand); }
@media (prefers-color-scheme: dark) {
  .status-ok { color:#4ade80; }
  .suggest-model { color:var(--note); }
}
.review-banner { background:var(--bg); border:1px solid var(--line);
        border-left:4px solid var(--brand); padding:8px 12px; border-radius:6px; }
#extra_materials { height:auto; }
label.inline { display:inline-flex; align-items:center; gap:6px; margin:0;
        font-size:12px; flex-wrap:wrap; }
label.inline select { margin-top:0; }
/* wire rows */
.wires-section { border:1px solid var(--line); border-radius:8px; padding:10px;
        margin:10px 0; }
.wires-head { display:flex; justify-content:space-between; align-items:center;
        font-size:13px; font-weight:600; margin-bottom:8px; }
.wire-row { border-top:1px dashed var(--line); padding-top:8px; margin-top:8px; }
.wire-row:first-child { border-top:0; padding-top:0; margin-top:0; }
/* two-line wire row: material+size+unit on line 1, speed+max-temp wrap below */
.wr-line { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.wr-speed, .wr-maxtemp { flex:1 1 34%; min-width:120px; margin-top:0; }
.wr-mat { flex:2; min-width:90px; margin-top:0; }
.wr-size { flex:1; min-width:60px; margin-top:0; }
.wr-unit { flex:1; min-width:70px; margin-top:0; }
.wr-custom { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.wr-custom input { width:auto; flex:1; min-width:90px; margin-top:0; font-size:12px; }
.ai-suggest-h { font-size:14px; margin:14px 0 6px; color:var(--brand); }
@media (prefers-color-scheme: dark) { .ai-suggest-h { color:var(--note); } }
/* full-report modal */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:100;
        display:flex; align-items:flex-start; justify-content:center;
        padding:30px 16px; overflow:auto; }
.modal-box { background:var(--card); color:var(--ink); border-radius:10px;
        max-width:900px; width:100%; padding:24px; position:relative; }
.modal-close { position:absolute; top:10px; right:10px; background:var(--line);
        color:var(--ink); border:0; border-radius:6px; padding:4px 10px; }
.cannot-work-banner { background:var(--err); color:#fff; font-weight:700;
        padding:10px 14px; border-radius:8px; margin:10px 0; }
.cannot-work-banner.warn { background:#b8860b; }
label.check { display:flex; align-items:center; gap:8px; font-size:13px;
        color:var(--ink); }
label.check input { width:auto; margin:0; }
label.check.disabled { opacity:.45; cursor:not-allowed; }
.ll-heading { border-top:2px solid var(--brand); padding-top:8px; margin-top:14px; }
table.perf tr.input-row td { background:#fff3b0; color:#1c2530; font-weight:600; }
table.perf tr.input-row.ok td { background:#c9f7d0; }
table.perf tr.input-row.bad td { background:#ffd0cc; }
@media (prefers-color-scheme: dark) {
  table.perf tr.input-row td { background:#5b5320; color:#fff; }
  table.perf tr.input-row.ok td { background:#1f5f2e; }
  table.perf tr.input-row.bad td { background:#6b241f; }
}
.entra-block { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.entra-btns { display:flex; gap:8px; flex-wrap:wrap; }
.link-btn { display:inline-block; padding:8px 14px; border:1px solid var(--line);
        border-radius:6px; text-decoration:none; color:var(--ink);
        background:var(--bg); font-size:14px; }
.link-btn:hover { border-color:var(--brand); }

/* --- compact layout (v0.43+): tighten spacing; comfortable at 1200px wide --- */
body { font-size:13.5px; line-height:1.42; }
.content { max-width:min(1500px, 99vw); margin:10px auto; padding:0 12px; }
.card { padding:10px 12px; margin-bottom:10px; }
.card h1 { margin:0 0 7px; font-size:15px; }
.card h2 { margin:9px 0 4px; }
label { margin:5px 0; font-size:12.5px; }
/* 2-column layout tuned to fit a 1200px-wide screen without horizontal scroll */
.layout { gap:10px; grid-template-columns:minmax(300px,380px) 1fr; }
input, select, .ai-box textarea, textarea { padding:5px 8px; font-size:13.5px; }
#adminTable { font-size:12.5px; }
#adminTable th, #adminTable td { padding:3px 5px; }
#productionTable th, #productionTable td { padding:3px 6px; }
table.perf { font-size:12.5px; }
table.perf th, table.perf td { padding:3px 6px; }
.status-row { gap:8px; align-items:center; flex-wrap:wrap; }
.hint { margin:1px 0 5px; }
.tabs { gap:5px; margin-bottom:10px; }
/* the customer/note box beside Save: inline, not full width */
.save-note { width:auto; min-width:150px; max-width:240px; margin:0;
        display:inline-block; padding:5px 8px; }
/* stack the two columns on genuinely narrow screens (< 1100px) */
@media (max-width: 1100px) {
  .layout { grid-template-columns:1fr; }
  .ai-flex { flex-direction:column; }
}
/* notes popup (production input note + order note) */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45);
        display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal-box { background:var(--card); color:var(--ink); border-radius:10px;
        padding:16px 18px; max-width:min(680px, 92vw); max-height:82vh;
        overflow:auto; position:relative; border:1px solid var(--line); }
.modal-box h3 { margin:10px 0 4px; font-size:13px; color:var(--muted); }
.modal-close { position:absolute; top:8px; right:10px; border:none;
        background:none; font-size:22px; line-height:1; cursor:pointer;
        color:var(--muted); }
.note-pre { white-space:pre-wrap; word-break:break-word; margin:0;
        background:var(--bg); border:1px solid var(--line); border-radius:6px;
        padding:8px 10px; font:12.5px/1.5 ui-monospace,Consolas,monospace; }
.note-edit { width:100%; margin:0 0 6px; padding:6px 8px; font-size:13px;
        border:1px solid var(--line); border-radius:6px; box-sizing:border-box; }
.note-save-row { display:flex; gap:10px; align-items:center; margin:2px 0 8px; }
.note-changes { font-size:12px; }
/* production table: keep the Range 1-4 (+turns) columns compact */
#adminTable input[data-col^="range"] { min-width:44px; width:56px; }
/* autosize: inputs follow their size attribute instead of a wide minimum */
#adminTable input[type=text] { min-width:0; width:auto; }
/* horizontal scrollbar shown ABOVE the table (under the tabs/title) */
.top-scroll { overflow-x:auto; overflow-y:hidden; height:14px; margin-bottom:2px; }
.top-scroll > div { height:1px; }
/* sortable column headers */
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { text-decoration:underline; }
th.sort-asc::after { content:" ▲"; font-size:9px; }
th.sort-desc::after { content:" ▼"; font-size:9px; }
/* grouped admin tabs (one row per category) */
#adminTabs { flex-direction:column; align-items:stretch; }
.tab-group { display:flex; align-items:center; gap:5px; flex-wrap:wrap;
        margin-bottom:4px; }
.tab-group-label { font-size:11px; color:var(--muted); min-width:64px; }
.restore-label { cursor:pointer; text-decoration:underline; color:var(--brand);
        margin-left:12px; }
/* home evaluate: series/kVA/voltage triple picker + pulley checkboxes */
.row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.series-pick select { width:100%; }
.pulley-checks { display:flex; flex-wrap:wrap; gap:10px; align-items:center;
        margin:6px 0; }
.inline-check { display:inline-flex; margin:0; }
.order-locked { color:var(--brand); font-weight:600; }
.order-hit { cursor:pointer; }
.order-hit:hover { background:var(--bg); }
/* production detail popup */
.modal-wide { max-width:min(900px, 95vw); }
.detail-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px 12px;
        margin:8px 0; }
.detail-grid label { margin:0; font-size:12px; }
.detail-grid input { padding:4px 6px; font-size:12.5px; }
/* success/error toast notifications */
.toast-host { position:fixed; top:14px; right:14px; z-index:2000;
        display:flex; flex-direction:column; gap:8px; max-width:min(360px,90vw); }
.toast { padding:9px 13px; border-radius:8px; color:#fff; font-size:13px;
        box-shadow:0 4px 14px rgba(0,0,0,.25); opacity:1; transition:opacity .3s;
        word-break:break-word; }
.toast-ok { background:#1f8a4c; }
.toast-err { background:var(--err); }
.toast-out { opacity:0; }
.note-changes .chg { padding:3px 0; border-bottom:1px dashed var(--line); }
.note-changes .chg-at { color:var(--muted); }

/* physics-inputs section header rows (grouped display) */
tr.phys-sec td {
  background: #e8edf4; color: #1c2530; font-weight: 700;
  border-top: 2px solid #9fb2c8; padding: 4px 8px;
}
@media (prefers-color-scheme: dark) {
  tr.phys-sec td { background: #2b3648; color: #e8edf4; border-top-color: #4a5a72; }
}

/* collapsible evaluation-history card (auto-collapsed when production data
   is also visible; click the title to expand) */
#historyCard.collapsed > :not(h1) { display: none; }
#historyCard h1 .collapse-arrow { font-size: 0.7em; opacity: 0.7; }

/* power estimate over the machine's rated power */
table.perf tr.over-limit td { background: #ffd0cc; color: #7a1410; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  table.perf tr.over-limit td { background: #6b241f; color: #ffd9d5; }
}