:root { font-family: system-ui, -apple-system, Segoe UI, sans-serif; }

* { box-sizing: border-box; }

body { margin:0; background:#0b1220; color:#e5e7eb; }
a { color: #c7d2fe; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }

h1,h2 { margin: 0 0 12px; }

.card {
  background:#0f1a33;
  border:1px solid rgba(255,255,255,.08);
  padding:16px;
  border-radius:16px;
  margin-bottom:16px;
}

.muted { color: rgba(229,231,235,.7); }
.err { color:#fecaca; }

.grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:12px;
}

.tile {
  display:block;
  text-decoration:none;
  color:inherit;
  background:#0f1a33;
  border:1px solid rgba(255,255,255,.08);
  padding:14px;
  border-radius:16px;
}

.tile:hover { border-color: rgba(255,255,255,.18); }

.row { display:flex; gap:10px; flex-wrap:wrap; }

input, textarea, select {
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:#0b1220;
  color:#e5e7eb;
}

textarea { min-height: 80px; width:100%; }

button {
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:#1f2a44;
  color:#e5e7eb;
  cursor:pointer;
}

label {
  display:block;
  font-size: 13px;
  margin: 10px 0 6px;
  color: rgba(229,231,235,.85);
}

table { width:100%; border-collapse: collapse; }
th, td {
  text-align:left;
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}

.badge {
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size:12px;
}

.small { font-size: 13px; }

/* -----------------------------
   Mobile tweaks (iPhone friendly)
------------------------------ */
@media (max-width: 720px) {
  .wrap { padding: 16px; }

  h1 {
    font-size: 34px;
    line-height: 1.1;
    margin-bottom: 10px;
  }

  .card {
    padding: 14px;
    border-radius: 14px;
  }

  /* Make rows stack vertically on mobile */
  .row {
    flex-direction: column;
    gap: 12px;
    flex-wrap: nowrap;
  }

  /* Override inline widths on mobile (your PHP uses inline style="width:160px") */
  .row > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Inputs fill the container */
  input, textarea, select, button {
    width: 100%;
  }

  textarea { min-height: 110px; }

  /* Tables: scroll instead of breaking layout */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  th, td { white-space: nowrap; }

  /* Tiles become single column */
  .grid { grid-template-columns: 1fr; }
}