form {
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

section > h2 {
  margin-bottom: 10px;
}

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

.input-wrapper label {
  font-size: 14px;
  font-weight: 500;
}

.input-wrapper input {
  width: 100%;
  padding: 6px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="number"] {
  background-color: #fff;
}

form label {
  margin-top: 10px;
  font-weight: 500;
  display: block;
}

form input {
  padding: 8px;
  margin-bottom: 10px;
}

form button {
  background-color: #ff1e1e;
  color: #fff;
  border: none;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

form button:hover {
  background-color: #cc1a1a;
}

.points-tables-wrapper {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .points-tables-wrapper section {
      flex: 1;
      min-width: 220px;
      margin: 0px 5%;
    }

    .points-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      margin-top: 5px;
    }

    .points-table th, .points-table td {
      border: 1px solid #ccc;
      padding: 4px 6px;
      text-align: center;
    }

    .points-table input {
      width: 45px;
      font-size: 12px;
      padding: 2px;
    }

    form > section {
      margin-bottom: 20px;
    }

    button[type="submit"] {
      padding: 8px 16px;
      font-size: 14px;
      background-color: #4070f4;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button[type="submit"]:hover {
      background-color: #3058c5;
    }

    label {
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
    }

    input[type="number"] {
      padding: 4px;
      font-size: 14px;
      width: 80px;
    }

    .points-tables-wrapper section button {
      margin-top: 5px;
      margin-right: 6px;
      font-size: 12px;
      padding: 4px 8px;
      background-color: #eee;
      border: 1px solid #ccc;
      border-radius: 3px;
      cursor: pointer;
    }

    .points-tables-wrapper section button:hover {
      background-color: #ddd;
    }

.points-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two columns of equal width */
  gap: 0; /* remove gap between tables */
  width: 100%;
}

.points-two-column .points-table {
  width: 100%;
  margin: 0; /* remove any margin that might add space */
  border-collapse: collapse; /* ensures borders touch */
}

/* General input styling */
input[type="number"] {
  width: 80px;                 /* consistent width */
  padding: 6px 10px;           /* comfortable padding */
  font-size: 14px;             /* readable text */
  border: 1px solid #ccc;      /* light border */
  border-radius: 6px;          /* rounded corners */
  text-align: center;          /* center the number */
  transition: all 0.2s ease;   /* smooth hover/focus */
  outline: none;               /* remove default focus outline */
  background-color: #fff;      /* white background */
}

/* Focus state */
input[type="number"]:focus {
  border-color: #4070f4;       /* match primary color */
  box-shadow: 0 0 4px rgba(64, 112, 244, 0.4); /* subtle glow */
}

/* Disabled state */
input[type="number"]:disabled {
  background-color: #f5f5f5;
  color: #aaa;
  cursor: not-allowed;
}

/* Smaller inputs inside table cells */
.points-table input[type="number"] {
  width: 50px;
  padding: 4px;
  font-size: 12px;
}

/* --- OTHER SETTINGS SECTION --- */

.other-settings-wrapper {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Each setting card */
.other-setting {
  background: #fafafa;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Title */
#other-settings-title {
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 600;
}

/* Label */
.other-setting label {
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
  font-size: 14px;
}

/* Inputs */
.other-setting input[type="number"] {
  width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  text-align: center;
}

/* Inline sentence inputs */
.inline-input-group {
  font-size: 14px;
  line-height: 1.4;
}

.inline-input-group input[type="number"] {
  width: 60px;
  padding: 4px;
  margin: 0 4px;
}

/* Focus state */
.other-setting input[type="number"]:focus {
  border-color: #4070f4;
  box-shadow: 0 0 3px rgba(64, 112, 244, 0.4);
}

/* Dark mode support if needed */
body.dark .other-setting {
  background: #2e2e2e;
  border-color: #444;
}