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

:root {
  --bg: #f4efe7;
  --surface: rgba(255, 252, 246, 0.88);
  --surface-strong: #fffaf2;
  --ink: #1f1e1a;
  --muted: #6b665d;
  --line: rgba(60, 48, 27, 0.12);
  --accent: #c55c2a;
  --accent-deep: #8d3412;
  --accent-soft: rgba(197, 92, 42, 0.12);
  --ok: #1f7a4c;
  --warn: #c48312;
  --bad: #b83b2d;
  --shadow: 0 30px 80px rgba(72, 52, 17, 0.12);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --workspace-gap: 18px;
  --workspace-left-rail: 232px;
  --workspace-right-drawer: 336px;
  --panel-radius: 14px;
  --panel-border: 0.5px solid rgba(0, 0, 0, 0.12);
  --panel-bg: #ffffff;
  --panel-surface: #f5f4f0;
  --panel-border-mid: rgba(0, 0, 0, 0.22);
  --blue-light: #e6f1fb;
  --blue-mid: #93bee8;
  --blue-text: #0c447c;
  --blue-strong: #378add;
  --green-light: #eaf3de;
  --green-mid: #8dc98a;
  --green-text: #27500a;
  --green-strong: #639922;
  --text-primary: #1a1917;
  --text-secondary: #6b6860;
  --text-hint: #a8a69e;
}

.jhony-lab-shell {
  display: grid;
  gap: 16px;
}

.jhony-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.jhony-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.jhony-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.jhony-home-card {
  gap: 14px;
}

.jhony-home-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.jhony-notice {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(197, 92, 42, 0.18);
  border-radius: 12px;
  background: rgba(197, 92, 42, 0.08);
}

.jhony-lab-shell details > summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 12px;
}

.mono-block {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.82rem;
  background: rgba(10, 20, 35, 0.06);
  border-radius: 10px;
  padding: 10px 12px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(240, 161, 70, 0.24), transparent 30%),
    radial-gradient(circle at right 20%, rgba(197, 92, 42, 0.18), transparent 22%),
    linear-gradient(180deg, #f8f2ea 0%, #efe7dc 100%);
  color: var(--ink);
  font-family: "Bahnschrift", "Aptos", "Segoe UI", sans-serif;
}

button,
input,
textarea,
select {
  font: inherit;
}

.app-shell {
  position: relative;
  width: min(1340px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 28px 0 64px;
}

.app-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 4px;
}

.app-chrome-brand {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-chrome-session {
  min-height: 1px;
  font-size: 0.01px;
  color: transparent;
}

.ambient {
  position: fixed;
  border-radius: 999px;
  filter: blur(30px);
  pointer-events: none;
  opacity: 0.55;
}

.ambient-one {
  top: 60px;
  left: -40px;
  width: 220px;
  height: 220px;
  background: rgba(255, 188, 120, 0.45);
}

.ambient-two {
  right: 8%;
  bottom: 5%;
  width: 260px;
  height: 260px;
  background: rgba(197, 92, 42, 0.18);
}

.hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(255, 250, 242, 0.7);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto -30px -60px auto;
  width: 220px;
  height: 220px;
  background: linear-gradient(135deg, rgba(197, 92, 42, 0.16), rgba(255, 173, 79, 0.02));
  border-radius: 40px;
  transform: rotate(28deg);
}

.eyebrow {
  color: var(--accent-deep);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

h1,
h2,
h3 {
  margin: 0;
}

h1 {
  font-size: clamp(2.3rem, 5vw, 4.6rem);
  line-height: 0.95;
}

.hero-copy {
  margin: 14px 0 0;
  max-width: 640px;
  color: var(--muted);
  font-size: 1rem;
}

.hero-chip,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(31, 122, 76, 0.1);
  border: 1px solid rgba(31, 122, 76, 0.18);
  color: var(--ok);
  font-size: 0.92rem;
}

#app {
  margin-top: 22px;
}

.grid {
  display: grid;
  gap: 18px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  position: relative;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 55px rgba(68, 55, 33, 0.08);
}

.card h2,
.card h3 {
  margin-bottom: 10px;
}

.muted {
  color: var(--muted);
}

.mono {
  font-family: Consolas, "Courier New", monospace;
}

.login-card {
  max-width: 480px;
  margin: 28px auto 0;
}

.form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.9rem;
  color: var(--muted);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid rgba(84, 68, 40, 0.14);
  background: rgba(255, 253, 249, 0.88);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink);
}

.field textarea {
  min-height: 110px;
  resize: vertical;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.button {
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: white;
  box-shadow: 0 16px 28px rgba(141, 52, 18, 0.22);
}

.button.secondary {
  background: rgba(255, 250, 242, 0.95);
  color: var(--ink);
  border: 1px solid rgba(84, 68, 40, 0.14);
}

.button.ghost {
  background: transparent;
  color: var(--accent-deep);
  border: 1px dashed rgba(141, 52, 18, 0.34);
}

.button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.stat {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 250, 242, 0.72);
  border: 1px solid var(--line);
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 6px;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: 700;
}

.upload-grid {
  display: grid;
  gap: 14px;
}

.upload-slot {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.45);
}

.upload-slot.good {
  border-color: rgba(31, 122, 76, 0.28);
  background: rgba(31, 122, 76, 0.06);
}

.upload-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.status-tag {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  border: 1px solid transparent;
}

.status-tag.good {
  color: var(--ok);
  background: rgba(31, 122, 76, 0.1);
  border-color: rgba(31, 122, 76, 0.18);
}

.status-tag.warn {
  color: var(--warn);
  background: rgba(196, 131, 18, 0.12);
  border-color: rgba(196, 131, 18, 0.18);
}

.status-tag.neutral {
  color: var(--muted);
  background: rgba(84, 68, 40, 0.08);
  border-color: rgba(84, 68, 40, 0.12);
}

.status-tag.active {
  color: #5064db;
  background: rgba(80, 100, 219, 0.1);
  border-color: rgba(80, 100, 219, 0.16);
}

.list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.list-item {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(84, 68, 40, 0.08);
}

.verification-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dot {
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.dot.good {
  background: var(--ok);
}

.dot.warn {
  background: var(--warn);
}

.dot.bad {
  background: var(--bad);
}

.output-link {
  color: var(--accent-deep);
  text-decoration: none;
  font-weight: 500;
}

.banner {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
}

.banner-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.banner-copy {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.4;
}

.banner-actions {
  margin-top: 12px;
}

.banner-close {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
}

.banner.info {
  background: rgba(197, 92, 42, 0.1);
  border-color: rgba(197, 92, 42, 0.16);
}

.banner.error {
  background: rgba(184, 59, 45, 0.08);
  border-color: rgba(184, 59, 45, 0.18);
  color: #7d261c;
}

.workspace-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 280px minmax(0, 1fr) 420px;
}

.zone-list,
.reading-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.zone-card,
.reading-card {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
}

.zone-card.active,
.reading-card.active,
.target-pill.active {
  border-color: rgba(197, 92, 42, 0.5);
  background: rgba(197, 92, 42, 0.12);
}

.reading-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.reading-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.86rem;
}

.target-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 16px;
}

.target-pill {
  border: 1px solid rgba(84, 68, 40, 0.14);
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
}

.preview-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.preview-strip img,
.snapshot-preview {
  width: 112px;
  height: 84px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(84, 68, 40, 0.14);
}

.camera-panel {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 255, 255, 0.52);
}

.camera-panel video {
  width: 100%;
  max-height: 220px;
  border-radius: 14px;
  background: #171717;
  margin-bottom: 12px;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(84, 68, 40, 0.08);
  background: rgba(255, 255, 255, 0.55);
}

.workspace-header {
  display: grid;
  gap: 12px;
}

.workspace-header-card {
  z-index: 1200;
  overflow: visible;
  padding: 20px 22px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(249, 243, 235, 0.94)),
    radial-gradient(circle at top right, rgba(240, 161, 70, 0.12), transparent 30%);
}

.workspace-header-shell {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.workspace-header-main {
  display: grid;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.workspace-header-side {
  display: grid;
  gap: 10px;
  justify-items: end;
  flex: 0 0 auto;
}

.workspace-header-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.workspace-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.workspace-tech-label {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.workspace-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.workspace-title-row-selector {
  align-items: center;
  flex-wrap: wrap;
}

.project-selector-shell {
  position: relative;
  flex: 0 0 auto;
}

.project-selector-trigger {
  min-height: 42px;
  padding: 10px 14px;
  font-weight: 700;
  white-space: nowrap;
}

.project-selector-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 4000;
  min-width: 320px;
  max-width: min(420px, calc(100vw - 48px));
  padding: 12px;
  border-radius: 18px;
  display: grid;
  gap: 8px;
  box-shadow: 0 22px 42px rgba(47, 34, 18, 0.16);
}

.project-selector-divider {
  height: 1px;
  background: rgba(84, 68, 40, 0.12);
  margin: 4px 0;
}

.project-selector-group-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-selector-option {
  display: grid;
  gap: 0;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.project-selector-option:hover,
.project-selector-option:focus-visible {
  border-color: rgba(197, 92, 42, 0.32);
  outline: none;
}

.project-selector-option.is-active,
.project-selector-option-primary {
  border-color: rgba(197, 92, 42, 0.28);
  background: rgba(255, 246, 236, 0.96);
}

.project-selector-option-title {
  font-weight: 700;
}

.project-selector-empty {
  color: var(--muted);
  font-size: 0.86rem;
}

.workspace-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.15;
  font-weight: 700;
}

.workspace-location-line {
  color: var(--muted);
  font-size: 0.94rem;
}

.workspace-location-line-clean::before {
  content: "📍 ";
}

.workspace-status-line {
  color: var(--accent-deep);
  font-size: 0.9rem;
  font-weight: 600;
}

.empty-workspace-card,
.empty-drawing-state,
.flow-tag-empty-state {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed rgba(84, 68, 40, 0.18);
  background: rgba(255, 252, 247, 0.78);
}

.empty-drawing-state.is-preview-unavailable {
  border-style: solid;
  border-color: rgba(196, 131, 18, 0.42);
  background: linear-gradient(135deg, rgba(255, 248, 230, 0.95), rgba(255, 252, 247, 0.88));
  box-shadow: 0 1px 0 rgba(84, 68, 40, 0.06);
}

.empty-drawing-state.is-preview-unavailable strong {
  font-size: 1.05rem;
  color: var(--ink);
}

.drawing-preview-lead {
  margin: 0;
  line-height: 1.45;
}

.packet-preview-server-note {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(84, 68, 40, 0.14);
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink);
}

.packet-preview-server-note-label {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(196, 131, 18, 0.15);
  color: var(--warn);
  vertical-align: middle;
}

.drawing-preview-hint {
  margin-top: 2px;
}

.internet-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.internet-status-badge.is-good {
  color: var(--ok);
  border-color: rgba(31, 122, 76, 0.16);
  background: rgba(31, 122, 76, 0.08);
}

.internet-status-badge.is-poor {
  color: var(--warn);
  border-color: rgba(196, 131, 18, 0.18);
  background: rgba(196, 131, 18, 0.1);
}

.internet-status-badge.is-offline {
  color: var(--muted);
  border-color: rgba(84, 68, 40, 0.1);
  background: rgba(238, 235, 229, 0.9);
}

.internet-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.9;
}

.internet-status-text {
  white-space: nowrap;
}

.info-popover {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.info-popover-trigger {
  cursor: pointer;
}

.tooltip-overlay-root {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
}

.tooltip-popover {
  position: fixed;
  left: 0;
  top: 0;
  width: min(320px, calc(100vw - 48px));
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(32, 29, 24, 0.96);
  color: #fffaf2;
  font-size: 0.76rem;
  line-height: 1.45;
  box-shadow: 0 18px 32px rgba(24, 18, 10, 0.24);
  pointer-events: none;
  white-space: normal;
  transform: translate3d(0, 0, 0);
}

.workspace-message-row:empty {
  display: none;
}

.workspace-layout {
  display: grid;
  gap: var(--workspace-gap);
  align-items: start;
  grid-template-columns: var(--workspace-left-rail) minmax(0, 1fr);
}

.workspace-layout.drawer-open {
  grid-template-columns: var(--workspace-left-rail) minmax(0, 1fr) var(--workspace-right-drawer);
}

.workspace-layout.drawer-collapsed {
  grid-template-columns: var(--workspace-left-rail) minmax(0, 1fr) 58px;
}

.left-rail,
.main-area,
.right-drawer {
  display: grid;
  gap: var(--workspace-gap);
  align-items: start;
}

.left-rail {
  position: sticky;
  top: 18px;
  min-width: 0;
}

.left-rail > * {
  width: 100%;
  min-width: 0;
}

.left-rail .collapsible-summary {
  padding: 14px 16px;
}

.left-rail .collapsible-body {
  padding: 14px 16px 16px;
}

.left-rail h3 {
  font-size: 1rem;
}

.main-area {
  min-width: 0;
}

.right-drawer {
  position: sticky;
  top: 18px;
  min-width: 0;
}

.right-drawer.collapsed {
  align-self: stretch;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.panel-title,
.collapsible-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.panel-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.panel-close {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(84, 68, 40, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--muted);
  cursor: pointer;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(84, 68, 40, 0.08);
  border: 1px solid rgba(84, 68, 40, 0.12);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: help;
}

.collapsible-card {
  padding: 0;
  overflow: visible;
}

.utility-side-card,
.camera-preview-card,
.voice-preview-card {
  overflow: visible;
}

.collapsible-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}

.collapsible-summary-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.collapsible-summary::-webkit-details-marker {
  display: none;
}

.collapsible-card[open] .collapsible-summary {
  border-bottom: 1px solid rgba(84, 68, 40, 0.08);
}

.collapsible-status {
  display: flex;
  align-items: center;
}

.collapsible-summary-action {
  display: inline-flex;
  align-items: center;
}

.collapsible-body {
  padding: 18px 22px 22px;
}

.project-files-card .collapsible-body {
  padding-top: 16px;
}

.work-progress-card .collapsible-body {
  display: grid;
  gap: 14px;
  padding-top: 16px;
}

.toolkit-title {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.38rem;
  margin: 0;
  line-height: 1.2;
  flex-wrap: wrap;
}

.toolkit-title-prefix {
  display: inline-flex;
  align-items: center;
}

.toolkit-title-last-word {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  padding-right: 18px;
  white-space: nowrap;
}

.toolkit-title-popover {
  position: absolute;
  top: -6px;
  right: -2px;
}

.toolkit-title-popover .info-popover-trigger {
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
}

.work-progress-list {
  display: grid;
  gap: 8px;
}

.work-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 252, 247, 0.72);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.work-progress-row:hover,
.work-progress-row:focus-visible {
  border-color: rgba(141, 52, 18, 0.22);
  background: rgba(255, 255, 255, 0.9);
  outline: none;
  transform: translateY(-1px);
}

.work-progress-row.is-active {
  border-color: rgba(141, 52, 18, 0.22);
  background: rgba(255, 247, 239, 0.96);
}

