/* Khung khoá máy qua cáp USB (khoa-may-usb/main.js → mountUsbTool). Dùng ở hướng dẫn cài đặt (style.css)
   và trang /khoa-may-usb (trang-chu.css): chỉ dựa vào biến màu chung của hai trang. */
.usb-stages { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.usb-stages li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--muted); }
.usb-stages li::before {
  content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line); font-size: 14px; font-weight: 800; color: #fff; line-height: 1; box-sizing: border-box;
}
.usb-stages li[data-state="doing"] { color: var(--text); }
.usb-stages li[data-state="doing"]::before { border-color: var(--brand); border-top-color: transparent; animation: usb-spin .9s linear infinite; }
.usb-stages li[data-state="done"] { color: var(--text); }
.usb-stages li[data-state="done"]::before { content: "✓"; background: var(--ok); border-color: var(--ok); }
.usb-stages li[data-state="bad"] { color: var(--brand-ink, var(--danger)); }
.usb-stages li[data-state="bad"]::before { content: "!"; background: var(--brand-ink, var(--danger)); border-color: var(--brand-ink, var(--danger)); }
@keyframes usb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .usb-stages li[data-state="doing"]::before { animation: none; border-top-color: var(--brand); } }
.usb-device { margin: 14px 0 0; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 12px; background: var(--bg2); }
.usb-status { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--bg2); font-size: 15px; min-height: 48px; line-height: 1.5; }
.usb-status[data-tone="ok"] { background: color-mix(in srgb, var(--ok) 16%, var(--card)); }
.usb-status[data-tone="bad"] { background: var(--brand-soft); }
.usb-status[data-tone="wait"] { background: color-mix(in srgb, #ffc94d 26%, var(--card)); font-weight: 600; }
.usb-progress { margin-top: 12px; }
.usb-track { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.usb-bar { height: 100%; width: 0; background: var(--brand); transition: width .2s; }
.usb-plabel { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.usb-problem { margin-top: 14px; display: grid; gap: 14px; }
.usb-problem .part { padding: 14px; border-radius: 14px; border: 2px solid var(--brand-soft); }
.usb-problem h3 { font-size: 16px; margin: 0; }
.usb-problem .help { margin: 0; font-weight: 600; }
.usb-problem ul.found { margin: 8px 0 0; padding-left: 20px; font-weight: 600; overflow-wrap: anywhere; }
.usb-problem ol { margin: 8px 0 0; padding-left: 20px; color: var(--muted); display: grid; gap: 6px; font-size: 15px; }
.usb-problem details { font-size: 13px; color: var(--muted); }
.usb-problem pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: var(--bg2); padding: 10px; border-radius: 10px; margin: 6px 0 0; max-height: 200px; overflow: auto; }
.usb-actions { display: grid; gap: 10px; margin-top: 16px; }
.usb-actions .btn { width: 100%; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.usb-actions .btn.secondary, .usb-actions .btn.soft { border: 0; }
.usb-actions .btn:disabled { opacity: .55; cursor: progress; transform: none; pointer-events: none; }
.usb-done { margin-top: 16px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--ok) 12%, var(--card)); }
.usb-done ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.usb-unsupported { padding: 14px; border-radius: 14px; background: var(--brand-soft); }
.usb-unsupported p { margin: 8px 0 0; }
.usb-fine { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
[data-usb-tool] [hidden], .usb-tool [hidden] { display: none !important; }