:root {
  color-scheme: dark;
  --bg: #0f0f0f;
  --chrome: #171717;
  --card: #202123;
  --card-2: #282828;
  --line: #3a3a3a;
  --text: #f5f5f5;
  --muted: #b4b4b4;
  --soft: #8f8f8f;
  --danger: #ef4444;
  --violet: #7c74ff;
  --teal: #5dc9bf;
  --blue: #84a6f5;
  --amber: #e8b55e;
  --pink: #f48484;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Play, Arial, sans-serif;
}

button, input, select, textarea {
  font: inherit;
}

.app {
  width: calc(100% - 48px);
  margin: 0 auto;
  padding: 4px 0 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 4px 0 10px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  order: 2;
  margin-left: auto;
}

.home-logo {
  order: 0;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}

.home-logo:hover,
.home-logo:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.app-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: 0.92;
}

h1, h2, h3, p { margin: 0; }

.muted {
  color: var(--muted);
}

.god-card {
  max-width: 760px;
}

.prayer-text {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  color: #e8e8e8;
  font-size: 18px;
  line-height: 1.45;
}

.prayer-text p:first-child,
.prayer-text p:last-child {
  color: #ffffff;
  font-weight: 700;
}

.tabs {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.sport-nav {
  position: relative;
}

.sport-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 2px);
  z-index: 10;
  min-width: 194px;
  display: grid;
  gap: 0;
  padding: 6px 0;
  border: 1px solid #2f2f2f;
  border-radius: 4px;
  background: #1f1f1f;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.46);
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 90ms ease, transform 90ms ease;
}

.sport-nav:hover .sport-menu,
.sport-nav:focus-within .sport-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sport-menu button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f5f5f5;
  min-height: 28px;
  padding: 0 20px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
}

.sport-menu button:hover,
.sport-menu button.active {
  background: #303030;
  color: #ffffff;
}

.tab, .btn, .icon-btn, .profile-btn {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  min-height: 34px;
  padding: 0 18px;
  font-weight: 700;
  cursor: pointer;
}

.profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 38px;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 12px;
}

.profile-icon {
  line-height: 1;
}

.profile-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab:hover, .btn:hover, .icon-btn:hover {
  background: var(--card-2);
}

.tab.active {
  background: var(--card-2);
}

.btn.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: #6b6b6b;
}

.icon-btn {
  width: 38px;
  padding: 0;
}

.topbar .tab,
.topbar .icon-btn,
.topbar .profile-btn {
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 0 9px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}

.topbar .profile-btn {
  max-width: 170px;
  color: var(--text);
  font-weight: 600;
}

.topbar .icon-btn {
  width: 30px;
}

.topbar .tab:hover,
.topbar .icon-btn:hover,
.topbar .profile-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.topbar .tab.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.view {
  min-height: calc(100vh - 60px);
}

.home-lightweight {
  min-height: calc(100vh - 48px);
}

.home-lightweight-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 58px);
  min-height: 760px;
  border: 0;
  border-radius: 8px;
  background: #080d14;
}

.layout {
  display: grid;
  grid-template-columns: minmax(520px, 0.9fr) minmax(560px, 1fr);
  gap: 24px;
  align-items: start;
}

.layout > *,
.boxing-layout > * {
  min-width: 0;
}

.stack {
  display: grid;
  gap: 12px;
}

.card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  padding: 18px;
}

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

.between {
  justify-content: space-between;
}

.workout-stack {
  gap: 10px;
}

.workout-group {
  padding: 12px 14px;
}

.workout-group h2 {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 16px;
}

.sport-picker,
.sport-placeholder {
  max-width: 1040px;
  display: grid;
  gap: 18px;
}

.sport-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.sport-table-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) 130px 140px 130px 100px;
  min-width: 720px;
  border-top: 1px solid var(--line);
}

.sport-table-row:first-child {
  border-top: 0;
}

.sport-table-row span {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--muted);
  border-left: 1px solid var(--line);
}

.sport-table-row span:first-child {
  border-left: 0;
}

.sport-table-row.head span {
  min-height: 38px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}

.sport-table-row .sport-name {
  color: #f5f5f5;
  font-weight: 700;
}

