/* CVM Scanner v2: interactive prototype. The app is drawn at 402×874 (the Figma frame) and scaled to fit. */

.cvp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 48px;
  padding: 48px;
  background: var(--panel);
  border-radius: var(--radius-md);
}

.cvp-phone {
  position: relative;
  width: 340px;
  aspect-ratio: 402 / 874;
  border: 8px solid #12171d;
  border-radius: 44px;
  overflow: hidden;
  background: #002037;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 24px 56px rgba(0, 32, 55, .28);
}

/* Side panel with scenario switcher and hints (portfolio UI, not part of the app) */
.cvp-side { min-width: 0; }
.cvp-k { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.cvp-k + .cvp-scen { margin-bottom: 12px; }
.cvp-scen { display: flex; flex-wrap: wrap; gap: 8px; }
.cvp-scen button, .cvp-restart {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font: 500 14px/1 Inter, sans-serif;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.cvp-scen button:hover, .cvp-restart:hover { border-color: var(--accent); color: var(--accent); }
.cvp-scen button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.cvp-scen button:focus-visible, .cvp-restart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cvp-restart { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; }
.cvp-try { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 10px; }
.cvp-try li { position: relative; padding-left: 28px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.cvp-try li::before { content: counter(list-item); position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #eaf4fc; color: var(--accent); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.cvp-note { margin: 0; font-size: 14px; color: var(--text-2); }

/* ---------- App ---------- */
.cvp-app {
  --bg: #002037;
  --s1: #0c2741;
  --s2: #11314f;
  --ln: #00385e;
  --ac: #2ba7ff;
  --t1: #ffffff;
  --t2: #b3c6d9;  /* labels: 8.4:1 on --s1, was a low-contrast grey */
  --good: #4ade80;
  --fair: #facc15;
  --weak: #f87171;

  position: absolute;
  top: 0;
  left: 0;
  width: 402px;
  height: 874px;
  transform-origin: 0 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(#0e2a44, #021627);
  color: var(--t1);
  font: 400 16px/24px Inter, system-ui, sans-serif;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.cvp-app *, .cvp-app *::before, .cvp-app *::after { box-sizing: border-box; }
.cvp-app :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.cvp-app :where(h1, h2, h3, p, dl, dd, ul) { margin: 0; padding: 0; }
.cvp-app svg { display: block; flex: none; }
.cvp-app button:focus-visible, .cvp-app input:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.cvp-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.cvp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cvp-status { height: 62px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 32px 0 52px; font-size: 17px; font-weight: 600; }
.cvp-status span:last-child { display: flex; gap: 6px; align-items: center; }

.cvp-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 24px; }

/* Header as in the Figma screens: logout and settings squares, then the scan pill */
.cvp-top { display: flex; align-items: center; gap: 8px; padding-top: 14px; }
.cvp-top-set { gap: 16px; padding-bottom: 32px; }
.cvp-top-set h1 { font-size: 24px; line-height: 32px; font-weight: 600; }
.cvp-sq { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid #1d4366; border-radius: 8px; background: var(--s1); }
.cvp-sq::before { content: ""; position: absolute; inset: -4px; }
.cvp-sq:hover { border-color: var(--ac); }

/* Scan pill: a full blue button when idle, a glowing bar with a stop (×) while scanning */
.cvp-scanbar { flex: 1; min-width: 0; height: 48px; margin-left: 8px; display: flex; align-items: center; gap: 8px; border-radius: 10px; }
.cvp-scanbar.is-on { padding: 0 4px 0 14px; border: 1px solid var(--ac); background: rgba(43, 167, 255, .08); animation: cvp-glow 1.8s ease-in-out infinite; }
.cvp-scanbar .txt { flex: 1; min-width: 0; color: var(--ac); font-size: 16px; font-weight: 500; white-space: nowrap; }
/* Scan icon (same target as the Figma screens): the beam turns clockwise and a ring pings out while scanning */
.cvp-mini-radar { position: relative; width: 26px; height: 26px; flex: none; color: var(--t2); display: grid; place-items: center; }
.cvp-mini-radar svg { position: relative; }
.is-on .cvp-mini-radar { color: var(--ac); }
.is-on .cvp-mini-radar::before { content: ""; position: absolute; inset: 2px; border: 2px solid var(--ac); border-radius: 50%; opacity: 0; animation: cvp-ping 1.6s ease-out infinite; }
.is-on .cvp-beam { transform-origin: 12px 12px; animation: cvp-sweep 2.4s linear infinite; }

.cvp-start, .cvp-primary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--ac);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.cvp-start:hover, .cvp-primary:hover { background: #4ab4ff; }
.cvp-start { width: 100%; height: 48px; }
.cvp-start:disabled { opacity: .5; cursor: default; background: var(--ac); }
.cvp-primary { width: 100%; }
.cvp-stop { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--t1); }
.cvp-stop::before { content: ""; position: absolute; inset: -4px; }
.cvp-stop:hover { background: rgba(255, 255, 255, .1); }

/* Search + filter */
.cvp-tools { display: flex; gap: 8px; margin-top: 16px; }
.cvp-tools[hidden] { display: none; }
.cvp-search { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #1d4366; border-radius: 8px; background: var(--s1); color: var(--t2); }
.cvp-search:focus-within { border-color: var(--ac); }
.cvp-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--t1); font: inherit; font-size: 16px; outline: none; }
.cvp-search input::placeholder { color: var(--t2); }
.cvp-search input::-webkit-search-cancel-button { display: none; }
.cvp-sortbtn i { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); }
.cvp-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--t2); }
.cvp-meta[hidden] { display: none; }

.cvp-banner { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(248, 113, 113, .14); color: #fecaca; font-size: 14px; line-height: 20px; font-weight: 600; text-align: left; }
.cvp-banner[hidden] { display: none; }
.cvp-banner span { flex: 1; }

/* List */
.cvp-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; margin: 16px -24px 0; padding: 0 24px 24px; scrollbar-width: none; }
.cvp-list::-webkit-scrollbar { display: none; }

/* Card as in the Figma list: name + edit on top, signal on the left, readings on the right */
.cvp-card { flex: none; border: 1px solid #1d4366; border-radius: 12px; background: var(--s1); animation: cvp-in .35s ease both; transition: border-color .3s, opacity .3s; }
.cvp-card-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 12px 16px; border-bottom: 1px solid #1d4366; }
.cvp-card-head > div { flex: 1; min-width: 0; }
.cvp-card h3 { font-size: 22px; line-height: 28px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvp-card h3.unnamed { color: var(--t2); font-style: italic; }
.cvp-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px !important; }
.cvp-id { font-size: 13px; line-height: 18px; color: var(--t2); }
.cvp-edit { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--t1); }
.cvp-edit:hover { background: var(--s2); }

.cvp-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cvp-chip svg { width: 14px; height: 14px; }
.cvp-chip.charging { background: rgba(43, 167, 255, .16); color: #8fd0ff; }
.cvp-chip.full { background: rgba(74, 222, 128, .14); color: #86efac; }
.cvp-chip.unplugged { background: rgba(250, 204, 21, .14); color: #fde68a; }
.cvp-chip.lost { background: rgba(248, 113, 113, .16); color: #fecaca; }

.cvp-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px 14px; }
.cvp-sigcol p { line-height: 31px; white-space: nowrap; }
.cvp-sig { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.cvp-sig.good { color: var(--good); }
.cvp-sig.fair { color: var(--fair); }
.cvp-sig.weak { color: var(--weak); }
[data-f="dbm"] { font-size: 16px; color: var(--t1); }
.cvp-seen { font-size: 13px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; }

.cvp-read > div { height: 31px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cvp-read dt { color: var(--t2); }
.cvp-read dd { min-width: 72px; font-size: 16px; text-align: right; }

.cvp-card.is-lost { border-color: rgba(248, 113, 113, .6); }
.cvp-card.is-lost .cvp-read, .cvp-card.is-lost .cvp-sig { opacity: .45; }
.cvp-card.is-lost .cvp-seen { color: #fecaca; }
.is-stopped .cvp-read dd { color: var(--t2); }
.cvp-card.flash dd { animation: cvp-flash .6s ease; }

/* Centred states: idle, searching, empty, permission */
.cvp-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 8px 40px; text-align: center; }
.cvp-state h2 { font-size: 22px; line-height: 28px; font-weight: 600; }
.cvp-state p { color: var(--t2); }
.cvp-state .cvp-primary { margin-top: 8px; }
.cvp-state-ic { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: var(--s1); border: 1px solid var(--ln); color: var(--ac); }
.cvp-state-ic.warn { color: var(--fair); }
.cvp-tips { width: 100%; list-style: none; display: grid; gap: 8px; margin-top: 4px !important; text-align: left; }
.cvp-tips li { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--s1); font-size: 14px; line-height: 20px; color: var(--t2); }
.cvp-tips svg { color: var(--ac); margin-top: 1px; }
.cvp-link { min-height: 48px; padding: 0 12px; color: var(--ac); font-weight: 600; }

/* Big radar: the scan icon at full size, drawn like the Figma empty state */
.cvp-big-radar { position: relative; width: 200px; height: 200px; color: var(--ac); }
.cvp-big-radar.off { opacity: .55; }
.cvp-big-radar span { position: absolute; inset: 0; border-radius: 50%; }
.cvp-big-radar svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.cvp-big-radar .dot { fill: currentColor; stroke: none; }
.is-on .cvp-big-radar svg { filter: drop-shadow(0 0 8px rgba(43, 167, 255, .7)); }
.is-on .cvp-big-radar .cvp-beam { transform-origin: 100px 100px; }
/* Sweep: a trail behind the beam, turning clockwise with it */
.is-on .cvp-big-radar .sweep { inset: 2%; background: conic-gradient(from 180deg, transparent, rgba(43, 167, 255, .4) 90deg, transparent 90deg); -webkit-mask: radial-gradient(circle closest-side, transparent 21%, #000 22%); mask: radial-gradient(circle closest-side, transparent 21%, #000 22%); animation: cvp-sweep 2.4s linear infinite; }
.is-on .cvp-big-radar .pulse { border: 2px solid var(--ac); opacity: 0; animation: cvp-pulse 2.4s ease-out infinite; }
.is-on .cvp-big-radar .pulse:nth-child(2) { animation-delay: .8s; }
.is-on .cvp-big-radar .pulse:nth-child(3) { animation-delay: 1.6s; }

/* Settings, as in the Figma screen: auto-scan switch and the Min. RSSI slider */
.cvp-set { padding: 16px; border: 1px solid #1d4366; border-radius: 12px; background: var(--s1); }
.cvp-set + .cvp-set { margin-top: 16px; }
.cvp-set-row { display: flex; align-items: center; gap: 16px; }
.cvp-set-row > div { flex: 1; }
.cvp-set strong { display: block; font-size: 16px; font-weight: 600; }
.cvp-set small { display: block; margin-top: 2px; font-size: 16px; line-height: 24px; color: var(--t2); }
.cvp-switch { position: relative; width: 64px; height: 32px; flex: none; border-radius: 999px; background: #3a5570; transition: background .2s; }
.cvp-switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #d9d9d9; transition: transform .2s; }
.cvp-switch[aria-checked="true"] { background: var(--ac); }
.cvp-switch[aria-checked="true"]::after { transform: translateX(32px); }
.cvp-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 12px 0 0; background: linear-gradient(to right, var(--ac) calc(var(--p) * 100%), #3a5570 0) center / 100% 4px no-repeat; cursor: pointer; }
.cvp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #d9d9d9; border: 0; }
.cvp-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #d9d9d9; border: 0; }
.cvp-range::-moz-range-track { background: transparent; }
.cvp-range-out { position: relative; display: block; width: max-content; left: calc(var(--p) * (100% - 18px) + 9px); transform: translateX(-50%); font-size: 14px; line-height: 20px; color: var(--t1); }

/* Overlays: sort sheet and rename dialog */
.cvp-overlay { position: absolute; inset: 0; z-index: 5; display: flex; background: rgba(0, 10, 20, .6); animation: cvp-fade .2s ease both; }
.cvp-sheet { align-self: flex-end; width: 100%; padding: 12px 24px 28px; border-radius: 24px 24px 0 0; background: var(--s1); border-top: 1px solid #1d4366; animation: cvp-up .25s ease both; }
.cvp-sheet::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 16px; border-radius: 2px; background: #1d4366; }
.cvp-sheet h2 { font-size: 20px; line-height: 28px; font-weight: 600; }
.cvp-sheet h3 { margin: 20px 0 8px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t2); }
.cvp-opt { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 4px; text-align: left; }
.cvp-opt .dot { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--t2); display: grid; place-items: center; }
.cvp-opt[aria-checked="true"] .dot { border-color: var(--ac); }
.cvp-opt[aria-checked="true"] .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ac); }
.cvp-opt small { margin-left: auto; font-size: 13px; color: var(--t2); }
.cvp-fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.cvp-fchip { min-height: 40px; padding: 0 14px; border: 1px solid #1d4366; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--t2); }
.cvp-fchip[aria-pressed="true"] { border-color: var(--ac); background: rgba(43, 167, 255, .16); color: #fff; }
.cvp-sheet .cvp-primary { margin-top: 24px; }

/* Rename dialog, as in the Figma screen: name field, delete, cancel (×) and save (✓) */
.cvp-dialog { align-self: center; width: calc(100% - 48px); margin: 0 auto; padding: 24px 16px 16px; border-radius: 12px; background: var(--s1); border: 1px solid #1d4366; animation: cvp-pop .2s ease both; }
.cvp-dialog-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #1d4366; }
.cvp-dialog-head label { font-size: 16px; font-weight: 600; color: var(--t1); }
.cvp-del { width: 48px; height: 48px; margin: -12px -8px -12px 0; display: grid; place-items: center; border-radius: 10px; color: var(--weak); }
.cvp-del:hover { background: rgba(248, 113, 113, .12); }
.cvp-dialog input { width: 100%; height: 56px; margin-top: 24px; padding: 0 14px; border: 1px solid #fff; border-radius: 10px; background: transparent; color: #fff; font: inherit; outline: none; }
.cvp-dialog input:focus { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac); }
#cvp-rn-id { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--t2); }
.cvp-dialog-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 16px; }
.cvp-round { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 1.5px solid #fff; border-radius: 50%; }
.cvp-round::before { content: ""; position: absolute; inset: -5px; }
.cvp-round:hover { background: rgba(255, 255, 255, .1); }
.cvp-round.is-ok { background: #fff; color: #002037; }
.cvp-round.is-ok:hover { background: #d9ecff; }

/* Toast */
.cvp-toast { position: absolute; left: 20px; right: 20px; bottom: 24px; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #e6f1fb; color: #002037; font-size: 14px; line-height: 20px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); animation: cvp-up .25s ease both; }

@keyframes cvp-sweep { to { transform: rotate(360deg); } }
@keyframes cvp-pulse { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes cvp-ping { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes cvp-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(43, 167, 255, 0); } 50% { box-shadow: 0 0 16px 1px rgba(43, 167, 255, .45); } }
@keyframes cvp-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes cvp-fade { from { opacity: 0; } }
@keyframes cvp-up { from { transform: translateY(24px); opacity: 0; } }
@keyframes cvp-pop { from { transform: scale(.96); opacity: 0; } }
@keyframes cvp-flash { 0% { color: var(--ac); } 100% { color: inherit; } }

@media (prefers-reduced-motion: reduce) {
  .cvp-app *, .cvp-app *::before, .cvp-app *::after { animation: none !important; transition: none !important; }
  .cvp-big-radar .sweep { display: none; }
}

@media (max-width: 900px) {
  .cvp { grid-template-columns: 1fr; justify-items: center; gap: 32px; padding: 32px 16px; }
  .cvp-side { width: 100%; max-width: 420px; }
}
@media (max-width: 400px) {
  .cvp-phone { width: 100%; max-width: 320px; border-width: 6px; border-radius: 36px; }
}