.work-progress-label {
  font-size: 0.94rem;
  font-weight: 700;
}

.work-progress-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(84, 68, 40, 0.08);
  background: rgba(84, 68, 40, 0.06);
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 700;
  white-space: nowrap;
}

.work-progress-status.good {
  color: var(--ok);
  background: rgba(31, 122, 76, 0.08);
  border-color: rgba(31, 122, 76, 0.14);
}

.work-progress-status.active {
  color: #5064db;
  background: rgba(80, 100, 219, 0.09);
  border-color: rgba(80, 100, 219, 0.14);
}

.work-progress-status.soft {
  color: var(--muted);
  background: rgba(235, 232, 226, 0.7);
}

.work-progress-footer {
  display: grid;
  gap: 8px;
}

.work-progress-saved {
  color: var(--muted);
  font-size: 0.76rem;
}

.project-files-download-list {
  display: grid;
  gap: 0;
}

.project-files-download-row-shell {
  display: grid;
  gap: 10px;
  border-bottom: 1px solid rgba(84, 68, 40, 0.08);
}

.project-files-download-row {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 8px 2px;
  background: transparent;
}

.project-files-download-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.project-files-download-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.92rem;
}

.project-files-download-meta {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-files-download-note {
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.3;
}

.project-files-download-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.project-files-download-actions-stack {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.project-files-download-button {
  min-width: 92px;
  min-height: 34px;
  padding: 0.38rem 0.8rem;
  font-size: 0.82rem;
  box-shadow: none;
}

.project-files-import-button[disabled] {
  opacity: 0.55;
}

.project-files-hidden-input {
  display: none;
}

.project-files-submittals-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.08);
  background: rgba(255, 252, 247, 0.9);
}

.project-files-submittals-panel-head {
  display: grid;
  gap: 4px;
}

.project-files-submittals-list {
  display: grid;
  gap: 8px;
  max-height: 210px;
  overflow: auto;
}

.project-files-submittals-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(84, 68, 40, 0.08);
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
}

.project-files-submittals-item input {
  margin-top: 2px;
}

.project-files-submittals-item-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.project-files-submittals-item-name {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-files-submittals-item-meta {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

.project-files-submittals-panel-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.project-files-delete-button {
  color: #8f3412;
}

@media (max-width: 780px) {
  .project-files-download-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 8px;
  }

  .project-files-download-actions {
    justify-self: start;
  }

  .project-files-download-actions-stack {
    justify-items: start;
  }

  .project-files-submittals-panel-actions {
    justify-content: flex-start;
  }
}

.notes-card .collapsible-body {
  padding-top: 16px;
}

.notes-card textarea {
  min-height: 132px;
}

.memo-editor-shell {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(141, 122, 103, 0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 243, 235, 0.92));
}

.memo-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.memo-toolbar-button {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 0.88rem;
}

.memo-ai-toolbar-button {
  margin-left: auto;
}

.memo-inline-assist-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(141, 122, 103, 0.14);
  background: rgba(255, 250, 244, 0.86);
}

.memo-dictation-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(141, 122, 103, 0.14);
  background: rgba(246, 248, 255, 0.92);
}

.memo-dictation-head {
  display: grid;
  gap: 4px;
}

.memo-dictation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.memo-dictation-helper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(84, 68, 40, 0.08);
  color: var(--muted);
  font-size: 0.82rem;
}

.memo-dictation-helper-dismiss {
  border: none;
  background: transparent;
  color: var(--accent-deep);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0;
}

.memo-inline-assist-head {
  display: grid;
  gap: 4px;
}

.memo-inline-assist-menu,
.memo-inline-assist-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.memo-inline-assist-option {
  justify-content: center;
}

.memo-inline-assist-compare {
  display: grid;
  gap: 10px;
}

.memo-inline-assist-block {
  display: grid;
  gap: 6px;
}

.memo-inline-assist-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.memo-inline-assist-block pre {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(141, 122, 103, 0.12);
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
}

.memo-file-debug-banner {
  display: grid;
  gap: 8px;
  margin: 10px 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(250, 247, 241, 0.94);
}

.memo-file-debug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.memo-file-debug-meta {
  display: grid;
  gap: 2px;
  font-size: 0.77rem;
}

.memo-file-debug-content {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(84, 68, 40, 0.08);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.memo-editor-input {
  min-height: 360px;
  max-height: 620px;
  resize: vertical;
  overflow-y: auto;
  line-height: 1.55;
  font-size: 0.98rem;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
}

.memo-editor-note {
  font-size: 0.84rem;
}

.memo-editor-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.memo-feedback-button {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 0.84rem;
}

.pilot-feedback-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.08);
  background: rgba(255, 252, 247, 0.88);
}

.pilot-feedback-head {
  display: grid;
  gap: 4px;
}

.pilot-feedback-form {
  display: grid;
  gap: 10px;
}

.pilot-feedback-field {
  display: grid;
  gap: 6px;
}

.pilot-feedback-field span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.pilot-feedback-field textarea {
  min-height: 84px;
  resize: vertical;
}

.pilot-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.notes-form-actions {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 6px;
}

.notes-form-actions .button {
  min-width: 108px;
}

.workspace-mode-card,
.memo-workspace-card,
.handwriting-workspace-card,
.review-submit-card {
  display: grid;
  gap: 14px;
}

.workspace-mode-card {
  padding-top: 16px;
  padding-bottom: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 245, 237, 0.92));
}

.workspace-mode-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.workspace-mode-copy {
  color: var(--ink);
  font-size: 0.94rem;
}

.handwriting-workspace-actions,
.review-submit-actions {
  justify-content: flex-end;
}

.review-submit-subtitle {
  margin-top: -4px;
}

.review-submit-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.review-submit-sections {
  display: grid;
  gap: 12px;
}

.review-submit-panel {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.08);
  background: rgba(255, 255, 255, 0.62);
}

.review-submit-panel > .muted,
.review-submit-panel .list {
  margin-top: 10px;
}

.memo-review-copy {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink);
  line-height: 1.55;
  white-space: pre-wrap;
}

.memo-review-copy-ready {
  border-color: rgba(62, 126, 85, 0.22);
  background: rgba(246, 252, 247, 0.94);
}

.memo-review-meta {
  margin-top: 8px;
}

.memo-review-actions {
  margin-top: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.review-panel-actions {
  margin-top: 12px;
}

.review-package-summary {
  margin-bottom: 12px;
}

.review-readiness-copy {
  border-color: rgba(84, 68, 40, 0.14);
  background: rgba(255, 252, 247, 0.92);
}

.review-email-field {
  margin-bottom: 10px;
}

.test-sheet-review-panel {
  display: grid;
  gap: 12px;
}

.test-sheet-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.test-sheet-review-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.test-sheet-review-actions .button,
.memo-review-actions .button,
.review-submit-actions .button {
  min-width: 160px;
}

.test-sheet-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.test-sheet-issue-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.test-sheet-issue-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(201, 164, 29, 0.28);
  background: rgba(255, 242, 184, 0.5);
}

.excel-grid-shell {
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.08);
  background: rgba(255, 255, 255, 0.82);
}

.excel-grid {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.excel-grid th,
.excel-grid td {
  border: 1px solid rgba(84, 68, 40, 0.08);
  padding: 0;
}

.excel-grid td.needs-review {
  background: rgba(255, 232, 120, 0.72);
}

.excel-grid th {
  background: rgba(246, 240, 231, 0.9);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
  height: 34px;
}

.excel-grid-rowhead {
  min-width: 44px;
  width: 44px;
}

.excel-grid-input {
  width: 100%;
  min-width: 100px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0 10px;
  font: inherit;
}

.excel-grid-input.needs-review {
  background: rgba(255, 232, 120, 0.72);
}

.excel-grid-input:focus {
  outline: 2px solid rgba(80, 100, 219, 0.24);
  outline-offset: -2px;
  background: rgba(240, 244, 255, 0.92);
}

.pdf-review-shell {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr);
}

.pdf-review-stage {
  min-height: 620px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(84, 68, 40, 0.08);
  background: rgba(255, 255, 255, 0.86);
}

.pdf-review-frame {
  width: 100%;
  height: 100%;
  min-height: 620px;
  border: 0;
  background: white;
}

.pdf-overlay-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.pdf-overlay-field {
  margin: 0;
}

.pdf-overlay-field.needs-review input {
  background: rgba(255, 232, 120, 0.72);
  border-color: rgba(201, 164, 29, 0.36);
}

.sheet-subtitle {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.92rem;
}

.detail-heading {
  display: grid;
  gap: 4px;
  margin: 14px 0 0;
}

.drawing-panel,
.sheet-panel,
.detail-panel {
  min-height: 100%;
}

.detail-panel-empty {
  min-height: 220px;
}

.drawer-handle {
  position: sticky;
  top: 18px;
  width: 100%;
  min-height: 180px;
  border: 1px solid rgba(84, 68, 40, 0.14);
  border-radius: 18px;
  background: rgba(255, 250, 242, 0.92);
  color: var(--accent-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  padding: 12px 8px;
}

.drawer-handle-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.drawer-handle-meta {
  font-size: 0.76rem;
  font-weight: 700;
}

.drawing-panel {
  min-height: min(74vh, 980px);
}

.drawing-viewport {
  max-height: min(68vh, 860px);
}

.sheet-panel .sheet-row-list {
  max-height: min(34vh, 420px);
  overflow: auto;
  padding-right: 4px;
}

.page-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.page-pill {
  border: 1px solid rgba(84, 68, 40, 0.14);
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
}

.page-pill.active {
  border-color: rgba(197, 92, 42, 0.45);
  background: rgba(197, 92, 42, 0.14);
  color: var(--accent-deep);
}

.drawing-stage {
  margin-top: 16px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(84, 68, 40, 0.1);
}

.tag-flow-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(84, 68, 40, 0.1);
}

.tag-flow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.tag-flow-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.tag-flow-progress {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.tag-flow-next-button {
  min-height: 34px;
  padding: 7px 12px;
  white-space: nowrap;
}

.flow-tag-row {
  display: grid;
  gap: 8px;
}

.flow-tag-row-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flow-tag-row-empty {
  font-size: 0.9rem;
}

.flow-tag-sequence {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.flow-tag-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.flow-tag {
  display: grid;
  gap: 3px;
  min-width: 128px;
  padding: 10px 50px 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.14);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  position: relative;
}

.flow-tag:hover,
.flow-tag:focus-visible {
  border-color: rgba(197, 92, 42, 0.38);
  box-shadow: 0 10px 18px rgba(68, 55, 33, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.flow-tag.active {
  border-color: rgba(197, 92, 42, 0.45);
  box-shadow: 0 12px 24px rgba(68, 55, 33, 0.1);
}

.flow-tag.spotlight {
  animation: flow-tag-spotlight 1.4s ease;
}

.flow-tag-symbol {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 31px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(84, 68, 40, 0.12);
  box-shadow: 0 6px 12px rgba(36, 28, 16, 0.08);
  pointer-events: none;
  overflow: hidden;
}

.flow-tag-symbol-image {
  width: 23px;
  height: 23px;
  object-fit: contain;
  display: block;
  opacity: 0.92;
}

.flow-tag-symbol-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(50, 40, 28, 0.88);
  text-transform: uppercase;
}

.flow-tag-label {
  font-size: 0.92rem;
  font-weight: 800;
  min-width: 0;
}

.flow-tag-meta {
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flow-tag-arrow {
  color: rgba(84, 68, 40, 0.34);
  font-size: 0.92rem;
  font-weight: 800;
}

.flow-tag.tone-gray {
  border-color: rgba(107, 102, 93, 0.16);
  background: rgba(244, 240, 234, 0.86);
}

.flow-tag.tone-yellow {
  border-color: rgba(196, 131, 18, 0.28);
  background: rgba(250, 240, 204, 0.92);
}

.flow-tag.tone-green {
  border-color: rgba(31, 122, 76, 0.26);
  background: rgba(223, 244, 232, 0.92);
}

.flow-tag.tone-red {
  border-color: rgba(184, 59, 45, 0.28);
  background: rgba(251, 227, 223, 0.92);
}

@keyframes flow-tag-spotlight {
  0% {
    box-shadow: 0 0 0 0 rgba(197, 92, 42, 0);
    transform: translateY(0);
  }
  35% {
    box-shadow: 0 0 0 6px rgba(197, 92, 42, 0.16), 0 16px 30px rgba(68, 55, 33, 0.12);
    transform: translateY(-2px);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(197, 92, 42, 0), 0 12px 24px rgba(68, 55, 33, 0.08);
    transform: translateY(0);
  }
}

.drawing-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.drawing-control-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.drawing-control-group {
  justify-content: flex-end;
  margin-left: auto;
}

.workflow-bar {
  display: grid;
  gap: 10px;
  min-width: min(620px, 100%);
  flex: 1 1 620px;
}

.workflow-sequence {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.workflow-step {
  display: inline-flex;
  align-items: center;
}

.workflow-step-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.workflow-step-label {
  font-size: 0.9rem;
  font-weight: 700;
}

.workflow-step.future .workflow-step-button {
  color: rgba(84, 68, 40, 0.45);
}

.workflow-step.active .workflow-step-button {
  color: var(--accent-deep);
}

.workflow-step.done .workflow-step-button {
  color: var(--ok);
}

.workflow-step-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(31, 122, 76, 0.12);
  color: var(--ok);
  font-size: 0.75rem;
  font-weight: 700;
}

.workflow-step-arrow {
  color: rgba(84, 68, 40, 0.4);
  font-size: 0.9rem;
  font-weight: 700;
}

.workflow-guidance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 255, 255, 0.72);
}

.workflow-guidance-copy {
  display: grid;
  gap: 3px;
}

.workflow-guidance-copy strong {
  font-size: 0.9rem;
}

.workflow-guidance-copy span {
  color: var(--muted);
  font-size: 0.82rem;
}

.workflow-guidance-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.workflow-guidance-primary,
.workflow-guidance-secondary {
  min-height: 34px;
  border-radius: 10px;
  padding: 0 12px;
  cursor: pointer;
  font-weight: 700;
}

.workflow-guidance-primary {
  border: 1px solid rgba(141, 52, 18, 0.28);
  background: rgba(197, 92, 42, 0.12);
  color: var(--accent-deep);
}

.workflow-guidance-secondary {
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: var(--muted);
}

.workflow-file-input {
  display: none;
}




.page-nav,
.zoom-nav,
.view-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.assistant-tool {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(84, 68, 40, 0.14);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}

.assistant-tool-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(197, 92, 42, 0.12);
  color: var(--accent-deep);
  font-size: 0.74rem;
  font-weight: 700;
}

.assistant-tool-text {
  font-size: 0.84rem;
  font-weight: 600;
}

.page-nav-button {
  min-width: 42px;
  border: 1px solid rgba(84, 68, 40, 0.14);
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

.page-nav-button.active {
  border-color: rgba(197, 92, 42, 0.45);
  background: rgba(197, 92, 42, 0.14);
  color: var(--accent-deep);
}

.page-readout {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 255, 255, 0.52);
  color: var(--muted);
  font-size: 0.88rem;
}

