/* DeepGuard — component layer */

.card {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.dark .card {
  background: #0b101c;
  border-color: rgb(255 255 255 / 0.08);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

/* ----- buttons ----- */
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 0.6rem;
  transition: all 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, #22d3ee, #0284c7);
  color: #fff;
  box-shadow: 0 2px 10px rgb(6 182 212 / 0.3);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.btn-ghost {
  background: rgb(241 245 249);
  color: rgb(51 65 85);
}
.dark .btn-ghost { background: rgb(255 255 255 / 0.06); color: rgb(203 213 225); }
.btn-ghost:hover:not(:disabled) { background: rgb(226 232 240); }
.dark .btn-ghost:hover:not(:disabled) { background: rgb(255 255 255 / 0.12); }
.btn-primary:disabled,
.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }

/* ----- tabs ----- */
.tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 0.5rem;
  border-radius: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(100 116 139);
  transition: all 0.18s ease;
  cursor: pointer;
}
.tab-btn span { display: none; }
@media (min-width: 540px) { .tab-btn span { display: inline; } }
.tab-btn:hover { color: rgb(15 23 42); background: rgb(241 245 249); }
.dark .tab-btn:hover { color: #fff; background: rgb(255 255 255 / 0.05); }
.tab-active,
.tab-active:hover {
  background: linear-gradient(135deg, #22d3ee, #0284c7) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgb(6 182 212 / 0.35);
}

/* ----- misc ----- */
.section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(100 116 139);
}
.dark .section-label { color: rgb(148 163 184); }

.progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgb(226 232 240);
  overflow: hidden;
}
.dark .progress-track { background: rgb(255 255 255 / 0.1); }
.progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #0284c7);
  transition: width 0.2s ease;
}

.hist-filter {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  color: rgb(100 116 139);
  cursor: pointer;
  transition: all 0.15s;
}
.hist-filter:hover { background: rgb(241 245 249); }
.dark .hist-filter:hover { background: rgb(255 255 255 / 0.06); }
.filter-active,
.filter-active:hover {
  background: rgb(6 182 212 / 0.15) !important;
  color: rgb(8 145 178) !important;
}
.dark .filter-active { color: rgb(103 232 249) !important; }

/* ----- meter ----- */
.meter-ring { transform: rotate(-90deg); }
.meter-ring circle { transition: stroke-dashoffset 0.4s ease, stroke 0.4s ease; }

/* ----- signal bars ----- */
.sig-row { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; align-items: center; }
.sig-track {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  background: rgb(226 232 240);
  overflow: hidden;
}
.dark .sig-track { background: rgb(255 255 255 / 0.08); }
.sig-fill { height: 100%; border-radius: 999px; transition: width 0.45s ease, background 0.3s; }

/* ----- toast ----- */
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
  background: rgb(15 23 42 / 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.3);
  animation: toast-in 0.25s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* scrollbar */
#history-list::-webkit-scrollbar { width: 8px; }
#history-list::-webkit-scrollbar-thumb { background: rgb(148 163 184 / 0.4); border-radius: 999px; }

.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }