:root { color-scheme: dark; }



* { box-sizing: border-box; }



body{

  margin:0;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background:#0b0b0d;

  color:#eaeaea;

  line-height: 1.35;

}



.wrap{

  max-width: 980px;

  margin: 0 auto;

  padding: 16px;

}



.card{

  background:#121218;

  border:1px solid #222;

  border-radius:14px;

  padding:16px;

  margin:12px 0;

}



.row{

  display:flex;

  gap:12px;

  flex-wrap:wrap;

}



.row.between{

  justify-content: space-between;

  align-items: center;

}



h1 { font-size: 22px; margin: 0 0 8px 0; }

h2 { font-size: 18px; margin: 0 0 10px 0; }



.small{ opacity:.85; font-size:13px; }



a{ color:#b6c7ff; text-decoration:none; }

a:hover{ text-decoration:underline; }



label{ display:inline-block; margin-bottom:6px; }



input, select, textarea, button{

  background:#0f0f14;

  color:#eaeaea;

  border:1px solid #2a2a35;

  border-radius:10px;

  padding:10px 12px;

  font-size:15px;

}



input, select, textarea{

  width: 100%;

}



button{

  cursor:pointer;

  user-select:none;

}



button:active{

  transform: translateY(1px);

}



button.primary{

  border-color:#3a3a55;

}



/* Tap-friendly button groups */

.btn-row{

  display:flex;

  gap:10px;

  flex-wrap:wrap;

}



.btn-row button{

  flex: 1 1 180px;

  min-height: 44px;

}



/* Cards inside rows look better */

.card.compact{

  margin:0;

  padding:12px;

}



/* Tables */

.table-wrap{

  width:100%;

  overflow-x:auto;

  -webkit-overflow-scrolling: touch;

  border-radius: 12px;

}



.table{

  width:100%;

  min-width: 640px; /* forces scroll on mobile so columns don't crush */

  border-collapse: collapse;

}



.table th, .table td{

  border-bottom:1px solid #242433;

  padding:10px 8px;

  text-align:left;

  vertical-align: top;

}



.badge{

  display:inline-block;

  padding:4px 10px;

  border:1px solid #2a2a35;

  border-radius:999px;

  font-size:12px;

  white-space: nowrap;

}



.err{ color:#ffb4b4; }

.ok{ color:#b8ffcf; }



/* Mobile tweaks */

@media (max-width: 520px){

  .wrap{ padding: 12px; }

  .card{ padding: 14px; }

  h1{ font-size: 20px; }

  h2{ font-size: 17px; }



  .row.between{

    align-items: flex-start;

  }



  /* Make links/buttons easier to hit */

  a{ padding: 6px 0; display:inline-block; }



  /* Make button row stack if needed */

  .btn-row button{

    flex: 1 1 100%;

  }



  /* reduce table min width slightly */

  .table{ min-width: 560px; }

}