.drawing-viewport {
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: #f7f1e7;
  max-height: 760px;
  position: relative;
}

.drawing-surface {
  position: relative;
  min-width: 100%;
}

.drawing-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.drawing-overlay-layer {
  position: absolute;
  inset: 0;
}

.drawing-canvas img {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.drawing-debug-readout {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: min(60ch, calc(100% - 20px));
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(22, 24, 27, 0.7);
  color: #fffaf2;
  font-size: 0.72rem;
  line-height: 1.3;
  white-space: pre-wrap;
  pointer-events: none;
}

.drawing-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border: 1px solid rgba(197, 92, 42, 0.32);
  background: transparent;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  font-size: 0.5rem;
  line-height: 1;
  box-shadow: none;
}

.drawing-tag.anchor-center {
  transform: translate(-50%, -50%);
}

.drawing-tag.anchor-top-left {
  transform: none;
}

.utility-side-card {
  padding: 12px;
}

.camera-preview-card {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.14);
  background: rgba(255, 250, 242, 0.9);
  box-shadow: 0 12px 28px rgba(68, 55, 33, 0.14);
}

.camera-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.utility-side-card-title-group {
  min-width: 0;
}

.utility-side-card-heading {
  font-size: 1rem;
  font-weight: 700;
}

.camera-preview-copy {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.camera-preview-close {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
}

.camera-preview-collapsed {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.8rem;
}

.academy-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.academy-panel-collapsed {
  margin-top: 10px;
  font-size: 0.8rem;
}

.academy-panel-body {
  margin-top: 10px;
}

.camera-preview-actions {
  margin-top: 12px;
}

.camera-preview-frame {
  position: relative;
  margin-top: 10px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background:
    linear-gradient(180deg, rgba(65, 76, 85, 0.16), rgba(34, 36, 39, 0.08)),
    linear-gradient(135deg, rgba(197, 92, 42, 0.08), rgba(255, 214, 167, 0.18));
}

.camera-preview-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
  background-size: 33.333% 33.333%;
  opacity: 0.55;
}

.camera-preview-label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(22, 24, 27, 0.58);
  color: #fffaf2;
  font-size: 0.76rem;
  text-align: center;
}

.voice-preview-card {
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.14);
  background: rgba(255, 250, 242, 0.9);
  box-shadow: 0 12px 28px rgba(68, 55, 33, 0.14);
}

.voice-side-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sidebar-mic {
  min-height: 30px;
  padding: 0;
  width: 34px;
  justify-content: center;
}

.sidebar-mic .assistant-tool-glyph {
  min-width: 22px;
  height: 22px;
}

.voice-preview-frame {
  display: grid;
  gap: 14px;
  margin-top: 10px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(246, 239, 228, 0.96));
}

.voice-command-section {
  display: grid;
  gap: 8px;
}

.voice-console-frame {
  gap: 16px;
}

.voice-console-toolbar {
  display: grid;
  gap: 10px;
}

.voice-conversation-bar {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 255, 255, 0.72);
}

