:root {
  --bg: #f3f4f6;
  --panel: #ffffff;
  --ink: #182433;
  --muted: #667382;
  --line: #dce1e7;
  --accent: #206bc4;
  --accent-2: #c8532b;
  --soft: #eaf2ff;
  --danger: #b42318;
  --success: #2fb344;
  --warning: #f59f00;
  --shadow: 0 8px 24px rgba(24, 36, 51, 0.06);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

button {
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  padding: 10px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

button.ghost {
  background: #eef1f4;
  color: var(--ink);
}

button.danger-button {
  background: #fff5f5;
  border: 1px solid rgba(180, 35, 24, 0.25);
  color: var(--danger);
}

#app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #f2f4f7;
}

.login-box {
  width: min(100%, 420px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 28px;
}

.login-box h1 {
  font-size: 22px;
  margin-bottom: 22px;
}

.login-form {
  display: grid;
  gap: 14px;
}

.sidebar {
  background: #182433;
  color: #fff;
  padding: 22px 16px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: var(--accent);
  font-weight: 800;
}

.brand small {
  display: block;
  color: #afbac5;
  margin-top: 2px;
}

nav {
  display: grid;
  gap: 6px;
}

.nav-item {
  width: 100%;
  text-align: left;
  background: transparent;
  color: #d7dde4;
  justify-content: flex-start;
  gap: 10px;
}

.nav-item .ti {
  color: #93b7e8;
  font-size: 18px;
}

.nav-item.active,
.nav-item:hover {
  background: rgba(255, 255, 255, 0.11);
}

.main {
  padding: 28px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  font-size: 28px;
  margin-bottom: 4px;
}

h2 {
  font-size: 18px;
  margin-bottom: 0;
}

#pageSubtitle,
.muted,
.session {
  color: var(--muted);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 18px;
}

.panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-title h2 {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.panel-title h2 .ti {
  color: var(--accent);
  font-size: 22px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.metrics article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}

.metric-card .ti {
  align-items: center;
  background: var(--soft);
  border-radius: 8px;
  color: var(--accent);
  display: inline-flex;
  font-size: 20px;
  height: 34px;
  justify-content: center;
  margin-bottom: 10px;
  width: 34px;
}

.metrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.metrics strong {
  font-size: 24px;
  line-height: 1;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

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

.form-section-title {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9px;
}

label {
  display: grid;
  gap: 5px;
  color: var(--muted);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 10px 11px;
}

textarea {
  resize: vertical;
}

.stack {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.table {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.panel,
.pl-table,
#view-pl {
  max-width: 100%;
  min-width: 0;
}

.table.card-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  overflow: visible;
}

.view-toolbar {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(240px, 420px) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.search-field {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  padding: 0 10px;
}

.search-field .ti {
  color: var(--muted);
  font-size: 18px;
}

.search-field input {
  border: 0;
  padding-left: 0;
}

.summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.summary-pills span {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  padding: 7px 10px;
}

.summary-pills span.danger {
  background: #fff6f6;
  border-color: rgba(214, 57, 57, 0.25);
  color: var(--danger);
}

.master-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(24, 36, 51, 0.03);
  display: grid;
  gap: 10px;
  padding: 12px;
}

.master-card.danger {
  border-color: rgba(214, 57, 57, 0.28);
  background: #fffafa;
}

.master-card.development {
  background: #f8fafc;
  border-style: dashed;
}

.compact-check {
  align-items: center;
  display: inline-flex;
  gap: 7px;
  white-space: nowrap;
}

.compact-check input {
  width: auto;
}

.master-card-head {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.master-card-head strong,
.master-card-head span {
  display: block;
}

.master-card-head strong {
  align-items: center;
  display: flex;
  gap: 6px;
  line-height: 1.25;
}

.master-card-head strong .ti {
  color: var(--accent);
}

.master-card-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  margin-top: 3px;
}

.master-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.master-stats div {
  background: #f8fafc;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  padding: 8px;
}

.master-stats span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  margin-bottom: 3px;
}

.master-stats b {
  color: var(--ink);
  display: block;
  font-size: 14px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
}

.card-actions button {
  padding: 7px 9px;
}

.material-usage {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 7px;
  padding-top: 9px;
}

.usage-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.material-usage > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.usage-chip {
  align-items: center;
  background: #eef5ff;
  border: 1px solid rgba(32, 107, 196, 0.18);
  border-radius: 999px;
  color: var(--accent);
  display: inline-flex;
  gap: 5px;
  font-size: 11px;
  line-height: 1;
  max-width: 100%;
  padding: 5px 7px;
}

.usage-chip em {
  color: var(--muted);
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  padding: 5px 8px;
}

.badge.accent {
  border-color: rgba(32, 107, 196, 0.22);
  color: var(--accent);
  background: var(--soft);
}

.stock-meter {
  background: #eef1f4;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.stock-meter div {
  background: linear-gradient(90deg, var(--success), #69db7c);
  border-radius: 999px;
  height: 100%;
}

.stock-meter div.warn {
  background: linear-gradient(90deg, var(--danger), #ff8787);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-weight: 650;
}

.list {
  display: grid;
  gap: 10px;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.segmented button {
  background: #f1f5f9;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 12px;
}

.segmented button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.dashboard-list {
  display: none;
}

.dashboard-list.active,
.pl-table.active {
  display: grid;
}

.dashboard-sort-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: thin;
}

.dashboard-sort-bar button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--line);
  font-size: 12px;
}

.dashboard-sort-bar button.active {
  color: var(--accent);
  border-color: rgba(22, 119, 100, 0.4);
  background: var(--soft);
}

.pl-table {
  display: none;
}

.list-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(24, 36, 51, 0.03);
}

.list-item strong {
  display: block;
  margin-bottom: 4px;
}

.list-item small {
  display: block;
  color: var(--accent-2);
  font-weight: 700;
  margin-bottom: 4px;
}

.dashboard-card {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.item-copy {
  min-width: 0;
}

.item-copy strong {
  font-size: 15px;
  margin-bottom: 6px;
}

.item-copy span {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.item-copy em {
  display: block;
  color: var(--muted);
  font-style: normal;
  margin-top: 5px;
  font-size: 12px;
}

.item-stats {
  display: grid;
  grid-template-columns: repeat(8, 78px);
  gap: 8px;
}

.quick-assistant-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.quick-assistant-form button {
  min-width: 104px;
}

.compact-answer {
  min-height: 56px;
  margin-top: 10px;
}

.stat-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 6px;
  text-align: center;
  min-height: 58px;
}

.stat-box span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.stat-box strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.15;
  margin: 0;
}

.stat-box.primary {
  border-color: rgba(22, 119, 100, 0.35);
  background: var(--soft);
}

.stat-box.primary strong {
  color: var(--accent);
}

.stat-box.warning {
  border-color: rgba(190, 85, 48, 0.38);
  background: #fff8f4;
}

.stat-box.warning strong {
  color: #a34628;
}

.label-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 90px auto 100px minmax(130px, 180px) auto;
  gap: 10px;
  align-items: end;
}

.label-controls label,
.label-queue-item label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.label-controls input,
.label-controls select,
.label-queue-item input {
  width: 100%;
}

.label-queue {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.label-queue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 42px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.label-queue-item strong,
.label-queue-item span {
  display: block;
}

.label-queue-item span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.label-print-root {
  display: grid;
  gap: 20px;
  overflow-x: auto;
  padding: 12px;
  background: #e8ebef;
  border-radius: 8px;
}

.fba-label-page {
  width: 210mm;
  height: 297mm;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 52.5mm);
  grid-template-rows: repeat(10, 29.7mm);
  background: #fff;
  margin: 0 auto;
  box-shadow: var(--shadow);
}

.fba-label-cell {
  width: 52.5mm;
  height: 29.7mm;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 1.4mm 1.8mm 1mm;
  outline: 1px dashed #c7cdd5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #000;
  background: #fff;
  font-family: Arial, "Noto Sans JP", sans-serif;
}

.fba-label-cell .fba-barcode {
  display: block;
  width: 46mm !important;
  max-width: 46mm !important;
  height: 9mm !important;
  max-height: 9mm !important;
  flex: 0 0 9mm;
  overflow: hidden;
}

.fba-label-cell strong {
  display: block;
  margin: 0.3mm 0;
  font-size: 8pt;
  line-height: 1;
  letter-spacing: 0;
}

.fba-label-cell span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  font-size: 6.2pt;
  line-height: 1.15;
  text-align: center;
}

