.pc-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); max-width: 640px; }
.pc-mode .segment-btn { border-right: 0; border-bottom: 1px solid var(--border-color); text-align: center; min-height: 44px; }
.pc-fields { max-width: 420px; }
.pc-input { display: flex; align-items: center; gap: var(--sp-2, 8px); }
.pc-input input { flex: 1 1 auto; min-width: 0; margin: 0; }
.pc-unit { flex: 0 0 auto; font-weight: 700; color: #515154; }
.pc-rrow { display: flex; align-items: center; gap: var(--sp-3, 12px); max-width: 420px; }
.pc-r-label { flex: 0 0 auto; font-weight: 700; color: #1d1d1f; }
.pc-r { flex: 1 1 auto; display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px dashed #aeaeb2; border-radius: 8px; color: #515154; font-weight: 700; overflow-wrap: anywhere; }
.pc-r--set { border-style: solid; border-color: #0071e3; color: #1d1d1f; }
body.dark-mode .pc-unit, body.dark-mode .pc-r { color: #c7c7cc; }
body.dark-mode .pc-r-label { color: #e8e8e8; }
body.dark-mode .pc-r { border-color: #636366; }
body.dark-mode .pc-r--set { border-color: #4da3ff; color: #f5f5f7; }
body.dark-mode .pc-mode .segment-btn { border-color: #3a3a3c; }