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

:root {
  --bg:        #f5f4f0;
  --bg2:       #ffffff;
  --bg3:       #eeecea;
  --border:    rgba(0,0,0,0.07);
  --border2:   rgba(0,0,0,0.13);
  --text:      #1e1c1a;
  --text2:     #6b6560;
  --text3:     #b0aba5;
  --accent:    #2f7a5e;
  --accent2:   #1f5c45;
  --accent-bg: rgba(47,122,94,0.07);
  --accent-bd: rgba(47,122,94,0.25);
  --danger:    #c0392b;
  --radius:    10px;
  --radius-lg: 16px;
  --sidebar-w: 252px;
  --font:      'DM Sans', system-ui, sans-serif;
  --mono:      'DM Mono', monospace;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
}

html, body { height:100%; background:var(--bg); color:var(--text); font-family:var(--font); font-size:15px; line-height:1.6; }

#app { display:flex; min-height:100vh; }

/* ── Sidebar ── */
#sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 1.75rem 0 1.25rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

#logo-area {
  display:flex; align-items:center; gap:10px;
  padding: 0 1.25rem 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.logo-dot { width:10px; height:10px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.logo-text { font-size:17px; color:var(--text2); letter-spacing:.01em; }
.logo-text strong { color:var(--text); font-weight:600; }

/* ── Load area ── */
#load-area {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .75rem;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.load-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text3);
  font-weight: 500;
}

.load-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

#file-combo {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-size: 12px;
  font-family: var(--font);
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  appearance: auto;
}
#file-combo:focus { outline: 2px solid var(--accent-bd); outline-offset: 1px; }
#file-combo:disabled { opacity:.5; }

.btn-icon {
  width: 30px; height: 30px;
  display: flex; align-items:center; justify-content:center;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text2);
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
}
.btn-icon:hover { background:var(--bg3); color:var(--text); }

.btn-file-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--font);
  color: var(--text2);
  background: var(--bg);
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s;
  width: 100%;
  justify-content: center;
}
.btn-file-label:hover { background:var(--accent-bg); border-color:var(--accent-bd); color:var(--accent2); }

.load-status {
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--text3);
  min-height: 16px;
  transition: color .2s;
}
.load-status.ok    { color: var(--accent); }
.load-status.error { color: var(--danger); }

/* ── Sidebar nav ── */
#section-nav {
  flex:1; padding:0 .75rem;
  display:flex; flex-direction:column; gap:2px;
}

.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:var(--radius);
  cursor:pointer; transition:background .15s, color .15s;
  font-size:13px; color:var(--text3);
  border:none; background:none; text-align:left; width:100%;
}
.nav-item:hover { background:var(--bg3); color:var(--text2); }
.nav-item.active { background:var(--accent-bg); color:var(--accent); border:1px solid var(--accent-bd); }
.nav-item.done   { color:var(--text2); }

.nav-num {
  width:20px; height:20px; border-radius:50%;
  border:1px solid currentColor;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-family:var(--mono); flex-shrink:0;
}
.nav-item.active .nav-num { background:var(--accent); border-color:var(--accent); color:#fff; }
.nav-item.done   .nav-num { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); }
.nav-label { font-size:12.5px; }

/* ── Progress ── */
#progress-area {
  padding:1.25rem 1.25rem 0;
  border-top:1px solid var(--border); margin-top:auto;
}
#progress-label { font-size:11.5px; color:var(--text3); margin-bottom:8px; font-family:var(--mono); }
#progress-bar-track { height:4px; background:var(--bg3); border-radius:99px; overflow:hidden; }
#progress-bar-fill { height:100%; width:0%; background:var(--accent); border-radius:99px; transition:width .4s ease; }

/* ── Main content ── */
#content {
  flex:1; padding:2.5rem 3rem;
  max-width:780px; min-height:100vh;
  display:flex; flex-direction:column;
}

#section-header {
  display:flex; align-items:flex-start; gap:16px;
  margin-bottom:2.5rem; padding-bottom:1.75rem;
  border-bottom:1px solid var(--border);
}
#section-icon-wrap {
  width:48px; height:48px; border-radius:var(--radius);
  background:var(--accent-bg); border:1px solid var(--accent-bd);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