.sport-name-link {
  width: auto;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sport-name-link:hover {
  color: #d7e7ff;
}

.sport-table-row .num {
  justify-content: flex-end;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sport-table-row .sport-economy {
  justify-content: center;
}

.sport-table-row input {
  width: 16px;
  height: 16px;
  accent-color: #8f8f8f;
}

.sport-table-row .small-btn {
  min-height: 28px;
  padding: 0 12px;
}

.sport-page {
  display: grid;
  gap: 14px;
  max-width: 1120px;
}

.boxing-page,
.bodybuilding-page {
  max-width: none;
}

.boxing-layout {
  display: grid;
  grid-template-columns: minmax(560px, 0.9fr) minmax(560px, 1fr);
  gap: 18px;
  align-items: start;
}

.boxing-layout .chart-wrap {
  position: sticky;
  top: 44px;
  min-height: 520px;
  height: calc(100vh - 190px);
}

.boxing-graph-only .chart-wrap {
  height: calc(100vh - 180px);
  min-height: 560px;
}

.bodybuilding-charts {
  display: grid;
  gap: 12px;
}

.bodybuilding-charts .chart-wrap {
  position: static;
  height: min(355px, calc((100vh - 124px) / 2));
  min-height: 280px;
  padding: 14px;
  gap: 8px;
}

.bodybuilding-charts .chart-stage {
  min-height: 150px;
}

.bodybuilding-charts .chart-wrap h2 {
  font-size: 20px;
}

.bodybuilding-charts .chart-periods button {
  min-height: 23px;
  padding: 0 7px;
  font-size: 11px;
}

.bodybuilding-charts .chart-custom-range input {
  width: 122px;
  min-height: 25px;
}

.bodybuilding-charts .chart-legend {
  gap: 6px 14px;
}

.sport-page-head {
  display: grid;
  gap: 4px;
}

.sport-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sport-subtabs button {
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 0 10px;
  font-size: 14px;
  cursor: pointer;
}

.sport-subtabs button.active,
.sport-subtabs button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.equipment-card {
  display: grid;
  gap: 12px;
}

.equipment-top {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.equipment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 8px;
}

.equipment-summary div {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
}

.equipment-summary span {
  color: var(--muted);
  font-size: 12px;
}

.equipment-summary strong {
  color: var(--text);
  font-size: 20px;
  white-space: nowrap;
}

.equipment-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.equipment-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr 1.2fr 1fr 0.7fr;
  min-width: 780px;
  border-top: 1px solid var(--line);
}

.equipment-row:first-child {
  border-top: 0;
}

.equipment-row span {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--text);
  border-left: 1px solid var(--line);
}

.equipment-row span:first-child {
  border-left: 0;
}

.equipment-row input {
  width: 100%;
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 0 8px;
}

.equipment-row input:hover,
.equipment-row input:focus {
  border-color: var(--line);
  background: #202123;
  outline: none;
}

.equipment-row .money-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.equipment-row.head span {
  min-height: 38px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}

.status-badge {
  border: 1px solid #444;
  border-radius: 999px;
  background: #2a2a2a;
  color: #f5f5f5;
  padding: 3px 9px;
  font-size: 12px;
  font-style: normal;
}

.static-check {
  width: 34px;
  height: 20px;
  position: relative;
  display: inline-block;
  border: 1px solid #444;
  border-radius: 999px;
  background: #202123;
  padding: 0;
  cursor: pointer;
}

.static-check::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #8f8f8f;
}

.static-check.on {
  background: #2f4f49;
}

.static-check.on::after {
  left: 17px;
  background: #d7ffef;
}

.finance-page {
  display: grid;
  gap: 14px;
}

