/* ==========================================================================
   Max Personal Trainer CRM — application shell, components, pages
   ========================================================================== */

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--blue); text-decoration: none; }
::selection { background: rgba(47,107,255,.4); }

/* Scrollbars ---------------------------------------------------------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #06090E; }
::-webkit-scrollbar-thumb { background: #22272F; border-radius: 6px; border: 3px solid #06090E; }
::-webkit-scrollbar-thumb:hover { background: #313842; }

/* icon wrapper emitted by icons.js — sizing rules target the inner <svg> */
.ico { display: inline-flex; align-items: center; justify-content: center; }
.ico svg { display: block; }

/* ==========================================================================
   Shell
   ========================================================================== */

.shell { display: flex; min-height: 100vh; }

.main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 22px 32px 46px var(--gutter);
  background:
    radial-gradient(1200px 600px at 18% -10%, rgba(24,38,66,.35), transparent 70%),
    var(--bg);
}

/* --- Sidebar ---------------------------------------------------------- */

.rail {
  flex: 0 0 var(--rail-w);
  width: var(--rail-w);
  background: var(--sidebar);
  border-right: 1px solid #14161A;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* woven-leather grain, drawn rather than bitmapped */
.rail::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.5) 0 1px, transparent 1px 4px),
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.05), transparent 60%);
}

.rail__logo { position: relative; padding: 50px 24px 49px; }

