/* PI visual baseline: apps/web/src/App.tsx appTheme + styles.css.
   Loaded after page styles. Layout and CAD geometry colours remain page-owned. */
:root {
  color-scheme: light;
  --primary: #2458c6;
  --primary-hover: #4676d7;
  --primary-soft: #edf3ff;
  --surface: #ffffff;
  --canvas: #f5f6f8;
  --ink: #172033;
  --muted: #677085;
  --line: #e3e6eb;
  --sider-border: #e5e8ed;
  --muted-surface: #f8f9fb;
  --teal: var(--primary);
  --teal-soft: var(--primary-soft);
  --navy: #172033;
  --navy-deep: #172033;
  --danger: #cf1322;
  --amber: #874d00;
  --amber-soft: #fffbe6;
  --radius: 8px;
  color: var(--ink);
  background: var(--canvas);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body { color: var(--ink); background: var(--canvas); }
body > header, .topbar {
  min-height: 64px;
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--sider-border);
  padding: 12px 24px;
}
body > header a { color: var(--ink); }
body > header nav { gap: 8px; flex-wrap: wrap; }
body > header nav a { padding: 6px 10px; border-radius: 5px; font-size: 14px; }
body > header nav a:hover { color: var(--primary); background: var(--muted-surface); }
body > header nav a[aria-current="page"] { color: #1f55bd; background: var(--primary-soft); }
.brand { color: var(--ink); font-size: 18px; letter-spacing: 0; }
.brand-mark, .pi-brand-mark {
  display: inline-grid; place-items: center; flex: 0 0 34px;
  width: 34px; height: 34px; border: 0; border-radius: 6px;
  background: var(--primary); color: #fff; font-size: 14px; font-weight: 700;
  line-height: 1; letter-spacing: .04em;
}
.brand-mark span { color: #fff; }
h1 { font-size: 24px; line-height: 1.4; letter-spacing: 0; font-weight: 600; }
h2 { font-size: 17px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
.small, .subtle, small, .context p, .line-meta, .stat-label, .stat-caption { color: var(--muted); }
.eyebrow { color: var(--muted); letter-spacing: 0; font-size: 12px; }
button, .button {
  min-height: 32px; padding: 5px 12px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface); color: var(--ink);
  font-size: 14px; font-weight: 400; line-height: 1.5;
  box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
}
button:hover:not(:disabled), .button:hover:not(:disabled) {
  color: var(--primary); background: var(--surface); border-color: var(--primary-hover);
}
.primary, .button-primary, .studio-page .new-task {
  color: #fff; background: var(--primary); border-color: var(--primary);
}
.primary:hover:not(:disabled), .button-primary:hover:not(:disabled), .studio-page .new-task:hover {
  color: #fff; background: var(--primary-hover); border-color: var(--primary-hover);
}
.button-quiet { color: var(--ink); background: var(--muted-surface); border-color: var(--line); font-size: 14px; }
.button-quiet:hover:not(:disabled), .button-secondary:hover:not(:disabled) { color: var(--primary); background: var(--surface); border-color: var(--primary-hover); }
button:disabled, .button:disabled, .button-disabled, .primary:disabled:hover {
  color: #9097a4; background: #f5f5f5; border-color: var(--line);
  cursor: not-allowed; opacity: 1; box-shadow: none;
}
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  color: var(--ink); background: var(--surface); border: 1px solid #d9d9d9;
  border-radius: 6px; padding: 6px 11px; font: inherit; min-height: 32px;
}
input::placeholder, textarea::placeholder { color: #8c94a3; }
input:not(:disabled):hover, select:not(:disabled):hover, textarea:not(:disabled):hover { border-color: var(--primary-hover); }
input:not([type="checkbox"]):not([type="radio"]):disabled, select:disabled, textarea:disabled { color: #9097a4; background: #f5f5f5; cursor: not-allowed; }
input, select, textarea { accent-color: var(--primary); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
label { color: var(--ink); font-weight: 500; }
.sidebar { background: var(--surface); color: var(--ink); border-right: 1px solid var(--sider-border); }
.sidebar .brand strong { color: var(--ink); letter-spacing: 0; }
.sidebar .brand small, .sidebar-label, .sidebar-footnote, .sidebar-stage p { color: var(--muted); }
.sidebar-stage { border-color: var(--sider-border); }
.sidebar-stage strong, .navigation a { color: var(--ink); }
.navigation a:hover { background: var(--muted-surface); color: var(--primary); }
.navigation a[aria-current="page"] { background: var(--primary-soft); border-color: transparent; color: #1f55bd; }
.navigation a[aria-current="page"]::before { background: var(--primary); }
.nav-symbol { color: inherit; }
.panel, .stat-card, .order-card, body:not(.studio-page) main section, .trial-canvas, .trial-controls {
  background: var(--surface); border-color: var(--line); border-radius: 8px; box-shadow: none;
}
.panel-heading { border-color: var(--line); }
.panel-footer, .preview-empty { background: var(--muted-surface); border-color: var(--line); }
.sticky-actions { background: var(--muted-surface); border-color: var(--line); }
.list-row a { color: var(--primary); }
.measurement, .library-preview { border-color: var(--line); }
.badge-neutral { color: var(--muted); background: var(--muted-surface); border-color: var(--line); }
.badge-green { color: #237804; background: #f6ffed; border-color: #b7eb8f; }
.badge-amber { color: var(--amber); background: var(--amber-soft); border-color: #ffe58f; }
.badge-error { color: var(--danger); background: #fff1f0; border-color: #ffa39e; }
.tip, #notice { color: var(--ink); background: var(--primary-soft); border-color: var(--primary); border-radius: 6px; }
#notice.error { color: var(--danger); background: #fff1f0; border-color: #ffa39e; }
dialog { background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: 8px; }
dialog::backdrop { background: rgb(0 0 0 / 35%); }
table th { color: var(--ink); background: #fafafa; font-weight: 600; }
table td, table th { border-color: #f0f0f0; }
.select-menu { border-color: var(--line); background: var(--surface); box-shadow: 0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px rgb(0 0 0 / 5%); }
.select-menu-option:hover:not([aria-disabled="true"]) { background: #f5f5f5; }
.select-menu-option[data-active="true"] { background: var(--primary-soft); outline-color: var(--primary); }
.select-menu-option[aria-selected="true"] { color: #1f55bd; background: var(--primary-soft); }
.select-menu-option[aria-disabled="true"] { color: #9097a4; }

/* Existing specialist tools share the shell; drawing strokes keep their meaning. */
.pc-modes, .pc-tabs, .preparation-tabs, .trial-actions { background: var(--muted-surface); border-color: var(--line); }
.pc-modes button, .pc-modes select, .pc-page-options select { background: var(--surface); color: var(--ink); border-color: var(--line); }
.pc-modes button[aria-pressed="true"], .point-buttons button[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.pc-tabs button[aria-selected="true"], .preparation-tabs [aria-selected="true"], .task-card[aria-current="true"] { color: #1f55bd; background: var(--primary-soft); border-color: #d6e4ff; box-shadow: none; }
.pc-tool-status, .pc-batch, .piece-binding-form, .original-block, .export-guide, .curve-legend, .profile-values { background: var(--muted-surface); color: var(--ink); border-color: var(--line); }
.upload-box, .file-icon, .ai-adviser, #curve-ai { background: var(--muted-surface); border-color: var(--line); }
.info-banner, .task-context, .notice[data-kind="info"] { color: var(--ink); background: var(--primary-soft); border-color: #d6e4ff; }
.pc-pick-menu, #task-editor > .panel-heading { background: var(--surface); border-color: var(--line); }
.pc-pick-menu button { background: var(--surface); color: var(--ink); border-color: var(--line); }
.pc-pick-menu button:hover, .pc-pick-menu button:focus { background: var(--primary-soft); }
.viewer-canvas-wrap, .trial-svg, #preview svg, #point-preview svg, #drawing svg, #review-drawing { background: var(--surface); border-color: var(--line); }
body:not(.studio-page) #metrics { background: var(--muted-surface); color: var(--ink); }

/* Keep the PC three-column CAD workspace, using PI's white navigation shell. */
.studio-page > header { height: 64px; gap: 20px; }
.studio-page .brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.studio-page > header > span { color: var(--muted); font-size: 12px; }
.studio-page .workspace { height: calc(100dvh - 64px); grid-template-columns: 224px minmax(400px, 1fr) 330px; }
.studio-page .tasks { background: var(--surface); color: var(--ink); border-right: 1px solid var(--sider-border); padding: 20px 12px; }
.studio-page .tasks .small, .studio-page .task-card small { color: var(--muted); }
.studio-page .task-card { color: var(--ink); border-color: transparent; background: transparent; border-radius: 5px; box-shadow: none; padding: 12px; }
.studio-page .task-card:hover { background: var(--muted-surface); color: var(--primary); }
.studio-page .task-card.active { background: var(--primary-soft); color: #1f55bd; border-color: transparent; }
.studio-page .tasks .section-title button { color: var(--ink); }
.studio-page .new-task { border-style: solid; border-radius: 6px; padding: 8px 12px; }
.studio-page main { padding: 24px; gap: 12px; }
.studio-page .steps { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.studio-page .steps button { border-radius: 5px; font-size: 13px; box-shadow: none; }
.studio-page .steps button[aria-selected="true"] { color: #1f55bd; background: var(--primary-soft); box-shadow: none; font-weight: 600; }
.studio-page .steps button:disabled { background: transparent; color: #9097a4; }
.studio-page .assistant { background: var(--surface); border-color: var(--sider-border); padding: 24px 18px; }
.studio-page .assistant label { font-size: 13px; font-weight: 500; }
.studio-page .chips button { color: var(--primary); background: var(--primary-soft); border-color: #d6e4ff; font-size: 12px; }
.studio-page .tools nav { border-color: var(--line); border-radius: 8px; box-shadow: 0 6px 16px rgb(0 0 0 / 8%); }
.studio-page .tools a:hover { background: var(--primary-soft); color: var(--primary); }
.studio-page #canvas { background-color: #fff; background-image: radial-gradient(#e3e6eb .6px, transparent .6px); border-color: var(--line); border-radius: 8px; }
.studio-page .empty, .studio-page .metrics { color: var(--muted); }
.studio-page footer { border-color: var(--line); flex-shrink: 0; }
.studio-page .workflow-panel { background: var(--surface); border-radius: 8px; padding: 20px; }
.studio-page .workflow-panel .workflow-warning { background: var(--amber-soft); border-color: #ffe58f; border-radius: 6px; }
.studio-page .login-panel { border-color: var(--line); border-radius: 8px; box-shadow: 0 6px 16px rgb(0 0 0 / 5%); }
@media (min-width: 1650px) { .studio-page .workspace { grid-template-columns: 240px minmax(600px, 1fr) 380px; } }
@media (max-height: 760px) { .studio-page main { padding: 12px 16px; gap: 8px; } .studio-page .assistant { padding: 16px; } }
@media (max-height: 640px) { .studio-page .workspace { min-height: 0; } .studio-page #canvas, .studio-page #canvas svg { min-height: 100px; } }