.finance-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.finance-stat {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.finance-stat span {
  color: var(--muted);
  font-size: 13px;
}

.finance-stat strong {
  font-size: 28px;
  line-height: 1;
}

.finance-stat.income strong {
  color: #77d49d;
}

.finance-stat.expense strong {
  color: #f48484;
}

.finance-stat.balance strong {
  color: #84a6f5;
}

.finance-card {
  display: grid;
  gap: 12px;
}

.finance-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.finance-row {
  display: grid;
  min-width: 900px;
  border-top: 1px solid var(--line);
}

.monthly-table .finance-row {
  grid-template-columns: 1.1fr repeat(8, 1fr);
}

.monthly-expense-table .finance-row {
  grid-template-columns: 82px 150px minmax(250px, 1.7fr) repeat(9, 110px) 54px;
  min-width: 1540px;
}

.monthly-expense-table .finance-row span {
  min-height: 38px;
  padding: 0 9px;
}

.monthly-expense-group {
  background: rgba(255, 255, 255, 0.035);
  font-weight: 700;
}

.monthly-expense-group span:nth-child(2) {
  gap: 8px;
}

.monthly-expense-group .monthly-category-input {
  min-width: 0;
  padding: 0 4px;
  font-weight: 700;
}

.monthly-expense-child {
  background: rgba(255, 255, 255, 0.018);
}

.monthly-expense-child input {
  min-width: 0;
}

.monthly-expense-total {
  background: rgba(255, 255, 255, 0.055);
  font-weight: 700;
}

.expenses-table .finance-row {
  grid-template-columns: 1fr 1.5fr 0.9fr 1fr 0.9fr;
}

.finance-row:first-child {
  border-top: 0;
}

.finance-row span {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--text);
  border-left: 1px solid var(--line);
}

.finance-row span:first-child {
  border-left: 0;
}

.finance-row.head span {
  min-height: 38px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}

.finance-row .num {
  justify-content: flex-end;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.health-page {
  display: grid;
  gap: 14px;
}

.health-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.health-stat {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.health-stat span {
  color: var(--muted);
  font-size: 13px;
}

.health-stat strong {
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.health-card {
  display: grid;
  gap: 14px;
}

.health-add-row {
  display: grid;
  gap: 10px;
  align-items: center;
}

.health-add-task,
.health-add-prevention,
.health-add-dental {
  grid-template-columns: minmax(220px, 1fr) minmax(130px, 0.5fr) minmax(150px, 0.6fr) 140px 120px auto;
}

.health-add-expense {
  grid-template-columns: minmax(260px, 1fr) 170px 140px 130px auto;
}

.health-add-row input,
.health-add-row select,
.health-row input,
.health-row select {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1f1f1f;
  color: var(--text);
  padding: 0 9px;
}

.health-row input,
.health-row select {
  min-height: 28px;
  border-color: transparent;
  background: transparent;
}

.health-row input:hover,
.health-row input:focus,
.health-row select:hover,
.health-row select:focus,
.health-add-row input:focus,
.health-add-row select:focus {
  border-color: #555;
  background: #202123;
  outline: none;
}

.health-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.health-row {
  display: grid;
  min-width: 980px;
  border-top: 1px solid var(--line);
}

.health-row:first-child {
  border-top: 0;
}

.health-row span {
  min-height: 42px;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 10px;
  color: var(--text);
  border-left: 1px solid var(--line);
}

.health-row span:first-child {
  border-left: 0;
}

.health-row.head span {
  min-height: 38px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}

.health-row .num,
.health-row .money-input {
  justify-content: flex-end;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.health-overview-table .health-row {
  grid-template-columns: 120px 140px 160px minmax(260px, 1fr) 140px 130px;
}

.health-people-table .health-row {
  grid-template-columns: minmax(180px, 1fr) 150px 160px 180px;
  min-width: 720px;
}

.health-task-table .health-row {
  grid-template-columns: 135px 140px 150px minmax(260px, 1fr) 130px 120px 140px 58px;
  min-width: 1230px;
}

.health-expense-table .health-row {
  grid-template-columns: 135px 170px minmax(280px, 1fr) 130px 130px 58px;
  min-width: 920px;
}

.health-prevention-table .health-row {
  grid-template-columns: 140px 160px minmax(230px, 1fr) 150px 135px 135px 120px 140px 58px;
  min-width: 1270px;
}

.health-dental-table .health-row {
  grid-template-columns: 130px 130px 180px minmax(220px, 1fr) 125px 135px 120px 130px minmax(180px, 0.8fr) 58px;
  min-width: 1420px;
}

.health-empty {
  padding: 16px;
  color: var(--muted);
}

.household-page {
  display: grid;
  gap: 14px;
  max-width: 980px;
}

.household-summary {
  max-width: 760px;
}

.household-table .finance-row {
  grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(130px, 1fr));
  min-width: 680px;
}

.rest-page {
  max-width: 1120px;
  display: grid;
  gap: 14px;
}

.rest-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.rest-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) 120px 150px 140px 140px 130px;
  min-width: 910px;
  border-top: 1px solid var(--line);
}

.rest-row:first-child {
  border-top: 0;
}

.rest-row span {
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px 12px;
  color: var(--text);
  border-left: 1px solid var(--line);
}

.rest-row span:first-child {
  border-left: 0;
}

.rest-row.head span {
  min-height: 38px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}

.rest-row small {
  color: var(--muted);
}

.rest-row input,
.rest-row select {
  min-height: 30px;
}

.property-page {
  max-width: none;
  display: grid;
  gap: 14px;
}

.property-page .layout {
  grid-template-columns: minmax(860px, 900px) minmax(520px, 1fr);
  gap: 24px;
}

.property-page .chart-wrap {
  width: 100%;
  min-width: 0;
}

.property-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.property-inventory {
  min-width: 0;
  overflow: hidden;
}

.property-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(160px, 0.8fr);
  min-width: 520px;
  border-top: 1px solid var(--line);
}

