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

:root {
  --mint:    #E1F5EE;
  --mint-d:  #1D9E75;
  --mint-dk: #085041;
  --lav:     #EEEDFE;
  --lav-d:   #534AB7;
  --amber:   #FAEEDA;
  --amber-d: #854F0B;
  --rose:    #FBEAF0;
  --rose-d:  #993556;
  --sky:     #E6F1FB;
  --sky-d:   #185FA5;
  --sand:    #F1EFE8;
  --sand-d:  #5F5E5A;
  --white:   #ffffff;
  --text:    #1e293b;
  --text-2:  #64748b;
  --text-3:  #94a3b8;
  --radius:  14px;
  --radius-s: 10px;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--sand);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: 80px;
}

/* NAV */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid #e2e8f0;
  display: flex;
  padding: 8px 0 12px;
  z-index: 100;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--text-3);
  font-size: 11px;
  transition: color .2s;
}
.nav-item.active, .nav-item:hover { color: var(--mint-d); }
.nav-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.nav-item.active .nav-icon { background: var(--mint); }

/* CARDS */
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid #e2e8f0;
}
.card-mint   { background: var(--mint);  border-color: #9FE1CB; }
.card-lav    { background: var(--lav);   border-color: #CECBF6; }
.card-amber  { background: var(--amber); border-color: #FAC775; }
.card-rose   { background: var(--rose);  border-color: #F4C0D1; }
.card-sky    { background: var(--sky);   border-color: #B5D4F4; }

/* STAT */
.stat-label { font-size: 11px; font-weight: 600; margin-bottom: 4px; }
.stat-value { font-size: 26px; font-weight: 700; }
.stat-mint  .stat-label { color: var(--mint-dk); }
.stat-mint  .stat-value { color: var(--mint-dk); }
.stat-lav   .stat-label { color: var(--lav-d); }
.stat-lav   .stat-value { color: var(--lav-d); }
.stat-amber .stat-label { color: var(--amber-d); }
.stat-amber .stat-value { color: var(--amber-d); }

/* PROGRESS */
.progress-bar { height: 8px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--mint-d); border-radius: 99px; transition: width .5s; }

/* CHIP */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 600;
}
.chip-mint  { background: var(--mint);  color: var(--mint-dk); }
.chip-lav   { background: var(--lav);   color: var(--lav-d); }
.chip-amber { background: var(--amber); color: var(--amber-d); }
.chip-rose  { background: var(--rose);  color: var(--rose-d); }
.chip-sky   { background: var(--sky);   color: var(--sky-d); }

/* BUTTONS */
.btn {
  display: block; width: 100%;
  padding: 14px; border-radius: var(--radius-s);
  font-size: 15px; font-weight: 600;
  border: none; cursor: pointer; transition: opacity .2s;
}
.btn:hover { opacity: .9; }
.btn-primary { background: var(--mint-d); color: white; }
.btn-outline { background: transparent; border: 2px solid var(--mint-d); color: var(--mint-d); }

/* QUIZ OPTIONS */
.option {
  padding: 12px 14px;
  border-radius: var(--radius-s);
  border: 1.5px solid #e2e8f0;
  background: var(--white);
  cursor: pointer;
  font-size: 14px;
  transition: all .2s;
  display: flex; align-items: center; gap: 10px;
}
.option:hover { border-color: var(--mint-d); background: var(--mint); }
.option.selected { border-color: var(--mint-d); background: var(--mint); }
.option.correct  { border-color: #1D9E75; background: #E1F5EE; color: var(--mint-dk); }
.option.wrong    { border-color: #E24B4A; background: #FCEBEB; color: #A32D2D; }
.option-key {
  width: 26px; height: 26px; border-radius: 6px;
  background: #f1f5f9; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* HEADER */
.page-header {
  background: var(--white);
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 50;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--mint); display: flex;
  align-items: center; justify-content: center;
}

/* LAYOUT */
.container { max-width: 480px; margin: 0 auto; padding: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }

/* BADGE LEVEL */
.level-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 99px;
  font-size: 13px; font-weight: 600;
}
.level-1 { background: var(--sand);  color: var(--sand-d); }
.level-2 { background: var(--sky);   color: var(--sky-d); }
.level-3 { background: var(--lav);   color: var(--lav-d); }
.level-4 { background: var(--amber); color: var(--amber-d); }

/* TOAST */
.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: #1e293b; color: white;
  padding: 10px 20px; border-radius: 99px;
  font-size: 14px; z-index: 200;
  opacity: 0; transition: opacity .3s;
  white-space: nowrap;
}
.toast.show { opacity: 1; }