/* NurseAcademy BoardX — Full Styles */
:root{
  --bg: #0b1224;
  --card: #121a33;
  --muted: #8aa0c6;
  --text: #e8efff;
  --primary: #00b5c8;
  --primary-2: #00e1c6;
  --accent: #ff8c64;
  --danger: #ff5c5c;
  --success: #34d399;
  --border: rgba(255,255,255,0.08);
  --shadow: rgba(0,0,0,0.35);
}
*{ box-sizing:border-box; } html,body{ height:100%; }
body{
  margin:0; font-family:'Inter',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(0,229,198,0.08), transparent 50%),
              radial-gradient(1000px 700px at -10% 110%, rgba(0,181,200,0.15), transparent 50%),
              var(--bg);
  color:var(--text);
}
a{ color:var(--primary); text-decoration:none; }
.muted{ color:var(--muted); } .tiny{ font-size:.85rem; } .accent{ color:var(--primary-2); }
.screen{ display:none; min-height:100vh; } .screen.active{ display:block; }

/* Auth */
.auth-card{ width:min(860px,95vw); margin:8vh auto 2rem; padding:1.5rem 1.75rem;
  border:1px solid var(--border); border-radius:16px; background:rgba(18,26,51,.6);
  box-shadow: 0 24px 80px var(--shadow); }