.voice-conversation-bar-modern {
  padding: 12px;
  border-radius: 18px;
  border-color: rgba(63, 74, 109, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 246, 255, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.voice-conversation-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.voice-conversation-field {
  display: grid;
  gap: 5px;
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
}

.voice-conversation-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.voice-conversation-picker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.voice-conversation-picker-menu {
  position: relative;
}

.voice-conversation-flag {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(63, 74, 109, 0.14);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg, #cfd7e8, #eef2fb);
}

.voice-conversation-flag.locale-flag-en-us {
  background:
    linear-gradient(180deg, rgba(38, 61, 145, 0.96), rgba(38, 61, 145, 0.96)) left top / 42% 54% no-repeat,
    repeating-linear-gradient(
      180deg,
      #b22234 0 7%,
      #ffffff 7% 14%
    );
}

.voice-conversation-flag.locale-flag-en-gb {
  background:
    linear-gradient(90deg, transparent 42%, #ffffff 42% 58%, transparent 58%),
    linear-gradient(transparent 42%, #ffffff 42% 58%, transparent 58%),
    linear-gradient(90deg, transparent 46%, #c8102e 46% 54%, transparent 54%),
    linear-gradient(transparent 46%, #c8102e 46% 54%, transparent 54%),
    #012169;
}

.voice-conversation-flag.locale-flag-es-mx,
.voice-conversation-flag.locale-flag-fr-fr {
  background: linear-gradient(90deg, #006847 0 33.33%, #ffffff 33.33% 66.66%, #ce1126 66.66% 100%);
}

.voice-conversation-flag.locale-flag-es-es {
  background: linear-gradient(180deg, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%);
}

.voice-conversation-flag.locale-flag-fa-ir {
  background: #ffffff url("/assets/flags/iran-lion-sun.svg") center / cover no-repeat;
}

.voice-conversation-flag.locale-flag-he-il {
  background:
    linear-gradient(180deg, #ffffff 0 18%, #0038b8 18% 28%, #ffffff 28% 72%, #0038b8 72% 82%, #ffffff 82% 100%);
}

.voice-conversation-flag.locale-flag-ar-sa {
  background:
    linear-gradient(180deg, transparent 72%, #ffffff 72% 76%, transparent 76%),
    #006c35;
}

.voice-conversation-flag.locale-flag-zh-cn {
  background:
    radial-gradient(circle at 28% 28%, #f7d34b 0 16%, transparent 17%),
    #de2910;
}

.voice-conversation-select {
  min-height: 46px;
  width: 100%;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(63, 74, 109, 0.1);
  background: rgba(248, 249, 255, 0.98);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.voice-conversation-select-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}

.voice-conversation-select-text {
  flex: 1 1 auto;
  min-width: 0;
}

.voice-conversation-caret {
  color: var(--muted);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.voice-conversation-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  display: none;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid rgba(63, 74, 109, 0.1);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 32px rgba(43, 51, 78, 0.12);
}

.voice-conversation-menu.is-open {
  display: grid;
  gap: 4px;
}

.voice-conversation-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.voice-conversation-option:hover,
.voice-conversation-option:focus-visible {
  background: rgba(244, 246, 255, 0.96);
  outline: none;
}

.voice-conversation-option.is-selected {
  background: rgba(238, 241, 255, 0.96);
  color: #3347cb;
}

.voice-conversation-option-label {
  font-size: 0.82rem;
  font-weight: 600;
}

.voice-conversation-status {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.voice-console-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.voice-provider-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 46px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(63, 74, 109, 0.08);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.voice-provider-option {
  min-width: 62px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.voice-provider-option.is-active {
  background: rgba(72, 92, 236, 0.12);
  color: #3347cb;
  box-shadow: 0 8px 18px rgba(60, 76, 168, 0.12);
}

.voice-provider-option:focus-visible {
  outline: 2px solid rgba(51, 71, 203, 0.28);
  outline-offset: 2px;
}

.voice-provider-option:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.voice-preview-player {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(63, 74, 109, 0.08);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.voice-preview-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(72, 92, 236, 0.16);
  border-radius: 999px;
  background: rgba(72, 92, 236, 0.12);
  color: #3347cb;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.voice-preview-play:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(60, 76, 168, 0.14);
}

.voice-preview-play:focus-visible {
  outline: 2px solid rgba(51, 71, 203, 0.28);
  outline-offset: 2px;
}

.voice-preview-play:disabled {
  opacity: 0.45;
  cursor: progress;
  box-shadow: none;
}

.voice-preview-play.is-playing {
  background: rgba(72, 92, 236, 0.18);
}

.voice-preview-play-icon {
  font-size: 0.92rem;
  line-height: 1;
}

.voice-preview-waveform {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  min-width: 64px;
  height: 26px;
}

.voice-preview-waveform span {
  width: 4px;
  height: 9px;
  border-radius: 999px;
  background: rgba(63, 74, 109, 0.18);
  transform-origin: center bottom;
}

.voice-preview-waveform span:nth-child(2),
.voice-preview-waveform span:nth-child(5) {
  height: 13px;
}

.voice-preview-waveform span:nth-child(3),
.voice-preview-waveform span:nth-child(4) {
  height: 17px;
}

.voice-preview-waveform.is-playing span:nth-child(1) {
  animation: voice-preview-pulse 820ms ease-in-out infinite;
}

.voice-preview-waveform.is-playing span:nth-child(2) {
  animation: voice-preview-pulse 980ms ease-in-out infinite 90ms;
}

.voice-preview-waveform.is-playing span:nth-child(3) {
  animation: voice-preview-pulse 760ms ease-in-out infinite 60ms;
}

.voice-preview-waveform.is-playing span:nth-child(4) {
  animation: voice-preview-pulse 1040ms ease-in-out infinite 140ms;
}

.voice-preview-waveform.is-playing span:nth-child(5) {
  animation: voice-preview-pulse 860ms ease-in-out infinite 50ms;
}

.voice-preview-waveform.is-playing span:nth-child(6) {
  animation: voice-preview-pulse 930ms ease-in-out infinite 110ms;
}

@keyframes voice-preview-pulse {
  0%, 100% {
    transform: scaleY(0.48);
    opacity: 0.42;
    background: rgba(63, 74, 109, 0.24);
  }

  45% {
    transform: scaleY(1.18);
    opacity: 1;
    background: rgba(51, 71, 203, 0.78);
  }

  70% {
    transform: scaleY(0.82);
    opacity: 0.78;
    background: rgba(83, 126, 108, 0.62);
  }
}

.voice-console-stage {
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  border-color: rgba(63, 74, 109, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 246, 255, 0.94) 52%, rgba(240, 236, 255, 0.92));
  box-shadow: 0 18px 38px rgba(43, 51, 78, 0.08);
}

.voice-console-stage.good {
  border-color: rgba(65, 126, 103, 0.16);
}

.voice-console-stage.warn {
  border-color: rgba(198, 146, 55, 0.2);
}

.voice-console-stage.bad {
  border-color: rgba(184, 59, 45, 0.2);
  background: linear-gradient(180deg, rgba(255, 248, 247, 0.98), rgba(255, 239, 236, 0.94));
}

.voice-console-stage-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.voice-console-stage-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.voice-console-kicker {
  color: #3347cb;
}

.voice-console-message {
  font-size: 1.1rem;
  line-height: 1.52;
  font-weight: 600;
  max-width: 34ch;
}

.voice-console-updated {
  padding-top: 2px;
  white-space: nowrap;
}

.voice-console-subcopy {
  max-width: 52ch;
}

.voice-console-detail-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.voice-console-detail-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(63, 74, 109, 0.08);
  color: var(--ink);
  font-size: 0.77rem;
  font-weight: 600;
}

.voice-console-status {
  gap: 8px;
}

.voice-console-actions {
  display: grid;
  gap: 10px;
}

.voice-console-actions-head {
  display: grid;
  gap: 4px;
}

.voice-console-actions-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.voice-console-actions-copy {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.status-log-modal {
  width: min(820px, calc(100vw - 32px));
  max-height: min(78vh, 920px);
}

.status-log-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.status-log-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.82rem;
}

.status-log-list {
  display: grid;
  gap: 12px;
  max-height: 52vh;
  overflow: auto;
  padding-right: 6px;
}

.status-log-entry {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 255, 255, 0.88);
}

.status-log-entry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.status-log-entry-head strong {
  font-size: 0.95rem;
}

.status-log-entry-head span {
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
}

.status-log-entry-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.74rem;
}

.status-log-entry-body {
  margin-top: 8px;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.5;
}

.voice-command-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.voice-command-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.voice-command-grid-modern {
  gap: 10px;
}

.voice-command-tile-wrap {
  position: relative;
}

.voice-command-tile {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  padding: 14px 42px 14px 14px;
  border-radius: 20px;
  border: 1px solid rgba(63, 74, 109, 0.08);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease;
  box-shadow: none;
}

.voice-command-tile:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(43, 51, 78, 0.08);
  border-color: rgba(63, 74, 109, 0.16);
}

.voice-command-tile:focus-visible {
  outline: 2px solid rgba(51, 71, 203, 0.28);
  outline-offset: 2px;
}

.voice-command-tile.is-ready {
  border-color: rgba(83, 126, 108, 0.16);
  color: #1f5f47;
}

.voice-command-tile.is-active {
  border-color: rgba(51, 71, 203, 0.22);
  color: #3347cb;
  box-shadow: 0 12px 24px rgba(60, 76, 168, 0.12);
}

.voice-command-tile.is-neutral {
  color: var(--ink);
}

.voice-command-tile.is-disabled,
.voice-command-tile:disabled {
  border-color: rgba(63, 74, 109, 0.06);
  color: rgba(63, 74, 109, 0.46);
  cursor: not-allowed;
  box-shadow: none;
}

.voice-command-tile-info {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  pointer-events: auto;
}

.voice-command-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid rgba(72, 92, 236, 0.08);
  color: inherit;
  flex: 0 0 auto;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.voice-command-tile.is-ready .voice-command-icon {
  border-color: rgba(83, 126, 108, 0.1);
}

.voice-command-tile.is-active .voice-command-icon {
  border-color: rgba(72, 92, 236, 0.14);
  box-shadow: 0 8px 18px rgba(60, 76, 168, 0.1);
}

.voice-command-tile.is-neutral .voice-command-icon {
  border-color: rgba(63, 74, 109, 0.06);
}

.voice-command-tile.is-disabled .voice-command-icon,
.voice-command-tile:disabled .voice-command-icon {
  border-color: rgba(63, 74, 109, 0.06);
}

.voice-command-icon-svg {
  width: 24px;
  height: 24px;
}

.voice-command-label {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) translateY(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  max-width: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.voice-command-tile:hover .voice-command-label,
.voice-command-tile:focus-visible .voice-command-label,
.voice-command-tile-wrap:focus-within .voice-command-label {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.voice-output-banner {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 255, 255, 0.78);
}

.voice-output-banner.is-wave {
  background: linear-gradient(180deg, rgba(255, 252, 248, 0.86), rgba(249, 241, 229, 0.98));
}

.voice-output-banner.is-live {
  box-shadow: 0 10px 24px rgba(141, 52, 18, 0.08);
}

.voice-output-banner.good {
  border-color: rgba(31, 122, 76, 0.16);
}

.voice-output-banner.warn {
  border-color: rgba(196, 131, 18, 0.18);
}

.voice-output-banner.bad {
  border-color: rgba(184, 59, 45, 0.18);
  background: rgba(255, 244, 242, 0.88);
}

.voice-output-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.voice-output-state {
  color: var(--accent-deep);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.voice-output-meta {
  color: var(--muted);
  font-size: 0.72rem;
}

.voice-output-text {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}

.voice-output-subtle {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.voice-output-wave {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 38px;
}

.voice-output-wave span {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(197, 92, 42, 0.18), rgba(197, 92, 42, 0.72));
  opacity: 0.48;
  transform-origin: bottom;
  height: 28%;
}

.voice-output-wave.active span:nth-child(1) {
  animation: voice-wave-pulse 1100ms ease-in-out infinite;
}

.voice-output-wave.active span:nth-child(2) {
  animation: voice-wave-pulse 950ms ease-in-out infinite 120ms;
}

.voice-output-wave.active span:nth-child(3) {
  animation: voice-wave-pulse 820ms ease-in-out infinite 80ms;
}

.voice-output-wave.active span:nth-child(4) {
  animation: voice-wave-pulse 980ms ease-in-out infinite 160ms;
}

.voice-output-wave.active span:nth-child(5) {
  animation: voice-wave-pulse 1180ms ease-in-out infinite 40ms;
}

@keyframes voice-wave-pulse {
  0%,
  100% {
    transform: scaleY(0.35);
    opacity: 0.38;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.voice-output-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.voice-output-action {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(72, 92, 236, 0.18);
  background: rgba(72, 92, 236, 0.1);
  color: #3347cb;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.voice-output-action-compact {
  min-height: 46px;
  padding: 0 18px;
  white-space: nowrap;
}

.voice-output-action.muted {
  border-color: rgba(63, 74, 109, 0.1);
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
}

.voice-footer-note {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.handwriting-modal {
  width: min(1120px, calc(100vw - 48px));
}

.handwriting-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.handwriting-feedback-card {
  align-items: flex-start;
  display: grid;
}

.handwriting-modal-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.handwriting-page-list,
.handwriting-candidate-list,
.handwriting-candidate-rows {
  display: grid;
  gap: 12px;
}

.handwriting-page-card {
  gap: 14px;
}

.handwriting-page-card-head {
  align-items: center;
}

.handwriting-page-nav {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 255, 255, 0.86);
  overflow-x: auto;
}

.handwriting-page-readout {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.handwriting-page-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  min-width: 116px;
}

.handwriting-page-jump select {
  width: 72px;
  min-width: 72px;
  border-radius: 12px;
  border: 1px solid rgba(84, 68, 40, 0.14);
  background: rgba(255, 251, 245, 0.96);
  color: var(--ink);
  padding: 8px 28px 8px 10px;
  text-align: center;
  text-align-last: center;
}

.handwriting-preview-stage {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 255, 255, 0.86);
}

.handwriting-preview-stage img {
  display: block;
  width: 100%;
  height: auto;
}

.handwriting-overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.handwriting-region {
  position: absolute;
  border: 2px solid rgba(197, 92, 42, 0.72);
  border-radius: 12px;
  background: rgba(197, 92, 42, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.handwriting-region.conflict {
  border-color: rgba(184, 59, 45, 0.8);
  background: rgba(184, 59, 45, 0.14);
}

.handwriting-region.empty,
.handwriting-region.unknown,
.handwriting-region.low {
  border-color: rgba(196, 131, 18, 0.78);
  background: rgba(196, 131, 18, 0.12);
}

.handwriting-region.high {
  border-color: rgba(31, 122, 76, 0.78);
  background: rgba(31, 122, 76, 0.12);
}

.handwriting-candidate-row {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 255, 255, 0.82);
}

.handwriting-candidate-meta {
  display: grid;
  gap: 4px;
}

.handwriting-candidate-input input {
  width: 100%;
  border: 1px solid rgba(84, 68, 40, 0.14);
  background: rgba(255, 253, 249, 0.96);
  border-radius: 12px;
  padding: 11px 12px;
  color: var(--ink);
}

.handwriting-debug-card {
  gap: 14px;
}

.handwriting-debug-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.handwriting-debug-list {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.handwriting-debug-row {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 250, 242, 0.82);
}

.handwriting-debug-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.handwriting-debug-row-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.handwriting-debug-grid {
  display: grid;
  gap: 8px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.handwriting-debug-grid div {
  display: grid;
  gap: 3px;
}

.handwriting-debug-grid span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.handwriting-debug-grid strong {
  font-size: 0.86rem;
  line-height: 1.45;
  word-break: break-word;
}

.handwriting-dump-export-panel {
  margin-top: 14px;
}

.handwriting-dump-format {
  display: inline-grid;
  gap: 4px;
  min-width: 124px;
}

.handwriting-dump-format span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.handwriting-dump-actions-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.handwriting-dump-preview-panel {
  margin-top: 14px;
}

.handwriting-dump-preview-content {
  max-height: 420px;
  overflow: auto;
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.handwriting-upload-banner {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}

.handwriting-upload-file {
  min-width: 240px;
  margin: 0;
}

.handwriting-upload-file label {
  margin-bottom: 4px;
}

.handwriting-upload-supported {
  font-size: 0.8rem;
  margin-top: 4px;
  margin-left: 2px;
}

.handwriting-upload-banner-actions {
  margin-top: 0;
  margin-left: auto;
  gap: 6px;
  flex-wrap: nowrap;
}

.handwriting-upload-banner-actions .button {
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 0.76rem;
  white-space: nowrap;
}

@keyframes handwriting-extraction-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 86, 169, 0.0); }
  50% { opacity: 0.78; box-shadow: 0 0 0 4px rgba(52, 86, 169, 0.22); }
}

.handwriting-upload-banner-actions .button.handwriting-extraction-blink {
  animation: handwriting-extraction-blink 1s ease-in-out infinite;
}

.handwriting-extraction-blink {
  animation: handwriting-extraction-blink 1s ease-in-out infinite;
}

.ux-upload-card {
  margin-top: 12px;
  width: 100%;
  max-width: none;
  background: var(--color-background-primary, #fff);
  border: 0.5px solid var(--color-border-tertiary, rgba(0, 0, 0, 0.12));
  border-radius: 12px;
  overflow: hidden;
  font-family: "DM Sans", system-ui, sans-serif;
}

.ux-upload-header {
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--color-border-tertiary, rgba(0, 0, 0, 0.12));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ux-upload-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary, #1A1917);
  display: flex;
  align-items: center;
  gap: 7px;
}

.ux-info-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0.5px solid var(--color-border-secondary, rgba(0, 0, 0, 0.22));
  background: transparent;
  color: var(--color-text-tertiary, #A8A69E);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ux-upload-body {
  padding: 12px 16px;
}

.ux-drop-zone {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  border: 1.5px dashed rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--color-background-secondary, #F5F4F0);
}

.ux-drop-zone > * {
  pointer-events: none;
}

.ux-drop-zone:hover,
.ux-drop-zone.drag-over {
  border-color: #93BEE8;
  background: #EBF3FC;
}

.ux-drop-zone.has-file {
  border-style: solid;
  border-color: #8DC98A;
  background: #EAF3DE;
  cursor: default;
}

.ux-drop-zone.in-progress {
  border-style: solid;
  border-color: #E8C077;
  background: #FDF3E3;
  cursor: default;
}

.ux-drop-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #6B6860;
}

.ux-drop-content {
  flex: 1;
  min-width: 0;
}

.ux-drop-title {
  font-size: 12px;
  font-weight: 500;
  color: #1A1917;
}

.ux-drop-sub {
  font-size: 11px;
  color: #A8A69E;
  margin-top: 2px;
}

.ux-browse-link {
  color: #185FA5;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ux-format-chips {
  display: flex;
  gap: 4px;
  margin-top: 5px;
}

.ux-chip {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 20px;
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  color: #6B6860;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ux-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.ux-file-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #fff;
  border: 0.5px solid #8DC98A;
  color: #27500A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ux-file-icon-svg {
  width: 20px;
  height: 20px;
  display: block;
}

.ux-file-details {
  flex: 1;
  min-width: 0;
}

.ux-file-name {
  font-size: 12px;
  font-weight: 500;
  color: #1A1917;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ux-file-meta {
  font-size: 11px;
  color: #A8A69E;
  font-family: "DM Mono", monospace;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ux-file-meta.success {
  color: #27500A;
}

.ux-file-type-chip {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  border: 0.5px solid #8DC98A;
  border-radius: 20px;
  padding: 1px 7px;
  background: #fff;
  line-height: 1;
}

.ux-file-remove {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: #A8A69E;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.ux-file-remove:hover {
  background: rgba(0, 0, 0, 0.06);
}

.ux-progress {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.ux-progress-top {
  display: flex;
  justify-content: space-between;
}

.ux-progress-text,
.ux-progress-pct {
  font-size: 11px;
  font-weight: 500;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ux-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.ux-progress-bar {
  height: 3px;
  border-radius: 2px;
  transition: width 0.4s, background 0.2s;
}

.ux-progress-bar.preparing {
  background: #E8C077;
}

.ux-progress-bar.extracting {
  background: #AFA9EC;
}

.ux-progress-text.preparing,
.ux-progress-pct.preparing {
  color: #7A4A0A;
}

.ux-progress-text.extracting,
.ux-progress-pct.extracting {
  color: #3C3489;
}

.ux-upload-footer {
  padding: 10px 16px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ux-upload-debug {
  padding: 6px 16px 10px 16px;
  border-top: 0.5px dashed rgba(0, 0, 0, 0.12);
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  color: #6B6860;
}

.ux-btn-back {
  height: 30px;
  padding: 0 14px;
  border-radius: 8px;
  border: 0.5px solid rgba(0, 0, 0, 0.22);
  background: transparent;
  color: #6B6860;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ux-btn-back:hover {
  background: #F5F4F0;
}

.ux-btn-group {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ux-step-arrow {
  font-size: 16px;
  line-height: 30px;
  color: var(--color-text-tertiary, #A8A69E);
  align-self: center;
}

.ux-btn-prepare,
.ux-btn-extract {
  height: 30px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.1s, transform 0.08s;
}

.ux-btn-prepare {
  border: none;
  background: #C05A35;
  color: #fff;
}

.ux-btn-prepare:hover:not(:disabled) {
  background: #A84A28;
}

.ux-btn-prepare:disabled {
  background: #D3D1C7;
  color: #A8A69E;
  cursor: not-allowed;
}

.ux-btn-prepare.done {
  background: #27500A;
  cursor: default;
  pointer-events: none;
}

.ux-btn-extract {
  border: 1px solid #A49DE8;
  background: #EFEDFC;
  color: #3C3489;
}

.ux-btn-extract:hover:not(:disabled) {
  background: #CECBF6;
}

.ux-btn-extract:disabled {
  background: #F5F4F0;
  border-color: rgba(0, 0, 0, 0.12);
  color: #A8A69E;
  cursor: not-allowed;
  opacity: 0.6;
}

.ux-btn-extract.done {
  background: #27500A;
  border-color: #27500A;
  color: #fff;
}

.handwriting-extraction-progress-card {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(52, 86, 169, 0.28);
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  gap: 8px;
}

.handwriting-extraction-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.handwriting-extraction-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(52, 86, 169, 0.15);
  overflow: hidden;
  position: relative;
}

.handwriting-extraction-progress-bar {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3456a9, #5b7dd3);
  animation: handwriting-extraction-progress-slide 1.2s ease-in-out infinite;
}

@keyframes handwriting-extraction-progress-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(280%); }
}

.handwriting-claude-probe-row {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.handwriting-claude-probe-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid rgba(84, 68, 40, 0.24);
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
}

.handwriting-claude-probe-badge.tone-auto {
  border-color: rgba(31, 122, 76, 0.52);
  background: rgba(31, 122, 76, 0.14);
  color: rgba(18, 96, 58, 0.96);
}

.handwriting-claude-probe-badge.tone-review {
  border-color: rgba(196, 131, 18, 0.56);
  background: rgba(196, 131, 18, 0.14);
  color: rgba(124, 86, 16, 0.96);
}

.handwriting-claude-probe-badge.tone-pending {
  border-color: rgba(52, 86, 169, 0.52);
  background: rgba(52, 86, 169, 0.14);
  color: rgba(37, 64, 130, 0.96);
}

.handwriting-commit-rule-card,
.handwriting-empty-state,
.handwriting-page-preview-card,
.handwriting-review-pane,
.handwriting-session-meta {
  margin-top: 16px;
  border-radius: 18px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 255, 255, 0.82);
  padding: 16px 18px;
}

.handwriting-page-preview-head,
.handwriting-pane-head,
.handwriting-debug-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.handwriting-page-nav-shell {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin-top: 14px;
}

.handwriting-nav-banner {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 10px 0;
  justify-items: start;
}

.handwriting-page-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.handwriting-page-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.handwriting-page-chip {
  display: grid;
  gap: 2px;
  min-width: 118px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 251, 245, 0.92);
  cursor: pointer;
  text-align: left;
}

.handwriting-page-chip.is-active {
  border-color: rgba(197, 92, 42, 0.4);
  box-shadow: 0 0 0 2px rgba(197, 92, 42, 0.12);
}

.handwriting-page-chip span {
  color: var(--muted);
  font-size: 0.78rem;
}

.handwriting-review-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 16px;
}

.handwriting-viewer-tools,
.handwriting-action-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
}

.handwriting-viewer-tools .button {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.76rem;
  line-height: 1.1;
  white-space: nowrap;
}

.handwriting-magnifier-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(84, 68, 40, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.76rem;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
}

.handwriting-magnifier-toggle input {
  margin: 0;
}

.handwriting-mode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(84, 68, 40, 0.2);
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.74rem;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
  gap: 6px;
}

.handwriting-mode-pill select {
  border: 1px solid rgba(84, 68, 40, 0.2);
  border-radius: 6px;
  background: #fff;
  padding: 2px 6px;
  font: inherit;
  line-height: 1.1;
  color: var(--text);
}

.handwriting-tool-toggles {
  display: inline-grid;
  gap: 4px;
}


.handwriting-viewer-scroll {
  margin-top: 14px;
  overflow: auto;
  max-height: 72vh;
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 255, 255, 0.9);
  cursor: grab;
}

.handwriting-sheet-viewer-scroll {
  margin-top: 14px;
  overflow: auto;
  max-height: 72vh;
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 255, 255, 0.9);
}


.handwriting-viewer-scroll.is-dragging {
  cursor: grabbing;
}


.handwriting-viewer-stage {
  position: relative;
}

.handwriting-sheet-viewer-stage {
  position: relative;
}

.handwriting-viewer-stage img {
  display: block;
  width: 100%;
  height: auto;
}

.handwriting-region-button {
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 6px;
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid rgba(197, 92, 42, 0.72);
  background: rgba(197, 92, 42, 0.12);
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  cursor: pointer;
  transition: box-shadow 120ms ease, transform 120ms ease, background 120ms ease;
}

.handwriting-region-button span {
  display: none;
}

.handwriting-region-button.tone-auto {
  border-color: rgba(31, 122, 76, 0.78);
  background: rgba(31, 122, 76, 0.12);
}

.handwriting-region-button.tone-review,
.handwriting-region-button.tone-empty {
  border-color: rgba(196, 131, 18, 0.78);
  background: rgba(196, 131, 18, 0.12);
}

.handwriting-region-button.tone-manual {
  border-color: rgba(52, 86, 169, 0.78);
  background: rgba(52, 86, 169, 0.12);
}

.handwriting-region-button.is-linked {
  box-shadow: 0 0 0 3px rgba(197, 92, 42, 0.18);
}

.handwriting-region-button.is-active,
.handwriting-sheet-row.is-active,
.handwriting-sheet-active-card.is-active,
[data-handwriting-sheet-field-ids].is-active,
[data-handwriting-sheet-row-fields].is-active {
  box-shadow: 0 0 0 3px rgba(197, 92, 42, 0.2);
  transform: translateY(-1px);
}

.handwriting-region-button.is-hovered,
.handwriting-sheet-row.is-hovered,
.handwriting-sheet-active-card.is-hovered,
[data-handwriting-sheet-field-ids].is-hovered,
[data-handwriting-sheet-row-fields].is-hovered {
  box-shadow: 0 0 0 2px rgba(52, 86, 169, 0.18);
}

.handwriting-manual-selection {
  position: absolute;
  border: 2px dashed rgba(52, 86, 169, 0.9);
  border-radius: 12px;
  background: rgba(52, 86, 169, 0.12);
}

.handwriting-crop-hit-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: crosshair;
}

.handwriting-crop-selection {
  position: absolute;
  z-index: 3;
  border: 2px dashed #2563eb;
  background: rgba(37, 99, 235, 0.12);
  border-radius: 4px;
  pointer-events: none;
}

.handwriting-crop-ocr-result {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 10px 14px;
  background: #f8f9fa;
}

.handwriting-crop-ocr-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.handwriting-crop-ocr-result-head strong {
  font-size: 13px;
}

.handwriting-crop-ocr-result-head .button {
  padding: 2px 6px;
  min-width: 0;
  font-size: 14px;
  line-height: 1;
}

.handwriting-crop-ocr-result-body {
  font-size: 13px;
}

.handwriting-crop-ocr-value {
  font-size: 16px;
  font-weight: 600;
  padding: 6px 0 4px;
  word-break: break-word;
}

.handwriting-reverse-map-workbench {
  margin-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 10px 14px;
  background: #f6f7fb;
  display: grid;
  gap: 10px;
}

.handwriting-reverse-map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.handwriting-reverse-map-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.results-table,
.results-table td,
.results-table th {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif !important;
}

.results-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #7f7f8f;
}

.results-table td {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  letter-spacing: 0.2px;
}

.results-table td:hover {
  background-color: #fff3ef !important;
  cursor: default;
}

.tab-magnifier {
  position: fixed;
  background: #1a1a2e;
  padding: 14px 22px;
  border-radius: 10px;
  border-left: 4px solid #e07b54;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 99999;
  max-width: 320px;
}

.tab-magnifier-label {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #e07b54;
  margin-bottom: 6px;
}

.tab-magnifier-value {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.handwriting-claude-page-lines {
  display: grid;
  gap: 6px;
}

.handwriting-claude-page-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(52, 86, 169, 0.18);
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.84rem;
}

.handwriting-reverse-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.handwriting-reverse-map-apply-filter {
  min-width: 180px;
}

.handwriting-reverse-map-apply-filter select {
  min-width: 140px;
}

.handwriting-reverse-map-samples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.handwriting-reverse-map-sample {
  border: 1px solid rgba(52, 86, 169, 0.2);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  font-size: 12px;
}

.handwriting-reverse-map-error {
  color: #b42318;
  background: rgba(180, 35, 24, 0.08);
  border: 1px solid rgba(180, 35, 24, 0.25);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
}

.handwriting-reverse-map-diff {
  border: 1px solid rgba(52, 86, 169, 0.2);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.handwriting-reverse-map-diff-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.handwriting-reverse-map-diff-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.handwriting-reverse-map-diff-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.handwriting-reverse-map-diff-list {
  max-height: 260px;
  overflow: auto;
  display: grid;
  gap: 6px;
}

.handwriting-reverse-map-diff-row {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 8px;
  font-size: 12px;
  display: grid;
  gap: 2px;
}

.handwriting-sheet-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.handwriting-sheet-match-card {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 251, 245, 0.94);
}

.handwriting-sheet-match-head,
.handwriting-sheet-match-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.handwriting-sheet-match-actions .field {
  min-width: min(280px, 100%);
  margin: 0;
}

.handwriting-sheet-match-debug {
  display: grid;
  gap: 10px;
}

.handwriting-sheet-active-card,
.handwriting-sheet-grid-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 255, 255, 0.94);
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.handwriting-sheet-active-card {
  margin-top: 14px;
}

.handwriting-sheet-active-card.tone-review,
.handwriting-sheet-cell.tone-review {
  border-color: rgba(196, 131, 18, 0.26);
}

.handwriting-sheet-active-card.tone-manual,
.handwriting-sheet-cell.tone-manual {
  border-color: rgba(52, 86, 169, 0.2);
}

.handwriting-sheet-active-card.tone-auto,
.handwriting-sheet-cell.tone-auto {
  border-color: rgba(31, 122, 76, 0.2);
}

.handwriting-sheet-active-head,
.handwriting-sheet-active-meta,
.handwriting-sheet-grid-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.handwriting-sheet-active-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.handwriting-excel-shell {
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(54vh, 760px);
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 255, 255, 0.96);
  padding-bottom: 6px;
}

.handwriting-pdf-shell {
  min-height: 62vh;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 255, 255, 0.98);
}

