:root{
    --bg:#0f0f13;
    --card:#121218;
    --accent:#8A5CFF;
    --accent2:#00D1FF;
    --text:#E6E6E6;
    --muted:#9AA0A6;
  }
  *{box-sizing:border-box;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}
  html,body{height:100%;margin:0;background:linear-gradient(180deg,#07070a 0%, #0b0f12 100%);color:var(--text)}
  #app{max-width:1100px;margin:24px auto;padding:16px}
  header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
  header h1{margin:0;color:var(--accent)}
  .card{background:var(--card);padding:14px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.6)}
  .center{text-align:center;max-width:720px;margin:0 auto}
  .hidden{display:none}
  .row{display:flex;gap:8px;margin-top:8px}
  input{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,.04);background:#0b0b0b;color:var(--text)}
  button{background:var(--accent2);border:none;padding:8px 12px;border-radius:8px;cursor:pointer;color:#000;font-weight:600}
  button.secondary{background:#333;color:#fff}
  .card.small{width:280px}
  .grid{display:grid;grid-template-columns:280px 1fr 420px;gap:12px}
  #results{max-height:460px;overflow:auto;padding-top:6px}
  .result-row{display:flex;flex-direction:column;border-radius:8px;padding:8px;margin-bottom:8px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))}
  .result-row .meta{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:6px}
  .action-buttons{display:flex;gap:6px;margin-top:6px}
  .small-badge{background:#111;padding:4px 6px;border-radius:6px;color:var(--muted);font-size:12px}
  footer{margin-top:14px;color:var(--muted);font-size:13px}
  .muted{color:var(--muted);font-size:13px}
  
  .result-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
/* Result rows */
.result-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: #0b1120; /* dark navy */
  border: 1px solid #1f2937;
}

.result-row .meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 13px;
  color: #e5e7eb;
}

.result-row .license-id {
  font-weight: 600;
  font-size: 13px;
}

.result-row .issued-to {
  font-size: 12px;
  color: #9ca3af;
}

.result-row .info-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #d1d5db;
}

.info-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.small-text {
  font-size: 11px;
  color: #9ca3af;
}

/* Colorful status pills */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.status-active {
  background: rgba(34, 197, 94, 0.18);   /* green */
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.status-suspended {
  background: rgba(234, 179, 8, 0.18);   /* yellow */
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.4);
}

.status-revoked {
  background: rgba(239, 68, 68, 0.18);   /* red */
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* Make it stack nicely on mobile */
@media (max-width: 700px) {
  .result-row {
    grid-template-columns: 1fr;
  }
}
.tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  cursor: pointer;
  font-size: 0.9rem;
}

.tab.active {
  background: #4f46e5;
  color: #fff;
  border-color: #4f46e5;
}

/* Background tint per status */
.row-active {
  background: rgba(46, 204, 113, 0.04);
}

.row-suspended {
  background: rgba(241, 196, 15, 0.04);
}

.row-revoked {
  background: rgba(231, 76, 60, 0.04);
}

/* Status pill (we partly added before, keeping here consolidated) */
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}

.status-active {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
}

.status-suspended {
  background: rgba(241, 196, 15, 0.15);
  color: #f1c40f;
}

.status-revoked {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
}
#toast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  min-width: 240px;
  max-width: 320px;
  background: rgba(15, 15, 20, 0.98);
  color: #f5f5f5;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  border-left: 3px solid #3498db;
  opacity: 0;
  transform: translateY(8px);
  animation: toast-in 0.2s forwards, toast-out 0.2s ease-out 4.3s forwards;
}

.toast-success {
  border-left-color: #2ecc71;
}

.toast-error {
  border-left-color: #e74c3c;
}

.toast-warning {
  border-left-color: #f1c40f;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}
/* =========================================
   📱 Mobile layout tweaks
   ========================================= */
@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  .card {
    padding: 12px;
  }

  /* Login + dashboard containers stretch nicely */
  #login, #dashboard {
    width: 100%;
    max-width: 100%;
  }

  /* Top toolbar buttons: stack or wrap */
  .toolbar,
  .toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .toolbar button,
  .toolbar-row button {
    flex: 1 1 100%;
    font-size: 13px;
    padding: 8px 10px;
  }

  /* Stats badges should wrap nicely */
  #stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .small-badge {
    font-size: 11px;
    padding: 4px 8px;
  }

  /* Search + create panel layout */
  .search-row,
  .create-row,
  .filters-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .search-row input,
  .create-row input {
    width: 100%;
  }

  /* Results: card-style, full width */
  .result-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px;
  }

  .result-row .meta {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
  }

  .result-row .meta div:first-child {
    font-size: 13px;
    font-weight: 600;
  }

  .result-row .meta div:last-child {
    font-size: 12px;
    opacity: 0.9;
  }

  .result-row .action-buttons {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }

  .result-row .action-buttons button {
    flex: 1 1 calc(50% - 6px);
    font-size: 12px;
    padding: 6px 8px;
  }

  /* Toast smaller on mobile */
  #toast-container {
    right: 10px;
    left: 10px;
    bottom: 10px;
    align-items: stretch;
  }

  .toast {
    max-width: 100%;
    font-size: 12px;
    padding: 8px 10px;
  }
}

.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.toolbar-row button {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,15,20,0.9);
  color: #f5f5f5;
  cursor: pointer;
}

.toolbar-row button:hover {
  background: rgba(45,45,60,0.9);
}

/* =========================================
   Result rows – pro level look
   ========================================= */
.result-row {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(20, 20, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.result-row .meta {
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.license-id {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 12px;
  color: #eaeaea;
}

.issued-to {
  font-size: 13px;
  color: #a9b0bc;
}

.status-badge {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Status color variants */
.status-active {
  background: rgba(0, 200, 120, 0.15);
  border: 1px solid rgba(0, 200, 120, 0.6);
  color: #4ef5a9;
}

.status-suspended {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.6);
  color: #ffda6a;
}

.status-revoked {
  background: rgba(244, 67, 54, 0.12);
  border: 1px solid rgba(244, 67, 54, 0.7);
  color: #ff867c;
}

.status-expired {
  background: rgba(158, 158, 158, 0.12);
  border: 1px solid rgba(158, 158, 158, 0.6);
  color: #e0e0e0;
}

/* Tint the whole row slightly based on status */
.result-row.status-active {
  box-shadow: 0 0 0 1px rgba(0, 200, 120, 0.2);
}

.result-row.status-suspended {
  box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.2);
}

.result-row.status-revoked {
  box-shadow: 0 0 0 1px rgba(244, 67, 54, 0.25);
}

.result-row.status-expired {
  box-shadow: 0 0 0 1px rgba(158, 158, 158, 0.15);
}

.result-row .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
}

.result-row .info span {
  color: #e5e5e5;
}

.features-line span {
  color: #80d8ff;
}

.result-row .action-buttons {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.result-row .action-buttons button {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(25,25,35,0.9);
  color: #f5f5f5;
  cursor: pointer;
}

.result-row .action-buttons button:hover {
  background: rgba(60,60,80,0.95);
}