:root { --zoom: 1; }

.dropzone { border: 2px dashed #94a3b8; border-radius: 12px; padding: 16px; background: #f8fafc; text-align: center; }
.card { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.input { border: 1px solid #cbd5e1; border-radius: 10px; padding: 8px 10px; width: 100%; background: white; }
.btn, .btn-primary { border-radius: 10px; padding: 8px 12px; font-weight: 600; }
.btn { background: #e2e8f0; } .btn:hover { background: #cbd5e1; }
.btn-primary { background: #0073a8; color: white; } .btn-primary:hover { background: #0284c7; }

.tabs { display: flex; align-items: center; gap: 8px; }
.tab { background: #e2e8f0; border-radius: 9999px; padding: 6px 12px; font-weight: 600; }
.tab.active { background: #0073a8; color: #fff; }

/* Preview */
.preview-wrap { overflow:auto; max-height: 70vh; border: 1px solid #e2e8f0; border-radius: 10px; }
.preview-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.preview-table th, .preview-table td { border: 1px solid #e2e8f0; padding: 6px 8px; font-size: 12px; background: white; }
.preview-table thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; }
.preview-table .col-letter { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-weight: 700; }
.preview-table .col-highlight { background: #e0f2fe !important; }

/* Student codes grid — zoom controls type scale (not container size) */
.codes-grid-wrap { width: 100%; }

.codes-grid {
  display: grid;
  width: 100%;
  /* Min card width scales with --zoom, never below 130px, wraps automatically */
  grid-template-columns: repeat(
    auto-fit,
    minmax(clamp(130px, calc(130px + 260px * (var(--zoom) - 1)), 420px), 1fr)
  );
  gap: 8px;
}

/* allow name truncation + avoid overflow fights */
.code-card { min-width: 0; }
.code-card .meta .truncate { min-width: 0; }




/* slightly tighter vertical rhythm in cards */
.code-card {
  padding: calc(8px * var(--zoom)) calc(10px * var(--zoom));
  gap: calc(4px * var(--zoom));
}

.code-card .sno,
.code-card .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-weight: 800;
  font-size: calc(28px * var(--zoom));
  letter-spacing: 1.2px;
  line-height: 1.05;
  text-transform: lowercase;
}


.code-card .meta { font-size: calc(12px * var(--zoom)); color: #475569; display: flex; justify-content: space-between; gap: 6px; }

.code-card .meta.name-row { margin-top: calc(2px * var(--zoom)); }



/* Present = light lime background */
.code-card.present {
  background: #ecfccb;              /* lime-100 */
  border-color: #84cc16;            /* lime-500 (subtle edge) */
  box-shadow: 0 0 0 1px rgba(132, 204, 22, .25) inset; /* optional soft outline */
}



/* --- Simple horizontal stepper --- */
.stepper { 
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
    max-width: 450px; /* Controls the overall width of the stepper */
    list-style: none; 
    padding: 0; 
    margin: 0; 
}
.stepper li { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 6px; 
    color: #64748b; 
    position: relative; 
    flex: 1; /* Each step takes up equal space */
}
.stepper li .bubble { width:32px; height:32px; border-radius:9999px; border:3px solid #94a3b8; display:inline-flex; align-items:center; justify-content:center; font-weight:800; }
.stepper li .label { font-weight:600; text-transform:lowercase; }
.stepper li::after { 
    content:""; 
    height:3px; 
    background:#cbd5e1; 
    position:absolute; 
    /* The line starts just after the bubble and ends just before the next bubble */
    left: calc(50% + 16px); 
    right: calc(-50% + 16px);
    top: 14.5px; 
    z-index: -1; 
}
.stepper li:last-child::after { display:none; }
.stepper li.active .bubble { border-color:#ef4444; color:#ef4444; }
.stepper li.active .label { color:#ef4444; }
.stepper li.done .bubble { background:#334155; border-color:#334155; color:white; }
.stepper li.done .label { color:#334155; }

/* inline number input used in step 3 sentence */
.input.inline-input { display:inline-block; width:auto; min-width:4.5rem; padding-top:4px; padding-bottom:4px; }


/* --- Fullscreen QR overlay during active timer --- */
.qr-overlay { position: fixed; inset: 0; background: #0b1b2b; color: #fff;
  display: flex; align-items: center; justify-content: center; z-index: 9999; }
.qr-overlay-inner { text-align: center; padding: 24px; }
.qr-overlay-count { font-weight: 800; font-size: 40px; letter-spacing: .5px; }
.qr-overlay .big-qr canvas, .qr-overlay .big-qr img { width: min(70vmin, 520px); height: auto; }