.fba-label-cell small {
  display: block;
  margin-top: 1.4mm;
  font-size: 6pt;
  line-height: 1;
}

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

.sync-strip {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 10px;
}

.sync-strip-head {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-size: 13px;
  gap: 6px;
  margin-right: 2px;
  white-space: nowrap;
}

.sync-strip-head .ti {
  color: var(--accent);
  font-size: 17px;
}

.sync-status-grid {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 6px;
}

.sync-status-pill {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  gap: 6px;
  min-height: 30px;
  padding: 4px 9px;
  white-space: nowrap;
}

.sync-status-pill.ok {
  border-color: rgba(47, 179, 68, 0.28);
  background: #f6fff8;
}

.sync-status-pill.danger {
  border-color: rgba(214, 57, 57, 0.34);
  background: #fff6f6;
}

.sync-status-pill .ti {
  color: var(--accent);
  font-size: 16px;
}

.sync-status-pill.danger .ti,
.sync-status-pill.danger span {
  color: var(--danger);
}

.sync-status-pill strong {
  font-size: 12px;
}

.sync-status-pill span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.sync-actions {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.compact-icon-button,
.icon-only {
  min-height: 30px;
  padding: 6px 9px;
}

.compact-icon-button {
  gap: 5px;
}

.icon-only {
  width: 32px;
}

.sync-result {
  font-size: 12px;
  line-height: 1.3;
}

.cockpit-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 8px;
}

