/* keyfob-rs - terminal aesthetic */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #0a0a0a;
  color: #c4c4c4;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(74, 222, 128, 0.15);
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: env(safe-area-inset-top);
}

::selection { background: #4ade80; color: #0a0a0a; }

input, textarea, select {
  font-family: inherit;
  font-size: 13px;
  background: #0a0a0a;
  color: #c4c4c4;
  border: 1px solid #2a2a2a;
  padding: 7px 9px;
  outline: none;
  border-radius: 0;
}

input:focus, textarea:focus, select:focus {
  border-color: #4ade80;
}

button {
  font-family: inherit;
  font-size: 13px;
  background: #0a0a0a;
  color: #c4c4c4;
  border: 1px solid #2a2a2a;
  padding: 8px 13px;
  cursor: pointer;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

button:active { background: #161616; }
button.primary { border-color: #4ade80; color: #4ade80; }
button.primary:active { background: #102015; }
button.danger { border-color: #ef4444; color: #ef4444; }
button.warn { border-color: #fbbf24; color: #fbbf24; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

a { color: #4ade80; text-decoration: none; }
a:active { color: #fbbf24; }

/* ─── Layout ─────────────────────────────────────────── */

#app {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.view {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.view.active { display: flex; }

.view-header {
  padding: 14px 12px 11px 12px;
  border-bottom: 1px solid #2a2a2a;
}

.view-header h1 {
  margin: 0;
  font-size: 14px;
  color: #4ade80;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.view-header .subtitle {
  font-size: 11px;
  color: #6a6a6a;
  margin-top: 3px;
}

.view-body {
  padding: 13px 12px;
  flex: 1;
}

.section {
  margin-bottom: 18px;
}

.section-title {
  color: #6a6a6a;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 8px 0;
}

/* ─── Footer / Nav ───────────────────────────────────── */

#footer {
  border-top: 1px solid #2a2a2a;
  background: #0a0a0a;
  padding: 0;
}

#bottom-nav {
  display: flex;
  border-bottom: 1px solid #2a2a2a;
}

#bottom-nav button {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid #2a2a2a;
  color: #6a6a6a;
  padding: 11px 6px 12px;
  font-size: 12px;
  letter-spacing: 1px;
}

#bottom-nav button:last-child { border-right: none; }

#bottom-nav button.active {
  color: #4ade80;
  background: #0e1a12;
  border-top: 1px solid #4ade80;
  margin-top: -1px;
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  padding: 5px 11px 6px;
  font-size: 10px;
  color: #5a5a5a;
}

.footer-meta #version {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ─── Splash ─────────────────────────────────────────── */

#splash {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 22px;
  overflow: hidden;
}

#splash pre.logo {
  color: #4ade80;
  margin: 0 0 20px 0;
  font-size: 11px;
  line-height: 1.15;
  white-space: pre;
}

#splash .boot-log {
  font-size: 12px;
  color: #c4c4c4;
  white-space: pre-wrap;
  word-break: break-all;
}

#splash .boot-log .ok { color: #4ade80; }
#splash .boot-log .warn { color: #fbbf24; }

.cursor::after {
  content: "_";
  color: #4ade80;
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

/* ─── Permission banner ──────────────────────────────── */

#perm-banner {
  background: #2a1a05;
  border-bottom: 1px solid #fbbf24;
  color: #fbbf24;
  padding: 8px 12px;
  font-size: 11px;
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

#perm-banner.show { display: flex; }

#perm-banner .dismiss {
  background: transparent;
  border: 1px solid #fbbf24;
  color: #fbbf24;
  padding: 3px 8px;
  font-size: 10px;
}

/* ─── Scan view ──────────────────────────────────────── */

.scan-controls {
  margin-bottom: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.scan-controls button {
  flex: 1;
}

.scan-progress {
  border: 1px solid #2a2a2a;
  padding: 11px;
  margin-bottom: 13px;
  white-space: pre;
  font-size: 12px;
  color: #c4c4c4;
  min-height: 80px;
}

.scan-progress .spin { color: #4ade80; }
.scan-progress .freq { color: #fbbf24; }

.car-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.car-row {
  border: 1px solid #2a2a2a;
  padding: 10px 11px 11px 11px;
  cursor: pointer;
}

.car-row:active { background: #141414; }

.car-row .car-line1 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.car-row .car-name {
  color: #c4c4c4;
  font-size: 13px;
}

.car-row .car-rssi {
  color: #6a6a6a;
  font-size: 11px;
}

.car-row .car-line2 {
  display: flex;
  gap: 9px;
  margin-top: 5px;
  align-items: center;
  font-size: 11px;
  color: #8a8a8a;
}

.plate {
  display: inline-block;
  border: 1px solid #2a2a2a;
  padding: 1px 5px;
  font-size: 11px;
  color: #c4c4c4;
  background: #141414;
  letter-spacing: 0.5px;
}

.alarm-tag {
  color: #8a8a8a;
}

.badge {
  font-size: 9px;
  padding: 1px 5px;
  border: 1px solid;
  letter-spacing: 0.8px;
  margin-left: auto;
}

.badge.vulnerable { color: #4ade80; border-color: #4ade80; }
.badge.uncertain { color: #fbbf24; border-color: #fbbf24; }
.badge.secured { color: #ef4444; border-color: #ef4444; }

.empty-state {
  text-align: center;
  color: #5a5a5a;
  font-size: 12px;
  padding: 28px 12px;
}

/* ─── Detail / Exploit view ──────────────────────────── */

#detail-view, #exploit-view {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  z-index: 100;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: env(safe-area-inset-top);
}

#detail-view.show, #exploit-view.show { display: flex; }

.detail-header, .exploit-header {
  padding: 12px;
  border-bottom: 1px solid #2a2a2a;
  display: flex;
  align-items: center;
  gap: 10px;
}

.back-btn {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #c4c4c4;
  padding: 5px 9px;
  font-size: 12px;
}

.detail-header h2 {
  margin: 0;
  font-size: 13px;
  color: #4ade80;
  font-weight: 600;
  letter-spacing: 1px;
}

.detail-body {
  padding: 14px 12px;
}

.detail-meta {
  border: 1px solid #2a2a2a;
  padding: 11px 12px 13px;
  margin-bottom: 14px;
  font-size: 12px;
}

.detail-meta .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}

.detail-meta .row .k { color: #6a6a6a; text-transform: lowercase; }
.detail-meta .row .v { color: #c4c4c4; text-align: right; word-break: break-all; }

.cve-block {
  margin-bottom: 14px;
  border: 1px solid #2a2a2a;
  padding: 11px 12px;
  background: #0e0e0e;
}

.cve-block .label {
  color: #6a6a6a;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.cve-block .cves {
  color: #fbbf24;
  font-size: 12px;
  white-space: pre-wrap;
}

.attempt-btn {
  width: 100%;
  padding: 14px 12px;
  font-size: 13px;
}

/* ─── Unlocked / dossier view ────────────────────────── */

#unlocked-view {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  z-index: 110;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: env(safe-area-inset-top);
}

#unlocked-view.show { display: flex; }
#unlocked-view .detail-header h2 { color: #4ade80; }

.unlock-banner {
  border: 1px solid #4ade80;
  color: #4ade80;
  padding: 13px 12px;
  text-align: center;
  letter-spacing: 2px;
  font-size: 14px;
  margin-bottom: 14px;
}

/* keep Cyrillic / VIN labels verbatim on the dossier card */
.detail-meta.unlock .row .k { text-transform: none; color: #6a6a6a; }
.detail-meta.unlock .row .v { color: #4ade80; }

.unlock-section-title {
  color: #6a6a6a;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 16px 0 7px;
}

.hex-dump {
  white-space: pre;
  font-size: 10px;
  line-height: 1.45;
  color: #6a6a6a;
  border: 1px solid #2a2a2a;
  padding: 9px 10px;
  margin: 0 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.unlock-foot-note {
  color: #3a3a3a;
  font-size: 10px;
  text-align: center;
  margin: 16px 0 8px;
}

.start-engine-btn {
  width: 100%;
  padding: 15px 12px;
  font-size: 14px;
  margin-top: 4px;
}

.engine-status {
  border: 1px solid #2a2a2a;
  padding: 11px 12px;
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: #c4c4c4;
}

.engine-status.running { border-color: #4ade80; }

/* ─── Prank reveal ───────────────────────────────────── */

#prank-view {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  z-index: 500;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  overflow-y: auto;
}

#prank-view.show { display: flex; }

.prank-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

#prank-view img {
  max-width: 88%;
  max-height: 56vh;
  border: 1px solid #2a2a2a;
}

.prank-text {
  color: #4ade80;
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  margin: 20px 6px 22px;
}

#prank-close { padding: 12px 22px; }

/* ─── Exploit terminal ───────────────────────────────── */

#exploit-view {
  background: #050505;
}

#exploit-view.flash-red {
  background: #2a0000;
  transition: background 0.1s;
}

.exploit-header h2 { color: #ef4444; }

.exploit-log {
  flex: 1;
  padding: 12px 11px 14px;
  font-size: 11.5px;
  color: #c4c4c4;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
  font-family: inherit;
  line-height: 1.55;
}

.exploit-log .info { color: #c4c4c4; }
.exploit-log .ok { color: #4ade80; }
.exploit-log .warn { color: #fbbf24; }
.exploit-log .err { color: #ef4444; }
.exploit-log .fatal { color: #ef4444; font-weight: bold; }
.exploit-log .dim { color: #6a6a6a; }

.exploit-progress {
  padding: 10px 12px 13px;
  border-top: 1px solid #2a2a2a;
  font-size: 12px;
  color: #c4c4c4;
  background: #0a0a0a;
}

.exploit-progress .bar {
  font-family: inherit;
  white-space: pre;
  letter-spacing: 0;
  color: #4ade80;
}

.exploit-progress .pct {
  color: #c4c4c4;
  margin-left: 8px;
}

/* ─── BT tab ─────────────────────────────────────────── */

.bt-controls {
  margin-bottom: 13px;
}

.bt-status {
  border: 1px solid #2a2a2a;
  padding: 10px 11px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #8a8a8a;
}

.bt-status.error { color: #ef4444; border-color: #ef4444; }
.bt-status.warn { color: #fbbf24; border-color: #fbbf24; }

.bt-device {
  border: 1px solid #2a2a2a;
  padding: 9px 11px;
  margin-bottom: 6px;
  font-size: 12px;
}

.bt-device .dn { color: #c4c4c4; }
.bt-device .di { color: #6a6a6a; font-size: 10px; margin-top: 3px; word-break: break-all; }
.bt-device .dr { color: #fbbf24; font-size: 11px; margin-top: 3px; }

/* ─── Tools tab ──────────────────────────────────────── */

.tool-row {
  border: 1px solid #2a2a2a;
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  opacity: 0.85;
}

.tool-row.locked {
  cursor: not-allowed;
  opacity: 0.55;
}

.tool-row:active:not(.locked) {
  background: #141414;
}

.tool-row .tool-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #c4c4c4;
}

.tool-row .lock {
  color: #6a6a6a;
  font-size: 13px;
  font-family: inherit;
}

.tool-row .tool-status {
  font-size: 9.5px;
  letter-spacing: 0.6px;
  color: #6a6a6a;
  text-transform: uppercase;
}

.tool-row .tool-status.beta { color: #fbbf24; }
.tool-row .tool-status.exp { color: #ef4444; }

/* ─── Settings tab ───────────────────────────────────── */

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid #2a2a2a;
  margin-bottom: 6px;
  font-size: 12px;
  gap: 12px;
}

.setting-row .label {
  color: #c4c4c4;
}

.setting-row .label .desc {
  display: block;
  font-size: 10px;
  color: #5a5a5a;
  margin-top: 2px;
}

.setting-row select, .setting-row input[type="range"] {
  flex: 0 0 auto;
  max-width: 50%;
}

.setting-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #2a2a2a;
  width: 130px;
  padding: 0;
  border: none;
}

.setting-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  width: 14px;
  background: #4ade80;
  border-radius: 0;
  border: 1px solid #4ade80;
  cursor: pointer;
}

.toggle {
  width: 36px;
  height: 18px;
  border: 1px solid #2a2a2a;
  background: #0a0a0a;
  position: relative;
  cursor: pointer;
  border-radius: 0;
}

.toggle.on { border-color: #4ade80; }

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #6a6a6a;
  transition: left 0.1s, background 0.1s;
}

.toggle.on::after {
  background: #4ade80;
  left: 19px;
}

.about-block {
  border: 1px solid #2a2a2a;
  padding: 12px 13px 14px;
  font-size: 11px;
  color: #8a8a8a;
}

.about-block .ascii {
  white-space: pre;
  color: #4ade80;
  font-size: 10px;
  margin-bottom: 9px;
  line-height: 1.1;
}

.about-block .row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

.about-block .row .k { color: #5a5a5a; }
.about-block .row .v { color: #c4c4c4; }

/* ─── History list ───────────────────────────────────── */

.history-row {
  border: 1px solid #2a2a2a;
  padding: 9px 11px;
  margin-bottom: 5px;
  font-size: 11px;
  color: #8a8a8a;
}

.history-row .hr-top {
  display: flex;
  justify-content: space-between;
  color: #c4c4c4;
  font-size: 12px;
}

.history-row .hr-bot {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  color: #6a6a6a;
  font-size: 10px;
}

/* ─── Modals ─────────────────────────────────────────── */

.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 200;
  padding: 16px;
}

.modal-bg.show { display: flex; }

.modal {
  background: #0a0a0a;
  border: 1px solid #4ade80;
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 10px 12px;
  border-bottom: 1px solid #2a2a2a;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 12px;
  color: #4ade80;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.modal-header .close {
  background: transparent;
  border: none;
  color: #8a8a8a;
  font-size: 16px;
  padding: 0 6px;
  cursor: pointer;
}

.modal-body {
  padding: 13px 12px;
  font-size: 12px;
  color: #c4c4c4;
}

.modal-body p { margin: 6px 0; }

.modal-body .field {
  margin-bottom: 9px;
}

.modal-body .field label {
  display: block;
  font-size: 10px;
  color: #6a6a6a;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 3px;
}

.modal-body .field input,
.modal-body .field select,
.modal-body .field textarea {
  width: 100%;
}

.modal-body .field textarea { min-height: 56px; resize: vertical; }

.modal-actions {
  padding: 10px 12px 12px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid #2a2a2a;
}

/* ─── Admin ──────────────────────────────────────────── */

.admin-tabs {
  display: flex;
  border-bottom: 1px solid #2a2a2a;
}

.admin-tabs button {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid #2a2a2a;
  color: #6a6a6a;
  padding: 8px 4px;
  font-size: 10.5px;
  letter-spacing: 1px;
}

.admin-tabs button:last-child { border-right: none; }
.admin-tabs button.active { color: #4ade80; border-bottom: 1px solid #4ade80; }

.admin-pane { display: none; padding: 11px 12px; }
.admin-pane.active { display: block; }

.admin-veh {
  border: 1px solid #2a2a2a;
  padding: 9px 11px;
  margin-bottom: 5px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}

.admin-veh.dragging { opacity: 0.5; }

.admin-veh .drag {
  color: #5a5a5a;
  cursor: grab;
  font-size: 14px;
  user-select: none;
}

.admin-veh .veh-info {
  flex: 1;
  min-width: 0;
}

.admin-veh .veh-name {
  color: #c4c4c4;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-veh .veh-sub {
  color: #6a6a6a;
  font-size: 10px;
  margin-top: 2px;
}

.admin-veh .veh-actions {
  display: flex;
  gap: 5px;
}

.admin-veh button {
  padding: 4px 7px;
  font-size: 10px;
}

/* ─── Toasts ─────────────────────────────────────────── */

#toast-container {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  padding-top: 8px;
}

.toast {
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  color: #c4c4c4;
  padding: 8px 13px;
  font-size: 11px;
  margin-bottom: 5px;
  max-width: 88%;
  pointer-events: auto;
}

.toast.ok { border-color: #4ade80; color: #4ade80; }
.toast.warn { border-color: #fbbf24; color: #fbbf24; }
.toast.err { border-color: #ef4444; color: #ef4444; }

/* ─── Admin manual override overlay ──────────────────── */

#manual-override {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #0a0a0a;
  border-bottom: 1px solid #4ade80;
  display: none;
  z-index: 400;
  padding: 8px 10px;
  justify-content: space-around;
  gap: 5px;
}

#manual-override.show { display: flex; }

#manual-override button {
  flex: 1;
  font-size: 10px;
  padding: 6px 4px;
  letter-spacing: 0.5px;
}

/* ─── Misc utility ───────────────────────────────────── */

.muted { color: #6a6a6a; }
.green { color: #4ade80; }
.amber { color: #fbbf24; }
.red { color: #ef4444; }
.right { text-align: right; }
.spacer { height: 12px; }

.box-ascii {
  white-space: pre;
  color: #6a6a6a;
  font-size: 11px;
  line-height: 1.2;
  margin: 0 0 8px 0;
}

hr.dash {
  border: none;
  border-top: 1px dashed #2a2a2a;
  margin: 10px 0;
}