/* ── EXAMPLANIT STYLE.CSS ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Nunito', sans-serif; background: #f0eeff; min-height: 100vh; color: #444; }

/* LOGIN */
#login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fce4f0 0%, #e8eeff 50%, #d8f5ec 100%);
}
.login-card {
  background: #fff; border-radius: 24px; padding: 48px 40px;
  text-align: center; box-shadow: 0 12px 48px rgba(0,0,0,0.12); max-width: 420px; width: 90%;
}
.login-logo { font-family: 'Baloo 2', cursive; font-size: 2.2rem; color: #8090c8; margin-bottom: 6px; }
.login-logo em { color: #c080b0; font-style: normal; }
.login-tagline { font-size: 0.88rem; color: #a0a8c8; font-weight: 700; margin-bottom: 32px; }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 14px 24px; background: #fff; border: 2px solid #e0e0e0;
  border-radius: 14px; font-family: 'Nunito', sans-serif; font-size: 0.95rem;
  font-weight: 800; color: #444; cursor: pointer;
}
.google-btn:hover { border-color: #a080d0; }
.google-icon { width: 22px; height: 22px; }
.login-note { font-size: 0.7rem; color: #c0b8d0; margin-top: 16px; line-height: 1.6; }

/* APP */
#app-screen { display: none; padding: 24px 24px 80px; }
.card {
  background: #fff; border-radius: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  max-width: 1100px; margin: 0 auto; overflow: hidden;
}
.app-header {
  background: linear-gradient(120deg, #fce4f0, #e8eeff, #d8f5ec);
  padding: 16px 28px; display: flex; align-items: center; gap: 14px;
}
.app-logo { font-family: 'Baloo 2', cursive; font-size: 1.6rem; color: #8090c8; flex: 1; }
.app-logo em { color: #c080b0; font-style: normal; }
.user-info { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; color: #888; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; }
.signout-btn {
  padding: 4px 12px; background: #fff; border: 1.5px solid #e0d8f0;
  border-radius: 20px; font-size: 0.65rem; font-weight: 800; color: #a090c0; cursor: pointer;
}

/* SECTIONS */
.section { padding: 22px 28px; border-bottom: 1px solid #f5f0ff; }
.sec-title { font-family: 'Baloo 2', cursive; font-size: 0.95rem; color: #9070b0; margin-bottom: 16px; }
.sec-subtitle { font-size: 0.65rem; font-weight: 700; color: #c0b0d8; font-family: 'Nunito', sans-serif; }

/* FIELDS */
.fields-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.field-group { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 0.63rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #b0a0c8; }
.field-sublabel { font-size: 0.63rem; font-weight: 700; color: #b0a0c8; text-transform: uppercase; }
.field-input {
  background: #f8f4ff; border: 1.5px solid #e4ddf5; border-radius: 10px;
  padding: 9px 14px; font-family: 'Nunito', sans-serif; font-size: 0.85rem; font-weight: 700; color: #555; outline: none;
}
.field-input:focus { border-color: #a080d0; }
.field-input.sm { width: 120px; }

/* REVISION */
.rev-options { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.rev-opt {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-radius: 12px; border: 1.5px solid #f0eaf8; background: #fdfaff; cursor: pointer;
}
.rev-opt.selected { background: #f0e8ff; border-color: #c0a0f0; }
.rev-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #d0c0e8; background: #fff; flex-shrink: 0; }
.rev-opt.selected .rev-radio { background: #a080d0; border-color: #a080d0; box-shadow: inset 0 0 0 3px #fff; }
.rev-text { display: flex; flex-direction: column; gap: 2px; }
.rev-label { font-size: 0.8rem; font-weight: 800; color: #666; }
.rev-opt.selected .rev-label { color: #7050a0; }
.rev-desc { font-size: 0.65rem; color: #b0a0c8; }

/* SUBJECTS */
.add-subj-wrap { position: relative; display: inline-block; margin-bottom: 12px; }
.add-subj-btn {
  padding: 7px 16px; background: #f0f8ff; border: 1.5px solid #b8d8f0;
  border-radius: 20px; font-size: 0.68rem; font-weight: 800; color: #5090c0; cursor: pointer;
}
.subj-dropdown {
  display: none; position: absolute; top: 110%; left: 0;
  background: #fff; border: 1.5px solid #e0d8f0; border-radius: 14px;
  padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 50; min-width: 200px;
}
.subj-dropdown.open { display: block; }
.subj-dropdown-item { padding: 8px 14px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; color: #555; cursor: pointer; }
.subj-dropdown-item:hover { background: #f8f4ff; color: #9070c0; }

.subj-item {
  background: #fdfbff; border: 1.5px solid #ede8f8; border-radius: 14px;
  padding: 12px 16px; display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; flex-wrap: nowrap;
}
.si-name-wrap { width: 180px; min-width: 180px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.si-emoji { font-size: 1.1rem; }
.si-name { font-size: 0.85rem; font-weight: 800; color: #555; }
.diff-group { width: 215px; min-width: 215px; flex-shrink: 0; display: flex; gap: 4px; }
.dp { padding: 4px 8px; border-radius: 20px; border: 1.5px solid #eee; font-size: 0.62rem; font-weight: 800; color: #ccc; background: #fafafa; cursor: pointer; }
.dp.easy.on { background: #e8f8ee; color: #208050; border-color: #80c898; }
.dp.norm.on { background: #fff8e4; color: #a07010; border-color: #d0b050; }
.dp.hard.on { background: #fff0f0; color: #c03030; border-color: #e09090; }
.upload-group { flex: 1; display: flex; align-items: center; gap: 6px; }
.up-btn { padding: 5px 12px; background: #fff; border: 1.5px solid #e0d4f5; border-radius: 8px; font-size: 0.65rem; font-weight: 800; color: #9070c0; cursor: pointer; }
.up-status { font-size: 0.65rem; font-weight: 800; white-space: nowrap; }
.up-status.ok  { color: #40a070; }
.up-status.nil { color: #ccc; }
.exam-date-wrap { flex-shrink: 0; margin-left: 8px; display: flex; flex-direction: column; gap: 3px; }
.exam-date-label { font-size: 0.58rem; font-weight: 800; color: #c0b0d0; text-transform: uppercase; white-space: nowrap; }
.exam-date-hint { font-size: 0.55rem; color: #d0c8e0; font-style: italic; }
.exam-date-input {
  background: #fff; border: 1.5px solid #e8e0f5; border-radius: 8px;
  padding: 6px 10px; font-family: 'Nunito', sans-serif; font-size: 0.75rem; font-weight: 700; color: #666; width: 140px; outline: none;
}
.del-btn { font-size: 0.9rem; color: #ddd; cursor: pointer; padding: 4px 6px; border-radius: 6px; background: none; border: none; flex-shrink: 0; margin-left: 4px; }
.del-btn:hover { color: #e08080; background: #fff0f0; }

/* BUILD */
.build-section {
  padding: 24px 28px 28px; background: linear-gradient(180deg, #fdfbff, #f8f4ff);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.build-checklist { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.bc-item { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 700; }
.bc-dot { width: 8px; height: 8px; border-radius: 50%; }
.bc-dot.ok { background: #50b080; } .bc-dot.no { background: #e8e0f0; }
.bc-txt.ok { color: #50b080; } .bc-txt.no { color: #c0b8d0; }
.bc-warning {
  width: 100%; text-align: center; padding: 7px 16px;
  background: #FFF8E8; border: 1.5px solid #E8C96A; border-radius: 8px;
  font-size: 0.68rem; font-weight: 700; color: #A07820;
}
.build-btn {
  padding: 14px 52px; background: linear-gradient(135deg, #c8d8f8, #a080d0, #f0a0c0);
  color: #fff; border: none; border-radius: 16px; font-family: 'Baloo 2', cursive;
  font-size: 1.2rem; cursor: pointer; box-shadow: 0 6px 20px rgba(160,128,208,0.4);
}
.build-btn:hover:not(:disabled) { opacity: 0.9; }
.build-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.build-note { font-size: 0.65rem; color: #b0a8c8; font-style: italic; }

/* MODAL */
.modal-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4); z-index: 100; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 20px; padding: 28px; width: 90%; max-width: 480px; box-shadow: 0 12px 48px rgba(0,0,0,0.15); }
.modal-title { font-family: 'Baloo 2', cursive; font-size: 1.1rem; color: #9070b0; margin-bottom: 6px; }
.modal-sub { font-size: 0.72rem; color: #aaa; margin-bottom: 14px; }
.modal textarea {
  width: 100%; height: 200px; border: 1.5px solid #e4ddf5; border-radius: 12px;
  padding: 12px; font-family: 'Nunito', sans-serif; font-size: 0.8rem; color: #555; resize: vertical; outline: none;
}
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.modal-cancel { padding: 8px 20px; background: #fff; border: 1.5px solid #e0d8f0; border-radius: 10px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.78rem; color: #a090c0; cursor: pointer; }
.modal-save { padding: 8px 20px; background: linear-gradient(135deg, #c8b8f8, #a080d0); border: none; border-radius: 10px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.78rem; color: #fff; cursor: pointer; }

@media (max-width: 860px) {
  .subj-item { flex-wrap: wrap; }
  .si-name-wrap, .diff-group { width: auto; min-width: auto; }
}