.handwriting-pdf-stage {
  position: relative;
  width: 100%;
}

.handwriting-pdf-image {
  display: block;
  width: 100%;
  height: auto;
}

.handwriting-pdf-hit-layer {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: crosshair;
  z-index: 1;
}

.handwriting-pdf-hit-layer.is-fill-ready {
  cursor: copy;
}

.handwriting-pdf-hit-layer.is-fill-dragging {
  cursor: grabbing;
}

.handwriting-pdf-hit-layer.is-editing {
  cursor: text;
}

.handwriting-pdf-selected-box {
  position: absolute;
  border: 2px solid rgba(52, 86, 169, 0.9);
  background: rgba(52, 86, 169, 0.15);
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
}

.handwriting-pdf-fill-preview-box {
  position: absolute;
  border: 2px dashed rgba(224, 123, 84, 0.9);
  background: rgba(224, 123, 84, 0.14);
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
}

.handwriting-pdf-fill-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(52, 86, 169, 0.95);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
  pointer-events: none;
  z-index: 3;
}

.handwriting-pdf-fill-handle.is-active {
  border-color: rgba(224, 123, 84, 1);
  background: rgba(255, 241, 233, 1);
}

.handwriting-pdf-inline-editor {
  position: absolute;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(52, 86, 169, 0.62);
  z-index: 3;
  min-width: 220px;
  max-width: 460px;
}

.handwriting-pdf-inline-input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(84, 68, 40, 0.24);
  border-radius: 6px;
  padding: 8px 10px;
  min-height: 38px;
  font-size: 14px;
  line-height: 1.3;
}

.handwriting-pdf-inline-save.button {
  width: 100%;
  min-height: 26px;
  padding: 4px 8px;
  font-size: 11px;
}

.handwriting-pdf-inline-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.handwriting-pdf-inline-actions .button {
  width: 100%;
  min-height: 26px;
  padding: 4px 8px;
  font-size: 11px;
}

.handwriting-pdf-inline-delete.button {
  background: rgba(255, 243, 239, 1);
  border-color: rgba(200, 106, 74, 0.45);
  color: rgba(139, 63, 39, 1);
}

.handwriting-pdf-inline-cancel.button {
  width: 100%;
  min-height: 26px;
  padding: 4px 8px;
  font-size: 11px;
}

.handwriting-sheet-pdf-head {
  display: flex;
  justify-content: flex-end;
}

.handwriting-sheet-pdf-page-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.handwriting-sheet-cell-editor {
  margin-top: 10px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.handwriting-sheet-cell-editor .field.full {
  grid-column: 1 / -1;
  margin: 0;
}

.handwriting-sheet-cell-editor .actions {
  grid-column: 1 / -1;
  margin: 0;
}

.handwriting-excel-grid {
  width: max-content;
  min-width: 100%;
}

.handwriting-sheet-cell,
.handwriting-sheet-static {
  min-width: 82px;
}

.handwriting-sheet-cell {
  background: rgba(255, 255, 255, 0.92);
  transition: box-shadow 120ms ease, background 120ms ease, transform 120ms ease;
}

.handwriting-sheet-cell.is-linked,
[data-handwriting-sheet-row-fields].is-linked .excel-grid-rowhead {
  background: rgba(197, 92, 42, 0.08);
}

.handwriting-sheet-grid-input {
  min-width: 78px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
}

.handwriting-sheet-grid-input.tone-review {
  background: rgba(255, 248, 228, 0.94);
}

.handwriting-sheet-grid-input.tone-manual {
  background: rgba(242, 247, 255, 0.98);
}

.handwriting-sheet-grid-input.tone-auto {
  background: rgba(241, 252, 246, 0.98);
}

.handwriting-sheet-cell-text {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  color: var(--ink);
  font-size: 0.84rem;
  white-space: pre-wrap;
}

.handwriting-sheet-row {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 255, 255, 0.94);
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.handwriting-sheet-row.tone-review {
  border-color: rgba(196, 131, 18, 0.26);
}

.handwriting-sheet-row.tone-manual {
  border-color: rgba(52, 86, 169, 0.2);
}

.handwriting-sheet-row.tone-auto {
  border-color: rgba(31, 122, 76, 0.2);
}

.handwriting-sheet-row-head,
.handwriting-sheet-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.handwriting-sheet-input-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.handwriting-sheet-input-row input {
  width: 100%;
  border: 1px solid rgba(84, 68, 40, 0.14);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  padding: 11px 12px;
  color: var(--ink);
}

.handwriting-field-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

.handwriting-field-pill.tone-auto {
  background: rgba(31, 122, 76, 0.12);
  color: #1f6d45;
}

.handwriting-field-pill.tone-review {
  background: rgba(196, 131, 18, 0.14);
  color: #9a6814;
}

.handwriting-field-pill.tone-manual {
  background: rgba(52, 86, 169, 0.14);
  color: #35569f;
}

.handwriting-field-pill.tone-empty {
  background: rgba(63, 74, 109, 0.1);
  color: var(--muted);
}

.handwriting-inline-suggestion {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(196, 131, 18, 0.22);
  background: rgba(255, 246, 221, 0.82);
}

.handwriting-review-payload-head {
  align-items: center;
}

.handwriting-review-payload-summary,
.handwriting-review-payload-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.handwriting-review-payload-sections {
  display: grid;
  gap: 10px;
}

.handwriting-review-spreadsheet-wrap {
  display: grid;
  gap: 8px;
}

.handwriting-review-sheet-tab {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(84, 68, 40, 0.16);
  border-radius: 10px;
  background: rgba(248, 250, 253, 0.95);
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(59, 45, 20, 0.92);
}

.handwriting-review-grid-scroll {
  overflow: auto;
  border: 1px solid rgba(84, 68, 40, 0.15);
  border-radius: 12px;
  background: #fff;
}

.handwriting-review-grid-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.handwriting-review-grid-table th,
.handwriting-review-grid-table td {
  border: 1px solid rgba(84, 68, 40, 0.14);
}

.handwriting-review-grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  min-width: 74px;
  padding: 6px 8px;
  background: rgba(242, 245, 250, 0.98);
  text-align: center;
  font-weight: 600;
}

.handwriting-review-grid-table thead th.corner {
  min-width: 38px;
}

.handwriting-review-grid-table tbody th {
  min-width: 38px;
  padding: 6px 8px;
  text-align: center;
  background: rgba(247, 249, 252, 0.98);
  font-weight: 600;
}

.handwriting-review-grid-table td {
  min-width: 74px;
  height: 34px;
  vertical-align: top;
  background: rgba(255, 255, 255, 0.98);
}

.handwriting-review-grid-table td .handwriting-grid-cell-text {
  min-height: 32px;
  padding: 6px 8px;
  line-height: 1.2;
  white-space: pre-wrap;
}

.handwriting-review-grid-table td input {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 6px 8px;
  color: var(--ink);
}

.handwriting-review-grid-table td.is-read-only input {
  pointer-events: none;
}

.handwriting-review-grid-table td.type-header,
.handwriting-review-grid-table td.type-section_header {
  background: rgba(238, 243, 250, 0.98);
  font-weight: 700;
}

.handwriting-review-grid-table td.type-label {
  background: rgba(252, 253, 255, 0.98);
  font-weight: 600;
}

.handwriting-review-grid-table td.status-missing {
  background: rgba(255, 244, 212, 0.9);
  box-shadow: inset 0 0 0 1px rgba(196, 131, 18, 0.45);
}

.handwriting-review-grid-table td.status-warning {
  background: rgba(255, 247, 224, 0.92);
  box-shadow: inset 0 0 0 1px rgba(196, 131, 18, 0.35);
}

.handwriting-review-grid-table td.status-read_only,
.handwriting-review-grid-table td.is-read-only {
  background: rgba(246, 248, 252, 0.94);
}

.handwriting-grid-cell-warning {
  padding: 0 8px 6px;
  font-size: 0.72rem;
  color: #8e5d00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.handwriting-review-section {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.92);
}

.handwriting-review-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.handwriting-review-field-list {
  display: grid;
  gap: 8px;
}

.handwriting-review-field {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 251, 245, 0.82);
}

.handwriting-review-field.status-missing {
  border-color: rgba(196, 131, 18, 0.32);
  background: rgba(255, 246, 221, 0.86);
}

.handwriting-review-field.status-warning {
  border-color: rgba(196, 131, 18, 0.32);
}

.handwriting-review-field.status-read_only,
.handwriting-review-field.is-read-only {
  background: rgba(244, 246, 250, 0.92);
}

.handwriting-review-field.status-not_applicable {
  background: rgba(246, 246, 246, 0.92);
}

.handwriting-review-field-head,
.handwriting-review-field-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.handwriting-review-field-input input {
  width: 100%;
  border: 1px solid rgba(84, 68, 40, 0.14);
  background: rgba(255, 255, 255, 0.98);
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--ink);
}

.handwriting-review-field-readonly {
  min-height: 36px;
  display: flex;
  align-items: center;
  border-radius: 10px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  padding: 8px 10px;
  background: rgba(250, 251, 253, 0.95);
}

