/* Settings → Devices (public/js/admin/devices.js): phone-first single column, two columns for the printer card on wide screens */
.dev-page { display: grid; gap: 16px; }
.dev-card .card-head { margin-bottom: 10px; }
.dev-printer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.dev-ctl { display: grid; gap: 12px; min-width: 0; }
.dev-switch { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.dev-switch input { width: 22px; height: 22px; accent-color: var(--brand); flex: 0 0 auto; }
.dev-paper-wrap { display: grid; gap: 6px; justify-items: center; background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; max-width: 100%; overflow-x: auto; }
.dev-preview { border: 0; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / .18); min-height: 240px; max-width: none; }
.dev-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--info-soft); color: var(--ink); line-height: 1.5; }
.dev-note .ico { color: var(--info); flex: 0 0 auto; margin-top: 2px; }
.dev-scan-in { font-size: 18px; min-height: 48px; font-variant-numeric: tabular-nums; }
.dev-scan-out { margin-top: 12px; display: grid; gap: 10px; }
.dev-verdict { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); line-height: 1.45; }
.dev-verdict.ok { background: var(--ok-soft); color: var(--ok); }
.dev-verdict.warn { background: var(--warn-soft, #fbefd5); color: var(--warn, #a86a00); }
.dev-verdict.bad { background: var(--danger-soft, #fbe4e1); color: var(--danger); }
.dev-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.dev-kv dt { color: var(--muted); }
.dev-kv dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.dev-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 17px; }
.dev-drop { margin-top: 12px; display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 64px; border: 2px dashed var(--line); border-radius: var(--r-sm); color: var(--muted); }
.dev-drop.over { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.dev-files { margin-top: 12px; display: grid; gap: 8px; }
.dev-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; flex-wrap: wrap; }
.dev-file img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.dev-file .dev-fn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 120px; }
.dev-file.ok b { color: var(--ok); }
.dev-file.bad b { color: var(--danger); }
.dev-file .grow { flex: 1 1 auto; }
@media (max-width: 760px) {
  .dev-printer { grid-template-columns: minmax(0, 1fr); }
  .dev-paper-wrap { justify-self: stretch; }
  .dev-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dev-kv dd { margin-bottom: 8px; }
}