.property-inventory .property-row {
  grid-template-columns: minmax(190px, 1.2fr) 128px 126px 88px 112px 156px;
  min-width: 820px;
}

.property-row:first-child {
  border-top: 0;
}

.property-row span {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--text);
  border-left: 1px solid var(--line);
}

.property-row span:first-child {
  border-left: 0;
}

.property-row.head span {
  min-height: 38px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}

.property-row .num {
  justify-content: flex-end;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.property-row input {
  width: 100%;
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 0 8px;
}

.property-row input:hover,
.property-row input:focus {
  border-color: var(--line);
  background: #202123;
  outline: none;
}

.property-actions {
  display: flex !important;
  gap: 8px;
  align-items: center;
}

.property-actions .small-btn {
  min-width: auto;
}

.property-add-row span {
  min-height: 42px;
}

.expense-group span:first-child {
  gap: 8px;
  font-weight: 700;
}

.expense-child {
  background: rgba(255, 255, 255, 0.025);
}

.expense-child span:first-child {
  padding-left: 42px;
}

.expense-child.add-row span {
  min-height: 38px;
}

.group-toggle {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #484848;
  border-radius: 5px;
  background: #242424;
  color: var(--text);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.group-toggle:hover {
  background: #303030;
}

.finance-row input {
  width: 100%;
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 0 8px;
}

.finance-row .num input {
  text-align: right;
}

.finance-row input:hover,
.finance-row input:focus {
  border-color: var(--line);
  background: #202123;
  outline: none;
}

.exercise-list {
  display: grid;
  gap: 4px;
}

.exercise-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 58px auto;
  gap: 10px;
  align-items: center;
  min-height: 32px;
  padding: 3px 0;
}

.exercise-row h3, .timer-name {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.15;
}

.exercise-count {
  color: var(--text);
  text-align: right;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.actions {
  display: flex;
  gap: 8px;
}

.weight-input {
  width: 92px;
}

.small-btn {
  min-width: 46px;
  min-height: 28px;
  padding: 0 10px;
}

.danger:hover {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.16);
}

.summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  padding: 16px;
}

.stat span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.stat strong {
  display: block;
  margin: 8px 0;
  font-size: 24px;
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1f1f21;
  color: var(--text);
  min-height: 36px;
  padding: 0 10px;
}

textarea {
  min-height: 76px;
  padding-top: 10px;
  resize: vertical;
}