.compact-cockpit-panel {
  padding: 12px;
}

.compact-cockpit-panel .panel-title {
  margin-bottom: 10px;
}

.compact-cockpit-panel .panel-title h2 {
  font-size: 16px;
}

.cockpit-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(24, 36, 51, 0.03);
}

.wide-cockpit-card {
  grid-column: span 2;
}

.cockpit-card .muted {
  margin-bottom: 0;
}

.labor-card strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  margin: 6px 0 8px;
}

.mini-label {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  text-transform: uppercase;
}

.mini-label .ti {
  color: var(--accent);
  font-size: 15px;
}

.gauge-track,
.mini-bar {
  background: #eef1f4;
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}

.gauge-fill,
.mini-bar div {
  background: linear-gradient(90deg, var(--accent), #4dabf7);
  border-radius: 999px;
  height: 100%;
}

.mini-card-list {
  display: grid;
  gap: 6px;
  margin-top: 7px;
  max-height: 126px;
  overflow: auto;
}

.mini-material-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px;
  background: #fbfcfd;
  display: grid;
  gap: 5px;
}

.mini-material-card.danger {
  border-color: rgba(214, 57, 57, 0.25);
  background: #fff6f6;
}

.mini-material-card.danger .mini-bar div {
  background: linear-gradient(90deg, var(--danger), #e06c4f);
}

.mini-bar div.warn {
  background: linear-gradient(90deg, var(--warning), #ffd43b);
}

.mini-material-title strong,
.mini-material-title span {
  display: block;
}

.mini-material-title strong,
.stock-day-title strong,
.lead-card strong,
.item-copy strong {
  align-items: center;
  display: flex;
  gap: 6px;
}

.mini-material-title strong .ti,
.stock-day-title strong .ti,
.lead-card strong .ti,
.item-copy strong .ti {
  color: var(--accent);
}

.mini-material-title span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  margin-top: 1px;
}

.mini-material-meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  margin-top: 3px;
}

.mini-material-meta b {
  color: var(--danger);
}

.stock-days-chart {
  display: grid;
  gap: 7px;
  margin-top: 7px;
  max-height: 126px;
  overflow: auto;
}

.stock-day-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