.logo-patch {
  position: relative;
  height: 125px;
  border-radius: 14px;
  background: linear-gradient(180deg, #17181C 0%, #0A0B0E 55%, #121317 100%);
  border: 2px solid #2A2C31;
  box-shadow: 0 6px 18px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.logo-patch::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 9px;
  pointer-events: none;
}
.logo-patch__max {
  font-family: var(--font-head);
  font-weight: 700;
  font-style: italic;
  font-size: 62px;
  line-height: .86;
  letter-spacing: 1px;
  color: var(--blue);
  text-shadow: 0 0 22px rgba(47,107,255,.5);
}
.logo-patch__sub {
  font-family: var(--font-head);
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 1.7px;
  color: var(--yellow);
  text-transform: uppercase;
}

.rail__nav { position: relative; display: flex; flex-direction: column; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 23px;
  height: 73px;
  padding: 0 20px 0 36px;
  color: var(--txt);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .2px;
  transition: background .12s ease;
  width: 100%;
  text-align: left;
}
.nav-item svg { width: 25px; height: 25px; flex: 0 0 25px; }
.nav-item:hover { background: rgba(255,255,255,.045); }
.nav-item.is-active {
  background: linear-gradient(180deg, #0B5AF5 0%, var(--blue-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 16px rgba(11,90,245,.28);
}
.nav-item.is-active:hover { background: linear-gradient(180deg, #1163FA 0%, #0A53DA 100%); }

.rail__foot {
  margin-top: auto;
  position: relative;
  padding: 18px 24px 26px;
  font-size: 15px;
  color: #4A4F57;
}
.rail__foot button { color: #7C838C; font-size: 15px; }
.rail__foot button:hover { color: var(--yellow); }

/* ==========================================================================
   Page head
   ========================================================================== */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 24px;
  min-height: 74px;
}
.page-head__actions { display: flex; align-items: center; gap: 18px; padding-top: 14px;
  flex-wrap: wrap; justify-content: flex-end; }

h1.title {
  font-family: var(--font-head);
  font-weight: 700;
  font-style: italic;
  font-size: 63px;
  line-height: .95;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  margin: 0;
  color: var(--txt);
  white-space: nowrap;
}
.subtitle { margin: 5px 0 0; font-size: 20px; color: var(--txt-2); }

.crumbs { margin: 5px 0 0; font-size: 20px; color: var(--txt-2); }
.crumbs a { color: var(--blue); }
.crumbs a:hover { text-decoration: underline; }
.crumbs span.sep { color: var(--muted); margin: 0 8px; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: filter .12s ease, background .12s ease, border-color .12s ease;
}
.btn svg { width: 21px; height: 21px; }

.btn--yellow {
  background: linear-gradient(180deg, var(--yellow-btn-a) 0%, var(--yellow-btn-b) 100%);
  color: #0A0A0A;
  box-shadow: 0 2px 10px rgba(216,176,44,.18);
}
.btn--yellow:hover { filter: brightness(1.08); }

.btn--blue-line { border: 1.5px solid var(--blue); color: var(--blue); }
.btn--blue-line:hover { background: var(--blue-soft); }

.btn--yellow-line { border: 1.5px solid var(--yellow-line); color: var(--yellow); }
.btn--yellow-line:hover { background: rgba(245,204,51,.1); }

.btn--ghost { border: 1.5px solid var(--line-input); color: var(--txt-2); }
.btn--ghost:hover { border-color: #454B54; color: var(--txt); }

.btn--sm { height: 38px; padding: 0 18px; font-size: 20px; letter-spacing: .8px; }
.btn--sm svg { width: 17px; height: 17px; }
.btn--block { width: 100%; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 6px; color: var(--blue);
}
.icon-btn:hover { background: var(--blue-soft); }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn--muted { color: var(--txt-3); }
.icon-btn--muted:hover { background: rgba(255,255,255,.06); color: var(--txt); }

/* ==========================================================================
   Form controls
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.field__label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--txt-2);
}

.input, .select, .textarea {
  height: 52px;
  width: 100%;
  padding: 0 16px;
  background: var(--panel-sunk);
  border: 1px solid var(--line-input);
  border-radius: var(--radius-sm);
  color: var(--txt);
  font-size: 19px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.textarea { height: auto; min-height: 128px; padding: 14px 16px; resize: vertical; line-height: 1.45; }
.input::placeholder, .textarea::placeholder { color: #6E747C; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47,107,255,.18);
}
.input[readonly] { color: var(--txt-2); }

/* tint the native date/time picker glyph to Performance Blue */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(35%) sepia(93%) saturate(3200%) hue-rotate(218deg) brightness(103%);
  cursor: pointer;
  opacity: .95;
}

.select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9CDD3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 21px;
  cursor: pointer;
}
.select option { background: #0B0E12; }

/* search box with leading glyph */
.search {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.search svg {
  position: absolute; left: 17px; width: 23px; height: 23px;
  color: var(--txt-2); pointer-events: none;
}
.search .input { padding-left: 52px; }

.switch {
  position: relative; width: 52px; height: 28px; border-radius: 999px;
  background: #2A2F37; transition: background .15s ease; flex: 0 0 52px;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  transition: transform .15s ease;
}
.switch.is-on { background: var(--blue); }
.switch.is-on::after { transform: translateX(24px); }

/* ==========================================================================
   Cards, sections, badges
   ========================================================================== */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--card-pad);
}
.card--flush { padding: 0; }

.grid { display: grid; gap: 22px; }
.row  { display: flex; gap: 22px; }

.section-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-style: italic;
  font-size: 31px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 16px;
}
.section-title--plain { font-style: normal; }

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 14px; border-radius: var(--radius-sm);
  font-family: var(--font-head); font-weight: 600; font-size: 21px;
  letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
}
.badge--green  { border: 1.5px solid var(--green-line); color: var(--green); }
.badge--yellow { border: 1.5px solid var(--yellow-line); color: var(--yellow); }
.badge--blue   { border: 1.5px solid var(--blue); color: var(--blue); }
.badge--grey   { border: 1.5px solid #3A4048; color: var(--txt-3); }
.badge--red    { border: 1.5px solid #7A3125; color: var(--red); }
.badge--sm { height: 28px; font-size: 18px; padding: 0 10px; }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 106px; height: 106px; border-radius: 50%;
  border: 2px solid #565B63; background: #0E1217;
  font-family: var(--font-body); font-weight: 500; font-size: 48px;
  letter-spacing: 1px; color: var(--txt); flex: 0 0 106px;
}
.avatar--sm { width: 46px; height: 46px; flex: 0 0 46px; font-size: 18px; border-width: 1.5px; }
.avatar--md { width: 62px; height: 62px; flex: 0 0 62px; font-size: 23px; }

.empty {
  padding: 46px 20px; text-align: center; color: var(--muted); font-size: 19px;
}

/* card header: title left, meta right, never wrapping onto two lines */
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.card-head .section-title { margin: 0; white-space: nowrap; }
.card-head__meta { font-size: 18px; color: var(--txt-2); white-space: nowrap; }

/* ==========================================================================
   Tables
   ========================================================================== */

.table { width: 100%; border-collapse: collapse; }
.table th {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--txt-2);
  text-align: left;
  padding: 0 0 15px;
  border-bottom: 1px solid var(--line-blue);
  white-space: nowrap;
}
.table--gold th { color: var(--yellow); }
.table td {
  padding: 19px 0;
  border-bottom: 1px solid var(--line-blue);
  font-size: 19px;
  color: var(--txt);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgba(255,255,255,.022); }
.table td.num, .table th.num { text-align: center; }
.table td.right, .table th.right { text-align: right; }
.table td.act, .table th.act { text-align: right; }
.table .muted { color: var(--txt-3); }
.table .gold { color: var(--yellow); font-weight: 600; }

.table-wrap { padding: 26px 26px 12px; }

/* ==========================================================================
   Tabs
   ========================================================================== */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 8px;
  overflow-x: auto;
}
.tab {
  position: relative;
  padding: 20px 26px 19px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--txt-2);
  white-space: nowrap;
}
.tab:hover { color: var(--txt); }
.tab.is-active { color: var(--blue); }
.tab.is-active::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 0;
  height: 3px; background: var(--blue-bright); border-radius: 2px;
}

/* compact tab strip used inside panels (weeks, weekdays, menu days) */
.tabs--inline {
  border: 0; background: none; border-radius: 0; padding: 0;
  border-bottom: 1px solid var(--line-soft);
}
.tabs--inline .tab { padding: 10px 22px 13px; font-size: 23px; letter-spacing: 1.1px; }
.tabs--inline .tab.is-active::after { left: 0; right: 0; }

/* ==========================================================================
   Dashboard
   ========================================================================== */

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