.handwriting-action-shell {
  position: sticky;
  bottom: 18px;
  z-index: 5;
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.handwriting-action-title {
  font-size: 10px;
  color: #a8a69e;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.handwriting-action-bar {
  border: 1px solid #e2e0d8;
  border-radius: 18px;
  background: #fff;
  padding: 16px 20px;
  display: flex;
  align-items: stretch;
  gap: 10px;
  box-shadow: 0 18px 36px rgba(45, 33, 16, 0.07);
}

.handwriting-flow-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.action-btn {
  width: 100%;
  min-height: 72px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #f5f4f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  font-family: "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.action-btn .btn-label {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
}

.action-btn .btn-sub {
  font-size: 10px;
  line-height: 1.2;
  opacity: 0.74;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.action-btn.btn-sip {
  background: #ebf3fc;
  border-color: #93bee8;
  color: #1a4f7a;
}

.action-btn.btn-post {
  background: #ebf5ea;
  border-color: #8dc98a;
  color: #1d5c1a;
}

.action-btn.btn-post-all {
  background: #efedfc;
  border-color: #a49de8;
  color: #2e267a;
}

.action-btn.btn-commit {
  background: #fdf3e3;
  border-color: #e8c077;
  color: #7a4a0a;
}

.action-btn.btn-disabled,
.action-btn:disabled {
  background: #f5f4f0;
  border-color: #e2e0d8;
  color: #a8a69e;
  cursor: not-allowed;
  pointer-events: none;
}

.step-num {
  font-size: 10px;
  color: #a8a69e;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.arrow-sep,
.or-divider {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a8a69e;
}

.arrow-sep {
  padding-bottom: 18px;
  font-size: 16px;
}

.or-divider {
  flex-direction: column;
  gap: 4px;
  padding-bottom: 18px;
}

.or-divider span {
  font-size: 9px;
  letter-spacing: 0.04em;
  color: #a8a69e;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.or-line {
  width: 1px;
  height: 18px;
  background: #e2e0d8;
}

.handwriting-commit-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2e0d8;
  border-left: 3px solid #e8c077;
  border-radius: 10px;
  background: #fff;
  color: #6b6860;
  padding: 10px 14px;
  font-size: 12px;
}

.handwriting-commit-notice .notice-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #e8c077;
  color: #7a4a0a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  flex-shrink: 0;
}

.handwriting-pages-wrap {
  border: 1px solid #e2e0d8;
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.progress-matrix-wrap {
  margin-top: 6px;
}

.handwriting-progress-matrix-shell {
  max-height: 280px;
  overflow: auto;
  border: 1px solid #eceae2;
  border-radius: 10px;
}

.handwriting-progress-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.handwriting-progress-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8f7f4;
  color: #6b6860;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.handwriting-progress-matrix th,
.handwriting-progress-matrix td {
  border-bottom: 1px solid #eceae2;
  padding: 8px 10px;
  text-align: center;
}

.handwriting-progress-matrix th:nth-child(2),
.handwriting-progress-matrix td:nth-child(2) {
  text-align: left;
}

.handwriting-progress-matrix tbody tr:hover {
  background: #f6fbff;
}

.handwriting-progress-matrix tbody tr.matrix-row-memo {
  border-top: 1px solid #d8d5cc;
  background: #fcfbf8;
  font-weight: 600;
}

.matrix-row-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: #2f4f69;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.matrix-row-link:disabled {
  color: #8c8a84;
  cursor: default;
}

.matrix-dot {
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.matrix-dot.status-not-available { background: #a8a69e; }
.matrix-dot.status-not-processed { background: #e8c077; }
.matrix-dot.status-save-in-process { background: #93bee8; }
.matrix-dot.status-post { background: #57b5a5; }
.matrix-dot.status-submitted { background: #57a756; }

.handwriting-progress-matrix-summary {
  font-size: 11px;
  color: #6b6860;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.handwriting-memo-editor-card {
  border: 1px solid #e2e0d8;
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.handwriting-memo-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.handwriting-memo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.handwriting-memo-groups {
  display: grid;
  gap: 10px;
}

.handwriting-memo-group {
  border: 1px solid #eceae2;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.handwriting-memo-group-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.handwriting-memo-note-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}

.handwriting-memo-note-input {
  min-height: 56px;
  resize: vertical;
}

.handwriting-memo-preamble-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: nowrap;
}

.handwriting-memo-preamble-controls select {
  flex: 1 1 auto;
  min-width: 0;
}

.handwriting-memo-preamble-actions {
  display: inline-flex;
  gap: 6px;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.handwriting-memo-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #d8d5cc;
  border-radius: 8px;
  background: #fff;
  color: #4b5563;
  cursor: pointer;
}

.handwriting-memo-icon-btn:hover {
  border-color: #9ca3af;
  color: #1f2937;
}

.handwriting-memo-icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.handwriting-memo-icon-btn .itab-icon {
  width: 14px;
  height: 14px;
}

.handwriting-memo-action-bar {
  display: flex;
  gap: 10px;
  align-items: center;
}

.handwriting-pages-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.section-label.inline {
  margin: 0;
}

.pages-count {
  font-size: 11px;
  color: #6b6860;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.handwriting-pages-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chip {
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 4px 10px;
  background: #f5f4f0;
  color: #6b6860;
  font-size: 11px;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chip-posted {
  background: #ebf5ea;
  border-color: #8dc98a;
  color: #1d5c1a;
}

.chip-progress {
  background: #fdf3e3;
  border-color: #e8c077;
  color: #7a4a0a;
}

.chip-draft {
  background: #f5f4f0;
  border-color: #d4d2ca;
  color: #6b6860;
}

.chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.handwriting-workflow-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  pointer-events: none;
  z-index: 35;
  border-radius: 10px;
  padding: 10px 16px;
  color: #fff;
  font-family: "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.handwriting-workflow-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.handwriting-workflow-toast.tone-blue {
  background: #1a4f7a;
}

.handwriting-workflow-toast.tone-green {
  background: #1d5c1a;
}

.handwriting-workflow-toast.tone-purple {
  background: #2e267a;
}

.handwriting-workflow-toast.tone-amber {
  background: #7a4a0a;
}

.handwriting-posted-pdf-frame {
  width: 100%;
  min-height: 760px;
  border: 0;
  border-radius: 12px;
  background: #fff;
}

.handwriting-debug-drawer {
  margin-top: 16px;
  display: grid;
  gap: 14px;
}

.handwriting-debug-quick-panel {
  margin-bottom: 14px;
}

.handwriting-primary-panel {
  gap: 14px;
}

.handwriting-primary-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.handwriting-primary-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.handwriting-diagnostics-panel {
  margin-bottom: 14px;
}

.handwriting-diagnostics-section {
  border: 1px solid rgba(84, 68, 40, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  padding: 8px 10px;
}

.handwriting-diagnostics-section .collapsible-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
}

.handwriting-diagnostics-json-block {
  display: grid;
  gap: 6px;
}

.handwriting-diagnostics-json {
  margin: 0;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 255, 255, 0.96);
  font-size: 0.76rem;
  line-height: 1.35;
}

.handwriting-sheet-match-inline {
  margin-top: 0;
}

.handwriting-primary-debug-note {
  margin-top: -4px;
}

.handwriting-debug-actions,
.handwriting-debug-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.handwriting-debug-inspector-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.handwriting-debug-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 251, 245, 0.94);
}

.handwriting-debug-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.handwriting-debug-preview-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.handwriting-debug-image-card {
  display: grid;
  gap: 8px;
}

.handwriting-debug-image-card > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.handwriting-debug-page-preview,
.handwriting-debug-crop-preview {
  position: relative;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 255, 255, 0.96);
}

.handwriting-debug-page-preview img,
.handwriting-debug-crop-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.handwriting-debug-page-region {
  position: absolute;
  border: 3px solid rgba(197, 92, 42, 0.88);
  border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(197, 92, 42, 0.2);
  background: rgba(197, 92, 42, 0.1);
}

.handwriting-debug-row.is-active {
  border-color: rgba(197, 92, 42, 0.28);
  box-shadow: 0 0 0 3px rgba(197, 92, 42, 0.12);
}

.handwriting-review-grid.debug-mode .handwriting-region-button {
  border-width: 3px;
}

.handwriting-review-grid.debug-mode .handwriting-region-button.is-active,
.handwriting-review-grid.debug-mode [data-handwriting-sheet-field-ids].is-active,
.handwriting-review-grid.debug-mode [data-handwriting-sheet-row-fields].is-active {
  box-shadow: 0 0 0 4px rgba(197, 92, 42, 0.26);
}

.handwriting-review-grid.debug-mode .handwriting-region-button.is-hovered,
.handwriting-review-grid.debug-mode [data-handwriting-sheet-field-ids].is-hovered,
.handwriting-review-grid.debug-mode [data-handwriting-sheet-row-fields].is-hovered {
  box-shadow: 0 0 0 3px rgba(52, 86, 169, 0.22);
}

@media (max-width: 1100px) {
  .handwriting-debug-inspector-grid,
  .handwriting-debug-preview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.handwriting-guard-modal {
  width: min(520px, calc(100vw - 48px));
}

.training-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(34, 29, 21, 0.42);
  backdrop-filter: blur(10px);
}

.training-modal {
  width: min(940px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(84, 68, 40, 0.14);
  background: rgba(255, 251, 245, 0.96);
  box-shadow: 0 32px 72px rgba(45, 33, 16, 0.24);
}

.training-modal-head,
.training-live-head,
.training-result-head,
.training-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.training-summary-grid,
.training-panel-grid,
.training-live-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.training-progress-hero,
.training-feedback-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: linear-gradient(180deg, rgba(255, 250, 242, 0.94), rgba(249, 241, 229, 0.92));
}

.training-progress-hero span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.training-progress-hero strong {
  font-size: 1.08rem;
}

.training-feedback-card {
  align-items: flex-start;
  display: grid;
}

.training-feedback-card.inline {
  padding: 12px 14px;
}

.training-live-grid,
.training-panel-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.training-summary-card,
.training-panel-card,
.training-live-card,
.training-result-card,
.training-phrase-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 255, 255, 0.78);
}

.training-summary-card span,
.training-phrase-card span,
.training-capture-block span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.training-panel-card,
.training-live-card,
.training-result-card {
  display: grid;
  gap: 12px;
}

.training-policy-grid,
.training-category-list,
.training-capture-block,
.training-precheck-list {
  display: grid;
  gap: 10px;
}

.training-policy-row,
.training-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 250, 242, 0.84);
  border: 1px solid rgba(84, 68, 40, 0.08);
}

.training-category-row {
  grid-template-columns: minmax(0, 1.3fr) minmax(120px, 1fr) auto;
}

.training-category-copy {
  min-width: 0;
}

.training-progress-bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(84, 68, 40, 0.08);
}

.training-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
}

.training-category-meta {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: var(--muted);
  font-size: 0.74rem;
}

.training-action-row,
.training-capture-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.training-alert {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  font-size: 0.86rem;
  line-height: 1.45;
}

.training-alert.info {
  background: rgba(197, 92, 42, 0.08);
  border-color: rgba(197, 92, 42, 0.14);
  color: var(--accent-deep);
}

.training-alert.error {
  background: rgba(184, 59, 45, 0.08);
  border-color: rgba(184, 59, 45, 0.16);
  color: var(--bad);
}

.training-consent-group {
  display: grid;
  gap: 8px;
}

.training-consent-group > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.training-consent-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.training-consent-chip {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
}

.training-consent-chip.active {
  border-color: rgba(197, 92, 42, 0.22);
  background: rgba(197, 92, 42, 0.12);
  color: var(--accent-deep);
}

.training-precheck-good {
  color: var(--ok);
}

.training-precheck-warn {
  color: var(--warn);
}

.training-precheck-neutral {
  color: var(--muted);
}

.training-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  display: grid;
  gap: 8px;
}

.training-note-list {
  line-height: 1.55;
}

.drawing-tag.reading {
  padding: 2px 3px 2px;
  min-width: 16px;
  min-height: 12px;
  justify-content: center;
}

.drawing-tag.equipment {
  padding: 2px 3px;
}

.drawing-tag.active {
  border-color: rgba(31, 122, 76, 0.9);
  background: rgba(31, 122, 76, 0.92);
  color: #fffaf2;
  box-shadow: 0 0 0 2px rgba(31, 122, 76, 0.18);
}

.drawing-tag.dragging {
  opacity: 0.92;
  cursor: grabbing;
}

.drawing-tag-code {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.drawing-tag-number {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border-radius: 999px;
  background: #fff6dd;
  color: #51320a;
  border: 1px solid rgba(81, 50, 10, 0.16);
  font-size: 0.48rem;
  font-weight: 700;
  line-height: 1;
}

.drawing-tag-image {
  display: block;
  max-width: 22px;
  max-height: 12px;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

.drawing-tag.reading .drawing-tag-image {
  max-width: 17px;
  max-height: 9px;
}

.drawing-tag-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 250, 242, 0.18);
  border: 1px solid rgba(255, 250, 242, 0.22);
  font-size: 0.46rem;
}

.drawing-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

.summary-chip,
.detail-stat,
.meta-chip {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(84, 68, 40, 0.1);
  background: rgba(255, 255, 255, 0.55);
}

.summary-chip span,
.detail-stat span,
.meta-chip span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.summary-chip strong,
.detail-stat strong,
.meta-chip strong {
  display: block;
}

.zone-roster {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: 16px;
}

.zone-card.compact {
  padding: 12px;
}

