* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito', 'Segoe UI', sans-serif;
  background: #f7f5f2;
  color: #2c2c2c;
  padding: 24px 20px;
  font-size: 14px;
  line-height: 1.5;
}

h1 {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 3px;
  letter-spacing: -0.3px;
}
.subtitle {
  font-size: 13px;
  color: #888;
  margin-bottom: 24px;
  font-weight: 400;
}

.section-label {
  font-size: 10.5px;
  color: #999;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 9px;
}

/* ── Mode tabs ── */
.mode-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid #e8e5e0;
}
.mode-tab {
  padding: 8px 18px;
  border: none;
  background: none;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #999;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.1s;
}
.mode-tab:hover { color: #444; }
.mode-tab.active { color: #4338ca; border-bottom-color: #4338ca; }

/* ── Char picker ── */
.alpha-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.alpha-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1.5px solid #e0ddd8;
  border-radius: 7px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s;
  font-family: 'Nunito', sans-serif;
}
.alpha-btn:hover { border-color: #aaa; background: #f0eee9; }
.alpha-btn.selected { background: #4338ca; border-color: #4338ca; color: #fff; }

.select-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.small-link {
  font-size: 12px;
  color: #4338ca;
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
}
.count-badge { font-size: 12px; color: #aaa; margin-left: auto; }

/* ── Controls ── */
.controls-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }

.pill-btn {
  padding: 6px 14px;
  border: 1.5px solid #ddd;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  cursor: pointer;
  color: #555;
  transition: all 0.1s;
  line-height: 1.4;
}
.pill-btn:hover { border-color: #aaa; color: #222; }
.pill-btn.active-num   { background: #b45309; border-color: #b45309; color: #fff; }
.pill-btn.active-case  { background: #0e7a5f; border-color: #0e7a5f; color: #fff; }
.pill-btn.active-style { background: #1a6db5; border-color: #1a6db5; color: #fff; }
.pill-btn.active-font  { background: #7c3d8b; border-color: #7c3d8b; color: #fff; }

.font-sample { font-size: 15px; font-weight: 700; margin-left: 4px; vertical-align: middle; }

/* ── Actions ── */
.action-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.btn-create {
  padding: 9px 26px;
  border-radius: 9px;
  border: none;
  background: #4338ca;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.btn-create:hover { background: #3730a3; }
.btn-print {
  padding: 9px 20px;
  border-radius: 9px;
  border: none;
  background: #0e7a5f;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  display: none;
}
.btn-print:hover { background: #0a6050; }
.btn-regen {
  padding: 9px 18px;
  border-radius: 9px;
  border: 1.5px solid #ccc;
  background: #fff;
  color: #555;
  font-size: 14px;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  display: none;
}
.btn-regen:hover { background: #f0eee9; }

hr { border: none; border-top: 1px solid #ebe8e2; margin: 16px 0; }

/* ── Print area ── */
#printArea { display: none; }
#printArea.visible { display: block; }
canvas { display: block; width: 100%; max-width: 680px; margin: 0 auto; background: #fff; }

/* ── Count table ── */
.count-section {
  margin-top: 14px;
  border: 1px solid #e4e0da;
  border-radius: 10px;
  background: #fff;
  padding: 16px 18px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.count-section-title {
  font-size: 12px;
  color: #999;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-family: 'Nunito', sans-serif;
}
.count-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.count-card {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 7px 10px;
  background: #faf9f7;
  min-width: 100px;
}
.count-lbl {
  font-size: 30px;
  font-weight: 700;
  color: #111;
  line-height: 1;
  min-width: 22px;
  text-align: center;
}
.count-eq { font-size: 16px; color: #ccc; }
.count-answer-box {
  width: 36px;
  height: 36px;
  border: 1.5px dashed #aaa;
  border-radius: 5px;
  background: #fff;
  flex-shrink: 0;
}

@media print {
  body { background: #fff !important; padding: 6px 10px; }
  .no-print { display: none !important; }
  #printArea { display: block !important; }
  canvas { max-width: 100% !important; }
  .count-section { border: none; padding: 12px 0 0; max-width: 100%; }
  .count-card { border: 1.5px solid #ccc; background: #fff; }
  .count-answer-box { border: 1.5px dashed #bbb; }
}