.stat {
  display: flex; align-items: center; gap: 26px;
  min-height: 165px; padding: 22px 30px;
}
.stat__icon { color: var(--blue); flex: 0 0 auto; }
.stat__icon svg { width: 60px; height: 60px; }
.stat__label {
  font-family: var(--font-head); font-weight: 600; font-size: 23px; line-height: 1.15;
  letter-spacing: .4px; text-transform: uppercase; color: #E7E9EC;
}
.stat__value {
  font-family: var(--font-head); font-weight: 700; font-size: 56px;
  line-height: 1.02; color: var(--blue-bright); margin-top: 0;
}
.stat__note { font-size: 19px; line-height: 1.2; color: var(--txt-2); margin-top: 3px; }

.rev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.rev { min-height: 254px; padding: 28px 32px; display: flex; flex-direction: column; }
.rev__title {
  font-family: var(--font-head); font-weight: 700; font-style: italic;
  font-size: 36px; letter-spacing: .5px; text-transform: uppercase; color: var(--yellow);
}
.rev__body { flex: 1; display: flex; align-items: center; gap: 34px; }
.rev__body svg { width: 108px; height: 108px; color: var(--blue); flex: 0 0 auto; }
.rev__value {
  font-family: var(--font-head); font-weight: 700; font-size: 84px;
  line-height: 1; color: var(--yellow); letter-spacing: 0;
}

/* ==========================================================================
   Client profile
   ========================================================================== */

.profile-head { display: flex; align-items: center; gap: 30px; padding: 26px 30px; }
.profile-head__id { display: flex; align-items: center; gap: 26px; flex: 1 1 auto; min-width: 0; }
.profile-head__name {
  display: flex; align-items: center; gap: 18px;
  font-size: 40px; font-weight: 600; letter-spacing: -.2px;
}
.profile-head__meta { display: flex; align-items: flex-start; gap: 34px; margin-top: 14px; }
.profile-head__meta > div + div { padding-left: 34px; border-left: 1px solid #2A2F36; }
.meta-label {
  font-family: var(--font-head); font-weight: 600; font-size: 21px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--txt-2);
}
.meta-value { font-size: 21px; margin-top: 2px; }

.pkg-box {
  flex: 0 0 436px; align-self: stretch;
  background: var(--panel-inset); border: 1px solid #22262D;
  border-radius: 8px; padding: 16px 22px 18px;
  display: flex; flex-direction: column;
}
.pkg-box__title {
  font-family: var(--font-head); font-weight: 600; font-size: 23px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--txt-2);
  padding-bottom: 12px; border-bottom: 1px solid #2A2F36;
}
.pkg-box__row { flex: 1; display: flex; align-items: center; padding-top: 12px; }
.pkg-box__used {
  flex: 1; font-family: var(--font-head); font-weight: 600; font-size: 27px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--txt);
}
.pkg-box__left {
  flex: 1; display: flex; align-items: baseline; gap: 10px;
  padding-left: 26px; border-left: 1px solid #2A2F36;
}
.pkg-box__left b {
  font-family: var(--font-head); font-weight: 700; font-size: 72px;
  line-height: .82; color: var(--yellow);
}
.pkg-box__left span {
  font-family: var(--font-head); font-weight: 600; font-size: 26px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--yellow);
}

.kv { display: flex; flex-direction: column; }
.kv__row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid var(--line-blue); font-size: 19px;
}
.kv__row:last-child { border-bottom: 0; }
.kv__row dt { color: var(--txt-2); margin: 0; }
.kv__row dd { margin: 0; color: var(--txt); text-align: right; }

.attention { display: flex; gap: 20px; align-items: flex-start; padding-top: 6px; }
.attention svg { width: 58px; height: 58px; color: var(--yellow); flex: 0 0 58px; }
.attention__head { font-size: 21px; color: var(--txt); }
.attention__sub { font-size: 18px; color: var(--txt-2); margin-top: 4px; }

/* ==========================================================================
   Measurements
   ========================================================================== */

.metric { padding: 22px 26px 24px; }
.metric__label {
  font-family: var(--font-head); font-weight: 700; font-style: italic;
  font-size: 24px; letter-spacing: .6px; text-transform: uppercase; color: var(--yellow);
}
.metric__value {
  margin-top: 8px; font-family: var(--font-head); font-weight: 700; font-size: 46px;
  line-height: 1; color: var(--txt);
}
.metric__value small { font-family: var(--font-body); font-weight: 400; font-size: 22px; color: var(--txt-2); margin-left: 6px; }
.metric__value.is-down { color: var(--green); }
.metric__value.is-up { color: var(--red); }

.chart-wrap { padding: 22px 26px 18px; }
.chart-wrap svg { display: block; width: 100%; height: auto; }

/* ==========================================================================
   Nutrition
   ========================================================================== */