.sheet-preview-block {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.sheet-preview-line {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(84, 68, 40, 0.08);
  color: var(--muted);
  font-size: 0.86rem;
}

.sheet-grid,
.sheet-row {
  display: grid;
  grid-template-columns: 56px 72px minmax(160px, 1.25fr) 74px 98px 82px 82px 70px;
  gap: 10px;
  align-items: center;
}

.sheet-grid {
  margin-top: 16px;
  padding: 0 14px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sheet-row-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.sheet-row {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid rgba(84, 68, 40, 0.12);
  background: rgba(255, 255, 255, 0.62);
  border-radius: 16px;
  cursor: pointer;
}

.sheet-row.active {
  border-color: rgba(197, 92, 42, 0.45);
  background: rgba(197, 92, 42, 0.12);
}

.sheet-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-cell.small {
  font-size: 0.86rem;
  color: var(--muted);
}

.sheet-cell.strong {
  font-weight: 700;
}

.detail-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 16px 0;
}

.meta-chip-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

@media (max-width: 920px) {
  .grid.two,
  .grid.three,
  .stat-strip,
  .form-grid,
  .workspace-grid,
  .workspace-layout,
  .main-split,
  .drawing-summary,
  .detail-grid,
  .meta-chip-list {
    grid-template-columns: 1fr;
  }

  .sheet-grid,
  .sheet-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .handwriting-review-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    flex-direction: column;
  }

  .workspace-header-shell,
  .collapsible-summary,
  .panel-head,
  .drawing-toolbar,
  .tag-flow-head,
  .handwriting-page-preview-head,
  .handwriting-pane-head,
  .handwriting-debug-toggle-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .handwriting-action-bar {
    flex-wrap: wrap;
  }

  .itab-nav-bar,
  .itab-toolbar {
    flex-wrap: wrap;
  }

  .voice-command-grid {
    grid-template-columns: 1fr;
  }

  .tag-flow-head-actions {
    width: 100%;
    justify-content: space-between;
  }

  .pdf-review-shell,
  .review-submit-grid {
    grid-template-columns: 1fr;
  }

  .review-submit-panel {
    padding: 12px 14px;
  }

  .review-submit-actions,
  .memo-review-actions,
  .test-sheet-review-actions,
  .pilot-feedback-actions {
    justify-content: flex-start;
  }

  .review-submit-actions .button,
  .memo-review-actions .button,
  .test-sheet-review-actions .button {
    min-width: 0;
  }

  .voice-conversation-row {
    align-items: stretch;
  }

  .voice-conversation-picker {
    gap: 8px;
  }

  .voice-conversation-flag {
    width: 26px;
    height: 18px;
  }

  .voice-console-toolbar-actions,
  .voice-console-stage-top {
    align-items: stretch;
    flex-direction: column;
  }

  .project-files-download-row,
  .project-files-download-actions,
  .memo-editor-meta-row,
  .memo-dictation-helper {
    align-items: stretch;
    flex-direction: column;
  }

  .project-files-download-actions {
    width: 100%;
  }

  .memo-feedback-button {
    align-self: flex-start;
  }

  .voice-console-updated {
    white-space: normal;
  }

  .voice-output-action-compact {
    width: 100%;
    justify-content: center;
  }

  .handwriting-summary-grid,
  .handwriting-modal-grid,
  .training-summary-grid,
  .training-panel-grid,
  .training-live-grid {
    grid-template-columns: 1fr;
  }

  .training-category-row,
  .training-progress-hero,
  .training-feedback-card,
  .training-modal-head,
  .training-live-head,
  .training-result-head,
  .training-panel-head {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .training-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    padding: 18px;
  }

  .handwriting-modal {
    width: calc(100vw - 24px);
  }

  .workspace-header-actions {
    justify-content: flex-start;
  }

  .project-selector-menu {
    position: static;
    min-width: 100%;
    max-width: 100%;
  }

  .review-submit-grid {
    grid-template-columns: 1fr;
  }

  .test-sheet-toolbar,
  .test-sheet-review-head {
    align-items: flex-start;
  }

  .pdf-review-stage,
  .pdf-review-frame {
    min-height: 460px;
  }

  .workspace-header-side,
  .workspace-header-meta {
    justify-items: start;
    justify-content: flex-start;
  }

  .tooltip-popover {
    width: min(280px, calc(100vw - 40px));
  }

  .drawing-control-group {
    margin-left: 0;
    justify-content: flex-start;
  }

  .workflow-guidance {
    align-items: flex-start;
  }

  .flow-tag {
    min-width: 118px;
  }

  .left-rail,
  .right-drawer {
    position: static;
  }

  .drawer-handle {
    min-height: 56px;
    flex-direction: row;
    justify-content: space-between;
  }

  .drawer-handle-label {
    writing-mode: initial;
    transform: none;
  }

}

@media (max-width: 680px) {
  .project-files-download-row {
    padding: 7px 0;
    gap: 8px;
  }

  .flow-tag {
    min-width: 108px;
    padding: 9px 46px 9px 10px;
  }

  .tag-flow-head-actions {
    align-items: stretch;
  }

  .tag-flow-next-button {
    width: 100%;
    justify-content: center;
  }

  .notes-form-actions .button,
  .review-submit-actions .button,
  .memo-review-actions .button,
  .test-sheet-review-actions .button,
  .pilot-feedback-actions .button {
    width: 100%;
  }

  .memo-editor-input {
    min-height: 280px;
  }

  .handwriting-sheet-input-row {
    grid-template-columns: 1fr;
  }

  .handwriting-memo-grid,
  .handwriting-memo-group-head,
  .handwriting-memo-note-row {
    grid-template-columns: 1fr;
  }

  .handwriting-memo-preamble-actions {
    flex-wrap: nowrap;
  }

  .handwriting-viewer-tools,
  .handwriting-page-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .itab-panel-header,
  .itab-panel-footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .handwriting-flow-step {
    min-width: 140px;
  }

  .arrow-sep,
  .or-divider {
    display: none;
  }

  .handwriting-viewer-tools {
    gap: 4px;
  }

  .handwriting-viewer-tools .button {
    padding: 5px 7px;
    font-size: 0.72rem;
  }

  .memo-ai-toolbar-button {
    margin-left: 0;
  }

  .excel-grid {
    min-width: 620px;
  }

  .pdf-review-shell {
    gap: 10px;
  }
}


