.pc {
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  max-width: 820px;
  margin: 0 auto;
}
.pc .toolbar { display:flex; gap:.5rem; align-items:center; margin:.75rem 0; flex-wrap:wrap; }
.pc .btn { padding:.45rem .7rem; border:1px solid #ddd; border-radius:.4rem; background:#fff; cursor:pointer; }
.pc .btn.btn-flash { animation: btnFlash 0.45s ease; }
.pc .btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.pc .btn:focus:not(:focus-visible) { outline: none; }
.pc .btn:active { transform: translateY(1px); }
.pc .btn-ghost { background:#f7f7f7; }
.pc .status { margin-left:.5rem; opacity:.8; }
.pc .section { margin:.75rem 0 1rem; }
.pc .grid-2 {
  display:grid;
  grid-template-columns: minmax(10rem, 1.6fr) minmax(0, 1fr);
  gap:.4rem 1.25rem;
  align-items:center;
}
.pc .grid-2 label {
  line-height: 1.4;
}
.pc input[type=number] { width:100%; padding:.35rem .5rem; border:1px solid #ccc; border-radius:.35rem; }
.pc .slider-wrap.slider-narrow {
  width: min(100%, 15rem);
  min-width: 7rem;
}
.pc .table-wrap { overflow:auto; max-width: 820px; margin: 0 auto; }
.pc .table { width:100%; border-collapse:collapse; margin: 0 auto; }
.pc .table th, .pc .table td { padding:.5rem .6rem; border-bottom:1px solid #eee; vertical-align:middle; }
.pc .table td.pct { text-align: center; }
.pc .table th:first-child,
.pc .table td.product-name {
  width: 15%;
  min-width: 4.5rem;
}
.pc .table td.product-name {
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.pc .num { text-align:right; white-space:nowrap; }
.pc .pct input { width:100%; max-width:12rem; }
.pc tfoot .total-label { font-weight:600; }
.pc .slider-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  margin: 0 auto;
}
.pc .slider-wrap input[type=range] {
  flex: 1;
  width: 100%;
  margin: 0 auto;
}
.pc .slider-qty {
  font-size: 0.75rem;
  text-align: center;
  color: rgba(55,65,81,0.8);
}
.pc .table tfoot td {
  text-align: center;
  border-bottom: none;
  padding: 1.1rem .6rem;
  background: linear-gradient(90deg, rgba(59,130,246,0.08), rgba(14,165,233,0.08));
}
.pc .table .total-label {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(17,24,39,0.65);
  margin-bottom: 0.4rem;
}
.pc [data-role="grandTotal"] {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  color: #0f172a;
}

@keyframes btnFlash {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.32); }
  60% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}