.brand{ display:flex; gap:1rem; align-items:center; margin-bottom:.75rem; }
.brand .logo{ width:44px; height:44px; border-radius:10px; display:grid; place-items:center; font-size:1.3rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#022; font-weight:800; }
.tabs{ display:flex; gap:.5rem; margin:.5rem 0 1rem; }
.tab{ flex:1; background:transparent; border:1px solid var(--border); color:var(--text);
  padding:.7rem 1rem; border-radius:10px; cursor:pointer; }
.tab.active{ background:linear-gradient(135deg, rgba(0,181,200,.18), rgba(0,225,198,.18)); border-color:transparent; }
.inputs{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.inputs input{ padding:.9rem 1rem; border-radius:10px; border:1px solid var(--border); background:#0e1630; color:var(--text); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.1rem; border-radius:10px; border:1px solid transparent; cursor:pointer; font-weight:700;
  transition:.15s transform ease, .15s box-shadow ease, .2s background ease; }
.btn:hover{ transform: translateY(-1px); } .btn-primary{ background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#022; }
.btn-outline{ background: transparent; border-color: var(--border); color:var(--text); }
.btn-soft{ background:#0e1630; border:1px solid var(--border); color:var(--text); }
.btn-danger{ background: #ff5c5c; color:#220000; } .btn-success{ background: var(--success); color:#001b12; }
.auth-footer{ text-align:center; color:var(--muted); margin-bottom:2rem; }

/* Topbar & Lobby */
.topbar{ display:flex; align-items:center; justify-content:space-between; padding: .9rem 1.25rem;
  position:sticky; top:0; background: rgba(11,18,36,.75); border-bottom:1px solid var(--border); backdrop-filter: blur(10px); z-index: 100; }
.brand-min{ display:flex; align-items:center; gap:.5rem; }
.brand-min .logo{ width:28px; height:28px; border-radius:7px; display:grid; place-items:center; background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#022; font-weight:800; }
.lobby{ display:grid; grid-template-columns:320px 1fr; gap:1.25rem; max-width:1200px; margin:1rem auto; padding:0 1rem 2rem; }
.glass{ background: rgba(255,255,255,.04); border:1px solid var(--border); border-radius:16px; box-shadow: 0 24px 80px var(--shadow); }
.profile-card{ padding:1rem 1.25rem; height:fit-content; }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-bottom:1rem; }
.stats div{ background:#0e1630; border:1px solid var(--border); border-radius:12px; padding:.75rem; text-align:center; }
.subjects .section-head{ display:flex; align-items:center; justify-content:space-between; padding: .9rem 1.25rem; }
.filters{ display:flex; gap:.5rem; } .filters input, .filters select{ background:#0e1630; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:.6rem .8rem; }
.subject-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:1rem; padding: 1rem; }
.subject-card{ border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#0e1630; display:flex; flex-direction:column; }
.subject-card .thumb{ aspect-ratio: 16/9; background:#101a36; display:grid; place-items:center; font-size:2rem; }
.subject-card .body{ padding:.9rem 1rem; } .pill{ display:inline-flex; padding:.2rem .5rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); font-size:.85rem; }
.subject-card .actions{ padding: .9rem 1rem; display:flex; gap:.5rem; }

/* Exam */
.exam-topbar{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.25rem; border-bottom:1px solid var(--border); background:rgba(11,18,36,.75); backdrop-filter: blur(10px); position:sticky; top:0; z-index: 100; }
.exam-wrap{ display:grid; grid-template-columns:320px 1fr; gap:1rem; max-width:1200px; margin:1rem auto; padding:0 1rem 2rem; }
.exam-sidebar{ padding:1rem; height:fit-content; position:sticky; top:72px; }
.palette{ display:grid; grid-template-columns:repeat(6,1fr); gap:.4rem; margin:.75rem 0; }
.palette button{ border:1px solid var(--border); background:#0e1630; color:var(--text); border-radius:10px; padding:.5rem; cursor:pointer; }
.palette button.current{ outline:2px solid var(--primary); }
.palette button.answered{ background: rgba(52,211,153,.2); border-color:rgba(52,211,153,.3); }
.palette button.flagged{ background: rgba(255,92,92,.18); border-color: rgba(255,92,92,.27); }
.exam-main{ padding:1rem 1.25rem; }
.q-header{ display:flex; align-items:flex-start; gap:.75rem; } .q-index{ font-weight:800; font-size:1.1rem; padding:.25rem .6rem; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid var(--border); }
.q-stem{ font-size:1.12rem; line-height:1.6; }
.q-media{
  margin: 1rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.1);
  border-radius: 12px;
  min-height: 100px;
}
.q-media img{
  max-width: 100%;
  max-height: 450px;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  border: 1px solid var(--border);
}
.q-options{ display:grid; gap:.5rem; margin:.75rem 0; }
.q-options .opt{ display:flex; gap:.6rem; align-items:flex-start; background:#0e1630; border:1px solid var(--border); border-radius:12px; padding:.7rem .9rem; cursor:pointer; }
.q-options .opt.correct{ background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.3); }
.q-options .opt.incorrect{ background: rgba(255,92,92,.1); border-color: rgba(255,92,92,.2); }
.q-options .opt input{ margin-top:.25rem; accent-color: var(--primary-2); }
.q-actions{ display:flex; gap:.5rem; }
.nav-bar{ display:flex; justify-content:flex-end; gap:.5rem; padding-top:.75rem; border-top:1px dashed var(--border); margin-top:.75rem; }

/* Review */
.review{ max-width:1100px; margin:1rem auto; padding:0 1rem 2rem; }
.summary{ padding:1rem 1.25rem; }
.summary-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin:.75rem 0; }
.summary-stats div{ background:#0e1630; border:1px solid var(--border); border-radius:12px; padding:.75rem; text-align:center; }
.review-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1rem;
}
.review-card .head { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); }
.review-card .body { padding: 1rem 1.25rem; display: grid; gap: 0.75rem; }
.review-card .body .why { background: #0e1630; border: 1px solid var(--border); padding: 0.75rem 1rem; border-radius: 10px; margin-top: 0.5rem; }
.review-card .media img { max-width: 100%; border-radius: 10px; }

/* Modal */
.modal-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999; align-items:center; justify-content:center; padding:1rem; }
.modal{ width:min(780px,96vw); background:#0e1630; border:1px solid var(--border); border-radius:16px; box-shadow: 0 24px 80px var(--shadow); }
.modal header{ padding:1rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal .content{ padding:1rem 1.25rem; line-height:1.7; max-height: 70vh; overflow-y: auto; }
.modal .content h4 { margin-top: 1rem; margin-bottom: 0.25rem; color: var(--primary-2); }
.modal .content .ai-report-section { border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; margin-bottom: 0.75rem; }
.modal .content .ai-report-section:last-child { border-bottom: none; margin-bottom: 0; }
.modal footer{ padding: .9rem 1.25rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap: 0.5rem; }
.modal footer.custom-footer { justify-content: space-between; }
.modal .close{ background:transparent; color:var(--text); border:1px solid var(--border); border-radius:8px; cursor:pointer; width:36px; height:36px; }

/* AI Assist toolbar */
.ai-toolbar{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 .75rem; }
.ai-toolbar .btn{ background:#0e1630; border:1px solid var(--border); color:var(--text); padding:.55rem .8rem; border-radius:10px; font-weight:700; cursor:pointer; }
.ai-toolbar .btn:hover{ transform: translateY(-1px); }

/* Palette legend dots */
.legend{ display:flex; gap:.75rem; align-items:center; font-size:.9rem; }
.legend .dot{ width:10px; height:10px; border-radius:999px; display:inline-block; border:1px solid var(--border); }
.legend .current{ background: var(--primary); }
.legend .answered{ background: rgba(52,211,153,.7); }
.legend .flagged{ background: rgba(255,92,92,.7); }
.legend .unseen{ background: rgba(255,255,255,.18); }

/* AI Assist Container */
.ai-assist-container { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); }
#aiPromptSelect { padding: 0.8rem 1.1rem; border-radius: 10px; border: 1px solid var(--border); background: #0e1630; color: var(--text); font-family: 'Inter', sans-serif; cursor: pointer; flex-grow: 0; min-width: 200px; }
.ai-assist-container > .btn { flex-shrink: 0; }

/* Styles for disabled AI controls */
.btn:disabled, select:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
#aiPromptSelect option:disabled { color: #777; }