.quick-meals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quick-meal {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1f1f21;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.quick-meal:hover {
  background: var(--card-2);
  color: var(--text);
}

.quick-meal input {
  width: 15px;
  height: 15px;
  min-height: 0;
  flex: 0 0 auto;
  accent-color: #8f8f8f;
}

.nutrition-week {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.nutrition-day,
.nutrition-shopping-group,
.nutrition-cooking-block,
.nutrition-recipe {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
}

.nutrition-day h3,
.nutrition-shopping-group h3,
.nutrition-cooking-block h3,
.nutrition-recipe h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.nutrition-meal-list {
  display: grid;
  gap: 8px;
}

.nutrition-meal {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.nutrition-meal p,
.nutrition-meal small,
.nutrition-cooking-block p,
.nutrition-recipe p,
.nutrition-recipe small {
  margin: 0;
}

.nutrition-meal p,
.nutrition-meal small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.nutrition-check {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.nutrition-check input {
  width: 16px;
  height: 16px;
  min-height: 0;
  accent-color: #8f8f8f;
}

.nutrition-shopping {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
  gap: 12px;
}

.nutrition-shopping-page {
  max-width: none;
}

.nutrition-shopping-page > .card {
  width: 100%;
}

.shopping-progress {
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #171717;
}

.shopping-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #7f8ea3;
  transition: width 160ms ease;
}

.shopping-filters {
  gap: 6px;
}

.nutrition-shopping-add {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) 160px 130px 100px minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.nutrition-shopping-group.complete {
  border-color: #4f5b4f;
  background: #232723;
}

.nutrition-shopping-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(120px, 1fr) 90px 76px 118px minmax(100px, 0.8fr) 34px 34px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.nutrition-shopping-row.bought {
  opacity: 0.74;
}

.nutrition-shopping-row.bought .nutrition-check span {
  text-decoration: line-through;
  color: var(--muted);
}

.nutrition-shopping-row strong {
  color: var(--text);
  text-align: right;
}

.nutrition-shopping-row input,
.nutrition-shopping-row select,
.nutrition-shopping-add input,
.nutrition-shopping-add select {
  min-width: 0;
  min-height: 30px;
  padding: 4px 8px;
  font-size: 13px;
}

.nutrition-shopping-row small {
  color: var(--muted);
  font-size: 12px;
}

.nutrition-shopping-row .small-btn {
  min-width: 0;
  width: 34px;
  height: 30px;
  padding: 0;
}

.nutrition-shopping-row .active-note {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.shopping-comment {
  grid-column: 1 / -1;
  min-height: 58px;
  resize: vertical;
}

.nutrition-cooking,
.nutrition-recipes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.nutrition-cooking-block ol,
.nutrition-recipe ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.nutrition-cooking-block .btn,
.nutrition-recipe .btn {
  justify-self: start;
}

.nutrition-recipe .actions {
  justify-content: start;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .nutrition-shopping-add {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nutrition-shopping-add .btn {
    grid-column: 1 / -1;
  }

  .nutrition-shopping-row {
    grid-template-columns: minmax(160px, 1fr) 90px 38px 38px;
  }

  .nutrition-shopping-row > input[data-shopping-field$=":title"],
  .nutrition-shopping-row > select,
  .nutrition-shopping-row > small {
    grid-column: 1 / -1;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.nutrition-settings-grid {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
}

.nutrition-settings-grid .btn {
  justify-self: start;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.history {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}

.history-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
}

.chart-wrap {
  position: sticky;
  top: 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: min(660px, calc(100vh - 150px));
  min-height: 520px;
}

.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}

.chart-periods {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1b1b1d;
}

.chart-periods button {
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
}

.chart-periods button:hover,
.chart-periods button.active {
  background: #303033;
  color: var(--text);
}

.chart-custom-range {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}

.chart-custom-range[hidden] {
  display: none;
}

.chart-custom-range input {
  width: 136px;
  min-height: 28px;
  padding: 0 7px;
  border-radius: 7px;
  font-size: 12px;
}

.chart-stage {
  position: relative;
  flex: 1;
  min-height: 240px;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.chart-wrap canvas {
  cursor: crosshair;
}

.chart-tooltip {
  position: absolute;
  top: 8px;
  z-index: 3;
  min-width: 220px;
  max-width: min(320px, calc(100% - 20px));
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  border: 1px solid #454955;
  border-radius: 10px;
  background: #242936;
  color: var(--text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
  pointer-events: none;
}

.chart-tooltip[hidden] {
  display: none;
}

.chart-tooltip strong {
  margin-bottom: 3px;
  color: #c9ced8;
  font-size: 13px;
}

.chart-tooltip span {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.chart-tooltip i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--series-color);
}

.chart-tooltip b {
  font-weight: 400;
}

.chart-tooltip em {
  color: #fff;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  min-height: 20px;
}

.chart-series-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}

.chart-series-toggle:hover {
  color: var(--text);
}

.chart-series-toggle.disabled {
  color: #656565;
}

.chart-series-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--series-color);
  transition: opacity 120ms ease;
}

.chart-series-toggle.disabled .chart-series-dot {
  opacity: 0.24;
}

.nutrition-charts {
  position: static;
  display: grid;
  gap: 12px;
}

.nutrition-charts .chart-wrap {
  position: static;
  height: min(355px, calc((100vh - 124px) / 2));
  min-height: 280px;
  padding: 14px;
  gap: 8px;
}

.nutrition-charts .chart-stage {
  min-height: 150px;
}

.nutrition-charts .chart-wrap h2 {
  font-size: 20px;
}

.nutrition-charts .chart-periods button {
  min-height: 23px;
  padding: 0 7px;
  font-size: 11px;
}

.nutrition-charts .chart-custom-range input {
  width: 122px;
  min-height: 25px;
}

.nutrition-charts .chart-legend {
  gap: 6px 14px;
}

.nutrition-charts .chart-series-toggle {
  font-size: 12px;
}

.finance-graph-only .chart-wrap {
  height: calc(100vh - 108px);
  min-height: 620px;
}

.timer-row {
  display: grid;
  grid-template-columns: 1fr 120px auto auto auto;
  gap: 10px;
  align-items: center;
}

.kefir-task-row {
  grid-template-columns: 1fr 120px auto auto;
}

.time {
  text-align: right;
  font-size: 20px;
  font-weight: 800;
}

.wheel {
  height: calc(100vh - 78px);
  min-height: 760px;
  padding: 10px;
}

.plan-shell {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  height: calc(100vh - 78px);
  min-height: 720px;
}

.plan-header-grid,
.plan-body-grid {
  display: grid;
  grid-template-columns: 70px repeat(7, minmax(150px, 1fr));
}

.plan-header-grid {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #202123;
  border-bottom: 1px solid var(--line);
}

.plan-scroll {
  height: calc(100% - 72px);
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-color: #6b6b6b #202123;
}

.plan-timezone,
.plan-day-head,
.plan-time,
.plan-slot {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.plan-timezone {
  padding: 14px 10px;
  color: var(--text);
  font-weight: 700;
}

.plan-day-head {
  min-height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  color: var(--text);
}

.plan-day-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.plan-day-head strong {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 20px;
}

.plan-day-head.today strong {
  background: #2f6fed;
}

.plan-time {
  min-height: 72px;
  padding: 10px 10px 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.plan-slot {
  position: relative;
  min-height: 72px;
  padding: 0 10px;
  color: var(--muted);
  cursor: crosshair;
}

.plan-slot:hover {
  background: rgba(255, 255, 255, 0.025);
}

.plan-body-grid > :nth-last-child(-n + 8) {
  border-bottom: 0;
}

.plan-event {
  position: absolute;
  left: 10px;
  right: 10px;
  z-index: 1;
  padding: 5px 8px;
  border-radius: 8px;
  background: #32444b;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  cursor: default;
}

.plan-event strong,
.plan-event span {
  display: block;
}

.plan-event span {
  margin-top: 3px;
  color: #d2d8da;
  font-size: 12px;
}

.plan-event.compact-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.plan-event.compact-event strong,
.plan-event.compact-event span {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
}

.plan-event.compact-event span {
  margin-top: 0;
  text-align: right;
}

.plan-event.muted-event {
  z-index: 0;
  background: rgba(116, 123, 128, 0.18);
  color: #aab0b4;
  border: 1px solid rgba(170, 176, 180, 0.12);
}

.plan-event.muted-event span {
  color: #8f969b;
}

.plan-event.custom-event {
  z-index: 2;
  background: #3d4d63;
  border: 1px solid rgba(132, 166, 245, 0.42);
  cursor: pointer;
}

.plan-event.custom-event:hover {
  background: #475a74;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.62);
  z-index: 20;
}

.modal {
  width: min(440px, 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  padding: 20px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.36);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.modal-form {
  display: grid;
  gap: 12px;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.auth-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.auth-error {
  min-height: 18px;
  color: var(--danger);
  font-size: 13px;
}

@media (max-width: 980px) {
  .layout, .summary, .form-grid, .finance-summary, .equipment-top, .equipment-summary, .boxing-layout {
    grid-template-columns: 1fr;
  }

  .boxing-layout .chart-wrap {
    position: static;
    height: 420px;
  }

  .chart-wrap {
    position: static;
    height: 420px;
  }

  .nutrition-charts {
    position: static;
  }

  .nutrition-charts .chart-wrap {
    height: 340px;
  }

  .sport-menu {
    min-width: 150px;
  }

  .timer-row {
    grid-template-columns: 1fr;
  }

  .time {
    text-align: left;
  }
}