.stock-day-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.stock-day-title strong,
.stock-day-title span {
  display: block;
}

.stock-day-title span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.dual-bars {
  display: grid;
  gap: 4px;
}

.dual-bars label {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  margin: 0;
}

.dual-bars span {
  color: var(--muted);
  font-size: 11px;
}

.dual-bars i {
  background: #eef1f4;
  border-radius: 999px;
  display: block;
  height: 7px;
  overflow: hidden;
}

.dual-bars b {
  background: linear-gradient(90deg, var(--success), #69db7c);
  border-radius: 999px;
  display: block;
  height: 100%;
}

.dual-bars b.warn {
  background: linear-gradient(90deg, var(--warning), #ffd43b);
}

.lead-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding: 7px;
  background: #fbfcfd;
}

.lead-card strong,
.lead-card span,
.lead-card p,
.lead-card em {
  display: block;
}

.lead-card span,
.lead-card p,
.lead-card em {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.lead-card p,
.lead-card em {
  grid-column: 1 / -1;
  margin: 0;
}

.lead-pill {
  align-self: start;
  background: var(--soft);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 800;
  padding: 4px 8px;
}

.work-plan-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 180px)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.work-plan-summary {
  margin-bottom: 12px;
}

.work-capacity-card {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.work-capacity-card span {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.work-capacity-card strong {
  display: block;
  font-size: 20px;
}

.work-capacity-bar {
  background: #eef1f4;
  border-radius: 999px;
  grid-column: 1 / -1;
  height: 9px;
  overflow: hidden;
}

.work-capacity-bar b {
  background: linear-gradient(90deg, var(--accent), #4dabf7);
  display: block;
  height: 100%;
}

.work-plan-tasks {
  display: grid;
  gap: 8px;
}

.work-task-card {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 10px;
}

.work-task-card strong,
.work-task-card span {
  display: block;
}

.work-task-card strong {
  align-items: center;
  display: flex;
  gap: 6px;
}

.work-task-card strong .ti {
  color: var(--accent);
}

.work-task-card span,
.work-warning {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.work-task-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.work-task-numbers span {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  padding: 5px 8px;
}

.work-task-numbers b {
  color: var(--accent);
}

.work-warning {
  align-items: center;
  color: var(--danger);
  display: flex;
  gap: 5px;
  grid-column: 1 / -1;
  margin: 0;
}

.muted-card {
  background: #f8fafc;
}

.work-skipped {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.visual-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.builder-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(320px, 1.15fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.builder-workspace {
  grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1.28fr);
}

.builder-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 14px;
}

.palette-card {
  position: sticky;
  top: 14px;
}

.wide-input {
  width: 100%;
  margin-bottom: 10px;
}

.drag-palette {
  display: grid;
  gap: 6px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.material-chip {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: grab;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
}

.material-chip:active {
  cursor: grabbing;
}

.material-chip span,
.material-chip em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.compact-add {
  padding: 7px 9px;
  min-width: 54px;
}

.builder-target {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr);
  gap: 10px;
}

.builder-target span,
.builder-item label span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.builder-target select,
.builder-target input {
  width: 100%;
}

.builder-fields {
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
}

.builder-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.drop-zone {
  border: 1px dashed rgba(22, 119, 100, 0.45);
  border-radius: 8px;
  color: var(--muted);
  background: var(--soft);
  padding: 16px;
  text-align: center;
}

.drop-zone.active {
  border-color: var(--accent);
  color: var(--accent);
  background: #eef8f4;
}

.builder-items {
  display: grid;
  gap: 8px;
}

.builder-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 80px auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.builder-item label {
  margin: 0;
}

.builder-item input {
  width: 100%;
}

.builder-item strong,
.builder-item span {
  display: block;
}

.builder-item span {
  color: var(--muted);
  font-size: 12px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.builder-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.legacy-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 12px 0 18px;
  padding: 10px 12px;
  background: #fff;
}

.legacy-panel summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
}

.legacy-panel[open] summary {
  margin-bottom: 12px;
}

.visual-tree {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.visual-node {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.visual-node-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.visual-node-header strong,
.visual-node-header span {
  display: block;
}

.visual-node-header span {
  margin-top: 4px;
  color: var(--ink);
  line-height: 1.35;
}

.visual-qty {
  min-width: 98px;
  text-align: right;
}

.visual-qty b,
.visual-qty small {
  display: block;
}

.visual-qty small {
  color: var(--muted);
  margin-top: 4px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  padding: 5px 8px;
}

.badge.accent {
  border-color: rgba(32, 107, 196, 0.22);
  color: var(--accent);
  background: var(--soft);
}

.process-card {
  border-left: 3px solid var(--accent);
  background: #f8faf9;
  border-radius: 6px;
  margin-top: 10px;
  padding: 10px;
}

.process-card-title,
.process-meta,
.input-list div {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.process-card-title span,
.process-meta,
.input-list em {
  color: var(--muted);
}

.process-meta {
  margin-top: 6px;
  font-size: 13px;
}

.input-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.input-list div {
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

.result-box,
.answer {
  min-height: 80px;
  background: #111820;
  color: #e8eef4;
  border-radius: 8px;
  padding: 14px;
  overflow: auto;
}

.answer {
  white-space: pre-wrap;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: min(420px, calc(100vw - 36px));
  background: #101820;
  color: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.hidden {
  display: none !important;
}

@media (max-width: 860px) {
  #view-pl {
    overflow-x: hidden;
  }

  #view-pl .segmented {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  #view-pl .segmented button {
    flex: 0 0 auto;
  }

  #view-pl .table table {
    width: max-content;
    min-width: 100%;
  }

  #app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 12px;
  }

  .brand {
    margin-bottom: 12px;
  }

  nav {
    grid-auto-flow: column;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .nav-item {
    white-space: nowrap;
  }

  .main {
    padding: 18px 12px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .metrics,
  .visual-summary,
  .sync-status-grid,
  .cockpit-grid,
  .builder-grid,
  .view-toolbar,
  .builder-target,
  .builder-fields,
  .builder-toolbar,
  .work-plan-controls,
  .work-capacity-card,
  .work-task-card,
  .form-grid,
  .form-grid.compact {
    grid-template-columns: 1fr;
  }

  .palette-card {
    position: static;
  }

  .builder-item {
    grid-template-columns: 1fr;
  }

  .wide-cockpit-card {
    grid-column: auto;
  }

  .cockpit-card {
    padding: 12px;
  }

  .stock-day-row {
    grid-template-columns: 1fr;
  }

  .dual-bars label {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .work-task-numbers {
    justify-content: flex-start;
  }

  .dashboard-card {
    grid-template-columns: 1fr;
  }

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

  .summary-pills {
    justify-content: flex-start;
  }

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

  .quick-assistant-form {
    grid-template-columns: 1fr;
  }

  .label-controls {
    grid-template-columns: 1fr 90px;
  }

  .label-controls label:first-child {
    grid-column: 1 / -1;
  }
}

@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  html,
  body {
    width: 210mm !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
  }

  #app {
    display: block !important;
    width: 210mm !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sidebar,
  .topbar,
  .view:not(#view-labels),
  #view-labels .panel-title,
  #view-labels .label-controls,
  #view-labels .muted,
  #view-labels .label-queue {
    display: none !important;
  }

  .main,
  #view-labels,
  #view-labels .label-builder-panel {
    display: block !important;
    width: 210mm !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  #labelPrintRoot {
    position: static !important;
    display: block !important;
    width: 210mm !important;
    max-width: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  .fba-label-page {
    width: 210mm !important;
    height: 297mm !important;
    min-width: 210mm !important;
    max-width: 210mm !important;
    min-height: 297mm !important;
    max-height: 297mm !important;
    grid-template-columns: repeat(4, 52.5mm) !important;
    grid-template-rows: repeat(10, 29.7mm) !important;
    margin: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }

  .fba-label-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .fba-label-cell {
    width: 52.5mm !important;
    height: 29.7mm !important;
    min-width: 0 !important;
    min-height: 0 !important;
    outline: none;
  }
}