.macro-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #0D1116; border: 1px solid #1D222A; border-radius: 8px;
}
.macro { padding: 18px 10px; text-align: center; }
.macro + .macro { border-left: 1px solid #22272F; }
.macro__v {
  font-family: var(--font-head); font-weight: 700; font-size: 34px; color: var(--blue-bright);
}
.macro__v small { font-family: var(--font-body); font-weight: 500; font-size: 19px; color: var(--blue-bright); margin-left: 3px; }
.macro__k { font-size: 18px; color: var(--txt-2); margin-top: 2px; }

.meal-row {
  display: grid;
  grid-template-columns: 30px 132px 1fr 110px auto;
  align-items: center; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--line-soft);
}
.meal-row__slot {
  font-family: var(--font-head); font-weight: 700; font-size: 20px;
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--yellow);
}
.meal-row__name { font-size: 19px; }
.meal-row__kcal { font-size: 19px; text-align: right; color: var(--txt); }
.meal-row__act { display: flex; gap: 6px; justify-content: flex-end; }

.add-row {
  width: 100%; margin-top: 16px; height: 54px; border-radius: 8px;
  border: 1.5px dashed rgba(47,107,255,.55); color: var(--blue);
  font-family: var(--font-head); font-weight: 600; font-size: 21px;
  letter-spacing: 1.2px; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.add-row:hover { background: var(--blue-soft); }
.add-row svg { width: 20px; height: 20px; }

.tool-card {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 20px; border: 1px solid #1F2530; border-radius: 8px;
  background: #0D1116; width: 100%; text-align: left;
}
.tool-card + .tool-card { margin-top: 16px; }
.tool-card:hover { border-color: var(--blue); background: #0F141B; }
.tool-card__icon {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 8px;
  border: 1px solid #253046; display: flex; align-items: center; justify-content: center;
  color: var(--blue);
}
.tool-card__icon svg { width: 27px; height: 27px; }
.tool-card__t {
  display: block;
  font-family: var(--font-head); font-weight: 700; font-size: 25px;
  letter-spacing: .8px; text-transform: uppercase; color: var(--blue);
}
.tool-card__s { display: block; font-size: 18px; color: var(--txt-2); margin-top: 1px; }
.tool-card__s.is-caps { text-transform: uppercase; letter-spacing: 1px; font-size: 16px; }

/* menu library list */
.menu-item {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border: 1px solid #1F242C; border-radius: 8px;
  background: #0E1218; width: 100%; text-align: left;
}
.menu-item + .menu-item { margin-top: 16px; }
.menu-item:hover { border-color: #2E3644; }
.menu-item.is-active { border-color: var(--blue); background: #0D141F; }
.menu-item__t { display: block; font-size: 25px; font-weight: 600; }
.menu-item__s { display: block; font-size: 17px; color: var(--txt-2); margin-top: 3px; }
.menu-item__s b { color: var(--blue); font-weight: 500; }

/* food log review */
.log-item {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 78px;
  align-items: center; gap: 12px;
  padding: 16px 18px; border: 1px solid #1F242C; border-radius: 8px;
  background: #0E1218; width: 100%; text-align: left;
}
.log-item + .log-item { margin-top: 16px; }
.log-item.is-active { border-color: var(--blue); background: #0D141F; }
.log-item__n { display: block; font-size: 20px; font-weight: 600; }
.log-item__d { display: block; font-size: 17px; color: var(--txt-2); margin-top: 2px; }
.log-item__meal { display: flex; align-items: center; gap: 9px; font-size: 18px;
  color: var(--txt); white-space: nowrap; }
.log-item__meal svg { width: 22px; height: 22px; }
.log-item__st { font-size: 18px; color: var(--blue); text-align: right; line-height: 1.15; }

.log-photo {
  width: 272px; height: 296px; flex: 0 0 272px; border-radius: 8px;
  object-fit: cover; background: #0B0E12; border: 1px solid #1D222A;
}
.est-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 19px;
}
.disclaimer { font-size: 18px; color: var(--txt-2); margin-top: 14px; }

/* ==========================================================================
   Training program
   ========================================================================== */

.prog-bar { display: flex; align-items: center; padding: 18px 30px; }
.prog-bar > div { flex: 1; padding-right: 24px; }
.prog-bar > div + div { padding-left: 30px; border-left: 1px solid #23282F; }
.prog-bar__k { font-size: 18px; color: var(--txt-2); }
.prog-bar__v { font-size: 23px; margin-top: 3px; }

.ex-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.ex-table th {
  font-family: var(--font-head); font-weight: 600; font-size: 17px;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--txt-2);
  text-align: left; padding: 0 12px 6px; border-bottom: 1px solid var(--line-soft);
}
.ex-table td {
  padding: 17px 12px; font-size: 19px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: #0E1218;
}
.ex-table tbody tr td:first-child { border-left: 1px solid var(--line-soft); }
.ex-table tbody tr td:last-child  { border-right: 1px solid var(--line-soft); }
.ex-table td.act { white-space: nowrap; }
.ex-table tbody tr td:first-child { border-radius: 8px 0 0 8px; }
.ex-table tbody tr td:last-child  { border-radius: 0 8px 8px 0; }
.ex-table th.c, .ex-table td.c { text-align: center; }
.ex-table th.act, .ex-table td.act { text-align: right; }

.note-block { padding: 18px 20px; border: 1px solid #1F242C; border-radius: 8px; background: #0E1218; }
.note-block + .note-block { margin-top: 0; }
.note-block__k {
  font-family: var(--font-head); font-weight: 700; font-size: 22px;
  letter-spacing: .6px; color: var(--yellow);
}
.note-block__v { font-size: 19px; margin-top: 4px; }
.note-block__div { height: 1px; background: #23282F; margin: 16px 0; }

/* ==========================================================================
   Calendar
   ========================================================================== */

.cal-toolbar { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.cal-nav {
  width: 58px; height: 46px; border: 1px solid #2C313A; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--txt);
}
.cal-nav:hover { border-color: var(--blue); color: var(--blue); }
.cal-nav svg { width: 22px; height: 22px; }
.cal-range { font-size: 23px; font-weight: 500; letter-spacing: .2px; }

.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th {
  font-family: var(--font-head); font-weight: 600; font-size: 20px;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--txt-2);
  padding: 16px 0; border: 1px solid #1C2129; background: #0D1116;
}
.cal-grid th:first-child { width: 78px; }
.cal-grid td {
  height: 110px; border: 1px solid #1C2129; vertical-align: top; padding: 5px;
  background: #0B0F14;
}
.cal-grid td.hour {
  text-align: center; vertical-align: middle; padding: 0;
  font-family: var(--font-head); font-weight: 600; font-size: 20px;
  letter-spacing: .8px; color: var(--txt-2); background: #0D1116;
}
.cal-ev {
  height: 100%; border-radius: 6px; padding: 8px 10px; text-align: left;
  background: linear-gradient(180deg, #14418F 0%, #0E2C63 100%);
  border: 1px solid #2C5AB0; width: 100%; color: var(--txt);
  display: flex; flex-direction: column; gap: 1px; overflow: hidden;
}
.cal-ev:hover { filter: brightness(1.15); }
.cal-ev.is-selected { border-color: var(--yellow); background: linear-gradient(180deg,#11141A 0%,#0C0F14 100%); }
.cal-ev__t { font-size: 17px; color: #DCE3EE; }
.cal-ev__n { font-size: 19px; font-weight: 600; line-height: 1.15; }
.cal-ev__k { font-size: 17px; color: #C2CBD8; line-height: 1.15; }

.det-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; font-size: 20px; }
.det-row svg { width: 23px; height: 23px; color: var(--txt-2); flex: 0 0 23px; }
.det-kv {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0;
}
.det-kv__k {
  font-family: var(--font-head); font-weight: 600; font-size: 19px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--txt-2);
}
.toggle-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; font-size: 20px; }
.toggle-row svg.bell { width: 23px; height: 23px; color: var(--txt-2); flex: 0 0 23px; }
.toggle-row .switch { margin-left: auto; }

/* ==========================================================================
   Reports
   ========================================================================== */

.kpi { display: flex; align-items: center; gap: 16px; padding: 22px; min-height: 132px; }
.kpi svg { width: 54px; height: 54px; color: var(--blue); flex: 0 0 54px; }
.kpi__label {
  font-family: var(--font-head); font-weight: 700; font-size: 22px;
  letter-spacing: .8px; text-transform: uppercase; color: var(--yellow);
  white-space: nowrap;
}
.kpi__value {
  font-family: var(--font-head); font-weight: 700; font-size: 42px;
  line-height: 1.1; color: var(--yellow); margin-top: 2px; white-space: nowrap;
}
.pkg-rev {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border: 1px solid #1F242C; border-radius: 8px; background: #0E1218;
}
.pkg-rev + .pkg-rev { margin-top: 16px; }
.pkg-rev svg { width: 34px; height: 34px; color: var(--blue); flex: 0 0 34px; }
.pkg-rev__n { flex: 1; font-size: 20px; }
.pkg-rev__v { font-family: var(--font-head); font-weight: 700; font-size: 24px; color: var(--yellow); }

/* ==========================================================================
   Add-client / form sections
   ========================================================================== */

.form-section { padding: 24px 28px 28px; }
.form-section + .form-section { margin-top: 22px; }
.form-section__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.form-section__icon {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 8px;
  border: 1.5px solid var(--blue); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.form-section__icon svg { width: 25px; height: 25px; }
.form-section__t {
  font-family: var(--font-head); font-weight: 700; font-size: 27px;
  letter-spacing: .8px; text-transform: uppercase; color: var(--yellow);
}
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.form-grid--2 { grid-template-columns: repeat(2, 1fr); }
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }

.form-foot {
  display: flex; align-items: center; gap: 20px;
  margin-top: 24px; padding-top: 24px; border-top: 1px solid #1B3E86;
}
.form-foot__note { display: flex; align-items: center; gap: 14px; font-size: 19px; color: var(--txt-2); }
.form-foot__note svg { width: 26px; height: 26px; color: var(--blue); }
.form-foot__actions { margin-left: auto; display: flex; gap: 20px; }

/* onboarding */
.onb-strip { display: flex; align-items: center; gap: 46px; padding: 22px 30px; flex-wrap: wrap; }
.onb-strip__item { display: flex; align-items: center; gap: 18px; }
.onb-strip__item svg { width: 46px; height: 46px; color: var(--blue); }
.onb-strip__k {
  font-family: var(--font-head); font-weight: 600; font-size: 19px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--txt-2);
}
.onb-strip__v { font-family: var(--font-head); font-weight: 700; font-size: 27px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--yellow); }
.onb-strip__v.is-plain { color: var(--txt); font-weight: 600; }
.onb-strip__actions { margin-left: auto; display: flex; gap: 20px; }

.qsec {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px; border: 1px solid #1F242C; border-radius: 8px; background: #0E1218;
}
.qsec + .qsec { margin-top: 16px; }
.qsec > .ico svg { width: 30px; height: 30px; }
.qsec > .ico { color: var(--blue); flex: 0 0 30px; height: 30px; }
.qsec__n { flex: 1; font-size: 21px; }

.copy-field { position: relative; }
.copy-field .input { padding-right: 56px; }
.copy-field .icon-btn { position: absolute; right: 8px; top: 10px; }

.char-count { text-align: right; font-size: 17px; color: var(--txt-3); margin-top: 6px; }

/* ==========================================================================
   Toast + modal
   ========================================================================== */

.toast-stack { position: fixed; right: 26px; bottom: 26px; z-index: 90; display: flex; flex-direction: column; gap: 12px; }
.toast {
  min-width: 300px; max-width: 460px; padding: 15px 20px; border-radius: 8px;
  background: #131922; border: 1px solid var(--line-input); color: var(--txt);
  font-size: 19px; box-shadow: 0 12px 34px rgba(0,0,0,.6);
  animation: toast-in .18s ease;
}
.toast--ok  { border-left: 4px solid var(--green); }
.toast--err { border-left: 4px solid var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.modal-back {
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 20px; overflow-y: auto;
}
.modal {
  width: 100%; max-width: 720px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.modal--wide { max-width: 980px; }
.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px; border-bottom: 1px solid var(--line-soft);
}
.modal__title {
  font-family: var(--font-head); font-weight: 700; font-style: italic;
  font-size: 30px; letter-spacing: .5px; text-transform: uppercase; color: var(--yellow);
}
.modal__body { padding: 26px; }
.modal__foot {
  display: flex; justify-content: flex-end; gap: 18px;
  padding: 20px 26px; border-top: 1px solid var(--line-soft);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.u-flex { display: flex; }
.u-between { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.u-center { display: flex; align-items: center; }
.u-gap-8 { gap: 8px; } .u-gap-12 { gap: 12px; } .u-gap-16 { gap: 16px; } .u-gap-22 { gap: 22px; }
.u-mt-0 { margin-top: 0; } .u-mt-12 { margin-top: 12px; } .u-mt-16 { margin-top: 16px; }
.u-mt-22 { margin-top: 22px; } .u-mt-26 { margin-top: 26px; }
.u-grow { flex: 1 1 auto; min-width: 0; }
.u-right { text-align: right; }
.u-muted { color: var(--txt-2); }
.u-small { font-size: 18px; }
.u-hide { display: none !important; }
.u-gold { color: var(--yellow); }
.u-blue { color: var(--blue); }
.u-green { color: var(--green); }
.u-nowrap { white-space: nowrap; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1500px) {
  html, body { font-size: 17px; }
  :root { --rail-w: 238px; --gutter: 28px; }
  h1.title { font-size: 52px; }
  .rev__value { font-size: 68px; }
  .rev__body svg { width: 84px; height: 84px; }
  .stat__value { font-size: 48px; }
  .pkg-box { flex-basis: 360px; }
}

@media (max-width: 1180px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .rev-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .profile-head { flex-direction: column; align-items: stretch; }
  .pkg-box { flex-basis: auto; }
}

@media (max-width: 900px) {
  :root { --rail-w: 74px; }
  .rail__logo { padding: 16px 10px; }
  .logo-patch { height: 54px; }
  .logo-patch__max { font-size: 24px; }
  .logo-patch__sub { display: none; }
  .nav-item { padding: 0 10px; justify-content: center; height: 62px; }
  .nav-item span { display: none; }
  .rail__foot { display: none; }
  .stat-grid { grid-template-columns: 1fr; }
  .form-grid, .form-grid--2 { grid-template-columns: 1fr; }
  h1.title { font-size: 40px; }
  .page-head { flex-direction: column; }
  .split, .split--wide, .split--narrow { grid-template-columns: 1fr !important; }
}

/* two-column page layouts */
.split { display: grid; grid-template-columns: 1fr 500px; gap: 22px; align-items: start; }
.split--narrow { grid-template-columns: 380px 1fr; }
.split--wide { grid-template-columns: 1fr 380px; }

/* ==========================================================================
   Dishes — recipe cards, detail view, editor
   ========================================================================== */

.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 20px;
}

.dish {
  display: flex; flex-direction: column;
  background: #0E1218; border: 1px solid #1F242C; border-radius: 10px;
  overflow: hidden; transition: border-color .12s ease;
}
.dish:hover { border-color: #2E3644; }

.dish__shot { position: relative; aspect-ratio: 5 / 4; background: #0B0E12; }
.dish__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dish__badge, .dish__ai {
  position: absolute; top: 10px; border-radius: 5px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px;
  letter-spacing: 1px; text-transform: uppercase; padding: 4px 9px;
  background: rgba(3, 6, 11, .82);
}
.dish__badge { left: 10px; color: var(--txt-3); border: 1px solid #2C323B; }
.dish__ai { right: 10px; color: var(--blue); border: 1px solid var(--blue); }

.dish__body { padding: 16px 18px 12px; flex: 1; }
.dish__slot {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 18px;
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--yellow);
}
.dish__slot .ico svg { width: 19px; height: 19px; }
.dish__name { margin: 7px 0 0; font-size: 23px; font-weight: 600; line-height: 1.2; }
.dish__kcal {
  margin-top: 6px; font-family: var(--font-head); font-weight: 700;
  font-size: 30px; color: var(--blue-bright); line-height: 1;
}
.dish__kcal small { font-family: var(--font-body); font-weight: 500; font-size: 17px; }
.dish__macros { display: flex; gap: 14px; margin-top: 8px; font-size: 17px; color: var(--txt-2); }
.dish__macros b { color: var(--txt-3); font-weight: 600; }
.dish__meta { margin-top: 6px; font-size: 16px; color: var(--muted); }

.dish__actions {
  display: flex; gap: 4px; justify-content: flex-end;
  padding: 8px 12px; border-top: 1px solid #191E25;
}

.dish-detail { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
.dish-detail__shot {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: 10px; border: 1px solid #1F242C; background: #0B0E12; display: block;
}
.dish-steps { font-size: 19px; line-height: 1.6; color: var(--txt-2); white-space: pre-line; }

.field__hint { font-size: 16px; color: var(--muted); }

.ing-head, .ing-row {
  display: grid; grid-template-columns: 1fr 150px 120px 40px; gap: 12px; align-items: center;
}
.ing-head {
  font-family: var(--font-head); font-weight: 600; font-size: 17px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--txt-2);
  padding: 0 2px 8px;
}
.ing-row + .ing-row { margin-top: 10px; }

.ai-panel { border: 1px solid #253046; border-radius: 10px; background: #0C1119; }
.ai-panel > summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 16px 20px;
  font-family: var(--font-head); font-weight: 700; font-size: 23px;
  letter-spacing: .8px; text-transform: uppercase; color: var(--blue);
  list-style: none;
}
.ai-panel > summary::-webkit-details-marker { display: none; }
.ai-panel > summary .ico svg { width: 24px; height: 24px; }
.ai-panel[open] > summary { border-bottom: 1px solid #1B2433; }
.ai-panel__body { padding: 18px 20px 20px; }
.ai-grid { display: grid; grid-template-columns: 1fr 180px 170px; gap: 16px; align-items: end; }

.photo-state {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 18px; border-radius: 8px;
  border: 1px solid var(--yellow-line); background: rgba(245, 204, 51, .07);
}
.photo-state .ico svg { width: 30px; height: 30px; color: var(--yellow); }
.photo-state.is-ready { border-color: var(--green-line); background: rgba(119, 185, 74, .07); }
.photo-state.is-ready .ico svg { color: var(--green); }
.photo-state__t { font-size: 20px; }
.photo-state__s { font-size: 17px; color: var(--txt-2); margin-top: 3px; }

.or-line {
  display: flex; align-items: center; gap: 16px; margin: 24px 0 20px;
  color: var(--muted); font-size: 17px; text-transform: uppercase; letter-spacing: 1.4px;
}
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: #232830; }

input[type="file"].input { padding: 12px 14px; height: auto; font-size: 17px; }

/* ==========================================================================
   Settings — tab rail and the onboarding form builder
   ========================================================================== */

.set-layout { display: grid; grid-template-columns: 268px 1fr; gap: 22px; align-items: start; }
.set-rail { padding: 12px; }
.set-tab {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: 8px; color: var(--txt-2); font-size: 20px;
}
.set-tab .ico svg { width: 22px; height: 22px; }
.set-tab:hover { background: rgba(255, 255, 255, .04); color: var(--txt); }
.set-tab.is-active { background: var(--blue-soft); color: var(--blue); }

.fb-section {
  border: 1px solid #1F242C; border-radius: 10px; background: #0E1218; margin-bottom: 18px;
}
.fb-section.is-off { opacity: .55; }
.fb-section__head {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border-bottom: 1px solid #191E25;
}
.fb-section__icon {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px;
  border: 1px solid #253046; color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.fb-section__icon .ico svg { width: 21px; height: 21px; }
.fb-section__name { flex: 1; font-size: 23px; font-weight: 600; }
.fb-section__tools { display: flex; gap: 4px; align-items: center; }

.fb-field {
  display: grid; grid-template-columns: 1fr 190px 110px auto;
  gap: 14px; align-items: center; padding: 12px 18px;
  border-bottom: 1px solid #171B22;
}
.fb-field:last-of-type { border-bottom: 0; }
.fb-field__label { font-size: 19px; }
.fb-field__key { font-size: 15px; color: var(--muted); font-family: ui-monospace, monospace; }
.fb-field__type {
  font-family: var(--font-head); font-weight: 600; font-size: 17px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--txt-2);
}
.fb-add { padding: 14px 18px; }

/* ==========================================================================
   Enquiries
   ========================================================================== */

.enq {
  display: grid; grid-template-columns: 1fr 240px; gap: 22px;
  padding: 20px 22px; border: 1px solid #1F242C; border-radius: 10px; background: #0E1218;
}
.enq + .enq { margin-top: 16px; }
.enq__name { font-size: 25px; font-weight: 600; }
.enq__meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px;
  font-size: 18px; color: var(--txt-2);
}
.enq__meta a { color: var(--blue); }
.enq__goal { margin-top: 12px; font-size: 20px; color: var(--yellow); }
.enq__msg { margin-top: 8px; font-size: 19px; color: var(--txt-2); line-height: 1.5; }
.enq__side { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.enq__when { font-size: 17px; color: var(--muted); text-align: right; }

.nav-badge {
  margin-left: auto; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 12px;
  background: var(--yellow); color: #0A0A0A; display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 16px;
}

@media (max-width: 1180px) {
  .dish-detail { grid-template-columns: 1fr; }
  .ai-grid { grid-template-columns: 1fr; }
  .set-layout { grid-template-columns: 1fr; }
  .enq { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Narrow-window corrections
   Wide tables scroll inside their own card rather than pushing the page
   sideways, and toolbars stack instead of overflowing.
   ========================================================================== */

.table-wrap { overflow-x: auto; }
.table { min-width: 640px; }
.u-center { flex-wrap: wrap; }

@media (max-width: 1180px) {
  /* page toolbars stack; the inline widths the pages set are overridden here
     rather than in every page module */
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head__actions { width: 100%; justify-content: flex-start; padding-top: 6px; }
  .page-head__actions .search,
  .page-head__actions > .select,
  .page-head__actions > .input { width: 100% !important; max-width: 100%; }
  .page-head__actions .btn { flex: 1 1 auto; }

  .cal-toolbar .search,
  .cal-toolbar > .select,
  .cal-toolbar > .input { width: 100% !important; }

  /* every two-column page layout collapses, including the inline overrides */
  .split, .split--narrow, .split--wide { grid-template-columns: 1fr !important; }

  .profile-head__meta { flex-wrap: wrap; }
  .profile-head__meta > div + div { padding-left: 0; border-left: 0; }

  .ing-head { display: none; }
  .ing-row { grid-template-columns: 1fr 120px 90px 36px; gap: 8px; }

  .fb-field { grid-template-columns: 1fr auto; }
  .fb-field__type, .fb-field + .u-small { display: none; }

  .prog-bar { flex-wrap: wrap; gap: 18px 0; }
  .prog-bar > div { flex: 1 1 46%; }
  .prog-bar > div + div { padding-left: 0; border-left: 0; }

  /* the three- and four-across card rows pages set inline */
  .grid[style*="repeat(3"], .grid[style*="repeat(4"],
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 760px) {
  .macro-strip { grid-template-columns: 1fr 1fr; }
  .macro:nth-child(3) { border-left: 0; }
  .grid[style*="repeat(3"], .grid[style*="repeat(4"],
  .stat-grid { grid-template-columns: 1fr !important; }
  .dish-grid { grid-template-columns: 1fr; }
  .modal__foot { flex-wrap: wrap; }
  .modal__foot .btn { flex: 1 1 auto; }
}

/* credential input with a reveal toggle */
.key-row { display: flex; gap: 10px; align-items: center; }
.key-row .input { flex: 1; font-family: ui-monospace, "Cascadia Mono", monospace; letter-spacing: .5px; }
.key-row .icon-btn { flex: 0 0 34px; }

/* progress photos on the weight timeline */
.shots {
  display: flex; gap: 12px; margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--line-soft); overflow-x: auto;
}
.shot {
  flex: 0 0 104px; margin: 0; cursor: pointer; border-radius: 8px;
  border: 1px solid #1F242C; background: #0B0E12; overflow: hidden;
  transition: border-color .12s ease;
}
.shot:hover { border-color: var(--blue); }
.shot img { width: 100%; height: 104px; object-fit: cover; display: block; }
.shot.is-empty .shot__add {
  height: 104px; display: flex; align-items: center; justify-content: center;
  color: #39414D;
}
.shot.is-empty .shot__add svg { width: 30px; height: 30px; }
.shot figcaption {
  padding: 7px 8px; text-align: center; border-top: 1px solid #171B22;
}
.shot figcaption b { display: block; font-size: 17px; color: var(--txt); font-weight: 600; }
.shot figcaption span { display: block; font-size: 15px; color: var(--muted); }

.thumb {
  width: 52px; height: 52px; border-radius: 6px; overflow: hidden;
  border: 1px solid #1F242C; background: #0B0E12; display: block; padding: 0;
}
.thumb:hover { border-color: var(--blue); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.is-empty { display: flex; align-items: center; justify-content: center; color: #39414D; }
.thumb.is-empty svg { width: 22px; height: 22px; }