:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; padding: 16px;
  background: #161512; color: #bababa;
  font: 16px/1.5 -apple-system, system-ui, sans-serif;
  padding-top: env(safe-area-inset-top);
}
.screen { max-width: 560px; margin: 0 auto; }
.hidden { display: none; }
h1 { font-weight: 600; letter-spacing: .02em; }
input, button {
  font: inherit; width: 100%; padding: 12px 14px; margin-bottom: 10px;
  border-radius: 8px; border: 1px solid #3a3934;
  background: #262421; color: #e8e8e8;
}
button { background: #4d7c3f; border-color: #4d7c3f; color: #fff; cursor: pointer; }
.link { width: auto; background: none; border: none; color: #8ab; padding: 4px; text-decoration: none; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.board { width: min(100%, calc(100vh - 260px)); aspect-ratio: 1; margin: 0 auto; }
.controls { display: flex; gap: 10px; max-width: 560px; margin: 14px auto 0; }
.status { text-align: center; min-height: 24px; color: #9a9a9a; }
.status.correct { color: #4d7c3f; font-weight: 600; }
.status.incorrect { color: #d36f6f; font-weight: 600; }
.error { color: #d36f6f; min-height: 24px; }
/* :not([hidden]) — иначе наш display:block (автор-стили) перебивает
   [hidden] из UA-стилшита браузера независимо от специфичности, т.к.
   автор-правила любой специфичности стоят выше UA-происхождения. */
#next-btn:not([hidden]) { max-width: 560px; margin: 14px auto 0; display: block; }

/* Общая шапка сайта (layout.js): #site-header — logo | nav | user-info */
#site-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  justify-content: space-between;
  max-width: 720px; margin: 0 auto 20px;
  padding-bottom: 12px; border-bottom: 1px solid #2a2925;
}
#site-header .brand { font-weight: 700; letter-spacing: .02em; color: inherit; text-decoration: none; }
#site-header .nav { display: flex; gap: 4px; flex-wrap: wrap; }
#site-header .nav-link {
  padding: 6px 10px; border-radius: 6px;
  color: #9a9a9a; text-decoration: none; font-size: 14px;
}
#site-header .nav-link.active { background: #262421; color: #e8e8e8; font-weight: 600; }
#site-header .user-info { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #9a9a9a; }
#site-header .user-info button.link { margin: 0; }

/* Заглушки модулей (/play, /openings, /endgame) */
.stub { text-align: center; padding-top: 40px; }
.stub p { color: #9a9a9a; max-width: 440px; margin: 0 auto 24px; }
.badge {
  display: inline-block; margin-bottom: 14px; padding: 4px 10px;
  border-radius: 999px; background: #3a3418; color: #d9b84a;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.btn-link {
  display: inline-block; padding: 12px 20px; border-radius: 8px;
  background: #4d7c3f; color: #fff; text-decoration: none; font-weight: 600;
}

/* Дашборд ("/") */
.dashboard-screen { max-width: 720px; margin: 0 auto; }
#greeting { text-align: center; margin-bottom: 24px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card {
  display: block; padding: 20px; border-radius: 10px;
  background: #1e1c19; border: 1px solid #3a3934;
  text-decoration: none; color: inherit;
}
.card h2 { margin: 8px 0 6px; font-size: 18px; }
.card-desc { color: #9a9a9a; font-size: 14px; margin: 0; }
.card-stats { color: #e8e8e8; font-weight: 600; margin: 0 0 4px; }
.card-active { border-color: #4d7c3f; background: #1e2a1a; }
.card-soon { opacity: 0.6; }

/* Панель фильтра по темам на /tactics */
.themes-panel { max-width: 560px; margin: 0 auto 14px; font-size: 14px; }
.themes-panel summary { cursor: pointer; color: #8ab; margin-bottom: 8px; }
.themes-list { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-top: 8px; }
.themes-list label { display: flex; align-items: center; gap: 4px; color: #bababa; font-weight: normal; }
.themes-list input { width: auto; margin: 0; padding: 0; }

/* История решений (/tactics/history) */
.history-screen { max-width: 640px; }
.history-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.history-table th, .history-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #2a2925; }
.history-table th { color: #9a9a9a; font-weight: 600; }
.history-table td.correct { color: #4d7c3f; font-weight: 600; }
.history-table td.incorrect { color: #d36f6f; font-weight: 600; }

/* Виджет "слабые темы" в карточке "Тактика" на дашборде */
.weak-themes { margin-top: 10px; font-size: 13px; }
.weak-themes p { margin: 2px 0; color: #d3a05a; }
.weak-themes-title { color: #9a9a9a !important; font-weight: 600; margin-bottom: 4px !important; }

/* Woodpecker (/woodpecker) */
.woodpecker-screen { max-width: 640px; }
.hint { color: #9a9a9a; font-size: 14px; }
.wp-set-card {
  padding: 14px; margin-bottom: 10px; border-radius: 8px;
  background: #1e1c19; border: 1px solid #3a3934;
}
.wp-set-card p { margin: 0 0 10px; }
.wp-set-card button { width: auto; padding: 8px 14px; margin: 0; }
.new-set-form { padding-top: 10px; }
.new-set-form label { display: block; margin-bottom: 10px; font-size: 14px; color: #bababa; }
.new-set-form input[type=number] { width: 100px; display: inline-block; margin: 0 0 0 8px; }
#summary-content p { text-align: center; }
#back-to-sets-btn { max-width: 300px; margin: 16px auto 0; display: block; }