/* ============================================================
   Khan SAT-1600 · Простой режим
   Author: Xudoyorxon Bunyodov / Худоёрхон Бунёдов
   ============================================================ */
.sm-wrap { max-width: 760px; margin: 0 auto; padding: 8px 0 30px; }

.sm-hello { text-align: center; margin-bottom: 22px; }
.sm-hi { font-size: 27px; font-weight: 800; color: #123A16; letter-spacing: -.02em; }
.sm-hi b { color: #1B5E20; }
.sm-sub { font-size: 15.5px; color: #7b8577; margin-top: 4px; }
.sm-streak { display: inline-block; margin-top: 10px; background: #FBF4DC; border: 1px solid #E8D9A6;
  border-radius: 999px; padding: 6px 16px; font-size: 13.5px; font-weight: 700; color: #8A6D14; }

.sm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.sm-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 26px 16px; border-radius: 20px; text-decoration: none; border: 1.5px solid #E0E7DD;
  background: #fff; color: #26312A; min-height: 152px; justify-content: center;
  transition: transform .24s cubic-bezier(.34,1.2,.48,1), box-shadow .28s, border-color .22s; }
.sm-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(18,42,22,.14); }
.sm-tile:active { transform: translateY(-1px) scale(.98); }
.sm-ic { font-size: 42px; line-height: 1; }
.sm-t { font-size: 17.5px; font-weight: 700; color: #123A16; margin-top: 6px; }
.sm-s { font-size: 13px; color: #8b9487; line-height: 1.35; }

.sm-tile.g { background: linear-gradient(165deg,#F3FAF1,#fff); border-color: #CFE3CB; }
.sm-tile.g:hover { border-color: #2E7D32; }
.sm-tile.y { background: linear-gradient(165deg,#FDF8E8,#fff); border-color: #E8DCB0; }
.sm-tile.y:hover { border-color: #C9A227; }
.sm-tile.b { background: linear-gradient(165deg,#EFF5FD,#fff); border-color: #CBDCF0; }
.sm-tile.b:hover { border-color: #3B6FB5; }
.sm-tile.p { background: linear-gradient(165deg,#F6F1FB,#fff); border-color: #DACFE8; }
.sm-tile.p:hover { border-color: #7B5AA6; }
.sm-tile.n { background: #FAFBF9; }

.sm-more { display: block; width: 100%; margin-top: 20px; padding: 14px; border-radius: 14px;
  border: 1.5px dashed #C9D5C5; background: transparent; color: #5f6f5f; font-size: 14.5px;
  cursor: pointer; transition: .2s; }
.sm-more:hover { border-color: #C9A227; background: #FDFAF0; color: #8A6D14; }
.sm-note { text-align: center; font-size: 12.5px; color: #9aa; margin-top: 8px; }

/* что прячем в простом режиме */
body.simple-on .topnav a[href*="modes"],
body.simple-on .topnav a[href*="plan"],
body.simple-on .topnav a[href*="leaderboard"],
body.simple-on .topnav a[href*="feed"],
body.simple-on .topnav a[href*="chat"],
body.simple-on #nav-next,
body.simple-on .nx-po { display: none !important; }

/* крупнее элементы — легче попасть пальцем */
body.simple-on .btn { min-height: 46px; font-size: 15.5px; }
body.simple-on .choice { min-height: 56px; font-size: 16px; padding: 15px 17px; }
body.simple-on .q-text { font-size: 17px; line-height: 1.7; }
body.simple-on .card, body.simple-on .panel { border-radius: 16px; }

/* выбор режима */
.sm-modes { display: flex; flex-direction: column; gap: 10px; }
.sm-mode { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 13px;
  border: 1.5px solid #E2E7DE; background: #fff; cursor: pointer; transition: .2s; }
.sm-mode:hover { border-color: #C9A227; }
.sm-mode.on { border-color: #1B5E20; background: #F4FAF2; }
.sm-mode input { margin-top: 3px; accent-color: #1B5E20; }
.sm-mode b { display: block; font-size: 15.5px; color: #123A16; }
.sm-mode span { font-size: 13px; color: #7b8577; line-height: 1.45; }

@media (max-width: 560px) {
  .sm-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
  .sm-tile { min-height: 130px; padding: 20px 10px; }
  .sm-ic { font-size: 34px; }
  .sm-t { font-size: 15px; }
  .sm-s { font-size: 11.5px; }
  .sm-hi { font-size: 22px; }
}