/* G5.1 office job preparation screen (board 22) - literal rules */
.ofc-page{box-sizing:border-box;background:#f4efe7;color:#1f1e1a;font-family:'DM Sans',system-ui,sans-serif;min-height:100%}
.ofc-page a{color:#8d3412}.ofc-page a:hover{color:#c55c2a}
.ofc-header{background:#fffaf2;border-bottom:1px solid #e3dccf}
.ofc-header-in{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.ofc-brand{font-weight:700;font-size:18px}
.ofc-brand span{color:#6b665d;font-weight:500}
.ofc-nav{display:flex;flex-wrap:wrap;gap:4px}
.ofc-nav a{padding:8px 12px;border-radius:8px;color:#1f1e1a;text-decoration:none}
.ofc-nav a.is-active{background:#f6e3d6;color:#8d3412;font-weight:700}
.ofc-main{max-width:1200px;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:20px}
.ofc-titlebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.ofc-titlebar-left{display:flex;flex-direction:column;gap:4px}
.ofc-back{font-size:14px}
.ofc-h1{margin:0;font-size:28px;font-weight:700}
.ofc-titlebar-right{display:flex;align-items:center;gap:12px}
.ofc-badge-warn{padding:6px 12px;border-radius:999px;background:#fbefd6;color:#7a4f05;font-weight:700;font-size:14px}
.ofc-badge-ok{padding:6px 12px;border-radius:999px;background:#e4f1e9;color:#1f7a4c;font-weight:700;font-size:14px}
.ofc-btn-primary{height:44px;padding:0 18px;border:none;border-radius:10px;background:#c55c2a;color:#ffffff;font-family:inherit;font-size:16px;font-weight:700}
.ofc-btn-primary:disabled{background:#d9cfc2;color:#6b665d}
.ofc-missing{background:#fffaf2;border:1px solid #e8c88a;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.ofc-missing h2{margin:0;font-size:16px;font-weight:700;color:#7a4f05}
.ofc-missing-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:#ffffff;border-radius:8px}
.ofc-missing-row a{font-weight:700}
.ofc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start}
.ofc-card{background:#ffffff;border:1px solid #e3dccf;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px}
.ofc-card h2{margin:0;font-size:18px;font-weight:700}
.ofc-field{display:flex;flex-direction:column;gap:6px}
.ofc-field label,.ofc-field .ofc-label{font-size:14px;color:#6b665d;font-weight:500}
.ofc-input{height:40px;padding:0 12px;border:1px solid #d6cdbf;border-radius:8px;font-family:inherit;font-size:15px;background:#ffffff}
.ofc-input.is-mono{font-family:'DM Mono',monospace}
select.ofc-input{padding:0 10px}
.ofc-hint{font-size:13px;color:#6b665d}
.ofc-empty{padding:12px;border:1px dashed #d6cdbf;border-radius:8px;color:#6b665d}
.ofc-empty a{font-weight:700}
.ofc-walk{gap:12px}
.ofc-walk-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.ofc-btn-small{height:36px;padding:0 12px;border:1px solid #d6cdbf;border-radius:8px;background:#ffffff;font-family:inherit;font-size:14px}
.ofc-walk-note{margin:0;font-size:14px;color:#6b665d}
.ofc-ahu-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ofc-ahu{border:1px solid #e3dccf;border-radius:10px;background:#fffaf2;overflow:hidden}
.ofc-ahu-row{display:flex;align-items:center;gap:12px;padding:10px 12px}
.ofc-fold{width:36px;height:36px;border:none;border-radius:8px;background:transparent;font-size:16px;color:#6b665d}
.ofc-num{color:#6b665d;font-family:'DM Mono',monospace}
.ofc-item-text{flex:1;display:flex;flex-direction:column}
.ofc-item-name{font-weight:700}
.ofc-item-sub{font-size:13px;color:#6b665d}
.ofc-move{width:36px;height:36px;border:1px solid #d6cdbf;border-radius:8px;background:#ffffff}
.ofc-move:disabled{border-color:#e3dccf;color:#c9c2b6}
.ofc-vav-list{margin:0;padding:0 12px 12px 60px;list-style:none;display:flex;flex-direction:column;gap:6px}
.ofc-vav{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid #e3dccf;border-radius:8px;background:#ffffff}
.ofc-onsite{padding:10px 12px;border-radius:8px;background:#f4efe7;font-size:14px;color:#1f1e1a}
.ofc-onsite strong{font-weight:700}

/* G5.1 narrow screens only: wrap instead of overflowing; above 680px the literal rules apply unchanged */
@media (max-width:680px){
  .ofc-card,.ofc-ahu,.ofc-vav,.ofc-item-text{min-width:0}
  .ofc-h1,.ofc-item-name,.ofc-item-sub,.ofc-missing-row span{overflow-wrap:anywhere}
  .ofc-input{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
  .ofc-titlebar-right{flex-wrap:wrap}
  .ofc-ahu-row,.ofc-vav{flex-wrap:wrap}
  .ofc-item-text{flex:1 1 120px}
}
.ofc-meter-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.ofc-meter-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid #e3dccf;border-radius:8px;background:#ffffff}
.ofc-error{margin:0;padding:10px 12px;border-radius:8px;background:#fbe4e1;color:#8a1f12;font-size:14px}
@media (max-width:480px){
  .ofc-grid{grid-template-columns:minmax(0,1fr)}
  .ofc-main{padding:16px 12px}
  .ofc-header-in{padding:12px}
  .ofc-card{padding:14px}
  .ofc-vav-list{padding-left:12px}
}
/* G5.2 office review of field readings (board 23 revised) */
.ofc-sub{font-size:14px;color:#6b665d}
.ofc-row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.ofc-readings{flex:999 1 560px;min-width:0}
.ofc-side{flex:1 1 320px;display:flex;flex-direction:column;gap:14px}
.ofc-ahu-tabs{display:flex;flex-wrap:wrap;gap:6px}
.ofc-ahu-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:52px;padding:6px 12px;border:1px solid #d6cdbf;border-radius:8px;background:#ffffff;color:#1f1e1a;font-family:inherit;text-align:left}
.ofc-ahu-tab .t1{font-weight:700}
.ofc-ahu-tab .t2{font-size:12px;color:#6b665d}
.ofc-ahu-tab.is-active{border-color:#c55c2a;background:#f6e3d6;color:#8d3412}
.ofc-ahu-tab.is-active .t2{color:#8d3412}
.ofc-vav-chips{display:flex;flex-wrap:wrap;gap:6px;padding-left:4px}
.ofc-chip{height:36px;padding:0 12px;border:1px solid #d6cdbf;border-radius:999px;background:#ffffff;font-family:inherit}
.ofc-chip.is-active{border-color:#c55c2a;background:#f6e3d6;color:#8d3412;font-weight:700}
.ofc-table-box{overflow-x:auto;border:1px solid #e3dccf;border-radius:8px}
.ofc-table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.ofc-table thead tr{background:#fffaf2;text-align:left}
.ofc-table th{padding:10px 12px;font-weight:700}
.ofc-table tbody{font-family:'DM Mono',monospace}
.ofc-table tbody tr{border-top:1px solid #efe8dc}
.ofc-table tbody tr.is-attention{background:#fdf3e6}
.ofc-table td{padding:10px 12px}
.ofc-table td.is-sans{font-family:'DM Sans',sans-serif}
.ofc-table td.is-muted{color:#6b665d}
.ofc-off-in{color:#1f7a4c;font-weight:500}
.ofc-off-out{color:#b83b2d;font-weight:500}
.ofc-table a{font-weight:700}
.ofc-pill-warn{margin-left:6px;padding:2px 8px;border-radius:999px;background:#fbefd6;color:#7a4f05;font-size:12px;font-weight:700}
.ofc-foot{margin:0;font-size:13px;color:#6b665d}
.ofc-panel{background:#ffffff;border:1px solid #e3dccf;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}
.ofc-panel h2{margin:0;font-size:16px;font-weight:700}
.ofc-panel.is-warn{border-color:#e8c88a;gap:10px}
.ofc-panel.is-warn h2{color:#7a4f05}
.ofc-item{padding:12px;background:#fffaf2;border-radius:8px;display:flex;flex-direction:column;gap:6px}
.ofc-item.has-actions{gap:8px}
.ofc-item-title{font-weight:700}
.ofc-res-text{font-size:14px;color:#6b665d}
.ofc-actions{display:flex;flex-wrap:wrap;gap:8px}
.ofc-act{height:36px;padding:0 12px;border:1px solid #d6cdbf;border-radius:8px;background:#ffffff;font-family:inherit}
.ofc-act.is-primary{border:none;background:#c55c2a;color:#ffffff;font-weight:700}
.ofc-note{font-size:14px}
.ofc-note strong{font-weight:700}
@media (max-width:680px){
  .ofc-side,.ofc-titlebar-left{min-width:0}
  .ofc-readings h2,.ofc-sub,.ofc-item-title,.ofc-res-text,.ofc-note,.ofc-ahu-tab .t1{overflow-wrap:anywhere}
}
/* G5.3 office deficiency list (board 25) */
.ofc-titlebar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ofc-btn-secondary{height:44px;padding:0 16px;border:1px solid #d6cdbf;border-radius:10px;background:#ffffff;font-family:inherit;font-size:15px;font-weight:700}
.ofc-btn-secondary:disabled{color:#6b665d;background:#f4efe8}
.ofc-btn-primary.is-md{height:44px;padding:0 16px;font-size:15px}
.ofc-filters{display:flex;flex-wrap:wrap;gap:6px}
.ofc-def-group{gap:12px}
.ofc-def-group h2 .muted{font-weight:500;color:#6b665d;font-size:15px}
.ofc-def{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-start;padding:14px;border:1px solid #e8c88a;border-radius:10px;background:#fffaf2}
.ofc-def.is-closed{border-color:#e3dccf;background:#ffffff}
.ofc-def-main{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:6px}
.ofc-def-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ofc-def-title{font-weight:700}
.ofc-def-meta{font-size:13px;color:#6b665d}
.ofc-def-actions{flex:1 1 260px;display:flex;flex-wrap:wrap;gap:8px}
.ofc-def-btn{height:40px;padding:0 12px;border:1px solid #d6cdbf;border-radius:8px;background:#ffffff;font-family:inherit}
.ofc-pill{padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700}
.ofc-pill.is-open{background:#fbefd6;color:#7a4f05}
.ofc-pill.is-memo{background:#e9e3d8;color:#1f1e1a}
.ofc-pill.is-ok{background:#e4f1e9;color:#1f7a4c}
@media (max-width:680px){
  .ofc-def-group h2,.ofc-def-title,.ofc-def-main>span{overflow-wrap:anywhere}
}
/* G5.4 office filled sheets (board 26) */
.ofc-sheets{flex:1 1 320px;background:#ffffff;border:1px solid #e3dccf;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}
.ofc-sheets h2{margin:0 0 4px;font-size:16px;font-weight:700}
.ofc-sheet-group{font-size:13px;font-weight:700;color:#6b665d;padding-top:8px}
.ofc-sheet-group:first-of-type{padding-top:4px}
.ofc-sheet{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid #e3dccf;border-radius:8px;color:#1f1e1a;text-decoration:none}
.ofc-sheet.is-active{border-color:#c55c2a;background:#f6e3d6}
.ofc-sheet-name{font-weight:700}
.ofc-sheet-status{font-size:13px;color:#6b665d}
.ofc-sheet-status.is-ok{color:#1f7a4c;font-weight:700}
.ofc-sheet-status.is-warn{color:#7a4f05;font-weight:700}
.ofc-preview{flex:999 1 560px;min-width:0;gap:12px}
.ofc-preview-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.ofc-preview-btns{display:flex;gap:8px}
.ofc-hint{font-size:13px;color:#6b665d}
.ofc-sheet-table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.ofc-sheet-table thead tr{background:#fffaf2;text-align:left}
.ofc-sheet-table th{padding:9px 12px;font-weight:700;border-bottom:1px solid #e3dccf}
.ofc-sheet-table tbody{font-family:'DM Mono',monospace}
.ofc-sheet-table td{padding:9px 12px;border-bottom:1px solid #efe8dc}
.ofc-sheet-table tbody tr:last-child td{border-bottom:none}
.ofc-sheet-table td.is-label,.ofc-sheet-table td.is-text{font-family:'DM Sans',sans-serif}
.ofc-sheet-table td.is-filled{background:#fdf3e6;cursor:pointer}
.ofc-source{font-size:13px;color:#1f1e1a}
@media (max-width:680px){
  .ofc-sheets{min-width:0}
  .ofc-sheet-name,.ofc-sheet-status,.ofc-preview-head h2,.ofc-source{overflow-wrap:anywhere}
}

/* G5.5 office playbook editor */
.ofc-pb-q{padding:10px 12px;background:#fffaf2;border-radius:8px;display:flex;flex-direction:column;gap:6px}
.ofc-pb-q .meta{font-size:13px;color:#6b665d}
.ofc-pb-label{font-size:14px;font-weight:700}
.ofc-pb-editor{flex:999 1 560px;min-width:0;padding:20px;gap:14px}
.ofc-pb-tabs{display:flex;flex-wrap:wrap;gap:6px}
.ofc-pb-field{display:flex;flex-direction:column;gap:6px}
.ofc-pb-field > label,.ofc-pb-field > .ofc-pb-flabel{font-size:14px;color:#6b665d;font-weight:500}
.ofc-pb-step{display:flex;gap:10px;align-items:flex-start}
.ofc-pb-step .n{font-family:'DM Mono',monospace;color:#6b665d;padding-top:10px}
.ofc-pb-step textarea{flex:1;min-height:44px;padding:10px 12px;border:1px solid #d6cdbf;border-radius:8px;font-family:inherit;font-size:15px}
.ofc-pb-add{align-self:flex-start;height:36px;padding:0 12px;border:1px dashed #d6cdbf;border-radius:8px;background:#ffffff;font-family:inherit}
.ofc-pb-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.ofc-pb-buttons .ofc-btn-secondary{font-weight:400}
.ofc-pb-buttons .ofc-btn-secondary.is-strong{font-weight:700}
@media (max-width:680px){
  .ofc-pb-q span,.ofc-pb-label,.ofc-pb-tabs .ofc-chip{overflow-wrap:anywhere}
  .ofc-pb-step textarea{box-sizing:border-box;min-width:0;max-width:100%}
  .ofc-pb-tabs .ofc-chip{max-width:100%}
}
.ofc-sp-pagehead{display:flex;flex-direction:column;gap:4px}
.ofc-sp-pagehead h1{margin:0;font-size:28px;font-weight:700}
.ofc-sp-lead{font-size:14px;color:#6b665d}
.ofc-sp-layout{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.ofc-sp-setup{flex:1 1 300px;background:#ffffff;border:1px solid #e3dccf;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}
.ofc-sp-h2{margin:0;font-size:16px;font-weight:700}
.ofc-sp-h2.is-later{margin:8px 0 0}
.ofc-sp-field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#6b665d;font-weight:500}
.ofc-sp-select{height:40px;padding:0 10px;border:1px solid #d6cdbf;border-radius:8px;background:#ffffff;font-family:inherit;font-size:15px;color:#1f1e1a}
.ofc-sp-input{height:40px;padding:0 12px;border:1px solid #d6cdbf;border-radius:8px;font-family:inherit;font-size:15px}
.ofc-sp-hint{font-size:13px;font-weight:400}
.ofc-sp-actions{display:flex;flex-wrap:wrap;gap:8px}
.ofc-sp-btn{height:40px;padding:0 14px;border:1px solid #d6cdbf;border-radius:10px;background:#ffffff;font-family:inherit;font-size:15px}
.ofc-sp-btn.is-strong{font-weight:700}
.ofc-sp-btn-primary{height:40px;padding:0 16px;border:none;border-radius:10px;background:#c55c2a;color:#ffffff;font-family:inherit;font-size:15px;font-weight:700}
.ofc-sp-btn:disabled,.ofc-sp-btn-primary:disabled{opacity:.5;cursor:not-allowed}
.ofc-sp-note{margin:0;font-size:13px;color:#6b665d}
.ofc-sp-past{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid #e3dccf;border-radius:8px;color:#1f1e1a;text-decoration:none}
.ofc-sp-past.is-selected{border-color:#c55c2a;background:#f6e3d6}
.ofc-sp-past-result{font-weight:700}
.ofc-sp-past-result.is-ok{color:#1f7a4c}
.ofc-sp-past-result.is-bad{color:#b83b2d}
.ofc-sp-past-result.is-wait{color:#6b665d}
.ofc-sp-results{flex:999 1 560px;min-width:0;background:#ffffff;border:1px solid #e3dccf;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px}
.ofc-sp-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.ofc-sp-title{display:flex;flex-direction:column;gap:2px}
.ofc-sp-title h2{margin:0;font-size:18px;font-weight:700}
.ofc-sp-sub{font-size:13px;color:#6b665d}
.ofc-sp-counts{display:flex;flex-wrap:wrap;gap:8px}
.ofc-sp-count{padding:6px 12px;border-radius:999px;font-weight:700}
.ofc-sp-count.is-ok{background:#e4f1e9;color:#1f7a4c}
.ofc-sp-count.is-bad{background:#f6dcd8;color:#b83b2d}
.ofc-sp-count.is-wait{background:#f4efe7;color:#6b665d}
.ofc-sp-scroll{overflow-x:auto}
.ofc-sp-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px}
.ofc-sp-table th{text-align:left;padding:8px 10px;font-size:13px;color:#6b665d;font-weight:500;border-bottom:1px solid #e3dccf}
.ofc-sp-table td{padding:10px;border-bottom:1px solid #efe8dc}
.ofc-sp-num{font-family:'DM Mono',monospace}
.ofc-sp-num.is-ok{color:#1f7a4c}
.ofc-sp-num.is-bad{color:#b83b2d}
.ofc-sp-num.is-wait{color:#6b665d}
.ofc-sp-pill{padding:3px 10px;border-radius:999px;font-weight:700;font-size:13px}
.ofc-sp-pill.is-ok{background:#e4f1e9;color:#1f7a4c}
.ofc-sp-pill.is-bad{background:#f6dcd8;color:#b83b2d}
.ofc-sp-pill.is-wait{background:#f4efe7;color:#6b665d}
.ofc-sp-alert{background:#fbeee9;border:1px solid #e9b9ae;border-radius:10px;padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.ofc-sp-sent{font-size:13px;color:#6b665d;font-weight:700}
.ofc-nt-pagehead{display:flex;flex-direction:column;gap:4px}
.ofc-nt-pagehead h1{margin:0;font-size:28px;font-weight:700}
.ofc-nt-lead{font-size:14px;color:#6b665d}
.ofc-nt-layout{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.ofc-nt-panel{flex:1 1 420px;min-width:0;background:#ffffff;border:1px solid #e3dccf;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px}
.ofc-nt-h2{margin:0;font-size:18px;font-weight:700}
.ofc-nt-h3{margin:4px 0 0;font-size:15px;font-weight:700}
.ofc-nt-field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#6b665d;font-weight:500}
.ofc-nt-field.is-name{flex:1 1 180px}
.ofc-nt-field.is-date{flex:1 1 140px}
.ofc-nt-select{height:40px;padding:0 12px;border:1px solid #d6cdbf;border-radius:8px;font-family:inherit;font-size:15px;color:#1f1e1a;background:#ffffff}
.ofc-nt-input{height:40px;padding:0 12px;border:1px solid #d6cdbf;border-radius:8px;font-family:inherit;font-size:15px;color:#1f1e1a;background:#ffffff}
.ofc-nt-textarea{min-height:80px;padding:10px 12px;border:1px solid #d6cdbf;border-radius:8px;font-family:inherit;font-size:15px;color:#1f1e1a}
.ofc-nt-textarea.is-short{min-height:60px}
.ofc-nt-tabs{display:flex;flex-wrap:wrap;gap:6px}
.ofc-nt-tab{height:36px;padding:0 14px;border:1px solid #d6cdbf;border-radius:999px;background:#ffffff;font-family:inherit}
.ofc-nt-tab.is-selected{border-color:#c55c2a;background:#f6e3d6;color:#8d3412;font-weight:700}
.ofc-nt-check{display:flex;gap:10px;align-items:center;font-size:15px}
.ofc-nt-check input{width:22px;height:22px;accent-color:#c55c2a}
.ofc-nt-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.ofc-nt-btn{height:40px;padding:0 14px;border:1px solid #d6cdbf;border-radius:10px;background:#ffffff;font-family:inherit;font-size:15px}
.ofc-nt-btn-primary{height:44px;padding:0 16px;border:none;border-radius:10px;background:#c55c2a;color:#ffffff;font-family:inherit;font-size:15px;font-weight:700}
.ofc-nt-btn:disabled,.ofc-nt-btn-primary:disabled{opacity:.5;cursor:not-allowed}
.ofc-nt-sent{padding:10px 12px;border:1px solid #e3dccf;border-radius:8px;display:flex;flex-direction:column;gap:6px}
.ofc-nt-sent-title{font-weight:700}
.ofc-nt-sent-meta{font-size:13px;color:#6b665d}
.ofc-nt-heard{font-size:13px;font-weight:700}
.ofc-nt-heard.is-ok{color:#1f7a4c}
.ofc-nt-heard.is-warn{color:#7a4f05}
.ofc-nt-note{margin:0;font-size:13px;color:#6b665d}
.ofc-nt-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ofc-nt-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:10px 12px;background:#fffaf2;border-radius:8px}
.ofc-nt-row-text{display:flex;flex-direction:column;gap:2px}
.ofc-nt-row-detail{font-size:13px;color:#6b665d}
.ofc-nt-pill{padding:3px 10px;border-radius:999px;font-weight:700;font-size:13px}
.ofc-nt-pill.is-ok{background:#e4f1e9;color:#1f7a4c}
.ofc-nt-pill.is-bad{background:#f6dcd8;color:#b83b2d}
.ofc-nt-pill.is-wait{background:#f4efe7;color:#6b665d}
.ofc-nt-alert{background:#fbeee9;border:1px solid #e9b9ae;border-radius:10px;padding:12px 14px}
.ofc-nt-pair{display:flex;flex-wrap:wrap;gap:12px}
.ofc-nt-reopen{border-top:1px solid #efe8dc;padding-top:14px;display:flex;flex-direction:column;gap:12px}
.ofc-nt-btn-danger{height:40px;padding:0 14px;border:1px solid #b83b2d;border-radius:10px;background:#ffffff;color:#b83b2d;font-family:inherit;font-size:15px;font-weight:700}
.ofc-nt-btn-danger:disabled{opacity:.5;cursor:not-allowed}
.ofc-nt-history{padding:10px 12px;border:1px solid #e3dccf;border-radius:8px;display:flex;flex-direction:column;gap:4px}
.ofc-nt-history-line{font-size:13px;color:#6b665d}
.ofc-vd-panel{background:#ffffff;border:1px solid #e3dccf;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px}
.ofc-vd-done-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid #e3dccf;border-radius:8px}
.ofc-hw-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.ofc-hw-headtext{display:flex;flex-direction:column;gap:4px}
.ofc-hw-headtext a{font-size:14px}
.ofc-hw-headtext h1{margin:0;font-size:28px;font-weight:700}
.ofc-hw-lead{font-size:14px;color:#6b665d}
.ofc-hw-panel{background:#ffffff;border:1px solid #e3dccf;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}
.ofc-hw-h2{margin:0;font-size:18px;font-weight:700}
.ofc-hw-count{font-weight:500;color:#6b665d;font-size:15px}
.ofc-hw-page{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;padding:12px;border:1px solid #e3dccf;border-radius:10px}
.ofc-hw-page.is-warn{border-color:#e8c88a;background:#fffaf2}
.ofc-hw-thumb{width:72px;height:92px;flex:none;border:1px solid #d6cdbf;border-radius:6px;background:#f4efe7;object-fit:cover}
.ofc-hw-pagetext{flex:999 1 320px;min-width:0;display:flex;flex-direction:column;gap:4px}
.ofc-hw-pagetitle{font-weight:700}
.ofc-hw-sub{font-size:13px;color:#6b665d}
.ofc-hw-pageside{flex:1 1 260px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:flex-end}
.ofc-hw-pill-warn{background:#fbefd6;color:#7a4f05}
.ofc-hw-btn{height:36px;padding:0 12px;border:1px solid #d6cdbf;border-radius:8px;background:#ffffff;font-family:inherit}
.ofc-hw-btn.is-strong{font-weight:700}
.ofc-hw-select{height:36px;padding:0 10px;border:1px solid #d6cdbf;border-radius:8px;background:#ffffff;font-family:inherit;font-size:14px;color:#1f1e1a}
.ofc-hw-item{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-start;padding:14px;border:1px solid #e8c88a;border-radius:10px;background:#fffaf2}
.ofc-hw-itemmain{flex:999 1 300px;min-width:0;display:flex;flex-direction:column;gap:8px}
.ofc-hw-itemhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ofc-hw-itemtitle{font-weight:700}
.ofc-hw-badge{padding:2px 8px;border-radius:999px;background:#fbefd6;color:#7a4f05;font-size:12px;font-weight:700}
.ofc-hw-crop{height:64px;width:100%;object-fit:contain;border:1px solid #d6cdbf;border-radius:6px;background:#f4efe7}
.ofc-hw-mono{font-family:'DM Mono',monospace}
.ofc-hw-mono.is-strong{font-weight:700}
.ofc-hw-itemside{flex:1 1 220px;display:flex;flex-direction:column;gap:8px}
.ofc-hw-itemside .ofc-hw-btn{height:40px}
.ofc-hw-field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#6b665d}
.ofc-hw-input{height:40px;padding:0 12px;border:1px solid #d6cdbf;border-radius:8px;font-family:inherit;font-size:15px}