/* ─── GLOBAL ───────────────────────────────────────── */
    body { margin:0; background:#333; font-family:Arial,sans-serif; color:#fff; display:flex; justify-content:center; }
    .import-ui { background:#333; width:100%; min-height: 100vh; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); overflow:hidden; margin: auto; }
    .import-ui h1 { margin:0; padding:20px; font-size:24px; text-align:center; border-bottom:1px solid #e0e0e0; }
    /* ─── HEADER ────────────────────────────────────────── */
    .header-panel { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; padding:20px; border-bottom:1px solid #e0e0e0; }
    .field { display:flex; flex-direction:column; }
    .field label { font-size:14px; font-weight:500; margin-bottom:6px; color:#555; }
    .field input { padding:8px; border:1px solid #ccc; border-radius:4px; font-size:14px; }
    /* ─── TABS ────────────────────────────────────────── */
    .import-tabs { display:flex; background: var(--hover-bg); border-bottom:1px solid var(--hover-bg); max-width: 100%; overflow-x: auto; }
    .tab { flex:1; padding:12px; border:none; background:transparent; display:flex; flex-direction:column; align-items:center; cursor:pointer; color:var(--hover-text); font-size:13px; transition:background .2s; }
    .tab:hover { background:var(--hover-cap); }
    .tab.active { background:var(--hover-bg); color: var(--hover-text); border-bottom:2px solid var(--hover-border); }
    .icon { width:24px; height:24px; margin-bottom:4px; fill:currentColor; }
    /* ─── PANELS ─────────────────────────────────────── */
    .panels { padding:20px; }
    .panel { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
    .panel[hidden] { display:none; }
    /* ─── ACTIONS & LOG ──────────────────────────────── */
    .form-actions { padding:20px 20px; display:flex; justify-content:flex-end; gap:10px; }
    .btn { padding:10px 20px; border:none; border-radius:4px; cursor:pointer; font-weight:500; }
    .primary { background:#3178c6; color:#fff; width: 100% }
    .primary:hover { background:#255a9c; }
    .secondary { background:#ccc; color:#333; }
    .secondary:hover { background:#bbb; }
    #log { max-height:120px; overflow:auto; background:#eef2f6; padding:10px; font-size:13px; border-top:1px solid #ddd; }
    @media(max-width:600px) { .header-panel, .panel { grid-template-columns:1fr !important; } }
    /* --- Changes --- */
    .field.provider { display: none; }
    .header-panel {
      display: grid;
      grid-gap: 16px;
      padding: 20px;
      border-bottom: 1px solid #e0e0e0;
      
      /* on mobile: single column */
      grid-template-columns: 1fr;
    }
    @media (min-width: 600px) {
      /* two columns for medium screens */
      .header-panel {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 900px) {
      /* three columns on larger */
      .header-panel {
        grid-template-columns: repeat(2, 1fr);
      }
    }
fieldset {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 16px;
}
fieldset legend {
  font-weight: bold;
  margin-bottom: 8px;
}
.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}
.field label {
  font-size: 14px;
  margin-bottom: 4px;
  color: #333;
}
.info-icon {
  width: 1em;
  height: 1em;
  vertical-align: text-bottom;
  margin-left: 0.25em;
  color: var(--hover-text);
  cursor: help;
}


.lesson-id-field select {
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lesson-id-field select option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* make tabs respect the HTML hidden attribute */
.import-tabs .tab[hidden] {
  display: none;
}

 /* Dropzone styles */
    .dropzone {
      position: relative;
      border: 2px dashed var(--hover-border);
      border-radius: 8px;
      padding: 40px;
      text-align: center;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
      --hover-bg: #eef6ff;
      --hover-border: #255a9c;
    }

    .dropzone:hover {
      background: var(--hover-bg);
      border-color: var(--hover-border);
    }
    .dropzone input[type="file"] {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }
    .dropzone .dz-text {
      font-size: 14px;
      color: var(--hover-text);
    }
    /* Hide the old words JSON input */
    #wordsFile { display: none; }

    button {
      cursor: pointer;
    }
    /* in styles.css */

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 1rem;
  margin: 1rem 0;
}

.field {
  display: flex;
  flex-direction: column;
}

.field.full-width {
  grid-column: 1 / -1;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.radio-group label {
  white-space: nowrap;
}

input[type="text"],
input[type="url"],
select {
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
#overlayLog .info    { color: #fff; }
#overlayLog .success { color: goldenrod; }
#overlayLog .error   { color: #c0392b; }

/* ===== Compact single-page overrides ===== */
body.compact {
  --sp1: 6px;
  --sp2: 10px;
  --sp3: 12px;
  --fs-base: 13px;
  --fs-small: 12px;
  font-size: var(--fs-base);
}

/* tighter title + make sticky so tabs/content scroll under it */
body.compact .import-ui h1{
  font-size: 18px;
  padding: var(--sp2);
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background:#333;
  border-bottom: 1px solid #2b2f36;
}

/* compact tabs; hide labels on narrow */
body.compact .import-tabs{
  gap: 2px;
  border-bottom: 1px solid #2b2f36;
  position: sticky;
  top: 42px; /* under the sticky h1 */
  z-index: 9;
}
body.compact .tab{
  padding: 6px 8px;
  font-size: 12px;
}
body.compact .tab .icon{ width: 18px; height: 18px; margin: 0; }
@media (max-width: 780px){
  body.compact .tab span{ display:none; }
}

/* header fieldsets side-by-side with denser spacing */
body.compact .header-panel{
  padding: var(--sp2);
  grid-gap: var(--sp2);
  grid-template-columns: 1.2fr 1fr;  /* Lesson Meta wider than Settings */
  border-bottom: 1px solid #2b2f36;
}
@media (max-width: 900px){
  body.compact .header-panel{ grid-template-columns: 1fr; }
}
body.compact fieldset{ padding: 10px; border-color:#2b2f36; }
body.compact fieldset legend{ font-size: 13px; margin-bottom: 6px; }

/* fields compressed */
body.compact .field{ margin-bottom: 8px; }
body.compact .field label{ font-size: var(--fs-small); margin-bottom: 4px; color:#ddd; }
body.compact input[type="text"],
body.compact input[type="url"],
body.compact select{ padding: 6px; }

/* dropzones smaller */
body.compact .dropzone{ padding: 16px; }
body.compact .dropzone .dz-text{ font-size: 12px; }

/* panel grids denser */
body.compact .panels{ padding: var(--sp3); }
body.compact .panel{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

/* make actions sticky so CTAs are always visible */
body.compact .form-actions{
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: #333;
  border-top: 1px solid #2b2f36;
  padding: 8px 12px;
  gap: 8px;
}
body.compact .btn.primary,
body.compact .btn.secondary{ padding: 8px 12px; }

/* trim overlay footprint */
body.compact #generatingOverlay{ padding: 12px; }
body.compact #overlayLog{ max-height: 25%; }

/* tiny tweaks */
body.compact .lesson-id-field select{ font-size: 12px; }
body.compact .info-icon{ width: .9em; height: .9em; }