#section-title    { font-size:21px; font-weight:600; color:var(--text); margin-bottom:3px; }
#section-subtitle { font-size:13px; color:var(--text2); }

/* ── Questions ── */
#questions-container { display:flex; flex-direction:column; gap:2rem; flex:1; }
.question-block { display:flex; flex-direction:column; gap:10px; }
.question-text {
  font-size:14.5px; font-weight:500; color:var(--text);
  display:flex; align-items:baseline; gap:8px;
}
.question-tag {
  font-size:10px; font-family:var(--mono);
  background:#fef3c7; color:#92400e;
  padding:2px 7px; border-radius:99px; border:1px solid #fde68a; white-space:nowrap;
}
.options-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:7px; }

.option-btn {
  display:flex; align-items:center; gap:10px;
  padding:9px 13px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text2);
  font-size:13px; font-family:var(--font);
  cursor:pointer; text-align:left;
  transition:all .15s; line-height:1.4;
  box-shadow:var(--shadow-sm);
}
.option-btn:hover   { background:var(--bg3); border-color:var(--border2); color:var(--text); box-shadow:var(--shadow-md); }
.option-btn.selected{ background:var(--accent-bg); border-color:var(--accent-bd); color:var(--accent2); box-shadow:none; }

.opt-indicator {
  width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--border2); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s; background:var(--bg);
}
.option-btn.selected .opt-indicator { background:var(--accent); border-color:var(--accent); }
.opt-indicator svg  { display:none; }
.option-btn.selected .opt-indicator svg { display:block; }
.opt-indicator-sq   { border-radius:4px; }

/* ── Nav buttons ── */
#nav-buttons {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:2rem; margin-top:2rem; border-top:1px solid var(--border);
}
#nav-right { display:flex; align-items:center; gap:12px; }
#section-counter { font-size:12px; font-family:var(--mono); color:var(--text3); }

.btn-primary, .btn-secondary, .btn-submit {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; font-size:13.5px; font-family:var(--font); font-weight:500;
  border-radius:var(--radius); cursor:pointer; transition:all .15s; border:none;
}
.btn-primary  { background:var(--bg2); color:var(--text); border:1px solid var(--border2); box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--bg3); box-shadow:var(--shadow-md); }
.btn-secondary { background:transparent; color:var(--text2); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--bg2); color:var(--text); }
.btn-secondary:disabled { opacity:.35; cursor:default; }
.btn-submit { background:var(--accent); color:#fff; font-weight:600; box-shadow:0 2px 8px rgba(47,122,94,.25); }
.btn-submit:hover   { background:var(--accent2); box-shadow:0 4px 12px rgba(47,122,94,.3); }
.btn-submit:disabled{ opacity:.4; cursor:default; box-shadow:none; }

/* ── Modal ── */
#overlay {
  position:fixed; inset:0;
  background:rgba(30,28,26,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:100; backdrop-filter:blur(3px);
}
#modal {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--radius-lg); padding:2.5rem 2rem;
  max-width:420px; width:90%; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  box-shadow:var(--shadow-md);
}

#modal-icon {
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.modal-icon-ok { background:var(--accent-bg); border:1px solid var(--accent-bd); color:var(--accent); }
.modal-icon-err{ background:rgba(192,57,43,.08); border:1px solid rgba(192,57,43,.25); color:var(--danger); }

#modal-title { font-size:20px; font-weight:600; color:var(--text); }
#modal-body  { font-size:13.5px; color:var(--text2); line-height:1.6; }
#modal-meta  {
  background:var(--bg3); border-radius:var(--radius); border:1px solid var(--border);
  padding:10px 16px; width:100%;
  font-size:12px; font-family:var(--mono); color:var(--text2);
  text-align:left; line-height:1.9;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bg3); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--border2); }

/* ── Responsive ── */
@media (max-width: 768px) {
  #sidebar  { display:none; }
  #content  { padding:1.5rem 1.25rem; }
  .options-grid { grid-template-columns:1fr; }
}