/* ============================================================
   FITNESS FOUNDATION 0.0.0.10 — Neo-Swiss Fitness Editorial
   Токен-система + компоненты. Light/Dark. Mobile-first.
   ============================================================ */

:root{
  /* 0.0.0.36 — COLOR SYSTEM: emerald primary + restrained semantic accents */
  --emerald:#0f9a73;
  --emerald-strong:#087b5d;
  --emerald-soft:#e3f4ef;
  --emerald-ink:#075f49;
  --blue:#3f7edb;
  --blue-soft:#eaf2ff;
  --blue-ink:#2557a6;
  --violet:#7b61d9;
  --violet-soft:#f0ecff;
  --violet-ink:#5a42ac;
  --gold:#c98b1f;
  --gold-soft:#fff3da;
  --gold-ink:#7b550d;
  --coral:#d9574f;
  --coral-soft:#fce9e7;
  --coral-ink:#963a34;

  /* legacy aliases keep existing components compatible */
  --green:var(--emerald);
  --green-strong:var(--emerald-strong);
  --green-soft:var(--emerald-soft);
  --green-ink:var(--emerald-ink);

  --bg:#f5f6f4;
  --surface:#ffffff;
  --surface-2:#eef1ed;
  --ink:#141814;
  --ink-2:#5b635b;
  --ink-3:#9aa39a;
  --line:#e2e6e0;
  --danger:var(--coral);
  --warn:var(--gold);

  --radius-s:10px;
  --radius-m:16px;
  --radius-l:22px;
  --shadow:0 1px 2px rgba(20,24,20,.05);

  --nav-h:64px;
  --topbar-h:56px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html[data-theme="dark"]{
  --emerald:#27c49a;
  --emerald-strong:#17aa83;
  --emerald-soft:#12352c;
  --emerald-ink:#92e7d0;
  --blue:#69a7ff;
  --blue-soft:#152941;
  --blue-ink:#b3d1ff;
  --violet:#a58cff;
  --violet-soft:#292344;
  --violet-ink:#d2c5ff;
  --gold:#e3ad48;
  --gold-soft:#392e16;
  --gold-ink:#f4d48c;
  --coral:#f0786f;
  --coral-soft:#3a211f;
  --coral-ink:#ffb3ad;

  --green:var(--emerald);
  --green-strong:var(--emerald-strong);
  --green-soft:var(--emerald-soft);
  --green-ink:var(--emerald-ink);

  --bg:#101310;
  --surface:#181c18;
  --surface-2:#20261f;
  --ink:#eef2ee;
  --ink-2:#a9b3a9;
  --ink-3:#6d766d;
  --line:#262c25;
  --shadow:none;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  min-height:100dvh;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
input,select,textarea{font:inherit;color:var(--ink)}
img{max-width:100%;display:block}

/* ---------- App shell ---------- */
.shell{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;
  padding:calc(var(--safe-top) + 10px) 16px 10px;
  min-height:calc(var(--topbar-h) + var(--safe-top));
  display:flex;align-items:center;gap:12px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
}
.shell.scrolled .topbar{border-bottom-color:var(--line)}
.brand-mark{
  width:40px;height:40px;border-radius:12px;flex:none;
  position:relative;display:grid;place-items:center;overflow:hidden;
  background:#fff;border:1px solid color-mix(in srgb,var(--line) 88%,transparent);
  box-shadow:0 1px 2px rgba(20,24,20,.06);
}
.brand-mark-img{width:31px;height:31px;display:block;object-fit:contain}
.brand-mark-dark{display:none}
html[data-theme="dark"] .brand-mark{
  background:#0d110e;border-color:rgba(255,255,255,.10);box-shadow:none;
}
html[data-theme="dark"] .brand-mark-light{display:none}
html[data-theme="dark"] .brand-mark-dark{display:block}
.brand-copy b{display:block;font-size:14px;font-weight:800;letter-spacing:.06em}
.brand-copy span{display:block;font-size:10px;color:var(--ink-3);letter-spacing:.14em;font-weight:600}
.topbar .spacer{flex:1}
.avatar{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:var(--surface-2);color:var(--ink-2);
  display:grid;place-items:center;font-size:12px;font-weight:700;
  border:1px solid var(--line);
}

.content{
  flex:1;padding:16px 16px calc(var(--nav-h) + var(--safe-bottom) + 24px);
  display:flex;flex-direction:column;gap:20px;
  animation:viewIn .18s ease;
}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:center;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding-bottom:var(--safe-bottom);
}
.bottom-nav .nav-inner{display:flex;width:100%;max-width:560px}
.bottom-nav button{
  flex:1;min-height:var(--nav-h);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--ink-3);font-size:10.5px;font-weight:600;letter-spacing:.02em;
}
.bottom-nav button svg{width:22px;height:22px;stroke-width:1.9}
.bottom-nav button.active{color:var(--green-strong)}
html[data-theme="dark"] .bottom-nav button.active{color:var(--green)}

/* ---------- Typography blocks ---------- */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}
.h-display{font-size:30px;line-height:1.08;font-weight:800;letter-spacing:-.02em}
.h-display .accent{color:var(--green-strong)}
html[data-theme="dark"] .h-display .accent{color:var(--green)}
.section{display:flex;flex-direction:column;gap:12px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.section-head h2{font-size:18px;font-weight:800;letter-spacing:-.01em}
.section-head .link,.section-head span{font-size:12.5px;color:var(--ink-3);font-weight:600}
.section-head button.link{color:var(--green-strong)}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-m);box-shadow:var(--shadow);
  padding:16px;
}
.card.pad-l{padding:20px}

.hero-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-l);padding:20px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:16px;
}
.hero-card .hero-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.hero-card .hero-top h2{font-size:21px;font-weight:800;letter-spacing:-.01em;margin-top:6px}
.hero-card .hero-top p{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.45}

.progress-ring{position:relative;width:76px;height:76px;flex:none}
.progress-ring svg{width:76px;height:76px;transform:rotate(-90deg)}
.progress-ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.progress-ring .track{stroke:var(--surface-2)}
.progress-ring .bar{stroke:var(--blue);transition:stroke-dashoffset .5s ease}
.progress-ring b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:16px;font-weight:800;
}
.progress-line{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.progress-line i{display:block;height:100%;border-radius:99px;background:var(--blue);transition:width .4s ease}

.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 20px;border-radius:14px;
  background:var(--green);color:#fff;
  font-weight:700;font-size:15px;width:100%;
  transition:transform .06s ease,filter .15s ease;
}
.btn:active{transform:scale(.985)}
.btn.secondary{background:var(--surface-2);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--green-strong);min-height:44px}
html[data-theme="dark"] .btn.ghost{color:var(--green)}
.btn.danger{background:transparent;color:var(--danger);min-height:44px}
.btn:disabled{opacity:.55}
.btn.compact{min-height:42px;width:auto;font-size:13.5px;padding:0 16px}

/* Stat tiles */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-grid.four{grid-template-columns:repeat(4,1fr)}
.stat-tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:14px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow);
}
.stat-tile span{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.stat-tile b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.stat-tile b small{font-size:13px;color:var(--ink-3);font-weight:700}
.stat-tile em{font-style:normal;font-size:11.5px;color:var(--ink-2)}

/* ---------- List rows ---------- */
.row-list{display:flex;flex-direction:column;gap:8px}
.row{
  display:flex;align-items:center;gap:12px;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:13px 14px;min-height:56px;box-shadow:var(--shadow);
  transition:transform .06s ease;
}
.row:active{transform:scale(.99)}
.row .row-icon{
  width:40px;height:40px;border-radius:12px;flex:none;
  background:var(--surface-2);display:grid;place-items:center;
  font-weight:800;font-size:13px;color:var(--ink-2);
}
.row .row-icon.green{background:var(--green-soft);color:var(--green-ink)}
.row .row-icon.done{background:var(--green);color:#fff}
.row .row-body{flex:1;min-width:0}
.row .row-body b{display:block;font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .row-body small{display:block;font-size:12px;color:var(--ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .chev{color:var(--ink-3);flex:none;font-size:16px}
.row .badge{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:4px 9px;border-radius:99px}
.badge.done{background:var(--green-soft);color:var(--green-ink)}
.badge.open{background:var(--surface-2);color:var(--ink-2)}
.badge.locked{background:var(--surface-2);color:var(--ink-3)}
.badge.warn{background:#f7edda;color:#8a5f10}
html[data-theme="dark"] .badge.warn{background:#33290f;color:#e3b45e}

/* ---------- Program / week ---------- */
.course-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:18px;display:flex;flex-direction:column;gap:10px;width:100%;box-shadow:var(--shadow);
}
.course-card .course-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.course-card .index{font-size:26px;font-weight:800;color:var(--green-strong);letter-spacing:-.02em}
html[data-theme="dark"] .course-card .index{color:var(--green)}
.course-card h3{font-size:18px;font-weight:800;letter-spacing:-.01em}
.course-card p{font-size:13px;color:var(--ink-2);line-height:1.5}
.course-card .meta{display:flex;gap:14px;font-size:11.5px;color:var(--ink-3);font-weight:600;letter-spacing:.04em}

.week-group{display:flex;flex-direction:column;gap:8px}
.week-cap{display:flex;align-items:center;gap:10px;padding:4px 2px}
.week-cap .num{font-size:13px;font-weight:800;color:var(--green-strong);letter-spacing:.06em}
html[data-theme="dark"] .week-cap .num{color:var(--green)}
.week-cap b{font-size:13.5px;font-weight:700;flex:1}
.week-cap small{font-size:11.5px;color:var(--ink-3);font-weight:600}

/* Workout screen */
.workout-hero{display:flex;flex-direction:column;gap:8px}
.workout-hero .eyebrow{color:var(--green-strong)}
html[data-theme="dark"] .workout-hero .eyebrow{color:var(--green)}
.workout-hero h1{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.workout-hero p{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.workout-meta{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:99px;background:var(--surface-2);color:var(--ink-2);letter-spacing:.03em}
.chip.green{background:var(--green-soft);color:var(--green-ink)}

.media-frame{border-radius:var(--radius-m);overflow:hidden;position:relative;background:#000}
.media-frame video{width:100%;display:block;max-height:320px}
.media-frame .watermark{position:absolute;right:10px;bottom:10px;font-size:10px;color:rgba(255,255,255,.55);letter-spacing:.1em;pointer-events:none}

.exercise-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:16px;display:flex;gap:14px;box-shadow:var(--shadow);
}
.exercise-card .ex-no{
  width:34px;height:34px;flex:none;border-radius:10px;background:var(--green-soft);
  color:var(--green-ink);display:grid;place-items:center;font-size:13px;font-weight:800;
}
.exercise-card .ex-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.exercise-card h3{font-size:15px;font-weight:800}
.exercise-card .ex-metrics{display:flex;gap:6px;flex-wrap:wrap}
.exercise-card p{font-size:13px;color:var(--ink-2);line-height:1.5}
.exercise-card .coach-note{
  border-left:3px solid var(--green);padding:8px 12px;background:var(--surface-2);
  border-radius:0 10px 10px 0;font-size:12.5px;color:var(--ink-2);
}

/* ---------- Tariffs ---------- */
.tariff-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);position:relative;
}
.tariff-card.recommended{border-color:var(--green)}
.tariff-card.recommended::before{
  content:'РЕКОМЕНДУЕМ';position:absolute;top:-9px;left:16px;
  background:var(--green);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.12em;
  padding:3px 9px;border-radius:99px;
}
.tariff-card.active-tariff{border-color:var(--green)}
.tariff-card .tariff-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tariff-card .tariff-top h3{font-size:16.5px;font-weight:800}
.tariff-card .tariff-top b{font-size:17px;font-weight:800;color:var(--green-strong);white-space:nowrap}
html[data-theme="dark"] .tariff-card .tariff-top b{color:var(--green)}
.tariff-card p{font-size:13px;color:var(--ink-2);line-height:1.5}
.tariff-card .your{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--green-ink);background:var(--green-soft);align-self:flex-start;padding:3px 9px;border-radius:99px}

/* ---------- Forms ---------- */
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--ink-2)}
.form input,.form select,.form textarea{
  min-height:46px;padding:11px 13px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
  width:100%;font-size:15px;outline:none;
  transition:border-color .15s ease;
}
.form textarea{min-height:76px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--green)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-inline{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.form-inline .full{grid-column:1/-1}
.check{display:flex !important;flex-direction:row !important;align-items:center;gap:8px}
.check input{width:auto;min-height:0}

/* ---------- Theme choice ---------- */
.theme-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.theme-choice button{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:14px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow);
}
.theme-choice button.active{border-color:var(--green)}
.theme-choice b{font-size:14px;font-weight:700}
.theme-choice span{font-size:11.5px;color:var(--ink-2)}

/* ---------- Chat ---------- */
.chat-screen{display:flex;flex-direction:column;gap:12px;min-height:50vh}
.chat-log{display:flex;flex-direction:column;gap:8px;flex:1}
.bubble{
  max-width:82%;padding:10px 13px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
  align-self:flex-start;box-shadow:var(--shadow);
}
.bubble.mine{align-self:flex-end;background:var(--green);border-color:var(--green);color:#fff}
.bubble small{display:block;font-size:10px;opacity:.65;margin-bottom:3px;font-weight:700;letter-spacing:.06em}
.bubble p{font-size:14px;line-height:1.45;word-break:break-word;white-space:pre-wrap}
.chat-composer{
  position:sticky;bottom:calc(var(--nav-h) + var(--safe-bottom) + 8px);
  display:flex;gap:8px;align-items:flex-end;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:8px;box-shadow:var(--shadow);
}
.chat-composer textarea{
  flex:1;border:0;background:transparent;resize:none;outline:none;
  max-height:110px;min-height:40px;padding:9px 8px;font-size:15px;
}
.chat-composer button{
  width:42px;height:42px;flex:none;border-radius:13px;
  background:var(--green);color:#fff;display:grid;place-items:center;font-size:17px;
}

/* ---------- Locked / empty / error states ---------- */
.state{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:32px 20px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius-m);
}
.state .state-icon{font-size:26px}
.state b{font-size:15px;font-weight:800}
.state p{font-size:13px;color:var(--ink-2);max-width:280px;line-height:1.5}
.locked-card{
  display:flex;gap:12px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:14px;
}
.locked-card .lock{width:38px;height:38px;flex:none;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;font-size:16px}
.locked-card b{display:block;font-size:14px;font-weight:800}
.locked-card p{font-size:12.5px;color:var(--ink-2);margin-top:2px}

/* ---------- Skeleton ---------- */
.skeleton{display:flex;flex-direction:column;gap:10px}
.sk{border-radius:var(--radius-m);background:linear-gradient(100deg,var(--surface-2) 40%,color-mix(in srgb,var(--surface-2) 55%,var(--surface)) 50%,var(--surface-2) 60%);background-size:220% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-120% 0}}
.sk.h56{height:56px}.sk.h100{height:100px}.sk.h160{height:160px}

/* ---------- Sheets & modals ---------- */
.sheet-backdrop{
  position:fixed;inset:0;z-index:80;background:rgba(10,12,10,.45);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{
  width:100%;max-width:560px;max-height:88dvh;overflow-y:auto;
  background:var(--bg);border-radius:20px 20px 0 0;
  padding:10px 16px calc(var(--safe-bottom) + 20px);
  animation:sheetIn .22s cubic-bezier(.3,1,.4,1);
}
@keyframes sheetIn{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
.sheet .grip{width:38px;height:4px;border-radius:99px;background:var(--line);margin:4px auto 12px}
.sheet-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sheet-head h2{font-size:18px;font-weight:800;flex:1}
.sheet-head .x{width:34px;height:34px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-size:15px;color:var(--ink-2)}
.sheet .sheet-body{display:flex;flex-direction:column;gap:14px}
.article-body{font-size:14.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap}

/* ---------- Trainer ---------- */
.trainer-card{display:flex;gap:14px;align-items:flex-start}
.trainer-card .t-avatar{
  width:52px;height:52px;flex:none;border-radius:16px;background:var(--green);
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px;
}
.trainer-card b{display:block;font-size:15.5px;font-weight:800}
.trainer-card p{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:3px}
.trainer-card .links{display:flex;gap:10px;margin-top:7px;flex-wrap:wrap}
.trainer-card .links span{font-size:12px;font-weight:700;color:var(--green-strong)}
html[data-theme="dark"] .trainer-card .links span{color:var(--green)}

/* ---------- Profile ---------- */
.profile-head{display:flex;gap:14px;align-items:center}
.profile-head .p-avatar{
  width:60px;height:60px;flex:none;border-radius:20px;background:var(--green);
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:19px;
}
.profile-head b{display:block;font-size:17px;font-weight:800}
.profile-head span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:3px}
details.acc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow)}
details.acc summary{
  list-style:none;display:flex;align-items:center;gap:10px;min-height:54px;
  padding:0 16px;font-size:14.5px;font-weight:800;cursor:pointer;
}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:'▾';margin-left:auto;color:var(--ink-3);transition:transform .2s ease;font-size:12px}
details.acc[open] summary::after{transform:rotate(180deg)}
details.acc .acc-body{padding:2px 16px 16px;display:flex;flex-direction:column;gap:12px}

/* ---------- Photos / measurements ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.photo-grid figure{border-radius:12px;overflow:hidden;background:var(--surface-2)}
.photo-grid img{width:100%;aspect-ratio:3/4;object-fit:cover}
.photo-grid figcaption{font-size:10px;color:var(--ink-3);padding:5px 7px;font-weight:700;letter-spacing:.05em}
.measure-list{display:flex;flex-direction:column;gap:6px}
.measure-list>div{
  display:flex;align-items:center;gap:10px;padding:10px 13px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:13px;
}
.measure-list span{flex:1;color:var(--ink-2)}
.measure-list b{font-weight:800}
.measure-list em{font-style:normal;font-size:11.5px;color:var(--ink-3)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--nav-h) + var(--safe-bottom) + 18px);z-index:120;
  background:var(--ink);color:var(--bg);
  padding:11px 18px;border-radius:14px;font-size:13.5px;font-weight:600;
  max-width:86vw;text-align:center;
  animation:toastIn .2s ease;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- Splash / fatal ---------- */
.splash{
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
}
.splash img{height:auto}
.splash .splash-logo{width:180px;max-width:46vw;height:auto}

/* 0.0.0.36 — ADAPTIVE PWA ICON + CLEAN STANDALONE SPLASH */
@media (display-mode: standalone){
  .splash .splash-logo{display:none}
  .splash{gap:0}
  .splash .loader{opacity:0;animation:spin .8s linear infinite,splashLoaderReveal .18s ease .8s forwards}
}
@keyframes splashLoaderReveal{to{opacity:1}}

/* 0.0.0.36 — SPLASH + DEVELOPER CONTACT */
.app-meta{margin:18px 0 calc(var(--safe-bottom) + 6px);text-align:center;font-size:11.5px;line-height:1.55;color:var(--ink-3)}
.app-meta p{margin:0}
.developer-contact{display:inline-block;margin-top:3px;color:var(--ink-3);text-decoration:none}
.developer-contact b{color:var(--green-strong);font-weight:800}
.developer-contact:active{opacity:.72}
.loader{width:26px;height:26px;border-radius:50%;border:3px solid var(--surface-2);border-top-color:var(--green);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fatal{
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:32px;text-align:center;
}
.fatal .f-logo{font-size:22px;font-weight:800;letter-spacing:.02em;line-height:1.1}
.fatal .f-logo span{color:var(--green-strong)}
.fatal p{font-size:14px;color:var(--ink-2);max-width:300px;line-height:1.5}
.fatal .btn{width:auto;padding:0 28px}

/* ---------- Admin bits ---------- */
.admin-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.admin-kpis>div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center}
.admin-kpis span{display:block;font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--ink-3)}
.admin-kpis b{font-size:18px;font-weight:800}
.admin-week{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.admin-week>b{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--ink-3)}
.slot-list{display:flex;flex-direction:column;gap:6px}
.slot-list button{
  display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:13px;width:100%;
}
.slot-list button:disabled{opacity:.6}
.slot-list span{font-weight:700;flex:1}
.slot-list em{font-style:normal;font-size:11.5px;color:var(--ink-3)}

/* small helpers */
.muted{color:var(--ink-2)}
.mt-4{margin-top:4px}
.hidden{display:none !important}
.center{text-align:center}

/* ============================================================
   0.0.0.9 — role-based платформа: компактный shell, обложки,
   фильтры, KPI, комментарии, preview, вложения.
   ============================================================ */

/* компактные заголовки страниц вместо гигантских h-display */
.page-head{display:flex;flex-direction:column;gap:2px}
.page-head h1{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.page-head .accent{color:var(--green-strong)}
html[data-theme="dark"] .page-head .accent{color:var(--green)}
.content{gap:16px}
.content.nested{padding-top:12px}

/* компактный topbar вложенного экрана */
.topbar.compact{min-height:calc(48px + var(--safe-top));padding:calc(var(--safe-top) + 8px) 12px 8px;gap:6px}
.tb-back{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:24px;color:var(--ink-2);background:var(--surface-2);flex:none;line-height:1}
.tb-title{font-size:16.5px;font-weight:800;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* иконка-кнопка в topbar + бейдж непрочитанных */
.icon-btn{position:relative;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2);flex:none}
.icon-btn svg{width:19px;height:19px}
.icon-btn .dot{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--green);color:#fff;font-size:10px;font-weight:800;font-style:normal;display:grid;place-items:center}

/* обложки курсов — editorial-блок вместо пустого прямоугольника */
.course-cover{position:relative;width:64px;height:64px;flex:none;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--green)}
.course-cover span{position:relative;z-index:2;color:#fff;font-size:24px;font-weight:800}
.course-cover i{position:absolute;border-radius:50%;background:rgba(255,255,255,.14)}
.course-cover i:nth-child(2){width:56px;height:56px;right:-18px;top:-18px}
.course-cover i:nth-child(3){width:34px;height:34px;left:-10px;bottom:-10px;background:rgba(0,0,0,.12)}
.course-cover i:nth-child(4){width:16px;height:16px;right:10px;bottom:8px}
.course-cover.cv2{background:var(--blue)}
.course-cover.cv3{background:var(--violet)}
html[data-theme="dark"] .course-cover.cv3{background:var(--violet)}
.course-strip{display:flex;gap:12px;align-items:flex-start}
.course-strip-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.course-strip-body h3{font-size:16px;font-weight:800;letter-spacing:-.01em}
.course-strip-body small{font-size:12px;color:var(--ink-2)}
.course-strip-body p{font-size:12.5px;color:var(--ink-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.course-actions{display:flex;gap:8px;flex-wrap:wrap}

/* компактная сводка курса */
.course-summary{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:13px 14px;box-shadow:var(--shadow)}
.course-summary>div:first-child{flex:1;min-width:0}
.course-summary b{display:block;font-size:15px;font-weight:800}
.course-summary small{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.progress-ring.sm,.progress-ring.sm svg{width:68px;height:68px}
.progress-ring.sm b{font-size:14px}
.progress-ring.xs,.progress-ring.xs svg{width:44px;height:44px}
.progress-ring.xs b{font-size:11px}
.progress-ring.xs circle{stroke-width:4.5}

/* компактные ряды */
.row.slim{min-height:48px;padding:10px 12px}
.row.slim .row-icon{width:34px;height:34px;border-radius:10px;font-size:12px}
.row .row-icon svg{width:17px;height:17px}
.row.unread{border-color:var(--green)}
.row .row-body b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip;line-height:1.25}

/* фильтры-чипы */
.filter-chips{display:flex;gap:7px;flex-wrap:wrap}
.fchip{padding:8px 13px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--ink-2)}
.fchip.active{background:var(--green);border-color:var(--green);color:#fff}

/* KPI-плитки — кликабельные */
.stat-tile.tap{cursor:pointer;transition:transform .06s ease}
.stat-tile.tap:active{transform:scale(.97)}
.stat-grid.four .stat-tile b{font-size:17px}
.stat-grid.four .stat-tile{padding:11px 9px}
.stat-grid.four .stat-tile span{font-size:9px}

/* видео / media pending */
.media-pending{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:32px 20px;border:1px dashed var(--line);border-radius:var(--radius-m);background:var(--surface)}
.media-pending svg{width:30px;height:30px;color:var(--ink-3)}
.media-pending b{font-size:14.5px;font-weight:800}
.media-pending p{font-size:12.5px;color:var(--ink-2);max-width:280px}
.workout-desc{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.coach-note-card{border-left:3px solid var(--green);background:var(--surface);border-radius:0 12px 12px 0;padding:12px 14px}
.coach-note-card p{font-size:13.5px;line-height:1.5;margin-top:4px}

/* дельта замеров */
.measure-list em.up{color:var(--warn)}
.measure-list em.down{color:var(--green-strong)}
html[data-theme="dark"] .measure-list em.down{color:var(--green)}

/* вложения в чате */
.attach-btn{width:40px;height:40px;flex:none;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-2);cursor:pointer}
.attach-btn svg{width:18px;height:18px}
.chat-composer button svg{width:18px;height:18px}
.msg-attach{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:7px 11px;border-radius:10px;background:rgba(0,0,0,.08);font-size:12.5px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
.bubble.mine .msg-attach{background:rgba(255,255,255,.2)}
.msg-attach svg{width:15px;height:15px;flex:none}

/* preview banner */
.preview-banner{display:flex;align-items:center;gap:8px;background:var(--green-soft);color:var(--green-ink);border:1px solid var(--green);border-radius:12px;padding:10px 13px;font-size:13px}
.preview-banner svg{width:17px;height:17px;flex:none}
.preview-banner .link{margin-left:auto;font-weight:800;color:var(--green-ink);font-size:12.5px}
html[data-theme="dark"] .preview-banner{color:var(--green)}
html[data-theme="dark"] .preview-banner .link{color:var(--green)}

/* nav: 5 табов — компактнее подписи */
.bottom-nav button{font-size:10px}
.bottom-nav button svg{width:21px;height:21px}

/* theme choice compact */
.theme-choice button{flex-direction:row;align-items:center;gap:10px}
.theme-choice .ic{width:34px;height:34px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-2)}
.theme-choice .ic svg{width:18px;height:18px}
.theme-choice button.active .ic{background:var(--green-soft);color:var(--green-ink)}

/* формы: не гигантские */
.form textarea{min-height:64px}
.acc summary .badge{margin-left:8px}


/* ============================================================
   0.0.0.10 — CLIENT UX refinement
   Floating dock follows BotMDV v12-hybrid visual logic (read-only reference).
   ============================================================ */

:root{--nav-h:62px;--dock-gap:10px}
.content.with-dock{padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + 34px)}
.content.no-dock{padding-bottom:calc(var(--safe-bottom) + 24px)}

/* Floating glass dock: геометрия и плотность по BotMDV, FF green accent */
.bottom-nav{
  position:fixed;z-index:60;
  left:max(14px,calc((100vw - 560px)/2 + 14px));
  right:max(14px,calc((100vw - 560px)/2 + 14px));
  bottom:calc(10px + var(--safe-bottom));
  height:62px;padding:5px;
  display:block;
  overflow:hidden;
  border:1px solid rgba(23,23,25,.08);
  border-radius:22px;
  background-color:rgba(255,255,255,.88);
  background-image:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.04));
  box-shadow:0 12px 34px rgba(37,31,27,.16);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
}
html[data-theme="dark"] .bottom-nav{
  border-color:rgba(255,255,255,.10);
  background-color:rgba(20,20,22,.88);
  background-image:linear-gradient(rgba(255,255,255,.025),rgba(0,0,0,.04));
  box-shadow:0 14px 38px rgba(0,0,0,.48);
}
.bottom-nav .nav-inner{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;height:100%;max-width:none;gap:2px}
.bottom-nav button{min-width:0;min-height:52px;height:52px;border-radius:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink-3);font-size:9.5px;font-weight:600;transition:background .2s ease,color .2s ease,transform .16s ease}
.bottom-nav button:active{transform:scale(.96)}
.bottom-nav button.active{background:var(--green-soft);color:var(--green-strong);font-weight:750}
html[data-theme="dark"] .bottom-nav button.active{color:var(--green)}
.bottom-nav .nav-icon{width:28px;height:25px;display:grid;place-items:center}
.bottom-nav .nav-icon svg{width:21px;height:21px}
.bottom-nav button.active .nav-icon svg{stroke-width:2.35}

/* Home refinement */
.home-head{margin-bottom:-2px}
.course-switcher{width:100%;min-height:52px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}
.course-switcher span{display:flex;flex-direction:column;gap:2px;min-width:0}
.course-switcher small{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:700}
.course-switcher b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.course-switcher i{font-style:normal;color:var(--ink-3);font-size:20px}
.home-workout-card{gap:14px}
.cross-sell{margin-top:2px}
.cross-sell-card{text-align:left}
.cross-sell-card .chev{align-self:center;color:var(--ink-3);font-size:18px}
.selected-row{border-color:var(--green)}

/* Course detail/catalog */
.hidden{display:none!important}
.course-card-link{width:100%;text-align:left}
.browse-more{margin-top:2px}
.course-detail-hero{display:flex;flex-direction:column;gap:10px;padding:4px 2px}
.course-detail-hero>.course-cover{width:86px;height:86px;border-radius:20px;margin-bottom:4px}
.course-detail-hero>.course-cover span{font-size:32px}
.course-detail-hero h1{font-size:27px;line-height:1.08;letter-spacing:-.02em}
.course-detail-hero>p,.course-format p{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.course-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.course-facts span{padding:12px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.course-facts b{display:block;font-size:20px}
.course-facts small{font-size:10.5px;color:var(--ink-3)}
.course-format{display:flex;flex-direction:column;gap:6px}
.course-format h2{font-size:18px}

/* Course -> week -> workout */
.course-summary-large>div:first-child{display:flex;flex-direction:column;gap:4px}
.course-summary-large .progress-line{margin-top:6px}
.week-list{display:flex;flex-direction:column;gap:8px}
.week-row{width:100%;min-height:64px;padding:10px 12px;display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}
.week-index{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:11px;background:var(--surface-2);font-size:12px;font-weight:800;color:var(--green-strong)}
.week-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;text-align:left}
.week-main b{font-size:14.5px}
.week-main small{font-size:11.5px;color:var(--ink-2)}
.week-status{flex:none;padding:4px 8px;border-radius:99px;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.week-status.current{background:var(--green-soft);color:var(--green-ink)}
.week-status.done{background:var(--green);color:#fff}
.week-status.open{background:var(--surface-2);color:var(--ink-2)}
.week-row .chev{color:var(--ink-3)}
.week-detail-head{display:flex;flex-direction:column;gap:7px;padding:2px 1px 4px}
.week-detail-head h1{font-size:27px;letter-spacing:-.02em}
.week-detail-head p{font-size:12.5px;color:var(--ink-2)}
.workout-row{min-height:68px}
.workout-row .row-body b{line-height:1.3;-webkit-line-clamp:2}

/* Progress */
.progress-overview{display:flex;flex-direction:column;gap:10px}
.progress-meta{display:flex;justify-content:space-between;gap:12px;padding:4px 1px;font-size:12.5px}
.progress-meta span{color:var(--ink-2)}
.progress-meta b{font-size:12.5px;text-align:right}
.empty-inline{padding:18px;border:1px dashed var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:3px}
.empty-inline b{font-size:13.5px}
.empty-inline span{font-size:12px;color:var(--ink-2)}
.unit-input{position:relative}
.unit-input input{padding-right:48px!important}
.unit-input span{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:13px;font-weight:700}
.photo-picker{min-height:126px!important;padding:18px!important;border:1px dashed var(--line)!important;border-radius:16px!important;background:var(--surface-2)!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center;cursor:pointer}
.photo-picker-icon{width:38px;height:38px;border-radius:12px;background:var(--green-soft);color:var(--green-ink);display:grid;place-items:center}
.photo-picker-icon svg{width:19px;height:19px}
.photo-picker small{font-weight:500;color:var(--ink-3)}
.photo-preview{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.photo-preview img{width:100%;max-height:360px;object-fit:cover;border-radius:14px;border:1px solid var(--line)}

/* Notifications */
.notifications-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px;font-size:12px;color:var(--ink-2)}
.notification-row{align-items:flex-start}
.notification-type{display:inline-block;margin-bottom:4px;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green-strong)}
html[data-theme="dark"] .notification-type{color:var(--green)}

/* Profile / trainer */
.theme-choice.three{grid-template-columns:repeat(3,1fr);gap:7px}
.theme-choice.three button{padding:10px 8px;flex-direction:column;align-items:center;text-align:center;gap:6px}
.theme-choice.three .ic{width:32px;height:32px}
.theme-choice.three b{font-size:11.5px}
.compact-trainer{align-items:center}
.compact-trainer>div:nth-child(2){min-width:0;flex:1}
.compact-trainer p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.trainer-detail-head{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:4px 2px}
.t-avatar.large{width:68px;height:68px;border-radius:20px;font-size:18px;margin-bottom:4px}
.trainer-detail-head h1{font-size:27px;letter-spacing:-.02em}
.trainer-detail-head p{font-size:13px;color:var(--ink-2)}
.trainer-story{display:flex;flex-direction:column;gap:10px}
.trainer-story section{padding:15px;background:var(--surface);border:1px solid var(--line);border-radius:15px}
.trainer-story section p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:5px;white-space:pre-line}

.completion-summary{display:flex;flex-direction:column;gap:14px}

@media(max-width:360px){
  .bottom-nav{left:7px;right:7px;bottom:calc(6px + var(--safe-bottom));padding:5px;border-radius:22px}
  .bottom-nav button{font-size:8.5px}
  .week-status{font-size:8px;padding:4px 6px}
  .theme-choice.three b{font-size:10.5px}
}

.tariff-features{display:flex;flex-direction:column;gap:7px;list-style:none}.tariff-features li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}.tariff-features li svg{width:15px;height:15px;color:var(--green);flex:none}



/* ============================================================
   0.0.0.36 — COLOR SYSTEM
   Emerald stays the primary action color. Blue = progress,
   violet = body/technique, gold = premium/value, coral = danger.
   ============================================================ */
.tone-blue{--tone:var(--blue);--tone-soft:var(--blue-soft);--tone-ink:var(--blue-ink)}
.tone-violet{--tone:var(--violet);--tone-soft:var(--violet-soft);--tone-ink:var(--violet-ink)}
.tone-gold{--tone:var(--gold);--tone-soft:var(--gold-soft);--tone-ink:var(--gold-ink)}
.tone-coral{--tone:var(--coral);--tone-soft:var(--coral-soft);--tone-ink:var(--coral-ink)}
.tone-emerald{--tone:var(--emerald);--tone-soft:var(--emerald-soft);--tone-ink:var(--emerald-ink)}

/* Home metrics use color only as a small semantic cue, not as a full-card fill. */
.home-stat-grid .stat-tile{position:relative;overflow:hidden}
.home-stat-grid .stat-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tone,var(--line))}
.home-stat-grid .stat-tile.tone-blue b{color:var(--blue-ink)}
.home-stat-grid .stat-tile.tone-violet b{color:var(--violet-ink)}
html[data-theme="dark"] .home-stat-grid .stat-tile.tone-blue b{color:var(--blue)}
html[data-theme="dark"] .home-stat-grid .stat-tile.tone-violet b{color:var(--violet)}

/* Progress is consistently blue across course/home/progress views. */
.progress-overview .progress-line i,.home-workout-card .progress-line i,.purchased-course .progress-line i{background:var(--blue)}
.home-workout-card .progress-ring .bar,.course-summary .progress-ring .bar{stroke:var(--blue)}

/* Tariff/value hierarchy. Primary buttons stay emerald. */
.tariff-inline{display:inline-flex;align-items:center;padding:2px 7px;border-radius:99px;font-size:.92em;font-weight:750;background:var(--tone-soft,var(--surface-2));color:var(--tone-ink,var(--ink-2));vertical-align:baseline}
.tariff-card.tier-2{border-color:color-mix(in srgb,var(--blue) 24%,var(--line))}
.tariff-card.tier-3{border-color:color-mix(in srgb,var(--violet) 26%,var(--line))}
.tariff-card.tier-4{border-color:color-mix(in srgb,var(--gold) 42%,var(--line))}
.tariff-card.tier-2 .tariff-top b{color:var(--blue-ink)}
.tariff-card.tier-3 .tariff-top b{color:var(--violet-ink)}
.tariff-card.tier-4 .tariff-top b{color:var(--gold-ink)}
html[data-theme="dark"] .tariff-card.tier-2 .tariff-top b{color:var(--blue)}
html[data-theme="dark"] .tariff-card.tier-3 .tariff-top b{color:var(--violet)}
html[data-theme="dark"] .tariff-card.tier-4 .tariff-top b{color:var(--gold)}
.tariff-card.tier-4 .your{background:var(--gold-soft);color:var(--gold-ink)}

/* Section/function accents: restrained icon/tint use. */
.row .row-icon.blue{background:var(--blue-soft);color:var(--blue-ink)}
.row .row-icon.violet{background:var(--violet-soft);color:var(--violet-ink)}
.row .row-icon.gold{background:var(--gold-soft);color:var(--gold-ink)}
.support-row.tone-violet-row{border-color:color-mix(in srgb,var(--violet) 22%,var(--line))}
.support-row.tone-blue-row{border-color:color-mix(in srgb,var(--blue) 22%,var(--line))}
.measurements-section .section-head .link{color:var(--violet-ink)}
.photos-section .section-head .link{color:var(--blue-ink)}
html[data-theme="dark"] .measurements-section .section-head .link{color:var(--violet)}
html[data-theme="dark"] .photos-section .section-head .link{color:var(--blue)}
.measurements-section .measure-list>div{border-left:3px solid color-mix(in srgb,var(--violet) 72%,transparent)}
.photos-section .photo-grid figure{outline:1px solid color-mix(in srgb,var(--blue) 24%,transparent)}

/* Status language stays semantic. */
.badge.warn{background:var(--gold-soft);color:var(--gold-ink)}
html[data-theme="dark"] .badge.warn{background:var(--gold-soft);color:var(--gold-ink)}
.btn.danger,.link.danger{color:var(--coral)}

/* ============================================================
   0.0.0.11 — CLIENT VISUAL ALIGNMENT HOTFIX
   Optical centering for controls, metrics, rings and dock icons.
   ============================================================ */

/* All icon glyphs use their own SVG box, never text baseline. */
.tb-back,
.icon-btn,
.attach-btn,
.row .row-icon,
.bottom-nav .nav-icon,
.sheet-head .x {
  box-sizing:border-box;
}
.tb-back{
  padding:0;
  font-size:0;
  line-height:0;
  align-items:center;
  justify-items:center;
}
.tb-back svg{
  display:block;
  width:20px;
  height:20px;
  stroke-width:2.15;
  transform:translateX(-.35px);
}
.icon-btn svg,.attach-btn svg,.row .row-icon svg,.btn svg,.sheet-head .x svg{
  display:block;
}

/* Progress percentage must remain geometrically centered even inside course-summary,
   where generic .course-summary b previously overrode display:grid. */
.progress-ring{
  display:grid;
  place-items:center;
}
.progress-ring svg{
  display:block;
  grid-area:1 / 1;
}
.progress-ring b,
.course-summary .progress-ring b{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}
.course-summary .progress-ring.xs b{font-size:11px}
.course-summary .progress-ring.sm b{font-size:14px}

/* Numeric values with suffixes align to a common baseline. */
.stat-tile b{
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  line-height:1.05;
  white-space:nowrap;
}
.stat-tile b small{
  display:inline-block;
  line-height:1;
  margin:0;
}

/* Week status chips: fixed optical center regardless of font metrics. */
.week-status,
.row .badge,
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  min-height:24px;
  box-sizing:border-box;
}
.week-status{padding-top:5px;padding-bottom:5px}

/* Row chevrons get a real icon box instead of floating on the text baseline. */
.row .chev,
.week-row .chev,
.cross-sell-card .chev{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:grid;
  place-items:center;
  align-self:center;
  margin:0;
  padding:0;
  font-style:normal;
  font-size:19px;
  line-height:20px;
  text-align:center;
  transform:translateY(-.4px);
}

/* Dock: every icon/label pair uses the exact same internal box. */
.bottom-nav button{
  padding:0 4px;
  text-align:center;
}
.bottom-nav .nav-icon{
  display:grid;
  place-items:center;
  flex:0 0 25px;
  margin:0 auto;
  line-height:0;
}
.bottom-nav .nav-icon svg{
  display:block;
  width:21px;
  height:21px;
  margin:0;
}
.bottom-nav button > span:not(.nav-icon){
  display:block;
  width:100%;
  line-height:1.08;
  text-align:center;
}

/* Nested top bar: back icon and title share the same vertical center. */
.topbar.compact{
  align-items:center;
}
.tb-title{
  display:flex;
  align-items:center;
  min-height:36px;
  line-height:1.15;
}

/* Comment privacy note belongs to the heading, not to a competing right column. */
.comment-section-head{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:0 1px;
}
.comment-section-head h2{
  font-size:20px;
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.15;
}
.comment-section-head span{
  color:var(--ink-3);
  font-size:11.5px;
  line-height:1.3;
}

/* Buttons with icons: predictable vertical and optical center. */
.btn,
.icon-btn,
.attach-btn{
  line-height:1;
}
.btn svg{width:18px;height:18px;flex:none}

/* ============================================================
   BROWSER WEBAPP / HOME SCREEN — 0.0.0.12
   ============================================================ */
.browser-profile-section{margin-top:4px}
.browser-profile-row{width:100%;text-align:left}
.browser-access-card{display:flex;flex-direction:column;gap:12px}
.browser-access-card h2,.activation-ready h2{font-size:19px;line-height:1.15;letter-spacing:-.02em}
.browser-access-card p,.activation-ready p{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.browser-access-icon{width:46px;height:46px;border-radius:14px;background:var(--green-soft);color:var(--green-ink);display:grid;place-items:center}
.browser-access-icon svg{width:23px;height:23px;display:block}
.activation-ready{display:flex;flex-direction:column;gap:12px;border-color:color-mix(in srgb,var(--green) 38%,var(--line))}
.activation-ready .badge{align-self:flex-start}
.activation-url{font-size:11.5px;line-height:1.45;word-break:break-all;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px;color:var(--ink-2);user-select:all}
.browser-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.install-steps{margin:0;padding:0 0 0 22px;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.install-steps li+li{margin-top:7px}
.browser-session-list .row{min-height:64px}
.browser-session-list .badge{flex:none}
.link.danger{color:#b74a4a;font-size:12px;font-weight:750;flex:none}
.browser-revoke-all{width:100%;margin-top:10px}
.browser-logout{display:block;margin:14px auto 0;color:#a34444;font-size:13px;font-weight:750;text-align:center}
@media(max-width:380px){.browser-actions{grid-template-columns:1fr}.activation-url{font-size:10.5px}}


/* ============================================================
   0.0.0.36 — SUPPORT UI HOTFIX + COMMUNICATION HUB
   ============================================================ */
.icon-btn .dot.is-empty,.nav-badge.is-empty,.unread-count.is-empty{display:none!important}
.bottom-nav .nav-icon{position:relative}
.nav-badge{
  position:absolute;top:-5px;right:-8px;z-index:2;
  min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  display:grid;place-items:center;box-sizing:border-box;
  background:var(--green);color:#fff;border:2px solid var(--surface);
  font-size:9px;font-weight:850;line-height:1;font-style:normal;
  box-shadow:0 2px 8px rgba(0,0,0,.16)
}
html[data-theme="dark"] .nav-badge{border-color:rgba(20,20,22,.94)}
.unread-count{
  flex:none;min-width:24px;height:24px;padding:0 7px;border-radius:99px;
  display:grid;place-items:center;background:var(--green);color:#fff;
  font-size:11px;font-weight:850;line-height:1
}
.unread-count.muted-count{background:var(--green-soft);color:var(--green-ink)}
.support-profile-row .row-body small{max-width:100%}
.support-page-head{margin-bottom:2px}
.support-hub{display:flex;flex-direction:column;gap:10px}
.support-row{min-height:76px;text-align:left}
.support-row.primary{border-color:color-mix(in srgb,var(--green) 32%,var(--line))}
.support-row.locked{opacity:.78}
.support-row-end{display:flex;align-items:center;justify-content:center;flex:none}
.support-row .row-body small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
.standalone-chat{min-height:calc(100dvh - 190px)}
.standalone-chat .chat-log{padding:2px 0 8px}
.new-messages-divider{display:flex;align-items:center;gap:10px;margin:8px 0;color:var(--green-strong);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.new-messages-divider:before,.new-messages-divider:after{content:"";height:1px;background:var(--green-soft);flex:1}
.new-messages-divider span{flex:none}
.standalone-chat .bubble{max-width:min(84%,420px);border-radius:18px;padding:11px 13px}
.standalone-chat .bubble.mine{border-bottom-right-radius:7px}
.standalone-chat .bubble:not(.mine){border-bottom-left-radius:7px}
.review-list{display:flex;flex-direction:column;gap:10px}
.review-card{display:flex;flex-direction:column;gap:9px}
.review-card .section-head{margin:0}
.review-card .section-head h2{font-size:15px}
.trainer-answer{padding:11px 12px;border-radius:13px;background:var(--green-soft)}
.trainer-answer span{display:block;color:var(--green-ink);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.trainer-answer p{font-size:13.5px;line-height:1.45}
.review-waiting{font-size:12px;color:var(--ink-2)}
.session-slot-list{display:flex;flex-direction:column;gap:9px}
.session-slot-list button{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow);padding:14px;text-align:left;display:grid;grid-template-columns:1fr auto;gap:4px 12px}
.session-slot-list button span{font-size:13px;font-weight:750}
.session-slot-list button b{font-size:14px;text-align:right}
.session-slot-list button em{grid-column:1/-1;font-size:11.5px;color:var(--ink-2);font-style:normal}
.session-slot-list button:disabled{opacity:.55}


/* ============================================================
   0.0.0.36 — SUPPORT UI HOTFIX
   Full-screen support flows: no dock; compact message composer.
   ============================================================ */

/* Chat composer sits against the device safe-area because support/chat
   routes intentionally hide the global dock. */
.chat-composer{
  bottom:calc(var(--safe-bottom) + 8px);
  min-height:52px;
  padding:6px;
  gap:6px;
  border-radius:16px;
  align-items:center;
}
.chat-composer textarea{
  min-height:34px;
  max-height:84px;
  padding:6px 7px;
  line-height:1.35;
  font-size:14.5px;
  overflow-y:auto;
}
.chat-composer .attach-btn,
.chat-composer button{
  width:38px;
  height:38px;
  border-radius:12px;
  align-self:center;
}
.chat-composer .attach-btn svg,
.chat-composer button svg{
  width:18px;
  height:18px;
}

/* With no dock, a chat thread can use almost all of the viewport and
   the composer stays near the bottom edge instead of floating high. */
.standalone-chat{min-height:calc(100dvh - 104px)}
.content.no-dock .standalone-chat{padding-bottom:0}


/* ============================================================
   0.0.0.36 — BRAND SYSTEM
   Theme-aware FF monogram + PWA launcher identity.
   ============================================================ */
.brand-mark{transition:background-color .18s ease,border-color .18s ease}
.brand-mark-img{user-select:none;-webkit-user-drag:none}

/* ============================================================
   0.0.0.36 — ADMIN ROLE & SUBSCRIPTION PREVIEW SWITCHER
   ============================================================ */
.role-preview-switch{
  min-height:34px;max-width:220px;padding:0 10px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface-2);color:var(--ink-2);display:flex;align-items:center;gap:6px;
  font-size:9.5px;font-weight:850;letter-spacing:.04em;white-space:nowrap;overflow:hidden;
}
.role-preview-switch svg{width:15px;height:15px;flex:none}
.role-preview-switch span{overflow:hidden;text-overflow:ellipsis}
.role-preview-switch i{font-style:normal;color:var(--ink-3);flex:none}
.role-preview-switch.is-preview{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));background:var(--gold-soft);color:var(--gold-ink)}
.role-preview-switch.compact{max-width:170px;min-height:32px}
.role-preview-banner{
  position:sticky;top:calc(var(--topbar-h) + var(--safe-top));z-index:24;margin:0;padding:8px 14px;
  background:color-mix(in srgb,var(--gold-soft) 94%,var(--surface));border-bottom:1px solid color-mix(in srgb,var(--gold) 32%,var(--line));
  color:var(--gold-ink);display:flex;align-items:center;gap:9px;
}
.role-preview-banner>svg{width:18px;height:18px;flex:none}
.role-preview-banner span{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.role-preview-banner b{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role-preview-banner small{font-size:8.5px;letter-spacing:.04em;opacity:.82}
.role-preview-banner button{font-size:10px;font-weight:800;color:inherit;padding:6px 8px;border-radius:9px;background:color-mix(in srgb,var(--gold) 12%,transparent)}
.preview-switch-intro{display:flex;gap:11px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.preview-switch-intro .preview-lock{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-ink);flex:none}
.preview-switch-intro svg{width:18px;height:18px}
.preview-switch-intro b{display:block;font-size:13.5px}.preview-switch-intro p{font-size:11.5px;line-height:1.4;color:var(--ink-2);margin-top:3px}
.preview-client-options{display:flex;flex-direction:column;gap:12px}.preview-client-options.hidden{display:none}
.preview-demo-note{font-size:11px;line-height:1.45;color:var(--ink-2);padding:10px 11px;border-left:3px solid var(--gold);background:var(--gold-soft);border-radius:0 10px 10px 0}
.preview-expired-card{border-color:color-mix(in srgb,var(--coral) 28%,var(--line))}

/* 0.0.0.36 — preserve approved 0.0.0.18 terminal color polish */
html[data-theme="dark"] .hero-card .btn{background:#0c855f;color:#fff}
html[data-theme="dark"] .home-stat-grid .stat-tile.tone-violet b{color:#8d78cf}
.trainer-card.compact-trainer > .btn.compact{
  background:#f8fbf9;color:var(--emerald-strong);border:1px solid color-mix(in srgb,var(--emerald) 30%,var(--line));box-shadow:none;
}
html[data-theme="dark"] .trainer-card.compact-trainer > .btn.compact{
  background:var(--surface-2);color:var(--emerald-ink);border:1px solid color-mix(in srgb,var(--emerald) 28%,var(--line));box-shadow:none;
}
.trainer-card.compact-trainer > .btn.compact:active{transform:scale(.985)}
@media(max-width:390px){.role-preview-switch{max-width:165px;padding:0 8px}.role-preview-switch span{font-size:8.5px}.brand-copy{max-width:126px}}

@media(max-width:460px){.topbar.has-role-preview{gap:8px}.topbar.has-role-preview .brand-copy{display:none}.topbar.has-role-preview .role-preview-switch{max-width:190px;flex:0 1 auto;min-width:0}}


/* ============================================================
   0.0.0.36 — PREVIEW PICKER POLISH
   Custom FF pickers replace native Android selects in admin preview.
   ============================================================ */
.role-preview-form{gap:13px}
.preview-choice-label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:750;color:var(--ink-2)}
.preview-choice-label>input[type="hidden"]{display:none}
.preview-choice-field{
  width:100%;min-height:52px;padding:0 14px;border:1px solid var(--line);border-radius:13px;
  background:var(--surface);color:var(--ink);display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:750;box-shadow:var(--shadow);
}
.preview-choice-field span{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-choice-field i{font-style:normal;font-size:20px;line-height:1;color:var(--ink-3);transform:translateY(-1px)}
.preview-choice-field:active{transform:scale(.992)}
.preview-choice-backdrop{z-index:96}
.preview-choice-backdrop .sheet{max-height:72dvh}
.preview-choice-list{display:flex;flex-direction:column;gap:8px}
.preview-choice-row{
  width:100%;min-height:62px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);
}
.preview-choice-row:active{transform:scale(.993)}
.preview-choice-row.is-selected{border-color:color-mix(in srgb,var(--emerald) 55%,var(--line));background:var(--emerald-soft)}
.preview-choice-radio{
  width:28px;height:28px;border-radius:50%;flex:none;border:1.5px solid var(--line);
  display:grid;place-items:center;color:var(--emerald-strong);background:var(--surface-2);
}
.preview-choice-row.is-selected .preview-choice-radio{border-color:var(--emerald);background:color-mix(in srgb,var(--emerald-soft) 72%,var(--surface));}
.preview-choice-radio svg{width:15px;height:15px;stroke-width:2.4}
.preview-choice-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.preview-choice-copy b{font-size:14.5px;font-weight:760;color:var(--ink)}
.preview-choice-copy small{font-size:11.5px;line-height:1.35;color:var(--ink-2)}
html[data-theme="dark"] .preview-choice-row.is-selected{background:color-mix(in srgb,var(--emerald-soft) 70%,var(--surface))}
html[data-theme="dark"] .preview-choice-row.is-selected .preview-choice-radio{color:var(--emerald-ink)}
@media(max-width:390px){
  .role-preview-switch{max-width:178px}
  .role-preview-switch span{font-size:8.3px}
}


/* 0.0.0.36 — CLIENT TARIFF UX + TRAINER PROFILE PHOTO */

.t-avatar {
  overflow: hidden;
  flex: 0 0 auto;
}

.t-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-trainer-card {
  display: flex;
  align-items: center;
  gap: 10px;
}

.client-trainer-card .trainer-card-main {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 12px;
  align-items: center;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.trainer-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.trainer-card-copy b {
  font-size: 14.5px;
  line-height: 1.25;
}

.trainer-card-copy em {
  color: var(--emerald-strong);
  font-size: 12.5px;
  line-height: 1.25;
  font-style: normal;
  font-weight: 750;
}

html[data-theme="dark"] .trainer-card-copy em {
  color: var(--emerald-ink);
}

.trainer-chat-cta {
  flex: 0 0 auto;
}

.trainer-photo-editor {
  display: flex;
  align-items: center;
  gap: 14px;
}

.trainer-photo-editor > div:last-child {
  min-width: 0;
}

.trainer-photo-editor b {
  display: block;
  margin-bottom: 4px;
}

.trainer-photo-editor p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.trainer-photo-picker {
  margin-top: 4px;
}

.tariff-compare-head p {
  max-width: 34rem;
}

.tariff-matrix-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.tariff-matrix {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

.tariff-matrix th,
.tariff-matrix td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}

.tariff-matrix tr:last-child th,
.tariff-matrix tr:last-child td {
  border-bottom: 0;
}

.tariff-matrix th:last-child,
.tariff-matrix td:last-child {
  border-right: 0;
}

.tariff-matrix thead th {
  background: var(--surface-2);
  vertical-align: top;
}

.tariff-matrix thead th:first-child,
.tariff-matrix tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 150px;
  min-width: 150px;
  text-align: left;
  background: var(--surface);
}

.tariff-matrix thead th:first-child {
  z-index: 3;
  background: var(--surface-2);
}

.tariff-matrix thead th b {
  display: block;
  font-size: 13px;
}

.tariff-matrix thead th small {
  display: block;
  margin-top: 5px;
  white-space: nowrap;
  color: var(--muted);
}

.tariff-matrix thead th em {
  display: inline-flex;
  margin-top: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--emerald-soft);
  color: var(--emerald-ink);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tariff-matrix td.yes {
  color: var(--emerald-strong);
}

html[data-theme="dark"] .tariff-matrix td.yes {
  color: var(--emerald-ink);
}

.tariff-matrix td.no {
  color: var(--muted);
}

.tariff-matrix .is-current {
  box-shadow: inset 0 3px 0 var(--emerald);
}

.tariff-compare-note {
  margin: 12px 2px 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.tariff-compare-entry .row-icon {
  color: var(--emerald-strong);
}

.instagram-row {
  width: 100%;
}

@media (max-width: 420px) {
  .client-trainer-card {
    gap: 8px;
  }

  .client-trainer-card .trainer-chat-cta {
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* ============================================================
   0.0.0.36 — CLIENT UX POLISH
   ============================================================ */

/* Верхняя Preview-кнопка уже показывает режим.
   Второй жёлтый banner больше не нужен. */
.role-preview-banner {
  display: none !important;
}

/* Trainer detail */
.trainer-detail-head {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 18px !important;
  row-gap: 3px !important;
  align-items: center !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 20px 4px 16px !important;
  margin: 0 0 12px !important;
}

.trainer-detail-head .t-avatar.large {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
  margin: 0 !important;
  border-radius: 26px !important;
  font-size: 25px !important;
}

.trainer-detail-head > .eyebrow,
.trainer-detail-head > h1,
.trainer-detail-head > p {
  grid-column: 2 !important;
  margin-left: 0 !important;
}

.trainer-detail-head > .eyebrow {
  align-self: end !important;
}

.trainer-detail-head > h1 {
  margin-top: 1px !important;
  margin-bottom: 1px !important;
}

.trainer-detail-head > p {
  margin-top: 1px !important;
  align-self: start !important;
}

/* Own choice/date controls */
.picker-button {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  font: inherit;
  font-weight: 700;
}

.picker-button i {
  color: var(--muted);
  font-size: 15px;
  font-style: normal;
}

.app-choice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-choice-row {
  appearance: none;
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  color: var(--text);
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.app-choice-row span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-choice-row b {
  font-size: 14px;
}

.app-choice-row small {
  color: var(--muted);
  font-size: 11px;
}

.app-choice-row i {
  color: var(--muted);
  font-size: 18px;
  font-style: normal;
}

.app-choice-row.selected {
  border-color: color-mix(
    in srgb,
    var(--emerald) 55%,
    var(--line)
  );
  background: var(--emerald-soft);
}

.app-choice-row.selected i {
  color: var(--emerald-strong);
}

.app-calendar {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.app-calendar-nav {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
}

.app-calendar-nav b {
  text-align: center;
  font-size: 15px;
}

.app-calendar-nav button {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 25px;
}

.app-calendar-week,
.app-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.app-calendar-week span {
  padding: 4px 0;
  color: var(--muted);
  text-align: center;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.app-calendar-day,
.app-calendar-empty {
  aspect-ratio: 1;
}

.app-calendar-day {
  appearance: none;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.app-calendar-day.today {
  box-shadow: inset 0 0 0 1px var(--line);
}

.app-calendar-day.selected {
  background: var(--emerald);
  color: #fff;
}

.app-calendar-day:disabled {
  opacity: .24;
}

.app-calendar-actions {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

/* Compact tariff comparison */
.tariff-matrix-wrap {
  border-radius: 16px !important;
}

.tariff-matrix {
  min-width: 660px !important;
  font-size: 11.5px !important;
}

.tariff-matrix th,
.tariff-matrix td {
  padding: 9px 7px !important;
  height: 56px !important;
}

.tariff-matrix tbody th {
  width: 132px !important;
  min-width: 132px !important;
  line-height: 1.25 !important;
}

.tariff-matrix thead th:first-child {
  width: 132px !important;
  min-width: 132px !important;
}

.tariff-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

.tariff-matrix thead th:first-child {
  left: 0;
  z-index: 5;
}

.tariff-matrix tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
}

.tariff-matrix td svg,
.tariff-matrix td .icon,
.tariff-matrix td > svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
}

.tariff-matrix thead th b {
  font-size: 12px !important;
}

.tariff-matrix thead th small {
  font-size: 10px !important;
}

.tariff-matrix thead th em {
  margin-top: 4px !important;
  padding: 2px 6px !important;
  font-size: 8px !important;
}

@media (max-width: 420px) {
  .trainer-detail-head {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    column-gap: 14px !important;
  }

  .trainer-detail-head .t-avatar.large {
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
  }
}


/* FF 0.0.0.36 trainer default photo */
.t-avatar {
  background-image:url('/miniapp/assets/trainer-nikita-0.0.0.37.webp?v=0.0.0.37');
  background-size:cover;
  background-position:center 18%;
  background-repeat:no-repeat;
  color:transparent;
  overflow:hidden;
}
.t-avatar img,
.trainer-photo img,
.trainer-avatar-photo {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
  display:block;
}


/* ============================================================
   0.0.0.36 — COMPACT FF CALENDAR
   ============================================================ */

.app-calendar {
  gap: 8px !important;
}

.app-calendar-nav {
  grid-template-columns: 40px minmax(0,1fr) 40px !important;
  gap: 6px !important;
}

.app-calendar-nav button {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

.app-calendar-week,
.app-calendar-grid {
  grid-template-columns: repeat(7,minmax(0,1fr)) !important;
  column-gap: 3px !important;
  row-gap: 3px !important;
}

.app-calendar-week span {
  padding: 2px 0 4px !important;
  font-size: 10px !important;
}

.app-calendar-day,
.app-calendar-empty {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
}

.app-calendar-day {
  padding: 0 !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

.app-calendar-day.selected {
  border-radius: 10px !important;
}

.app-calendar-actions {
  min-height: 30px !important;
  margin-top: 2px !important;
}

@media (max-width: 390px) {
  .app-calendar-day,
  .app-calendar-empty {
    height: 36px !important;
    min-height: 36px !important;
  }
}


/* 0.0.0.36 — trainer image wins over legacy avatar backgrounds */

.trainer-card .t-avatar,
.trainer-detail-head .t-avatar,
.client-trainer-card .t-avatar,
.trainer-photo-editor .t-avatar {
  background-image: none !important;
  color: transparent !important;
}

.trainer-card .t-avatar img,
.trainer-detail-head .t-avatar img,
.client-trainer-card .t-avatar img,
.trainer-photo-editor .t-avatar img,
.trainer-avatar-photo {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center 18% !important;
}


/* ============================================================
   0.0.0.36 — USER PROFILE PHOTOS
   ============================================================ */

.user-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;
  border-radius: 13px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.user-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.row-user-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 13px;
}

.profile-user-avatar {
  width: 60px;
  height: 60px;
  min-width: 60px;
  flex-basis: 60px;
  border-radius: 20px;
}

.profile-photo-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-photo-preview {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-photo-preview > div:last-child {
  min-width: 0;
}

.profile-photo-preview b {
  display: block;
  font-size: 15px;
  font-weight: 800;
}

.profile-photo-preview p {
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.4;
}

.profile-photo-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bubble-meta {
  display: flex !important;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.bubble-meta > span:last-child {
  min-width: 0;
}

.chat-user-avatar,
.t-avatar.chat-avatar {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  flex: 0 0 22px !important;
  border-radius: 7px !important;
}

.chat-user-avatar .user-avatar-fallback {
  font-size: 8px;
}

.t-avatar.chat-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html[data-theme="dark"] .user-avatar {
  background: var(--surface-2);
}



/* ============================================================
   0.0.0.36 — PROFILE AVATAR POLISH
   ============================================================ */

.profile-avatar-control {
  position: relative;
  width: 60px;
  height: 60px;
  min-width: 60px;
  flex: 0 0 60px;
  display: block !important;
  margin: 0 !important;
}

.profile-head .profile-avatar-control {
  display: block !important;
  margin: 0 !important;
}

.profile-head .profile-avatar-control
.profile-user-avatar {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      145deg,
      var(--surface-2),
      color-mix(
        in srgb,
        var(--emerald-soft) 55%,
        var(--surface)
      )
    ) !important;
}

.profile-head .profile-avatar-control
.profile-user-avatar img {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

.profile-head .profile-avatar-control
.user-avatar-fallback {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.profile-photo-camera {
  appearance: none;
  position: absolute;
  right: -5px;
  bottom: -5px;
  z-index: 4;

  width: 27px;
  height: 27px;
  min-width: 27px;
  min-height: 27px;

  padding: 0;
  margin: 0;

  border: 2px solid var(--surface);
  border-radius: 50%;

  display: grid;
  place-items: center;

  background: var(--emerald);
  color: #fff;

  box-shadow:
    0 3px 10px
    rgba(0,0,0,.16);

  cursor: pointer;
}

.profile-photo-camera svg {
  width: 14px;
  height: 14px;
  display: block;
}

.profile-photo-camera:active {
  transform: scale(.93);
}

.profile-photo-camera.is-preview {
  opacity: .92;
}

.profile-photo-camera.is-loading {
  opacity: .55;
  pointer-events: none;
}

html[data-theme="dark"]
.profile-photo-camera {
  border-color: var(--surface);
}

html[data-theme="dark"]
.profile-head .profile-avatar-control
.profile-user-avatar {
  background:
    linear-gradient(
      145deg,
      var(--surface-2),
      color-mix(
        in srgb,
        var(--emerald-soft) 38%,
        var(--surface)
      )
    ) !important;
}



/* ============================================================
   0.0.0.36 — UNIFIED CLIENT IDENTITY
   Profile photo in global topbar.
   ============================================================ */

.avatar {
  overflow: hidden;
  padding: 0 !important;
}

.avatar .topbar-user-avatar {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  overflow: hidden;
}

.avatar .topbar-user-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.avatar .topbar-user-avatar
.user-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: 1;
  text-align: center;
}



/* ============================================================
   0.0.0.36 — PROFILE PHOTO CROPPER
   ============================================================ */

.profile-cropper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-crop-stage {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 22px;
  background: #111;
  user-select: none;
  -webkit-user-select: none;
}

.profile-crop-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

.profile-crop-canvas:active {
  cursor: grabbing;
}

.profile-crop-mask {
  position: absolute;
  inset: 8%;
  pointer-events: none;
  border: 2px solid rgba(255,255,255,.96);
  border-radius: 50%;
  box-shadow:
    0 0 0 999px rgba(0,0,0,.37),
    inset 0 0 0 1px rgba(0,0,0,.1);
}

.profile-crop-help {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.profile-crop-zoom {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
}

.profile-crop-zoom input[type="range"] {
  width: 100%;
  accent-color: var(--emerald);
}

.profile-crop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 380px) {
  .profile-crop-stage {
    border-radius: 18px;
  }

  .profile-cropper {
    gap: 13px;
  }
}



/* ============================================================
   0.0.0.36 — PROFILE PHOTO REFRESH
   ============================================================ */

.user-avatar > img,
.profile-user-avatar > img,
.topbar-user-avatar > img,
.row-user-avatar > img,
.chat-user-avatar > img {
  image-rendering: auto;
}



/* ============================================================
   0.0.0.36 — BASIC EXPIRED UX
   ============================================================ */

.expired-access-card,
.expired-subscription-card {
  border-color: rgba(120, 104, 60, .22);
}

.expired-access-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(151, 127, 59, .10);
  color: #806a2d;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
}

[data-theme="dark"] .expired-access-badge {
  background: rgba(211, 180, 91, .13);
  color: #d9bc6d;
}

.expired-progress-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0;
}

.expired-progress-summary > span {
  display: flex;
  min-width: 0;
  min-height: 70px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.expired-progress-summary b {
  font-size: 18px;
}

.expired-progress-summary small {
  color: var(--muted);
  font-size: 11px;
}

.expired-course-view {
  width: 100%;
}

.expired-course-state {
  max-width: none;
}

.expired-course-state > svg {
  width: 62px;
  height: 62px;
}

.expired-progress-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px 15px;
  border: 1px solid rgba(151, 127, 59, .22);
  border-radius: 16px;
  background: rgba(151, 127, 59, .06);
}

.expired-progress-note > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.expired-progress-note span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.expired-progress-note b {
  font-size: 14px;
}

.expired-progress-note small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.progress-locked-action {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.subscription-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subscription-expired-copy {
  margin: 2px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.purchased-course.is-expired {
  opacity: 1;
}

@media (max-width: 390px) {
  .expired-progress-summary {
    gap: 6px;
  }

  .expired-progress-summary > span {
    min-height: 64px;
    padding: 8px;
  }

  .expired-progress-summary b {
    font-size: 16px;
  }

  .expired-progress-summary small {
    font-size: 10px;
  }
}



/* ============================================================
   0.0.0.36 — CLIENT NAVIGATION & MEDIUM UX POLISH
   ============================================================ */


/* Five items: Trainer is the true middle item. */
.nav-inner.client-five-tabs {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
}

.nav-inner.client-five-tabs > button {
  min-width: 0;
}

.nav-inner.client-five-tabs > button > b {
  min-width: 0;
  font-size: 10px;
  white-space: nowrap;
}


/* Client profile menu — one visual language. */
.profile-client-menu .row-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--text-secondary);
}

.profile-client-menu .row-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}


/* Home trainer card:
   communication now lives in the Trainer dock tab.
   Do not mutate the Home template literal. */
.client-trainer-card [data-go="chat"] {
  display: none !important;
}


/* Trainer hub. */
.trainer-hub-head {
  margin-bottom: 18px;
}

.trainer-hub-card {
  padding: 0;
  overflow: hidden;
}

.trainer-hub-profile {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.trainer-hub-avatar {
  flex: 0 0 auto;
}

.trainer-hub-profile-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
}

.trainer-hub-profile-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.trainer-hub-profile-copy b {
  font-size: 17px;
  line-height: 1.2;
}

.trainer-hub-profile-copy em {
  color: var(--green-strong);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.trainer-hub-chat {
  margin-top: 12px;
}

.trainer-hub-chat-icon {
  background: var(--surface-soft) !important;
  color: var(--green-strong) !important;
}


/* Nested header polish. */
.topbar.compact .tb-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.topbar.compact .role-preview-switch {
  min-width: 0;
  max-width: 122px;
  flex: 0 1 122px;
}

.topbar.compact .role-preview-switch span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}



/* ============================================================
   0.0.0.36 — MEDIUM ACTIVE VISUAL POLISH
   ============================================================ */


/* ------------------------------------------------------------
   HOME
   Communication now has a dedicated Trainer tab.
   Keep trainer details on Home, remove only duplicate CTA.
   ------------------------------------------------------------ */

.client-trainer-card .trainer-chat-cta {
  display: none !important;
}


/* ------------------------------------------------------------
   TRAINER HUB
   The avatar wrapper used outside .trainer-card needs
   its own explicit dimensions.
   ------------------------------------------------------------ */

.trainer-hub-profile {
  min-height: 92px;
}

.trainer-hub-avatar {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  flex: 0 0 64px !important;

  border-radius: 18px;
  overflow: hidden;

  background: var(--surface-2);
}

.trainer-hub-avatar .trainer-avatar-photo {
  display: block;

  width: 100% !important;
  height: 100% !important;

  max-width: 64px;
  max-height: 64px;

  object-fit: cover;
  object-position: center;
}

.trainer-hub-profile-copy {
  overflow: hidden;
}

.trainer-hub-profile-copy b,
.trainer-hub-profile-copy em {
  max-width: 100%;
}


/* ------------------------------------------------------------
   CHAT / ANDROID KEYBOARD
   Chat messages own the scroll.
   The document itself no longer needs to jump to the composer.
   This route has NO global floating dock.
   ------------------------------------------------------------ */

.content.no-dock:has(.standalone-chat) {
  overflow: hidden;
  padding-bottom: 0;
}

.content.no-dock .standalone-chat {
  min-height: 0;

  height:
    calc(
      100dvh
      - var(--topbar-h)
      - var(--safe-top)
      - 28px
    );

  max-height:
    calc(
      100dvh
      - var(--topbar-h)
      - var(--safe-top)
      - 28px
    );

  overflow: hidden;
}

.standalone-chat .chat-log {
  flex: 1 1 auto;

  min-height: 0;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  padding-bottom: 4px;
}

.standalone-chat .chat-composer {
  position: relative;

  bottom: auto;

  flex: 0 0 auto;

  margin-top: 2px;
}


/* ------------------------------------------------------------
   NESTED PREVIEW
   Label itself is now shorter; give it predictable geometry.
   ------------------------------------------------------------ */

.topbar.compact .role-preview-switch {
  width: auto;
  max-width: 122px;
  flex: 0 0 auto;
}

.topbar.compact .role-preview-switch span {
  overflow: visible;
  text-overflow: clip;
}



/* ============================================================
   0.0.0.36 — DIRECT TRAINER CHAT + ANDROID KEYBOARD FIX
   ============================================================ */


/*
 * Android / Telegram WebView:
 * pin the entire client chat shell to the actual visible
 * visual viewport instead of allowing focus to pan the page.
 */

body.ff-client-chat-viewport {
  height: var(--ff-chat-vh, 100dvh);
  min-height: 0;

  overflow: hidden !important;
  overscroll-behavior: none;
}

body.ff-client-chat-viewport .shell {
  position: fixed;

  top: var(--ff-chat-top, 0px);
  left: 50%;

  width: min(100%, 560px);

  height: var(--ff-chat-vh, 100dvh);
  min-height: 0;
  max-height: var(--ff-chat-vh, 100dvh);

  margin: 0;

  transform: translateX(-50%);

  overflow: hidden;
}

body.ff-client-chat-viewport .topbar {
  flex: 0 0 auto;
}

body.ff-client-chat-viewport .content.no-dock {
  flex: 1 1 auto;

  min-height: 0;

  overflow: hidden;

  padding-bottom: 8px;
}

body.ff-client-chat-viewport .standalone-chat {
  flex: 1 1 auto;

  width: 100%;
  height: 100%;

  min-height: 0;
  max-height: none;

  overflow: hidden;
}

body.ff-client-chat-viewport
.standalone-chat
.chat-log {
  flex: 1 1 auto;

  min-height: 0;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.ff-client-chat-viewport
.standalone-chat
.chat-composer {
  position: relative !important;

  bottom: auto !important;

  flex: 0 0 auto;

  margin-top: 2px;
}



/* ============================================================
   0.0.0.36 — ADVANCED CLIENT / TECHNIQUE REVIEW
   ============================================================ */

.technique-review-submit-card {
  display:flex;
  flex-direction:column;
  gap:13px;
}

.technique-review-submit-card .section-head {
  margin:0;
}

.technique-review-submit-card .section-head > span {
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  color:var(--ink-3);
}

.review-upload-copy {
  color:var(--ink-2);
  font-size:13px;
  line-height:1.5;
}

.technique-review-form {
  gap:10px;
}

.review-file-picker {
  width:100%;
  min-height:72px;
  padding:12px 13px;
  border:1px dashed
    color-mix(
      in srgb,
      var(--violet) 40%,
      var(--line)
    );
  border-radius:14px;
  background:
    color-mix(
      in srgb,
      var(--violet) 5%,
      var(--surface)
    );
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:11px !important;
  cursor:pointer;
}

.review-file-picker > svg {
  width:24px;
  height:24px;
  flex:none;
  color:var(--violet);
}

.review-file-picker > span {
  min-width:0;
  flex:1;
}

.review-file-picker b {
  display:block;
  color:var(--ink);
  font-size:13.5px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.review-file-picker small {
  display:block;
  color:var(--ink-3);
  font-size:10.5px;
  line-height:1.35;
  margin-top:3px;
}

.advanced-review-card {
  gap:10px;
}

.review-status {
  flex:none;
  padding:4px 8px;
  border-radius:99px;
  font-size:9px;
  font-weight:850;
  letter-spacing:.06em;
  white-space:nowrap;
}

.review-status-submitted {
  background:var(--surface-2);
  color:var(--ink-2);
}

.review-status-reviewing {
  background:
    color-mix(
      in srgb,
      var(--violet) 12%,
      var(--surface)
    );
  color:var(--violet);
}

.review-status-answered {
  background:var(--green-soft);
  color:var(--green-ink);
}

.review-status-closed {
  background:var(--surface-2);
  color:var(--ink-3);
}

.review-media-button {
  width:100%;
  min-height:58px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface-2);
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
}

.review-media-button > svg {
  width:20px;
  height:20px;
  flex:none;
  color:var(--violet);
}

.review-media-button > span {
  min-width:0;
  flex:1;
}

.review-media-button b {
  display:block;
  font-size:13px;
  font-weight:800;
}

.review-media-button small {
  display:block;
  color:var(--ink-3);
  font-size:10.5px;
  margin-top:2px;
}

.review-client-comment {
  padding:10px 11px;
  border-radius:12px;
  background:var(--surface-2);
}

.review-client-comment span {
  display:block;
  margin-bottom:4px;
  color:var(--ink-3);
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.review-client-comment p {
  font-size:13px;
  line-height:1.45;
}

.review-sheet-image,
.review-sheet-video {
  display:block;
  width:100%;
  max-height:68dvh;
  border-radius:12px;
  object-fit:contain;
  background:#000;
}

/* Main Trainer tab uses support hub content directly. */
.content:not(.nested) .support-page-head {
  margin-top:0;
}

/* Advanced label now fits without ellipsis. */
.role-preview-switch span {
  text-overflow:clip;
}

/* IMPORTANT:
   no .bottom-nav,
   no .content.with-dock,
   no safe-area geometry modifications in 0.0.0.36.
*/



/* ============================================================
   0.0.0.36 — PREMIUM BOOKING FLOW
   ============================================================ */

.booked-session-section,
.available-session-section {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.booked-session-list,
.trainer-booking-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.booked-session-card,
.trainer-booking-card {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.session-card-top,
.trainer-booking-head {
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.session-confirmed-mark {
  width:34px;
  height:34px;
  border-radius:50%;
  flex:none;
  display:grid;
  place-items:center;
  background:var(--green-soft);
  color:var(--green-ink);
}

.session-confirmed-mark svg {
  width:18px;
  height:18px;
}

.session-card-title {
  min-width:0;
  flex:1;
}

.session-card-title small,
.trainer-booking-head small {
  display:block;
  margin-bottom:3px;
  color:var(--green);
  font-size:9px;
  font-weight:850;
  letter-spacing:.07em;
}

.session-card-title b,
.trainer-booking-head b {
  display:block;
  color:var(--ink);
  font-size:15px;
  line-height:1.25;
}

.session-booking-info,
.trainer-booking-info {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.session-booking-info > div,
.trainer-booking-info > div {
  min-width:0;
  padding:10px 11px;
  border-radius:12px;
  background:var(--surface-2);
}

.session-booking-info span,
.trainer-booking-info span {
  display:block;
  margin-bottom:4px;
  color:var(--ink-3);
  font-size:9.5px;
  font-weight:750;
}

.session-booking-info b,
.trainer-booking-info b {
  display:block;
  color:var(--ink);
  font-size:12.5px;
  line-height:1.35;
}

.session-meeting-pending {
  margin:0;
  color:var(--ink-3);
  font-size:11px;
  line-height:1.45;
}

.session-booked-chip {
  flex:none;
  margin-left:auto;
  padding:4px 7px;
  border-radius:99px;
  background:var(--green-soft);
  color:var(--green-ink);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.055em;
}

.trainer-booking-card .course-actions {
  margin-top:0;
}

.compact-state {
  min-height:0;
  padding-top:18px;
  padding-bottom:18px;
}

/* ============================================================
   0.0.0.37 — unified client / trainer / admin design language.
   Role-only selectors keep the approved client UI unchanged.
   ============================================================ */

.shell[data-shell="trainer"] .content,
.shell[data-shell="admin"] .content {
  gap:18px;
}

.shell[data-shell="trainer"] .topbar,
.shell[data-shell="admin"] .topbar {
  border-bottom-color:color-mix(in srgb,var(--line) 72%,transparent);
}

.role-hero {
  position:relative;
  min-height:150px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:22px;
  border:1px solid color-mix(in srgb,var(--green) 22%,var(--line));
  border-radius:var(--radius-l);
  background:
    radial-gradient(circle at 88% 16%,color-mix(in srgb,var(--green) 20%,transparent),transparent 42%),
    linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--green-soft) 55%,var(--surface)));
  box-shadow:var(--shadow);
}

.admin-role-hero {
  background:
    radial-gradient(circle at 88% 16%,color-mix(in srgb,var(--blue) 18%,transparent),transparent 42%),
    linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--blue-soft) 48%,var(--surface)));
  border-color:color-mix(in srgb,var(--blue) 22%,var(--line));
}

.role-hero::after {
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-72px;
  bottom:-92px;
  border:26px solid color-mix(in srgb,var(--green) 9%,transparent);
  border-radius:50%;
}

.admin-role-hero::after {
  border-color:color-mix(in srgb,var(--blue) 9%,transparent);
}

.role-hero-copy {
  position:relative;
  z-index:1;
  min-width:0;
  max-width:360px;
}

.role-hero-copy h1 {
  margin-top:7px;
  font-size:25px;
  line-height:1.08;
  letter-spacing:-.025em;
}

.role-hero-copy p {
  margin-top:9px;
  color:var(--ink-2);
  font-size:13px;
  line-height:1.45;
}

.role-hero-mark {
  position:relative;
  z-index:1;
  width:48px;
  height:48px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:var(--green);
  color:#fff;
  box-shadow:0 12px 28px color-mix(in srgb,var(--green) 28%,transparent);
}

.admin-role-hero .role-hero-mark {
  background:var(--blue);
  box-shadow:0 12px 28px color-mix(in srgb,var(--blue) 24%,transparent);
}

.role-hero-mark svg {
  width:25px;
  height:25px;
  stroke-width:2.15;
}

.role-metrics {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.role-metric {
  position:relative;
  min-width:0;
  min-height:112px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:var(--surface);
  box-shadow:var(--shadow);
}

button.role-metric:active {
  transform:scale(.985);
}

.role-metric > .chev {
  position:absolute;
  top:15px;
  right:13px;
  color:var(--ink-3);
}

.role-metric-icon {
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--green-soft);
  color:var(--green-ink);
}

.role-metric-icon svg {
  width:18px;
  height:18px;
}

.role-metric-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.role-metric-copy small {
  color:var(--ink-3);
  font-size:10px;
  font-weight:750;
  line-height:1.25;
}

.role-metric-copy b {
  max-width:100%;
  overflow:hidden;
  color:var(--ink);
  font-size:20px;
  line-height:1.15;
  letter-spacing:-.02em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.role-metric-copy em {
  color:var(--ink-3);
  font-size:9.5px;
  font-style:normal;
}

.metric-blue .role-metric-icon { background:var(--blue-soft);color:var(--blue-ink) }
.metric-gold .role-metric-icon { background:var(--gold-soft);color:var(--gold-ink) }
.metric-violet .role-metric-icon { background:var(--violet-soft);color:var(--violet-ink) }

.role-section-head {
  align-items:center;
}

.role-section-head h2 {
  font-size:17px;
}

.role-page-head {
  gap:3px;
}

.role-page-head h1 {
  font-size:27px;
  letter-spacing:-.025em;
}

.role-page-head p {
  margin-top:5px;
  color:var(--ink-2);
  font-size:12.5px;
  line-height:1.45;
}

.role-search {
  min-width:0;
  min-height:46px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

.role-search > span {
  width:19px;
  height:19px;
  flex:none;
  color:var(--ink-3);
}

.role-search svg { width:19px;height:19px }
.role-search input {
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font-size:13px;
}
.role-search input::placeholder { color:var(--ink-3) }
.role-search:focus-within { border-color:color-mix(in srgb,var(--green) 48%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 9%,transparent) }

.role-toolbar {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
}

.role-toolbar .btn { min-height:46px }

.role-card-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.client-work-card {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:var(--surface);
  box-shadow:var(--shadow);
}

.client-work-card:active { transform:scale(.99) }
.client-work-top { display:flex;align-items:center;gap:11px;min-width:0 }
.client-work-top > .chev { margin-left:auto;color:var(--ink-3);font-style:normal;font-size:18px }
.client-work-title { min-width:0;flex:1;display:flex;flex-direction:column;gap:3px }
.client-work-title b { overflow:hidden;font-size:14.5px;text-overflow:ellipsis;white-space:nowrap }
.client-work-title small { overflow:hidden;color:var(--ink-2);font-size:11.5px;text-overflow:ellipsis;white-space:nowrap }

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

.client-work-meta > span {
  min-width:0;
  padding:9px 10px;
  border-radius:11px;
  background:var(--surface-2);
}

.client-work-meta small { display:block;margin-bottom:3px;color:var(--ink-3);font-size:9.5px;font-weight:700 }
.client-work-meta b { display:block;overflow:hidden;font-size:11.5px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap }

.client-work-flags { display:flex;gap:6px;flex-wrap:wrap }
.client-work-flags i { padding:4px 7px;border-radius:99px;background:var(--gold-soft);color:var(--gold-ink);font-size:9.5px;font-style:normal;font-weight:750 }

.role-dialog-list .role-dialog.is-unread {
  border-color:color-mix(in srgb,var(--green) 28%,var(--line));
  background:color-mix(in srgb,var(--green-soft) 28%,var(--surface));
}

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

.activity-strip > div {
  min-width:0;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:9px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}

.activity-strip > div > span { grid-row:1 / 3;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--surface-2);color:var(--ink-2) }
.activity-strip svg { width:16px;height:16px }
.activity-strip b { overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap }
.activity-strip small { color:var(--ink-3);font-size:9.5px }

.finance-hero {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:20px;
  border-radius:var(--radius-l);
  background:linear-gradient(145deg,var(--green-strong),var(--green));
  color:#fff;
  box-shadow:0 16px 34px color-mix(in srgb,var(--green) 22%,transparent);
}
.trainer-finance-hero { background:linear-gradient(145deg,var(--violet-ink),var(--violet)) }
.finance-hero span { font-size:11px;font-weight:700;opacity:.78 }
.finance-hero b { font-size:29px;line-height:1.15;letter-spacing:-.03em }
.finance-hero small { font-size:11.5px;opacity:.78 }

.finance-metrics {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.finance-metrics > div { min-width:0;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--surface) }
.finance-metrics span { display:block;color:var(--ink-3);font-size:9.5px;font-weight:700;line-height:1.3 }
.finance-metrics b { display:block;margin-top:5px;overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap }

.management-grid { display:grid;grid-template-columns:1fr;gap:9px }
.management-card { width:100%;min-width:0;display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);box-shadow:var(--shadow) }
.management-card:active { transform:scale(.99) }
.management-card > span:nth-child(2) { min-width:0;flex:1;display:flex;flex-direction:column;gap:3px }
.management-card b { font-size:14px }
.management-card small { overflow:hidden;color:var(--ink-2);font-size:11px;text-overflow:ellipsis;white-space:nowrap }
.management-card > .chev { color:var(--ink-3);font-style:normal;font-size:18px }
.management-icon { width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--green-soft);color:var(--green-ink) }
.management-icon svg { width:19px;height:19px }

.staff-card { display:flex;flex-direction:column;gap:12px }
.staff-card-head { display:flex;align-items:center;gap:10px;min-width:0 }
.staff-card-head > span:nth-child(2) { min-width:0;flex:1;display:flex;flex-direction:column;gap:2px }
.staff-card-head b { overflow:hidden;font-size:14.5px;text-overflow:ellipsis;white-space:nowrap }
.staff-card-head small { color:var(--ink-3);font-size:10.5px }

.role-primary-action { align-self:flex-start }
.role-course-acc { overflow:hidden }
.role-course-acc > summary { min-height:64px }
.course-summary-copy { min-width:0;flex:1;display:flex;flex-direction:column;gap:3px }
.course-summary-copy b { overflow:hidden;font-size:14.5px;text-overflow:ellipsis;white-space:nowrap }
.course-summary-copy small { color:var(--ink-3);font-size:10.5px;font-weight:600 }

@media (min-width:480px) {
  .management-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (max-width:360px) {
  .role-hero { min-height:138px;padding:18px }
  .role-hero-copy h1 { font-size:22px }
  .role-hero-mark { width:42px;height:42px }
  .role-metric { min-height:106px;padding:12px }
  .role-metric-copy b { font-size:18px }
  .client-work-meta { grid-template-columns:1fr }
  .role-toolbar { grid-template-columns:1fr }
  .role-toolbar .btn { width:100% }
}

/* 0.0.0.38 — inline video-link player */
.media-frame.media-embed{aspect-ratio:16/9;max-height:none}
.media-frame.media-embed iframe{display:block;width:100%;height:100%;border:0;background:#000}
.video-link-status{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);margin-top:-4px}
.video-link-status b{font-size:12.5px}
.video-link-status small{font-size:11.5px;color:var(--muted)}
.video-link-status.ok{border-color:color-mix(in srgb,var(--green-strong) 35%,var(--line));background:color-mix(in srgb,var(--green-strong) 7%,transparent)}
.video-link-status.bad{border-color:color-mix(in srgb,#d43c3c 35%,var(--line));background:color-mix(in srgb,#d43c3c 6%,transparent)}
#workoutVideoPreview .media-frame{margin-top:8px}


/* 0.0.0.41 — Telegram native workout video */
.telegram-video-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  margin: 12px 0 18px;
  border: 1px solid var(--line, rgba(127,127,127,.18));
  border-radius: 18px;
  background: var(--card, rgba(255,255,255,.72));
}
.telegram-video-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--green-soft, rgba(41,170,90,.12));
  color: var(--green-strong, #179447);
}
.telegram-video-icon svg { width: 24px; height: 24px; }
.telegram-video-copy b { display: block; font-size: 17px; }
.telegram-video-copy p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.telegram-video-admin { margin: 6px 0 14px; }
.telegram-video-admin .section-head { margin: 0 0 8px; }
.telegram-video-admin .section-head h2 { margin: 0; font-size: 16px; }
.telegram-video-current {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 11px 12px;
  margin: 8px 0;
  border-radius: 12px;
  background: var(--green-soft, rgba(41,170,90,.12));
}

/* 0.0.0.44 — client home: progress for every purchased program */
.home-programs-section{gap:10px}
.home-program-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.home-program-row{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:7px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.home-program-row.is-expired{
  border-color:color-mix(in srgb,var(--coral) 24%,var(--line));
}
.home-program-main{
  min-width:0;
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px 10px;
  text-align:left;
}
.home-program-title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
}
.home-program-title>b{
  min-width:0;
  overflow:hidden;
  font-size:14px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-program-title>.badge{
  flex:none;
  padding:3px 7px;
  font-size:8.5px;
}
.home-program-percent{
  align-self:center;
  font-size:12px;
  font-weight:800;
  color:var(--green-strong);
}
.home-program-main>.progress-line{
  grid-column:1/-1;
  height:6px;
}
.home-program-meta,
.home-program-access{
  overflow:hidden;
  color:var(--ink-2);
  font-size:10.5px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-program-access{
  text-align:right;
  color:var(--ink-3);
}
.home-program-row.is-expired .home-program-percent,
.home-program-row.is-expired .home-program-access{
  color:var(--coral);
}
.home-program-renew{
  flex:none;
  align-self:center;
  min-height:36px;
  padding:0 10px;
  border-radius:10px;
  background:var(--green-soft);
  color:var(--green-strong);
  font-size:10.5px;
  font-weight:800;
}
@media(max-width:380px){
  .home-program-row{flex-direction:column}
  .home-program-meta,.home-program-access{grid-column:1/-1;text-align:left}
  .home-program-renew{width:100%}
}
/* 0.0.0.46 — последовательное оформление курса и одноразового демо */
.course-detail-actions,
.demo-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.course-detail-actions > small,
.demo-used-note,
.profile-health-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.onboarding-ready-card {
  border-color: color-mix(in srgb, var(--green-strong) 28%, var(--line));
}

.onboarding-order-row {
  flex-wrap: wrap;
}

.onboarding-order-row [data-paid-onboarding] {
  flex: 0 0 100%;
  margin-top: 8px;
}

/* 0.0.0.48 — полный безопасный preview клиентских сценариев */
.preview-scenarios-head p,
.preview-footnote {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}
.preview-bot-stage {
  min-height:calc(100dvh - var(--topbar-h) - var(--safe-top) - 48px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  margin:-4px -16px;padding:28px 16px;
  background:linear-gradient(150deg,#d8ebf2,#bfdce5 55%,#d9e9df);
}
.preview-bot-date { padding:5px 10px;border-radius:99px;background:rgba(40,67,78,.38);color:#fff;font-size:11px;font-weight:750 }
.preview-bot-message {
  width:min(100%,390px);display:flex;flex-direction:column;gap:12px;padding:18px;
  border-radius:18px 18px 18px 6px;background:#fff;color:#17211d;box-shadow:0 10px 30px rgba(38,62,70,.16);
}
.preview-bot-logo { width:48px;height:48px;border-radius:14px;overflow:hidden;background:#f5f6f4 }
.preview-bot-logo img { width:100%;height:100%;object-fit:cover }
.preview-bot-message h1 { font-size:21px;line-height:1.12;letter-spacing:-.02em }
.preview-bot-message p { color:#4e5c56;font-size:13px;line-height:1.52 }
.preview-telegram-button { min-height:46px;border-radius:12px;background:#2aabee;color:#fff;font-size:14px;font-weight:800 }
.preview-telegram-link { color:#2389bf;font-size:13px;font-weight:750;padding:4px }
.preview-bot-message small { color:#8b9792;font-size:9.5px;letter-spacing:.07em;text-align:right }
.preview-scenario-list,
.preview-checkout-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.preview-scenario-card {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 16px;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.preview-scenario-card.is-current {
  border-color: color-mix(in srgb,var(--emerald) 52%,var(--line));
  background: color-mix(in srgb,var(--emerald-soft) 58%,var(--surface));
}
.preview-scenario-card>span:nth-child(2) { min-width:0;display:flex;flex-direction:column;gap:3px }
.preview-scenario-card b { font-size:14px;font-weight:800 }
.preview-scenario-card small { color:var(--ink-2);font-size:11px;line-height:1.35 }
.preview-scenario-card>i { color:var(--ink-3);font-size:20px;font-style:normal }
.preview-scenario-index {
  width:38px;height:38px;display:grid;place-items:center;border-radius:12px;
  background:var(--surface-2);color:var(--green-strong);font-size:11px;font-weight:850;
}
.preview-scenario-card.is-current .preview-scenario-index { background:var(--green-soft) }
.preview-checkout-list .tariff-card { margin:0 }
.preview-footnote { text-align:center;padding:2px 12px 10px }
.preview-consent-card {
  min-height:calc(100dvh - var(--topbar-h) - var(--safe-top) - 40px);
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:26px 20px;border:1px solid var(--line);border-radius:24px;
  background:var(--surface);box-shadow:var(--shadow-sm);
}
.preview-consent-card h1 { max-width:300px;font-size:26px;line-height:1.08;letter-spacing:-.03em }
.preview-consent-icon { width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:var(--green-soft);color:var(--green-strong) }
.preview-consent-icon svg { width:25px;height:25px }
.preview-consent-copy { display:flex;flex-direction:column;gap:12px;color:var(--ink-2);font-size:13px;line-height:1.55 }
.preview-consent-actions { width:100%;display:flex;flex-direction:column;gap:9px;margin-top:auto }
.preview-consent-card>small { width:100%;color:var(--ink-3);font-size:10px;letter-spacing:.08em;text-align:center }

/* 0.0.0.49 — изолированный первый экран клиента */
.content.intro-only {
  width:100%;max-width:none;min-height:100dvh;margin:0;padding:0;
}
.client-intro-screen {
  position:relative;min-height:100dvh;display:flex;flex-direction:column;gap:22px;
  padding:max(28px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));
  overflow:hidden;background:
    radial-gradient(circle at 100% 0%,rgba(69,190,151,.24),transparent 38%),
    radial-gradient(circle at 0% 68%,rgba(108,151,227,.14),transparent 34%),
    linear-gradient(180deg,#f7faf7 0%,#eef6f1 100%);
  color:#111a16;
}
.client-intro-screen::after {
  content:"";position:absolute;right:-72px;top:92px;width:210px;height:210px;border:34px solid rgba(15,157,114,.075);border-radius:50%;pointer-events:none;
}
.client-intro-brand {
  position:relative;z-index:1;width:58px;height:58px;padding:5px;border:1px solid rgba(20,52,40,.09);border-radius:18px;background:#fff;box-shadow:0 12px 28px rgba(22,65,47,.10);
}
.client-intro-brand img { width:100%;height:100%;object-fit:cover;border-radius:13px }
.client-intro-copy { position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;max-width:410px }
.client-intro-copy h1 { max-width:360px;font-size:clamp(30px,8.7vw,42px);line-height:1.02;letter-spacing:-.045em }
.client-intro-copy p { max-width:390px;color:#53625b;font-size:14px;line-height:1.55 }
.client-intro-points { position:relative;z-index:1;display:flex;flex-direction:column;gap:9px }
.client-intro-points>div { display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid rgba(24,67,50,.09);border-radius:15px;background:rgba(255,255,255,.72);backdrop-filter:blur(10px) }
.client-intro-points>div>span { width:36px;height:36px;display:grid;place-items:center;flex:none;border-radius:11px;background:#dcf3eb;color:#087d59 }
.client-intro-points svg { width:18px;height:18px }
.client-intro-points p { min-width:0;display:flex;flex-direction:column;gap:2px }
.client-intro-points b { font-size:13px;font-weight:800 }
.client-intro-points small { color:#69766f;font-size:10.5px;line-height:1.25 }
.client-intro-action { position:relative;z-index:1;display:flex;flex-direction:column;gap:9px;margin-top:auto }
.client-intro-action>small { color:#718078;font-size:10.5px;line-height:1.4;text-align:center }
.client-intro-preview-menu { position:absolute;z-index:3;top:max(22px,env(safe-area-inset-top));right:18px;display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid rgba(115,83,12,.18);border-radius:99px;background:#fff5d9;color:#72530f;font-size:10px;font-weight:800;box-shadow:0 8px 20px rgba(60,48,20,.10) }
.client-intro-preview-menu svg { width:15px;height:15px }
html[data-theme="dark"] .client-intro-screen { background:radial-gradient(circle at 100% 0%,rgba(25,139,105,.20),transparent 38%),linear-gradient(180deg,#101713,#131d18);color:#f3f7f4 }
html[data-theme="dark"] .client-intro-copy p,html[data-theme="dark"] .client-intro-points small,html[data-theme="dark"] .client-intro-action>small { color:#aebbb4 }
html[data-theme="dark"] .client-intro-points>div { border-color:rgba(255,255,255,.08);background:rgba(29,41,35,.78) }
@media(max-height:680px){
  .client-intro-screen{gap:14px;padding-top:18px;padding-bottom:16px}
  .client-intro-brand{width:48px;height:48px;border-radius:15px}
  .client-intro-copy{gap:7px}.client-intro-copy h1{font-size:29px}.client-intro-copy p{font-size:12.5px;line-height:1.4}
  .client-intro-points{gap:7px}.client-intro-points>div{padding:8px 10px}.client-intro-points>div>span{width:32px;height:32px}
}


/* ========================================================================
   FITNESS FOUNDATION 0.0.0.51
   ADMIN + TRAINER — NEO-SWISS WORKSPACE REDESIGN

   Visual-only release.
   Client shell intentionally untouched.
   ======================================================================== */

.shell[data-shell="admin"],
.shell[data-shell="trainer"] {
  --ff-role-green: #07966f;
  --ff-role-green-deep: #057457;
  --ff-role-green-soft: #e8f7f1;

  --ff-role-blue: #347fe5;
  --ff-role-blue-soft: #edf4ff;

  --ff-role-violet: #7656d9;
  --ff-role-violet-soft: #f1edff;

  --ff-role-gold: #a87910;
  --ff-role-gold-soft: #fff5d9;

  --ff-role-red: #cc3e3e;
  --ff-role-red-soft: #fff0f0;

  --ff-role-text: #111612;
  --ff-role-muted: #8c948f;
  --ff-role-line: rgba(18, 30, 23, .085);
  --ff-role-card: rgba(255,255,255,.94);
  --ff-role-page: #f8faf8;

  background:
    radial-gradient(circle at 95% 4%, rgba(16,164,119,.055), transparent 28rem),
    var(--ff-role-page);
}

.shell[data-shell="admin"] .content,
.shell[data-shell="trainer"] .content {
  padding-left: 16px;
  padding-right: 16px;
}

/* ------------------------------------------------------------------------
   ROLE TOPBAR
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"] .topbar,
.shell[data-shell="trainer"] .topbar {
  background: rgba(250,252,250,.91);
  border-bottom: 1px solid rgba(17,28,21,.07);
  box-shadow: none;
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.shell[data-shell="admin"] .topbar .brand-copy,
.shell[data-shell="trainer"] .topbar .brand-copy {
  min-width: 0;
}

.shell[data-shell="admin"] .topbar .brand-copy b,
.shell[data-shell="trainer"] .topbar .brand-copy b {
  font-weight: 780;
  letter-spacing: -.025em;
}

.shell[data-shell="admin"] .topbar .brand-copy small,
.shell[data-shell="trainer"] .topbar .brand-copy small {
  color: var(--ff-role-muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 9px;
}

/* Role switch = status chip */

.shell[data-shell="admin"] .role-preview-switch,
.shell[data-shell="trainer"] .role-preview-switch {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 15px;
  box-shadow: none;
  font-weight: 760;
  border: 1px solid rgba(5,135,98,.15);
}

.shell[data-shell="admin"] .role-preview-switch {
  color: #087758;
  background: #edf8f4;
}

.shell[data-shell="trainer"] .role-preview-switch {
  color: #88640d;
  background: #fff6df;
  border-color: rgba(168,121,16,.22);
}

.shell[data-shell="admin"] .role-preview-switch svg,
.shell[data-shell="trainer"] .role-preview-switch svg {
  width: 18px;
  height: 18px;
}

/* ------------------------------------------------------------------------
   ROLE HERO
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"] .role-hero,
.shell[data-shell="trainer"] .role-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-height: 220px;
  margin: 10px 0 18px;
  padding: 27px 25px;

  border-radius: 29px;
  border: 1px solid rgba(14,75,52,.11);

  background:
    radial-gradient(circle at 77% 12%, rgba(26,177,127,.23), transparent 35%),
    linear-gradient(115deg, #ffffff 0%, #f5fbf8 54%, #e2f5ed 100%);

  box-shadow:
    0 1px 1px rgba(12,30,20,.03),
    0 12px 32px rgba(20,62,39,.045);
}

.shell[data-shell="admin"] .role-hero::before,
.shell[data-shell="trainer"] .role-hero::before {
  content: "";
  position: absolute;
  z-index: -1;

  width: 260px;
  height: 260px;

  right: -94px;
  bottom: -121px;

  border-radius: 50%;
  border: 31px solid rgba(8,155,111,.065);
  box-shadow:
    0 0 0 29px rgba(8,155,111,.032),
    0 0 0 57px rgba(8,155,111,.018);
}

.shell[data-shell="admin"] .role-hero::after,
.shell[data-shell="trainer"] .role-hero::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 185px;
  height: 56px;

  right: -25px;
  top: 44px;

  border-radius: 100px;
  transform: rotate(-35deg);

  background: linear-gradient(
    90deg,
    rgba(16,163,117,.04),
    rgba(16,163,117,.17),
    rgba(16,163,117,.04)
  );
}

.shell[data-shell="admin"] .role-hero-copy,
.shell[data-shell="trainer"] .role-hero-copy {
  position: relative;
  z-index: 2;
  width: min(72%, 470px);
}

.shell[data-shell="admin"] .role-hero-copy > small,
.shell[data-shell="trainer"] .role-hero-copy > small,
.shell[data-shell="admin"] .role-hero-copy .eyebrow,
.shell[data-shell="trainer"] .role-hero-copy .eyebrow {
  display: block;

  margin: 0 0 12px;

  color: #929a95;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 760;

  letter-spacing: .18em;
  text-transform: uppercase;
}

.shell[data-shell="admin"] .role-hero-copy h1,
.shell[data-shell="trainer"] .role-hero-copy h1 {
  max-width: 430px;
  margin: 0;

  color: #0d120f;
  font-size: clamp(34px, 8vw, 46px);
  line-height: .99;
  font-weight: 850;
  letter-spacing: -.052em;
}

.shell[data-shell="admin"] .role-hero-copy p,
.shell[data-shell="trainer"] .role-hero-copy p {
  max-width: 400px;
  margin: 16px 0 0;

  color: #6e7771;
  font-size: 16px;
  line-height: 1.42;
  letter-spacing: -.015em;
}

.shell[data-shell="admin"] .role-hero-mark,
.shell[data-shell="trainer"] .role-hero-mark {
  position: absolute;
  z-index: 3;

  right: 24px;
  bottom: 26px;

  width: 72px;
  height: 72px;

  display: grid;
  place-items: center;

  border-radius: 23px;

  background: linear-gradient(145deg, #12aa7b, #078b67);
  color: white;

  box-shadow:
    0 11px 28px rgba(7,139,103,.18),
    inset 0 1px rgba(255,255,255,.18);
}

.shell[data-shell="admin"] .admin-role-hero .role-hero-mark {
  background: linear-gradient(145deg, #428dea, #2e70d2);
  box-shadow:
    0 11px 28px rgba(47,116,216,.18),
    inset 0 1px rgba(255,255,255,.18);
}

.shell[data-shell="admin"] .role-hero-mark svg,
.shell[data-shell="trainer"] .role-hero-mark svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
}

/* ------------------------------------------------------------------------
   METRICS — 2×2 executive grid
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"] .role-metrics,
.shell[data-shell="trainer"] .role-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 11px;
  margin: 0 0 23px;
}

.shell[data-shell="admin"] .role-metric,
.shell[data-shell="trainer"] .role-metric {
  position: relative;
  overflow: hidden;

  min-height: 142px;
  padding: 17px;

  border: 1px solid var(--ff-role-line);
  border-radius: 23px;

  background: var(--ff-role-card);

  box-shadow:
    0 1px 1px rgba(10,25,16,.025),
    0 8px 25px rgba(18,45,29,.035);

  text-align: left;
}

.shell[data-shell="admin"] button.role-metric,
.shell[data-shell="trainer"] button.role-metric {
  cursor: pointer;
}

.shell[data-shell="admin"] button.role-metric:active,
.shell[data-shell="trainer"] button.role-metric:active {
  transform: scale(.985);
}

.shell[data-shell="admin"] .role-metric-icon,
.shell[data-shell="trainer"] .role-metric-icon {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  margin-bottom: 16px;
  border-radius: 14px;

  background: var(--ff-role-green-soft);
  color: var(--ff-role-green-deep);
}

.shell[data-shell="admin"] .role-metric-icon svg,
.shell[data-shell="trainer"] .role-metric-icon svg {
  width: 23px;
  height: 23px;
}

.shell[data-shell="admin"] .metric-blue .role-metric-icon,
.shell[data-shell="trainer"] .metric-blue .role-metric-icon {
  color: #2d6ebd;
  background: var(--ff-role-blue-soft);
}

.shell[data-shell="admin"] .metric-gold .role-metric-icon,
.shell[data-shell="trainer"] .metric-gold .role-metric-icon {
  color: #8a650e;
  background: var(--ff-role-gold-soft);
}

.shell[data-shell="admin"] .metric-violet .role-metric-icon,
.shell[data-shell="trainer"] .metric-violet .role-metric-icon {
  color: #6742c5;
  background: var(--ff-role-violet-soft);
}

.shell[data-shell="admin"] .role-metric-copy,
.shell[data-shell="trainer"] .role-metric-copy {
  display: block;
  min-width: 0;
}

.shell[data-shell="admin"] .role-metric-copy small,
.shell[data-shell="trainer"] .role-metric-copy small {
  display: block;
  margin: 0 0 4px;

  color: #959c98;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 650;
}

.shell[data-shell="admin"] .role-metric-copy b,
.shell[data-shell="trainer"] .role-metric-copy b {
  display: block;

  color: #0e1310;
  font-size: 29px;
  line-height: 1;
  font-weight: 830;
  letter-spacing: -.045em;
}

.shell[data-shell="admin"] .role-metric-copy em,
.shell[data-shell="trainer"] .role-metric-copy em {
  display: block;
  margin-top: 7px;

  color: #9aa09d;
  font-size: 11px;
  line-height: 1.25;
  font-style: normal;
}

.shell[data-shell="admin"] .role-metric > .chev,
.shell[data-shell="trainer"] .role-metric > .chev {
  position: absolute;
  top: 18px;
  right: 16px;

  color: #a5aca8;
}

/* ------------------------------------------------------------------------
   SECTION HEADS
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"] .role-section-head,
.shell[data-shell="trainer"] .role-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin: 28px 0 12px;
}

.shell[data-shell="admin"] .role-section-head h2,
.shell[data-shell="trainer"] .role-section-head h2 {
  margin: 0;

  color: #111612;
  font-size: 25px;
  line-height: 1.05;
  font-weight: 810;
  letter-spacing: -.042em;
}

.shell[data-shell="admin"] .role-section-head a,
.shell[data-shell="admin"] .role-section-head button,
.shell[data-shell="trainer"] .role-section-head a,
.shell[data-shell="trainer"] .role-section-head button {
  color: #098260;
  font-size: 13px;
  font-weight: 730;
}

/* ------------------------------------------------------------------------
   ACTIVITY STRIP
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"] .activity-strip,
.shell[data-shell="trainer"] .activity-strip {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}

.shell[data-shell="admin"] .activity-strip > div,
.shell[data-shell="trainer"] .activity-strip > div {
  min-height: 74px;
  padding: 13px 14px;

  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  column-gap: 11px;

  border-radius: 20px;
  border: 1px solid var(--ff-role-line);

  background: rgba(255,255,255,.91);
  box-shadow: 0 7px 21px rgba(16,43,27,.025);
}

.shell[data-shell="admin"] .activity-strip svg,
.shell[data-shell="trainer"] .activity-strip svg {
  width: 21px;
  height: 21px;
  color: #6b7770;
}

.shell[data-shell="admin"] .activity-strip b,
.shell[data-shell="trainer"] .activity-strip b {
  color: #111612;
  font-size: 20px;
  line-height: 1;
  font-weight: 810;
}

.shell[data-shell="admin"] .activity-strip small,
.shell[data-shell="trainer"] .activity-strip small {
  color: #9aa09d;
  font-size: 11px;
}

/* ------------------------------------------------------------------------
   WORK LISTS / CLIENTS / APPOINTMENTS
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"] .role-card-list,
.shell[data-shell="trainer"] .role-card-list {
  overflow: hidden;

  border: 1px solid var(--ff-role-line);
  border-radius: 24px;

  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 26px rgba(16,43,27,.035);
}

.shell[data-shell="admin"] .client-work-card,
.shell[data-shell="trainer"] .client-work-card {
  margin: 0;
  padding: 16px 17px;

  border: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(19,32,24,.065);

  background: transparent;
  box-shadow: none;
}

.shell[data-shell="admin"] .client-work-card:last-child,
.shell[data-shell="trainer"] .client-work-card:last-child {
  border-bottom: 0;
}

.shell[data-shell="admin"] .client-work-card:active,
.shell[data-shell="trainer"] .client-work-card:active {
  background: rgba(7,147,106,.035);
  transform: none;
}

.shell[data-shell="admin"] .client-work-title b,
.shell[data-shell="trainer"] .client-work-title b {
  color: #111612;
  font-size: 15px;
  font-weight: 760;
}

.shell[data-shell="admin"] .client-work-title small,
.shell[data-shell="trainer"] .client-work-title small,
.shell[data-shell="admin"] .client-work-meta small,
.shell[data-shell="trainer"] .client-work-meta small {
  color: #989f9b;
}

.shell[data-shell="admin"] .client-work-meta > span,
.shell[data-shell="trainer"] .client-work-meta > span {
  border-radius: 12px;
  background: #f5f7f5;
}

.shell[data-shell="admin"] .client-work-flags i,
.shell[data-shell="trainer"] .client-work-flags i {
  border-radius: 999px;
  background: #e9f7f1;
  color: #08785a;

  font-size: 10px;
  font-weight: 720;
  font-style: normal;
}

/* unread / attention */

.shell[data-shell="admin"] .role-dialog-list .role-dialog.is-unread,
.shell[data-shell="trainer"] .role-dialog-list .role-dialog.is-unread {
  background: #f4fbf8;
  box-shadow: inset 3px 0 #0a9b70;
}

/* ------------------------------------------------------------------------
   PAGE HEADS
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"] .role-page-head,
.shell[data-shell="trainer"] .role-page-head {
  margin: 10px 0 21px;
}

.shell[data-shell="admin"] .role-page-head h1,
.shell[data-shell="trainer"] .role-page-head h1 {
  margin: 0;

  color: #111612;
  font-size: 34px;
  line-height: 1;
  font-weight: 840;
  letter-spacing: -.052em;
}

.shell[data-shell="admin"] .role-page-head p,
.shell[data-shell="trainer"] .role-page-head p {
  max-width: 520px;
  margin: 10px 0 0;

  color: #8c948f;
  font-size: 14px;
  line-height: 1.45;
}

/* ------------------------------------------------------------------------
   SEARCH + TOOLBAR
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"] .role-search,
.shell[data-shell="trainer"] .role-search {
  min-height: 48px;

  border: 1px solid var(--ff-role-line);
  border-radius: 17px;

  background: rgba(255,255,255,.94);

  box-shadow: none;
}

.shell[data-shell="admin"] .role-search:focus-within,
.shell[data-shell="trainer"] .role-search:focus-within {
  border-color: rgba(8,148,107,.34);
  box-shadow: 0 0 0 3px rgba(8,148,107,.07);
}

.shell[data-shell="admin"] .role-search input,
.shell[data-shell="trainer"] .role-search input {
  font-size: 14px;
}

.shell[data-shell="admin"] .role-toolbar,
.shell[data-shell="trainer"] .role-toolbar {
  gap: 8px;
}

.shell[data-shell="admin"] .role-toolbar .btn,
.shell[data-shell="trainer"] .role-toolbar .btn {
  min-height: 42px;
  border-radius: 15px;

  font-size: 12px;
  font-weight: 720;
}

/* ------------------------------------------------------------------------
   FINANCE
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"] .finance-hero,
.shell[data-shell="trainer"] .finance-hero,
.shell[data-shell="trainer"] .trainer-finance-hero {
  overflow: hidden;
  position: relative;

  padding: 22px;

  border: 1px solid rgba(9,108,78,.1);
  border-radius: 25px;

  color: #0d1712;

  background:
    radial-gradient(circle at 90% 10%, rgba(13,159,113,.18), transparent 35%),
    linear-gradient(135deg,#fff,#eef9f4);

  box-shadow: 0 10px 29px rgba(17,55,35,.035);
}

.shell[data-shell="admin"] .finance-hero span,
.shell[data-shell="trainer"] .finance-hero span {
  color: #89938d;
  font-size: 12px;
  font-weight: 700;
}

.shell[data-shell="admin"] .finance-hero b,
.shell[data-shell="trainer"] .finance-hero b {
  color: #101511;
  font-size: 38px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.05em;
}

.shell[data-shell="admin"] .finance-hero small,
.shell[data-shell="trainer"] .finance-hero small {
  color: #8e9791;
}

.shell[data-shell="admin"] .finance-metrics,
.shell[data-shell="trainer"] .finance-metrics {
  gap: 10px;
}

.shell[data-shell="admin"] .finance-metrics > div,
.shell[data-shell="trainer"] .finance-metrics > div {
  border: 1px solid var(--ff-role-line);
  border-radius: 19px;

  background: rgba(255,255,255,.95);
  box-shadow: none;
}

/* ------------------------------------------------------------------------
   PRIMARY ACTIONS
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"] .role-primary-action,
.shell[data-shell="trainer"] .role-primary-action {
  border: 0;
  border-radius: 17px;

  color: white;
  background: linear-gradient(135deg,#09976e,#077d5d);

  box-shadow: 0 8px 22px rgba(7,125,93,.14);
}

/* ------------------------------------------------------------------------
   ACCORDIONS / CONTENT
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"] .role-course-acc,
.shell[data-shell="trainer"] .role-course-acc {
  border: 1px solid var(--ff-role-line);
  border-radius: 20px;

  background: rgba(255,255,255,.95);
  box-shadow: none;
}

.shell[data-shell="admin"] .role-course-acc > summary,
.shell[data-shell="trainer"] .role-course-acc > summary {
  min-height: 57px;
  font-weight: 730;
}

/* ------------------------------------------------------------------------
   FLOATING ROLE DOCK
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"] .bottom-nav,
.shell[data-shell="trainer"] .bottom-nav {
  left: 14px;
  right: 14px;

  width: auto;
  max-width: 720px;

  margin-left: auto;
  margin-right: auto;

  border: 1px solid rgba(15,27,20,.08);
  border-radius: 26px;

  background: rgba(255,255,255,.91);

  box-shadow:
    0 13px 35px rgba(22,39,28,.09),
    inset 0 1px rgba(255,255,255,.85);

  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.shell[data-shell="admin"] .bottom-nav button,
.shell[data-shell="trainer"] .bottom-nav button {
  min-width: 0;
  border-radius: 20px;

  color: #929995;

  font-size: 10px;
  font-weight: 680;
}

.shell[data-shell="admin"] .bottom-nav button.active,
.shell[data-shell="trainer"] .bottom-nav button.active {
  color: #087b5b;
  background: #e6f6ef;
}

.shell[data-shell="admin"] .bottom-nav .nav-icon,
.shell[data-shell="trainer"] .bottom-nav .nav-icon {
  width: 27px;
  height: 27px;
}

/* ------------------------------------------------------------------------
   ROLE-SPECIFIC POLISH
   ------------------------------------------------------------------------ */

/* Admin: cooler system feel */

.shell[data-shell="admin"] .admin-role-hero {
  background:
    radial-gradient(circle at 83% 20%, rgba(66,141,234,.17), transparent 29%),
    radial-gradient(circle at 69% 63%, rgba(11,163,116,.12), transparent 35%),
    linear-gradient(115deg,#fff 0%,#f7fbfa 50%,#edf5ff 100%);
}

/* Trainer: warmer human workspace */

.shell[data-shell="trainer"] .role-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(22,173,124,.2), transparent 31%),
    linear-gradient(115deg,#fff 0%,#f6fcf9 47%,#e2f5ec 100%);
}

/* ------------------------------------------------------------------------
   DARK THEME
   ------------------------------------------------------------------------ */

html[data-theme="dark"] .shell[data-shell="admin"],
html[data-theme="dark"] .shell[data-shell="trainer"] {
  --ff-role-text: #f2f5f3;
  --ff-role-muted: #8e9993;
  --ff-role-line: rgba(225,240,232,.075);
  --ff-role-card: rgba(25,30,27,.95);
  --ff-role-page: #111512;

  background:
    radial-gradient(circle at 96% 3%, rgba(12,145,102,.07), transparent 26rem),
    var(--ff-role-page);
}

html[data-theme="dark"] .shell[data-shell="admin"] .topbar,
html[data-theme="dark"] .shell[data-shell="trainer"] .topbar {
  background: rgba(17,21,18,.91);
  border-bottom-color: rgba(235,245,239,.065);
}

html[data-theme="dark"] .shell[data-shell="admin"] .role-hero,
html[data-theme="dark"] .shell[data-shell="trainer"] .role-hero {
  border-color: rgba(210,234,222,.075);

  background:
    radial-gradient(circle at 80% 18%, rgba(10,143,101,.20), transparent 34%),
    linear-gradient(120deg,#181e1a,#151c18 56%,#102a20);
}

html[data-theme="dark"] .shell[data-shell="admin"] .admin-role-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(53,122,218,.19), transparent 32%),
    radial-gradient(circle at 68% 64%, rgba(8,141,100,.13), transparent 34%),
    linear-gradient(120deg,#181e1a,#151b19 52%,#152236);
}

html[data-theme="dark"] .shell[data-shell="admin"] .role-hero-copy h1,
html[data-theme="dark"] .shell[data-shell="trainer"] .role-hero-copy h1,
html[data-theme="dark"] .shell[data-shell="admin"] .role-section-head h2,
html[data-theme="dark"] .shell[data-shell="trainer"] .role-section-head h2,
html[data-theme="dark"] .shell[data-shell="admin"] .role-page-head h1,
html[data-theme="dark"] .shell[data-shell="trainer"] .role-page-head h1,
html[data-theme="dark"] .shell[data-shell="admin"] .role-metric-copy b,
html[data-theme="dark"] .shell[data-shell="trainer"] .role-metric-copy b,
html[data-theme="dark"] .shell[data-shell="admin"] .activity-strip b,
html[data-theme="dark"] .shell[data-shell="trainer"] .activity-strip b,
html[data-theme="dark"] .shell[data-shell="admin"] .client-work-title b,
html[data-theme="dark"] .shell[data-shell="trainer"] .client-work-title b,
html[data-theme="dark"] .shell[data-shell="admin"] .finance-hero b,
html[data-theme="dark"] .shell[data-shell="trainer"] .finance-hero b {
  color: #f1f5f2;
}

html[data-theme="dark"] .shell[data-shell="admin"] .role-hero-copy p,
html[data-theme="dark"] .shell[data-shell="trainer"] .role-hero-copy p {
  color: #9aa59e;
}

html[data-theme="dark"] .shell[data-shell="admin"] .role-metric,
html[data-theme="dark"] .shell[data-shell="trainer"] .role-metric,
html[data-theme="dark"] .shell[data-shell="admin"] .activity-strip > div,
html[data-theme="dark"] .shell[data-shell="trainer"] .activity-strip > div,
html[data-theme="dark"] .shell[data-shell="admin"] .role-card-list,
html[data-theme="dark"] .shell[data-shell="trainer"] .role-card-list,
html[data-theme="dark"] .shell[data-shell="admin"] .role-search,
html[data-theme="dark"] .shell[data-shell="trainer"] .role-search,
html[data-theme="dark"] .shell[data-shell="admin"] .finance-metrics > div,
html[data-theme="dark"] .shell[data-shell="trainer"] .finance-metrics > div,
html[data-theme="dark"] .shell[data-shell="admin"] .role-course-acc,
html[data-theme="dark"] .shell[data-shell="trainer"] .role-course-acc {
  background: rgba(25,30,27,.96);
  border-color: rgba(226,241,232,.07);

  box-shadow: none;
}

html[data-theme="dark"] .shell[data-shell="admin"] .finance-hero,
html[data-theme="dark"] .shell[data-shell="trainer"] .finance-hero {
  border-color: rgba(225,240,231,.075);

  background:
    radial-gradient(circle at 92% 12%, rgba(8,145,102,.16), transparent 35%),
    linear-gradient(135deg,#191f1b,#14231c);
}

html[data-theme="dark"] .shell[data-shell="admin"] .client-work-card,
html[data-theme="dark"] .shell[data-shell="trainer"] .client-work-card {
  border-bottom-color: rgba(230,243,236,.06);
}

html[data-theme="dark"] .shell[data-shell="admin"] .client-work-meta > span,
html[data-theme="dark"] .shell[data-shell="trainer"] .client-work-meta > span {
  background: rgba(255,255,255,.035);
}

html[data-theme="dark"] .shell[data-shell="admin"] .bottom-nav,
html[data-theme="dark"] .shell[data-shell="trainer"] .bottom-nav {
  border-color: rgba(235,246,240,.075);

  background: rgba(23,28,25,.91);

  box-shadow:
    0 16px 38px rgba(0,0,0,.22),
    inset 0 1px rgba(255,255,255,.035);
}

html[data-theme="dark"] .shell[data-shell="admin"] .bottom-nav button.active,
html[data-theme="dark"] .shell[data-shell="trainer"] .bottom-nav button.active {
  color: #66d7ae;
  background: rgba(12,145,103,.15);
}

/* ------------------------------------------------------------------------
   SMALL PHONES
   ------------------------------------------------------------------------ */

@media (max-width: 390px) {
  .shell[data-shell="admin"] .role-hero,
  .shell[data-shell="trainer"] .role-hero {
    min-height: 205px;
    padding: 23px 20px;
    border-radius: 26px;
  }

  .shell[data-shell="admin"] .role-hero-copy,
  .shell[data-shell="trainer"] .role-hero-copy {
    width: 78%;
  }

  .shell[data-shell="admin"] .role-hero-copy h1,
  .shell[data-shell="trainer"] .role-hero-copy h1 {
    font-size: 31px;
  }

  .shell[data-shell="admin"] .role-hero-copy p,
  .shell[data-shell="trainer"] .role-hero-copy p {
    font-size: 14px;
  }

  .shell[data-shell="admin"] .role-hero-mark,
  .shell[data-shell="trainer"] .role-hero-mark {
    right: 18px;
    bottom: 22px;
    width: 62px;
    height: 62px;
    border-radius: 20px;
  }

  .shell[data-shell="admin"] .role-metric,
  .shell[data-shell="trainer"] .role-metric {
    min-height: 133px;
    padding: 15px;
  }

  .shell[data-shell="admin"] .role-metric-copy b,
  .shell[data-shell="trainer"] .role-metric-copy b {
    font-size: 26px;
  }
}

/* FF_BUILD_UI=0.0.0.51 */


/* ========================================================================
   FITNESS FOUNDATION 0.0.0.52
   ADMIN + TRAINER — APPROVED DASHBOARD POLISH
   Client shell intentionally untouched.
   ======================================================================== */


/* ------------------------------------------------------------------------
   OPAQUE ROLE HEADER
   Prevent content from visually bleeding below sticky topbar.
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"] .topbar,
.shell[data-shell="trainer"] .topbar {
  background: #fbfdfb;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  box-shadow:
    0 1px 0 rgba(16, 30, 21, .055);
}

html[data-theme="dark"]
.shell[data-shell="admin"] .topbar,
html[data-theme="dark"]
.shell[data-shell="trainer"] .topbar {
  background: #141815;
}


/* ------------------------------------------------------------------------
   ADMIN HERO
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"] .ff52-admin-hero {
  min-height: 194px;

  margin-top: 8px;
  margin-bottom: 14px;

  padding:
    24px
    23px
    21px;
}

.shell[data-shell="admin"]
.ff52-admin-hero .role-hero-copy {
  width: calc(100% - 82px);
  max-width: 500px;
}

.shell[data-shell="admin"]
.ff52-admin-hero .role-hero-copy h1 {
  max-width: 420px;

  font-size:
    clamp(
      31px,
      7.5vw,
      41px
    );

  line-height: 1.01;
}

.shell[data-shell="admin"]
.ff52-admin-hero .role-hero-copy p {
  margin-top: 11px;

  max-width: 405px;

  font-size: 14px;
  line-height: 1.38;
}

.role-hero-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 15px;

  color: #7e8882;

  font-size: 11px;
  line-height: 1.2;
}

.role-hero-status i {
  width: 8px;
  height: 8px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #0a9c71;

  box-shadow:
    0 0 0 4px
    rgba(10, 156, 113, .08);
}

.role-hero-status b {
  color: #087a5b;

  font-size: 11px;
  font-weight: 730;
}

.role-hero-status.warn i {
  background: #c68b18;

  box-shadow:
    0 0 0 4px
    rgba(198,139,24,.09);
}

.role-hero-status.warn b {
  color: #99680a;
}


/* ------------------------------------------------------------------------
   COMPACT KPI GRID
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"]
.ff52-role-metrics,
.shell[data-shell="trainer"]
.role-metrics {
  gap: 10px;

  margin-bottom: 18px;
}

.shell[data-shell="admin"]
.ff52-role-metrics .role-metric,
.shell[data-shell="trainer"]
.role-metrics .role-metric {
  min-height: 118px;

  padding: 14px;

  border-radius: 21px;
}

.shell[data-shell="admin"]
.ff52-role-metrics .role-metric-icon,
.shell[data-shell="trainer"]
.role-metrics .role-metric-icon {
  width: 40px;
  height: 40px;

  margin-bottom: 10px;

  border-radius: 13px;
}

.shell[data-shell="admin"]
.ff52-role-metrics .role-metric-icon svg,
.shell[data-shell="trainer"]
.role-metrics .role-metric-icon svg {
  width: 21px;
  height: 21px;
}

.shell[data-shell="admin"]
.ff52-role-metrics .role-metric-copy small,
.shell[data-shell="trainer"]
.role-metrics .role-metric-copy small {
  font-size: 11.5px;
}

.shell[data-shell="admin"]
.ff52-role-metrics .role-metric-copy b,
.shell[data-shell="trainer"]
.role-metrics .role-metric-copy b {
  font-size: 27px;
}

.shell[data-shell="admin"]
.ff52-role-metrics .role-metric-copy em,
.shell[data-shell="trainer"]
.role-metrics .role-metric-copy em {
  margin-top: 4px;

  font-size: 10.5px;
}


/* ------------------------------------------------------------------------
   ADMIN ACTIVITY
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"]
.ff52-activity {
  margin-top: 12px;
}

.role-period-chip {
  display: inline-flex;
  align-items: center;

  min-height: 31px;

  padding: 0 11px;

  border-radius: 999px;

  background: #f0f4f1;

  color: #78837c;

  font-size: 11px;
  font-weight: 650;
}

.shell[data-shell="admin"]
.activity-strip {
  gap: 9px;
}

.shell[data-shell="admin"]
.activity-strip > div {
  min-height: 66px;

  grid-template-columns:
    34px
    1fr;

  padding: 11px 12px;

  border-radius: 18px;
}

.activity-strip-copy {
  display: flex;
  flex-direction: column;

  gap: 3px;

  min-width: 0;
}

.shell[data-shell="admin"]
.activity-strip-copy b {
  font-size: 18px;
}

.shell[data-shell="admin"]
.activity-strip-copy small {
  line-height: 1.1;
}


/* ------------------------------------------------------------------------
   ADMIN RECENT CLIENTS
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"]
.ff52-recent {
  margin-top: 22px;
}

.shell[data-shell="admin"]
.ff52-recent-list {
  overflow: hidden;

  border:
    1px solid
    rgba(18, 30, 23, .08);

  border-radius: 22px;

  background: #fff;
}

.shell[data-shell="admin"]
.ff52-recent-list .row {
  min-height: 62px;

  margin: 0;

  border: 0;
  border-radius: 0;

  border-bottom:
    1px solid
    rgba(18, 30, 23, .06);

  box-shadow: none;
}

.shell[data-shell="admin"]
.ff52-recent-list .row:last-child {
  border-bottom: 0;
}

.role-new-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 26px;

  padding: 0 10px;

  border-radius: 999px;

  background: #e8f7f1;

  color: #087c5c;

  font-size: 10px;
  font-weight: 720;
}

.role-empty-inline {
  min-height: 76px;

  display: flex;
  align-items: center;

  gap: 13px;

  padding: 14px 16px;

  border:
    1px solid
    rgba(18,30,23,.08);

  border-radius: 20px;

  background: #fff;
}

.role-empty-inline > span:first-child {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 13px;

  background: #edf6f2;

  color: #187c60;
}

.role-empty-inline svg {
  width: 21px;
  height: 21px;
}

.role-empty-inline > div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}

.role-empty-inline b {
  font-size: 13px;
}

.role-empty-inline small {
  color: #919a94;

  font-size: 11px;
}


/* ========================================================================
   TRAINER HERO
   ======================================================================== */

.shell[data-shell="trainer"]
.role-hero {
  min-height: 218px;

  margin-bottom: 14px;

  padding:
    24px
    22px;

  background:
    linear-gradient(
      90deg,
      #ffffff 0%,
      #f7fcf9 44%,
      rgba(225,247,237,.94) 100%
    );
}


/*
 * Replace the decorative circle with the real trainer image.
 * Asset already belongs to Fitness Foundation production.
 */
.shell[data-shell="trainer"]
.role-hero::before {
  content: "";

  position: absolute;

  right: -5px;
  bottom: 0;

  top: auto;

  width: 47%;
  height: 100%;

  border: 0;
  border-radius: 0;

  background:
    linear-gradient(
      90deg,
      rgba(236,250,243,0),
      rgba(236,250,243,.02)
    ),
    url(
      "/miniapp/assets/trainer-nikita-0.0.0.37.webp?v=0.0.0.37"
    );

  background-repeat: no-repeat;
  background-position:
    center bottom;
  background-size: cover;

  box-shadow: none;

  opacity: .98;

  pointer-events: none;
}


/* subtle editorial ribbon */
.shell[data-shell="trainer"]
.role-hero::after {
  right: -35px;
  top: 38px;

  width: 205px;
  height: 50px;

  opacity: .55;
}


/*
 * Text remains readable on top of photo layout.
 */
.shell[data-shell="trainer"]
.role-hero-copy {
  width: 60%;
  max-width: 340px;

  position: relative;
  z-index: 3;
}

.shell[data-shell="trainer"]
.role-hero-copy h1 {
  font-size:
    clamp(
      32px,
      8vw,
      41px
    );

  line-height: .99;
}

.shell[data-shell="trainer"]
.role-hero-copy p {
  max-width: 285px;

  margin-top: 12px;

  font-size: 14px;
  line-height: 1.35;
}


/*
 * Small chart tile on top of trainer photo.
 */
.shell[data-shell="trainer"]
.role-hero-mark {
  z-index: 4;

  right: 17px;
  bottom: 19px;

  width: 66px;
  height: 66px;

  border-radius: 20px;

  box-shadow:
    0 9px 24px
    rgba(5,137,99,.18);
}


/* ========================================================================
   TRAINER BOOKINGS
   ======================================================================== */

.trainer-empty-booking {
  min-height: 105px;

  display: flex;
  align-items: center;

  gap: 15px;

  padding: 15px 16px;

  border:
    1px dashed
    rgba(24, 43, 31, .11);

  border-radius: 21px;

  background:
    rgba(255,255,255,.78);
}

.trainer-empty-booking-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 15px;

  background: #eaf7f1;

  color: #087b5b;
}

.trainer-empty-booking-icon svg {
  width: 25px !important;
  height: 25px !important;

  max-width: 25px !important;
  max-height: 25px !important;
}

.trainer-empty-booking-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 5px;
}

.trainer-empty-booking-copy b {
  color: #111612;

  font-size: 14px;
  font-weight: 760;
}

.trainer-empty-booking-copy small {
  max-width: 430px;

  color: #8f9892;

  font-size: 11.5px;
  line-height: 1.38;
}


/*
 * When appointments exist.
 */
.shell[data-shell="trainer"]
.trainer-booking-list {
  gap: 9px;
}

.shell[data-shell="trainer"]
.trainer-booking-card {
  padding: 15px;

  border-radius: 20px;

  box-shadow: none;
}


/* ========================================================================
   TRAINER ATTENTION
   ======================================================================== */

.role-attention-empty {
  min-height: 72px;

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 13px 15px;

  border:
    1px solid
    rgba(17, 34, 23, .075);

  border-radius: 19px;

  background: #fff;
}

.role-attention-empty-icon {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 13px;

  color: #087a5b;

  background: #eaf7f1;
}

.role-attention-empty-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.role-attention-empty > span:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}

.role-attention-empty b {
  color: #111612;

  font-size: 13px;
  font-weight: 750;
}

.role-attention-empty small {
  color: #929b95;

  font-size: 11px;
}


/*
 * Real attention list.
 */
.shell[data-shell="trainer"]
.role-attention-list {
  overflow: hidden;

  border:
    1px solid
    rgba(18, 30, 23, .08);

  border-radius: 21px;

  background: #fff;
}

.shell[data-shell="trainer"]
.role-attention-list .row {
  min-height: 66px;

  margin: 0;

  border: 0;
  border-radius: 0;

  border-bottom:
    1px solid
    rgba(18, 30, 23, .06);

  box-shadow: none;
}

.shell[data-shell="trainer"]
.role-attention-list .row:last-child {
  border-bottom: 0;
}


/* ------------------------------------------------------------------------
   SECTION DENSITY
   ------------------------------------------------------------------------ */

.shell[data-shell="admin"]
.role-section-head,
.shell[data-shell="trainer"]
.role-section-head {
  margin-top: 23px;
  margin-bottom: 10px;
}

.shell[data-shell="admin"]
.role-section-head h2,
.shell[data-shell="trainer"]
.role-section-head h2 {
  font-size: 23px;
}


/* ------------------------------------------------------------------------
   DARK MODE
   ------------------------------------------------------------------------ */

html[data-theme="dark"]
.role-period-chip {
  color: #939e97;

  background:
    rgba(255,255,255,.045);
}

html[data-theme="dark"]
.shell[data-shell="admin"]
.ff52-recent-list,
html[data-theme="dark"]
.role-empty-inline,
html[data-theme="dark"]
.trainer-empty-booking,
html[data-theme="dark"]
.role-attention-empty,
html[data-theme="dark"]
.shell[data-shell="trainer"]
.role-attention-list {
  border-color:
    rgba(231,244,237,.07);

  background:
    #191e1b;
}

html[data-theme="dark"]
.role-new-chip {
  color: #70d8b2;

  background:
    rgba(8,145,102,.15);
}

html[data-theme="dark"]
.trainer-empty-booking-copy b,
html[data-theme="dark"]
.role-attention-empty b,
html[data-theme="dark"]
.role-empty-inline b {
  color: #f1f5f2;
}

html[data-theme="dark"]
.shell[data-shell="trainer"]
.role-hero {
  background:
    linear-gradient(
      90deg,
      #181e1a 0%,
      #16201b 45%,
      #102b20 100%
    );
}

html[data-theme="dark"]
.shell[data-shell="trainer"]
.role-hero::before {
  opacity: .78;
}


/* ------------------------------------------------------------------------
   SMALL MOBILE
   ------------------------------------------------------------------------ */

@media (max-width: 390px) {

  .shell[data-shell="admin"]
  .ff52-admin-hero {
    min-height: 184px;

    padding:
      21px
      19px;
  }

  .shell[data-shell="admin"]
  .ff52-admin-hero .role-hero-copy h1 {
    font-size: 30px;
  }

  .shell[data-shell="trainer"]
  .role-hero {
    min-height: 205px;

    padding:
      21px
      18px;
  }

  .shell[data-shell="trainer"]
  .role-hero-copy {
    width: 62%;
  }

  .shell[data-shell="trainer"]
  .role-hero-copy h1 {
    font-size: 30px;
  }

  .shell[data-shell="trainer"]
  .role-hero::before {
    width: 48%;
  }

  .shell[data-shell="trainer"]
  .role-hero-mark {
    width: 59px;
    height: 59px;

    right: 14px;
    bottom: 16px;
  }

  .shell[data-shell="admin"]
  .ff52-role-metrics .role-metric,
  .shell[data-shell="trainer"]
  .role-metrics .role-metric {
    min-height: 112px;

    padding: 13px;
  }
}


/* FF_BUILD_UI=0.0.0.52 */

/* =========================================================
   FF 0.0.0.53 — ADMIN/TRAINER FIX
   ========================================================= */

/* ADMIN: fix activity overlap */
.shell[data-shell="admin"] .activity-strip > div {
  display:grid !important;
  grid-template-columns:38px minmax(0,1fr) !important;
  align-items:center !important;
  gap:11px !important;
}

.shell[data-shell="admin"] .activity-strip > div > span:first-child {
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  padding:0 !important;
}

.shell[data-shell="admin"] .activity-strip > div > .activity-strip-copy {
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:3px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.shell[data-shell="admin"] .activity-strip-copy b {
  font-size:19px !important;
  line-height:1 !important;
  margin:0 !important;
}

.shell[data-shell="admin"] .activity-strip-copy small {
  font-size:11px !important;
  line-height:1.15 !important;
  margin:0 !important;
}

/* ADMIN: denser KPI */
.shell[data-shell="admin"] .ff52-role-metrics .role-metric {
  min-height:105px !important;
  padding:13px !important;
}

.shell[data-shell="admin"] .ff52-role-metrics .role-metric-icon {
  width:38px !important;
  height:38px !important;
  margin-bottom:7px !important;
}

/* TRAINER: separate text and portrait */
.shell[data-shell="trainer"] .role-hero {
  min-height:202px !important;
  padding:21px 20px !important;
  overflow:hidden !important;
}

.shell[data-shell="trainer"] .role-hero-copy {
  position:relative !important;
  z-index:5 !important;
  width:58% !important;
  max-width:58% !important;
}

.shell[data-shell="trainer"] .role-hero-copy h1 {
  max-width:100% !important;
  font-size:clamp(27px,6.5vw,36px) !important;
  line-height:1.01 !important;
  letter-spacing:-.05em !important;
}

.shell[data-shell="trainer"] .role-hero-copy p {
  max-width:100% !important;
  margin-top:10px !important;
  font-size:13px !important;
  line-height:1.35 !important;
}

.shell[data-shell="trainer"] .role-hero::before {
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  width:38% !important;
  height:100% !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  background:
    linear-gradient(
      90deg,
      rgba(247,252,249,1) 0%,
      rgba(247,252,249,.55) 18%,
      rgba(247,252,249,0) 48%
    ),
    url("/miniapp/assets/trainer-nikita-0.0.0.37.webp?v=0.0.0.37") !important;

  background-repeat:no-repeat,no-repeat !important;
  background-size:100% 100%,contain !important;
  background-position:center,right bottom !important;
}

.shell[data-shell="trainer"] .role-hero-mark {
  z-index:6 !important;
  right:11px !important;
  bottom:13px !important;
  width:55px !important;
  height:55px !important;
}

/* TRAINER: denser KPI */
.shell[data-shell="trainer"] .role-metrics .role-metric {
  min-height:105px !important;
  padding:13px !important;
}

.shell[data-shell="trainer"] .role-metrics .role-metric-icon {
  width:38px !important;
  height:38px !important;
  margin-bottom:7px !important;
}

.shell[data-shell="trainer"] .role-metrics + .section {
  margin-top:12px !important;
  padding-top:0 !important;
}

.shell[data-shell="trainer"] .trainer-empty-booking {
  min-height:90px !important;
  padding:12px 14px !important;
}

/* FF_BUILD_UI=0.0.0.53 */

/* FF55 — PAGE RHYTHM */

.shell[data-shell="admin"] .content,
.shell[data-shell="trainer"] .content {
  gap:0 !important;
  row-gap:0 !important;
}

.shell[data-shell="admin"] .role-hero + .role-metrics,
.shell[data-shell="trainer"] .role-hero + .role-metrics {
  margin-top:12px !important;
}

.shell[data-shell="admin"] .role-metrics + .section,
.shell[data-shell="trainer"] .role-metrics + .section {
  margin-top:24px !important;
  padding-top:0 !important;
}

.shell[data-shell="admin"] .section + .section,
.shell[data-shell="trainer"] .section + .section {
  margin-top:26px !important;
}

.shell[data-shell="admin"] .role-section-head,
.shell[data-shell="trainer"] .role-section-head {
  margin-top:0 !important;
  margin-bottom:10px !important;
}

.shell[data-shell="admin"] .role-section-head h2,
.shell[data-shell="trainer"] .role-section-head h2 {
  font-size:21px !important;
  line-height:1.05 !important;
}

/* FF55_RHYTHM_OK */

/* FF55 — ADMIN */

.shell[data-shell="admin"] .ff52-role-metrics {
  gap:9px !important;
  margin-bottom:0 !important;
}

.shell[data-shell="admin"] .ff52-role-metrics .role-metric {
  min-height:102px !important;
  padding:12px !important;
  border-radius:19px !important;
}

.shell[data-shell="admin"] .activity-strip {
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:0 !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid rgba(20,35,25,.08) !important;
  border-radius:20px !important;
}

.shell[data-shell="admin"] .activity-strip > div {
  min-height:64px !important;
  padding:11px 12px !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

.shell[data-shell="admin"] .activity-strip > div:nth-child(odd) {
  border-right:1px solid rgba(20,35,25,.06) !important;
}

.shell[data-shell="admin"] .activity-strip > div:nth-child(-n+2) {
  border-bottom:1px solid rgba(20,35,25,.06) !important;
}

.shell[data-shell="admin"] .activity-strip-copy b {
  font-size:18px !important;
}

.shell[data-shell="admin"] .ff52-recent {
  margin-top:26px !important;
}

/* FF55_ADMIN_OK */

.shell[data-shell="trainer"] .role-hero::before {
  content:"" !important;
  position:absolute !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:44% !important;
  height:100% !important;

  background:
    url("/miniapp/assets/trainer-nikita-0.0.0.37.webp?v=0.0.0.37")
    center 38% / cover no-repeat !important;

  opacity:.66 !important;

  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 24%,#000 52%) !important;

  mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 24%,#000 52%) !important;
}

.shell[data-shell="trainer"] .role-hero-mark {
  width:50px !important;
  height:50px !important;
  right:11px !important;
  bottom:12px !important;
}

/* FF55_TRAINER_PHOTO_OK */

.shell[data-shell="trainer"] .role-hero::before {
  content:"" !important;
  position:absolute !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:44% !important;
  height:100% !important;

  background:
    url("/miniapp/assets/trainer-nikita-0.0.0.37.webp?v=0.0.0.37")
    center 38% / cover no-repeat !important;

  opacity:.66 !important;

  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 24%,#000 52%) !important;

  mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 24%,#000 52%) !important;
}

.shell[data-shell="trainer"] .role-hero-mark {
  width:50px !important;
  height:50px !important;
  right:11px !important;
  bottom:12px !important;
}

/* FF55_TRAINER_PHOTO_OK */


/* ==========================================================
   FITNESS FOUNDATION 0.0.0.57
   DYNAMIC TRAINER HERO + FINAL POLISH
   ========================================================== */


/* ADMIN — slightly denser dashboard */

.shell[data-shell="admin"] .ff52-admin-hero {
  min-height:170px !important;
  padding:18px 22px !important;
}

.shell[data-shell="admin"] .ff52-role-metrics .role-metric {
  min-height:96px !important;
  padding:11px 12px !important;
}

.shell[data-shell="admin"]
.role-metrics + .section {
  margin-top:18px !important;
}

.shell[data-shell="admin"]
.activity-strip > div {
  min-height:60px !important;
}

.shell[data-shell="admin"]
.ff52-recent {
  margin-top:22px !important;
}


/* TRAINER — compact working rhythm */

.shell[data-shell="trainer"] .role-hero {
  min-height:184px !important;
}

.shell[data-shell="trainer"]
.role-metrics + .section {
  margin-top:18px !important;
}

.shell[data-shell="trainer"]
.section + .section {
  margin-top:22px !important;
}


/*
 * IMPORTANT:
 * Photo source now comes from JS:
 * --trainer-hero-photo
 *
 * No fixed trainer photo is used here except fallback.
 */

.shell[data-shell="trainer"]
.role-hero::before {
  content:"" !important;

  position:absolute !important;

  right:0 !important;
  top:0 !important;
  bottom:0 !important;

  width:46% !important;
  height:100% !important;

  background:
    var(
      --trainer-hero-photo,
      url("/miniapp/assets/trainer-nikita-0.0.0.37.webp?v=0.0.0.37")
    )
    center 36% / cover
    no-repeat !important;

  opacity:.58 !important;

  filter:
    grayscale(.18)
    saturate(.68)
    contrast(.90)
    brightness(1.03) !important;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.16) 17%,
      rgba(0,0,0,.58) 36%,
      #000 59%
    ) !important;

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.16) 17%,
      rgba(0,0,0,.58) 36%,
      #000 59%
    ) !important;
}

.shell[data-shell="trainer"]
.role-hero-copy {
  width:62% !important;
  max-width:62% !important;
}

.shell[data-shell="trainer"]
.role-hero-mark {
  width:48px !important;
  height:48px !important;
  right:11px !important;
  bottom:11px !important;
}


/* Dark theme */

html[data-theme="dark"]
.shell[data-shell="trainer"]
.role-hero::before {
  opacity:.47 !important;

  filter:
    grayscale(.30)
    saturate(.55)
    brightness(.76)
    contrast(.92) !important;
}





/* ========================================================================
   FITNESS FOUNDATION ADMIN VISUAL CALIBRATION 0.1.0.2
   Canonical admin-only layer. Replaces the 0.1.0 admin workspace layer.
   No selectors for the floating dock are allowed in this block.
   ======================================================================== */

.shell[data-shell="admin"]{
  --a010-surface:#ffffff;
  --a010-soft:#f5f8f6;
  --a010-line:rgba(15,42,31,.095);
  --a010-text:#111612;
  --a010-muted:#707a74;
  --a010-green:#0a8a65;
  --a010-green-soft:#eaf6f1;
  --a010-warn:#8c610c;
  --a010-warn-soft:#fff6df;
  --a010-danger:#a53b3b;
  --a010-danger-soft:#fff1f0;
  --a010-blue:#356fae;
  --a010-blue-soft:#eff6fd;
  --a010-shadow:0 7px 22px rgba(12,39,27,.032);
}

[data-theme="dark"] .shell[data-shell="admin"]{
  --a010-surface:#151a17;
  --a010-soft:#111613;
  --a010-line:rgba(232,245,237,.09);
  --a010-text:#f2f6f3;
  --a010-muted:#a9b3ad;
  --a010-green:#55c9a1;
  --a010-green-soft:rgba(58,174,134,.13);
  --a010-warn:#e6b652;
  --a010-warn-soft:rgba(217,157,47,.13);
  --a010-danger:#ef8585;
  --a010-danger-soft:rgba(206,75,75,.13);
  --a010-blue:#8bb7ef;
  --a010-blue-soft:rgba(72,127,194,.15);
  --a010-shadow:none;
}

/* ----- Admin rhythm + typography ----- */
.shell[data-shell="admin"] .content{gap:14px;}
.shell[data-shell="admin"] .content.nested{padding-top:9px;}
.shell[data-shell="admin"] .eyebrow{font-size:10px;line-height:1.2;letter-spacing:.145em;font-weight:720;}
.shell[data-shell="admin"] .role-page-head{gap:2px;margin:4px 0 11px;}
.shell[data-shell="admin"] .role-page-head h1{font-size:28px;line-height:1.02;font-weight:810;letter-spacing:-.044em;}
.shell[data-shell="admin"] .role-page-head p{max-width:520px;margin:6px 0 0;font-size:12px;line-height:1.42;color:var(--a010-muted);}
.shell[data-shell="admin"] .section{gap:10px;}
.shell[data-shell="admin"] .section-head{gap:10px;}
.shell[data-shell="admin"] .section-head h2,
.shell[data-shell="admin"] .role-section-head h2{font-size:17px;line-height:1.15;font-weight:780;letter-spacing:-.018em;}
.shell[data-shell="admin"] .section-head .link,
.shell[data-shell="admin"] .section-head span{font-size:11.5px;}

/* ----- Controls ----- */
.shell[data-shell="admin"] .btn{min-height:46px;padding:0 17px;border-radius:13px;font-size:13.5px;font-weight:720;}
.shell[data-shell="admin"] .btn.compact{min-height:40px;padding:0 13px;border-radius:12px;font-size:12.5px;}
.shell[data-shell="admin"] .role-toolbar{gap:7px;}
.shell[data-shell="admin"] .role-toolbar .btn{min-height:40px;border-radius:12px;font-size:12px;}
.shell[data-shell="admin"] .role-search{min-height:44px;border-radius:14px;}
.shell[data-shell="admin"] .role-search input{font-size:13px;}
.shell[data-shell="admin"] .fchip{min-height:31px;padding:0 11px;font-size:10.5px;}

/* ----- Shared admin surfaces ----- */
.shell[data-shell="admin"] .card{padding:13px;border-radius:16px;box-shadow:var(--a010-shadow);}
.shell[data-shell="admin"] .row-list{gap:7px;}
.shell[data-shell="admin"] .row{min-height:52px;gap:10px;padding:10px 11px;border-radius:14px;box-shadow:var(--a010-shadow);}
.shell[data-shell="admin"] .row .row-icon{width:34px;height:34px;border-radius:10px;font-size:11.5px;}
.shell[data-shell="admin"] .row .row-icon svg{width:17px;height:17px;}
.shell[data-shell="admin"] .row .row-body b{font-size:13.5px;font-weight:690;}
.shell[data-shell="admin"] .row .row-body small{margin-top:1px;font-size:11.25px;line-height:1.3;}
.shell[data-shell="admin"] .row .badge,
.shell[data-shell="admin"] .badge{padding:3px 7px;border-radius:999px;font-size:9.5px;line-height:1.25;font-weight:760;letter-spacing:.035em;}
.shell[data-shell="admin"] .acc{border-radius:15px;}
.shell[data-shell="admin"] .acc summary{min-height:50px;padding:11px 12px;}
.shell[data-shell="admin"] .role-course-acc{border-radius:16px;}
.shell[data-shell="admin"] .role-course-acc > summary{min-height:50px;}
.shell[data-shell="admin"] .state{gap:7px;padding:22px 14px;border-radius:15px;}
.shell[data-shell="admin"] .state > svg{width:42px;height:42px;max-width:42px;max-height:42px;margin-bottom:2px;}
.shell[data-shell="admin"] .state b{font-size:14px;}
.shell[data-shell="admin"] .state p{font-size:12px;line-height:1.4;}

/* ----- Overview ----- */
/* FF_ADMIN_HOME_INTEGRATED_HERO=0.1.0.4 */
/* FF_ADMIN_HOME_SPACING_POLISH=ui2 */

.shell[data-shell="admin"][data-route="a-home"]{
  --a-home-gap:0px;
}

.shell[data-shell="admin"][data-route="a-home"] .content{
  gap:var(--a-home-gap);
}


/* =========================================================
   ADMIN HERO — HARD LAYOUT RESET
   ========================================================= */

/*
 * Important:
 * the generic .role-hero is a flex container.
 * Admin Overview uses its own vertical composition.
 */

.shell[data-shell="admin"][data-route="a-home"]
.admin-role-hero.admin010-hero.admin010-hero-integrated{
  position:relative !important;
  isolation:isolate !important;

  display:block !important;

  align-items:initial !important;
  justify-content:initial !important;

  gap:0 !important;

  width:100%;
  min-height:210px !important;

  margin:
    0
    0
    14px !important;

  padding:
    15px
    16px
    16px !important;

  overflow:hidden !important;

  border:
    1px solid
    rgba(20,77,58,.10) !important;

  border-radius:22px !important;

  background:
    radial-gradient(
      circle at 86% 13%,
      rgba(69,190,153,.13),
      transparent 33%
    ),
    radial-gradient(
      circle at 100% 88%,
      rgba(65,145,213,.08),
      transparent 38%
    ),
    linear-gradient(
      120deg,
      #ffffff 0%,
      #f9fcfb 46%,
      #ebf8f3 100%
    ) !important;

  box-shadow:
    0 6px 22px
    rgba(12,47,34,.035) !important;
}


/* Remove every inherited decorative pseudo layer. */

.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-integrated::before{
  content:"" !important;

  position:absolute !important;

  inset:auto !important;

  top:-68px !important;
  right:-62px !important;

  width:190px !important;
  height:190px !important;

  border:24px solid
    rgba(18,151,109,.035) !important;

  border-radius:50% !important;

  background:none !important;
  box-shadow:none !important;

  transform:none !important;
  opacity:1 !important;

  z-index:0 !important;
  pointer-events:none !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-integrated::after{
  content:"" !important;

  position:absolute !important;

  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;

  width:auto !important;
  height:auto !important;

  border:0 !important;
  border-radius:0 !important;

  transform:none !important;
  box-shadow:none !important;

  z-index:2 !important;
  pointer-events:none !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.99) 0%,
      rgba(255,255,255,.96) 29%,
      rgba(255,255,255,.84) 43%,
      rgba(255,255,255,.40) 57%,
      rgba(255,255,255,.09) 76%,
      rgba(255,255,255,.02) 100%
    ) !important;
}


[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin-role-hero.admin010-hero.admin010-hero-integrated{
  border-color:
    rgba(180,226,207,.10) !important;

  background:
    radial-gradient(
      circle at 86% 13%,
      rgba(26,157,116,.12),
      transparent 34%
    ),
    linear-gradient(
      120deg,
      #151a17 0%,
      #151b18 48%,
      #17221e 100%
    ) !important;
}


[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-integrated::after{
  background:
    linear-gradient(
      90deg,
      rgba(21,26,23,.99) 0%,
      rgba(21,26,23,.95) 30%,
      rgba(21,26,23,.82) 44%,
      rgba(21,26,23,.43) 58%,
      rgba(21,26,23,.10) 77%,
      rgba(21,26,23,.02) 100%
    ) !important;
}


/* =========================================================
   HERO TOP ROW
   ========================================================= */

.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-top{
  position:relative !important;
  z-index:7 !important;

  display:flex !important;

  align-items:center !important;
  justify-content:space-between !important;

  width:100%;
  min-height:34px;

  gap:8px !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-brand{
  display:flex;
  align-items:center;

  min-width:0;

  gap:8px;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-logo{
  position:relative;

  flex:0 0 30px;

  width:30px;
  height:30px;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-logo img{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:contain;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-logo .brand-mark-dark{
  display:none;
}


[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-logo .brand-mark-light{
  display:none;
}


[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-logo .brand-mark-dark{
  display:block;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-brand-copy{
  display:flex;
  flex-direction:column;

  min-width:0;

  line-height:1.05;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-brand-copy b{
  color:var(--a010-text);

  font-size:12px;
  font-weight:700;

  letter-spacing:-.018em;

  white-space:nowrap;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-brand-copy small{
  margin-top:2px;

  color:var(--a010-muted);

  font-size:9.25px;
  font-weight:500;

  white-space:nowrap;
}


/* Tight role + notification group. */

.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-controls{
  position:relative !important;

  display:flex !important;

  align-items:center !important;
  justify-content:flex-end !important;

  flex:0 0 auto;

  gap:2px !important;

  margin:0 !important;
  padding:0 !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-controls .role-preview-switch{
  flex:0 0 auto;

  min-height:34px;

  margin:0 !important;

  padding:
    0
    9px !important;

  gap:5px !important;

  border-radius:13px !important;

  font-size:10px !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-controls .role-preview-switch svg{
  width:15px;
  height:15px;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-bell{
  position:relative !important;

  flex:
    0
    0
    34px !important;

  width:34px !important;
  height:34px !important;

  min-width:34px !important;
  min-height:34px !important;

  margin:0 !important;
  padding:0 !important;

  border-radius:12px !important;

  background:
    rgba(255,255,255,.52) !important;

  box-shadow:none !important;

  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-bell svg{
  width:17px !important;
  height:17px !important;
}


[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-bell{
  background:
    rgba(29,36,32,.54) !important;
}


/* =========================================================
   ADMIN PROFILE PHOTO — TRAINER-LIKE SOFT PHOTO
   ========================================================= */

.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-photo{
  position:absolute !important;

  z-index:1 !important;

  top:0 !important;
  right:0 !important;
  bottom:0 !important;

  left:auto !important;

  display:block !important;

  width:47% !important;
  height:100% !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  border:0 !important;
  border-radius:
    0
    22px
    22px
    0 !important;

  background:transparent !important;

  box-shadow:none !important;

  appearance:none;
  -webkit-appearance:none;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-profile-photo{
  display:block !important;

  width:100% !important;
  height:100% !important;

  overflow:hidden !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-profile-photo
.user-avatar-fallback{
  display:none !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-profile-photo img{
  display:block !important;

  width:100% !important;
  height:100% !important;

  max-width:none !important;

  object-fit:cover !important;
  object-position:center 38% !important;

  border:0 !important;
  border-radius:0 !important;

  opacity:.54 !important;

  filter:
    grayscale(.10)
    saturate(.72)
    contrast(.90)
    brightness(1.04)
    !important;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.11) 12%,
      rgba(0,0,0,.48) 31%,
      rgba(0,0,0,.86) 53%,
      #000 72%
    ) !important;

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.11) 12%,
      rgba(0,0,0,.48) 31%,
      rgba(0,0,0,.86) 53%,
      #000 72%
    ) !important;
}


[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-profile-photo img{
  opacity:.43 !important;

  filter:
    grayscale(.20)
    saturate(.58)
    contrast(.91)
    brightness(.76)
    !important;
}


/* =========================================================
   HERO COPY — ALWAYS LEFT
   ========================================================= */

.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-integrated .role-hero-copy{
  position:relative !important;

  z-index:6 !important;

  display:block !important;

  width:61% !important;
  max-width:330px !important;

  min-width:0 !important;

  margin:
    25px
    0
    0 !important;

  padding:0 !important;

  align-self:auto !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-integrated
.role-hero-copy h1{
  width:auto !important;
  max-width:300px !important;

  margin:0 !important;

  color:var(--a010-text) !important;

  font-size:27px !important;
  line-height:1.01 !important;

  font-weight:760 !important;

  letter-spacing:-.044em !important;

  text-align:left !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-integrated
.role-hero-copy p{
  width:auto !important;
  max-width:300px !important;

  margin:
    7px
    0
    0 !important;

  color:var(--a010-muted) !important;

  font-size:11.25px !important;
  line-height:1.34 !important;

  font-weight:480 !important;

  text-align:left !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-integrated
.role-hero-status{
  position:relative !important;

  display:inline-flex !important;

  align-items:center !important;

  width:auto !important;
  max-width:100% !important;

  min-height:31px !important;

  margin:
    10px
    0
    0 !important;

  padding:
    0
    9px !important;

  gap:5px !important;

  border:
    1px solid
    rgba(183,132,28,.12)
    !important;

  border-radius:12px !important;

  background:
    rgba(255,255,255,.80)
    !important;

  box-shadow:none !important;

  color:var(--a010-muted);

  font-size:9.5px !important;

  white-space:nowrap !important;

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}


[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-integrated
.role-hero-status{
  background:
    rgba(24,31,27,.78)
    !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-integrated
.role-hero-status b{
  font-size:9.5px !important;
  font-weight:670 !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-status-chev{
  margin-left:0;

  font-size:13px;
  line-height:1;
}


/* =========================================================
   KPI
   ========================================================= */

.shell[data-shell="admin"][data-route="a-home"]
.role-metrics.admin010-metrics{
  gap:7px !important;

  margin:
    0
    0
    18px !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-metrics .role-metric{
  position:relative !important;

  display:grid !important;

  grid-template-columns:
    29px
    minmax(0,1fr) !important;

  grid-template-rows:
    auto !important;

  align-items:center !important;

  column-gap:9px !important;

  min-height:76px !important;

  padding:
    9px
    10px !important;

  border:
    1px solid
    rgba(23,61,47,.085)
    !important;

  border-radius:17px !important;

  background:
    var(--a010-surface) !important;

  box-shadow:none !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-metrics .role-metric-icon{
  width:29px;
  height:29px;

  margin:0 !important;

  border-radius:10px;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-metrics .role-metric-icon svg{
  width:15px;
  height:15px;
}

.shell[data-shell="admin"][data-route="a-home"]
.admin010-metrics .role-metric-copy{
  display:flex !important;

  flex-direction:column !important;

  justify-content:center !important;

  align-items:flex-start !important;

  min-width:0 !important;

  margin:0 !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-metrics .role-metric-copy small{
  margin:
    0
    0
    2px;

  color:var(--a010-muted);

  font-size:9.5px;
  line-height:1.15;

  font-weight:620;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-metrics .role-metric-copy b{
  font-size:20px;
  line-height:1;

  font-weight:740;

  letter-spacing:-.038em;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-metrics
.metric-violet
.role-metric-copy b{
  font-size:18px;
  white-space:nowrap;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-metrics .role-metric-copy em{
  margin-top:2px;

  color:var(--a010-muted);

  font-size:9px;
  line-height:1.15;
}



.shell[data-shell="admin"][data-route="a-home"]
.admin010-metrics .role-metric > .chev{
  position:absolute !important;

  top:9px !important;
  right:9px !important;

  margin:0 !important;

  color:var(--a010-muted) !important;

  font-size:12px !important;
  line-height:1 !important;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.shell[data-shell="admin"][data-route="a-home"]
.section{
  margin:
    0
    0
    18px !important;

  gap:0 !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.section-head.role-section-head{
  min-height:26px;

  margin:
    0
    0
    9px !important;

  align-items:center;
}


.shell[data-shell="admin"][data-route="a-home"]
.section-head.role-section-head h2{
  font-size:17px;
  line-height:1.1;

  font-weight:700;

  letter-spacing:-.025em;
}


.shell[data-shell="admin"][data-route="a-home"]
.section-head.role-section-head .link{
  font-size:10.5px;
  font-weight:640;
}


.shell[data-shell="admin"][data-route="a-home"]
.role-period-chip{
  min-height:25px;

  padding:
    0
    8px;

  color:var(--a010-muted);

  font-size:9.75px;
}


/* Attention */

.shell[data-shell="admin"][data-route="a-home"]
.admin010-action-card.compact{
  grid-template-columns:
    33px
    minmax(0,1fr)
    auto
    12px;

  gap:8px;

  min-height:56px;

  padding:
    7px
    9px;

  border-radius:14px;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-action-card.compact
.admin010-action-copy b{
  font-size:12.5px;
  font-weight:660;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-action-card.compact
.admin010-action-copy small{
  color:var(--a010-muted);

  font-size:10.25px;
  line-height:1.25;
}


/* Activity */

.shell[data-shell="admin"][data-route="a-home"]
.activity-strip{
  overflow:hidden;

  border:
    1px solid
    rgba(23,61,47,.08);

  border-radius:16px !important;

  box-shadow:none !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.activity-strip > div{
  min-height:51px !important;

  padding:
    7px
    9px !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.activity-strip-copy b{
  font-size:15.5px !important;

  line-height:1 !important;

  font-weight:700 !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.activity-strip-copy small{
  margin-top:3px !important;

  color:
    var(--a010-muted)
    !important;

  font-size:9.75px !important;
}


/* New clients */


.shell[data-shell="admin"][data-route="a-home"]
.admin010-new-clients-week{
  margin-bottom:0 !important;
}

.shell[data-shell="admin"][data-route="a-home"]
.admin010-new-clients-week .section-head{
  justify-content:flex-start;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-week-client-list{
  gap:0;

  overflow:hidden;

  border:
    1px solid
    rgba(23,61,47,.08);

  border-radius:16px;

  background:var(--a010-surface);
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-week-client-list .row{
  min-height:47px;

  padding:
    6px
    9px;

  border:0;

  border-radius:0;

  box-shadow:none;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-week-client-list .row + .row{
  border-top:
    1px solid
    rgba(23,61,47,.07);
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-week-client-list .row-icon{
  width:33px;
  height:33px;

  border-radius:10px;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-week-client-list .row-body b{
  font-size:12.75px;

  font-weight:660;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-week-client-list .row-body small{
  margin-top:1px;

  color:var(--a010-muted);

  font-size:10.25px;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-week-client-list .badge{
  min-height:24px;

  padding:
    0
    8px;

  border-radius:999px;

  font-size:9.25px;
  font-weight:630;
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:370px){

  .shell[data-shell="admin"][data-route="a-home"]
  .admin-role-hero.admin010-hero.admin010-hero-integrated{
    min-height:204px !important;

    padding:
      14px
      14px
      15px !important;
  }


  .shell[data-shell="admin"][data-route="a-home"]
  .admin010-hero-brand-copy small{
    display:none;
  }


  .shell[data-shell="admin"][data-route="a-home"]
  .admin010-hero-controls{
    gap:1px !important;
  }


  .shell[data-shell="admin"][data-route="a-home"]
  .admin010-hero-controls .role-preview-switch{
    padding:
      0
      8px !important;
  }


  .shell[data-shell="admin"][data-route="a-home"]
  .admin010-hero-integrated .role-hero-copy{
    width:64% !important;

    margin-top:22px !important;
  }


  .shell[data-shell="admin"][data-route="a-home"]
  .admin010-hero-integrated
  .role-hero-copy h1{
    font-size:25px !important;
  }


  .shell[data-shell="admin"][data-route="a-home"]
  .admin010-hero-photo{
    width:46% !important;
  }

}


/*
 * Release contract:
 * - bottom dock untouched
 * - backend untouched
 * - weekly-new-client logic untouched
 * - client and trainer UI untouched
 */


/* ----- Action center ----- */
.shell[data-shell="admin"] .admin010-action-preview{margin-top:3px;}
.shell[data-shell="admin"] .admin010-action-list{display:grid;gap:7px;}
.shell[data-shell="admin"] .admin010-action-card{
  width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto 14px;gap:9px;align-items:center;
  padding:11px;text-align:left;border:1px solid var(--a010-line);border-radius:15px;background:var(--a010-surface);color:var(--a010-text);box-shadow:var(--a010-shadow);
}
.shell[data-shell="admin"] .admin010-action-card.compact{padding:9px 10px;border-radius:13px;box-shadow:none;}
.shell[data-shell="admin"] .admin010-action-card.warning{background:linear-gradient(145deg,var(--a010-surface),var(--a010-warn-soft));}
.shell[data-shell="admin"] .admin010-action-card.danger{background:linear-gradient(145deg,var(--a010-surface),var(--a010-danger-soft));}
.shell[data-shell="admin"] .admin010-action-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:var(--a010-green);background:var(--a010-green-soft);}
.shell[data-shell="admin"] .admin010-action-icon svg{width:18px;height:18px;}
.shell[data-shell="admin"] .admin010-action-copy{display:block;min-width:0;}
.shell[data-shell="admin"] .admin010-action-copy b{display:block;margin-bottom:2px;font-size:13px;line-height:1.22;font-weight:700;}
.shell[data-shell="admin"] .admin010-action-copy small{display:block;color:var(--a010-muted);font-size:11px;line-height:1.3;}
.shell[data-shell="admin"] .admin010-action-card strong{min-width:24px;font-size:18px;text-align:right;}

/* ----- Clients ----- */
.shell[data-shell="admin"] .admin010-client-toolbar{align-items:stretch;}
.shell[data-shell="admin"] .admin010-filter-chips{margin:7px 0 11px;padding-bottom:1px;overflow-x:auto;scrollbar-width:none;}
.shell[data-shell="admin"] .admin010-filter-chips::-webkit-scrollbar{display:none;}
.shell[data-shell="admin"] .role-card-list{gap:0;border-radius:17px;box-shadow:var(--a010-shadow);}
.shell[data-shell="admin"] .client-work-card{gap:9px;padding:12px 13px;}
.shell[data-shell="admin"] .client-work-top{gap:9px;}
.shell[data-shell="admin"] .client-work-title b{font-size:13.5px;font-weight:700;}
.shell[data-shell="admin"] .client-work-title small{font-size:11px;}
.shell[data-shell="admin"] .client-work-meta{gap:6px;}
.shell[data-shell="admin"] .client-work-meta > span{padding:7px 8px;border-radius:10px;}
.shell[data-shell="admin"] .client-work-meta small{margin-bottom:2px;font-size:9px;}
.shell[data-shell="admin"] .client-work-meta b{font-size:11px;font-weight:680;}
.shell[data-shell="admin"] .admin010-client-card{gap:8px;}
.shell[data-shell="admin"] .admin010-client-card .client-work-top{grid-template-columns:auto minmax(0,1fr) auto auto;}
.shell[data-shell="admin"] .admin010-client-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:7px;border-top:1px solid var(--a010-line);color:var(--a010-muted);font-size:10.5px;}
.shell[data-shell="admin"] .admin010-client-foot b{color:var(--a010-warn);font-size:10px;}
.shell[data-shell="admin"] .admin010-client-head{display:grid;gap:8px;}
.shell[data-shell="admin"] .admin010-client-head .profile-head{padding:12px;gap:11px;}
.shell[data-shell="admin"] .admin010-client-head .profile-head b{font-size:15px;}
.shell[data-shell="admin"] .admin010-client-head .profile-head span{font-size:11px;margin-top:2px;}
.shell[data-shell="admin"] .admin010-client-actions,
.shell[data-shell="admin"] .admin010-content-toolbar,
.shell[data-shell="admin"] .admin010-export-row,
.shell[data-shell="admin"] .admin010-row-actions{display:flex;gap:7px;flex-wrap:wrap;}
.shell[data-shell="admin"] .admin010-client-actions .btn,
.shell[data-shell="admin"] .admin010-content-toolbar .btn,
.shell[data-shell="admin"] .admin010-export-row .btn{width:auto;}
.shell[data-shell="admin"] .admin010-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0;}
.shell[data-shell="admin"] .admin010-summary-grid > div{min-height:66px;padding:10px 11px;display:flex;flex-direction:column;justify-content:space-between;gap:5px;border:1px solid var(--a010-line);border-radius:14px;background:var(--a010-surface);}
.shell[data-shell="admin"] .admin010-summary-grid.compact{margin:8px 0;}
.shell[data-shell="admin"] .admin010-summary-grid.compact > div{min-height:58px;padding:9px 10px;}
.shell[data-shell="admin"] .admin010-summary-grid small{color:var(--a010-muted);font-size:10px;line-height:1.2;}
.shell[data-shell="admin"] .admin010-summary-grid b{font-size:18px;line-height:1;font-weight:780;letter-spacing:-.03em;}
.shell[data-shell="admin"] .admin010-access-list,
.shell[data-shell="admin"] .admin010-payment-list,
.shell[data-shell="admin"] .admin010-rule-list,
.shell[data-shell="admin"] .admin010-schedule-list,
.shell[data-shell="admin"] .admin010-health-list,
.shell[data-shell="admin"] .admin010-audit-list{display:grid;gap:7px;}
.shell[data-shell="admin"] .admin010-access-card,
.shell[data-shell="admin"] .admin010-payment-card,
.shell[data-shell="admin"] .admin010-rule-card,
.shell[data-shell="admin"] .admin010-schedule-row,
.shell[data-shell="admin"] .admin010-health-row,
.shell[data-shell="admin"] .admin010-audit-row{border:1px solid var(--a010-line);border-radius:14px;background:var(--a010-surface);color:var(--a010-text);}
.shell[data-shell="admin"] .admin010-access-card{padding:11px;}
.shell[data-shell="admin"] .admin010-access-card.history{opacity:.82;}
.shell[data-shell="admin"] .admin010-access-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.shell[data-shell="admin"] .admin010-access-top > div{min-width:0;}
.shell[data-shell="admin"] .admin010-access-top b,
.shell[data-shell="admin"] .admin010-access-top small{display:block;}
.shell[data-shell="admin"] .admin010-access-top b{font-size:13.5px;font-weight:710;}
.shell[data-shell="admin"] .admin010-access-top small,
.shell[data-shell="admin"] .admin010-access-meta{color:var(--a010-muted);font-size:10.75px;}
.shell[data-shell="admin"] .admin010-access-meta{display:grid;gap:2px;margin:6px 0 8px;}
.shell[data-shell="admin"] .admin010-row-actions .link{padding:5px 0;font-size:11.5px;}
.shell[data-shell="admin"] .admin010-profile-facts,
.shell[data-shell="admin"] .admin010-setting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
.shell[data-shell="admin"] .admin010-profile-facts > div,
.shell[data-shell="admin"] .admin010-setting-grid > div{padding:10px;border-radius:12px;background:var(--a010-soft);}
.shell[data-shell="admin"] .admin010-profile-facts small,
.shell[data-shell="admin"] .admin010-setting-grid small{display:block;color:var(--a010-muted);font-size:10px;margin-bottom:3px;}
.shell[data-shell="admin"] .admin010-profile-facts b,
.shell[data-shell="admin"] .admin010-setting-grid b{font-size:12.5px;font-weight:700;}
.shell[data-shell="admin"] .admin010-danger-zone{margin:14px 0 2px;padding:11px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(179,61,61,.16);border-radius:14px;background:var(--a010-danger-soft);}
.shell[data-shell="admin"] .admin010-danger-zone > div{min-width:0;}
.shell[data-shell="admin"] .admin010-danger-zone b,
.shell[data-shell="admin"] .admin010-danger-zone small{display:block;}
.shell[data-shell="admin"] .admin010-danger-zone b{font-size:13px;}
.shell[data-shell="admin"] .admin010-danger-zone small{margin-top:2px;color:var(--a010-muted);font-size:10.5px;}
.shell[data-shell="admin"] .admin010-danger-zone .btn{width:auto;flex:0 0 auto;}

/* ----- Content ----- */
.shell[data-shell="admin"] .admin010-course-card{border-radius:16px;}
.shell[data-shell="admin"] .admin010-course-state{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap;}
.shell[data-shell="admin"] .admin010-week{margin-top:10px;padding-top:9px;border-top:1px solid var(--a010-line);}
.shell[data-shell="admin"] .admin010-week-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;}
.shell[data-shell="admin"] .admin010-week-head b{font-size:10px;letter-spacing:.11em;font-weight:730;}
.shell[data-shell="admin"] .admin010-week-head small{color:var(--a010-muted);font-size:10px;}
.shell[data-shell="admin"] .admin010-workout-row{min-height:50px;}
.shell[data-shell="admin"] .admin010-content-warning{display:flex;gap:8px;align-items:center;padding:9px 10px;margin:7px 0;border:1px solid rgba(200,144,24,.14);border-radius:12px;background:var(--a010-warn-soft);color:var(--a010-warn);}
.shell[data-shell="admin"] .admin010-content-warning > svg{width:17px;height:17px;flex:0 0 auto;}
.shell[data-shell="admin"] .admin010-content-warning span,
.shell[data-shell="admin"] .admin010-content-warning b,
.shell[data-shell="admin"] .admin010-content-warning small{display:block;}
.shell[data-shell="admin"] .admin010-content-warning b{font-size:12.5px;}
.shell[data-shell="admin"] .admin010-content-warning small{margin-top:1px;font-size:10.5px;color:var(--a010-muted);}
.shell[data-shell="admin"] .admin010-knowledge-group{margin-top:11px;}
.shell[data-shell="admin"] .admin010-knowledge-group > b{display:block;margin-bottom:5px;font-size:11px;color:var(--a010-muted);}

/* ----- Sheets + forms ----- */
.admin010-form .picker-button{min-height:44px;border-radius:12px;}
.admin010-form-summary,
.admin010-form-note,
.admin010-rule-preview{padding:10px;border-radius:12px;background:var(--a010-soft,#f5f8f6);color:var(--a010-text,#111612);}
.admin010-form-summary b,
.admin010-form-summary small{display:block;}
.admin010-form-summary small,
.admin010-form-note{color:var(--a010-muted,#707a74);font-size:10.75px;line-height:1.35;}
.admin010-editor-section{display:grid;gap:8px;padding:10px 0 12px;border-bottom:1px solid var(--a010-line,rgba(15,42,31,.095));}
.admin010-editor-section:last-child{border-bottom:0;}
.admin010-editor-section .eyebrow{margin:0;}
.admin010-workout-editor > .btn{margin-top:6px;}
.admin010-video-inbox{max-height:220px;overflow:auto;}
.sheet:has(.admin010-form),
.sheet:has(.admin010-workout-editor){padding-top:12px;}
.sheet:has(.admin010-form) .sheet-head,
.sheet:has(.admin010-workout-editor) .sheet-head{margin-bottom:10px;}
.sheet:has(.admin010-form) .sheet-head h2,
.sheet:has(.admin010-workout-editor) .sheet-head h2{font-size:17px;line-height:1.15;}
.sheet:has(.admin010-form) .sheet-body,
.sheet:has(.admin010-workout-editor) .sheet-body{gap:10px;}
.admin010-form.form{gap:10px;}
.admin010-form.form label{gap:5px;font-size:11px;}
.admin010-form.form input,
.admin010-form.form select,
.admin010-form.form textarea{padding:10px 11px;font-size:13px;border-radius:11px;}
.admin010-form.form textarea{min-height:64px;}
.admin010-workout-editor textarea{min-height:64px;}

/* ----- Finance ----- */
.shell[data-shell="admin"] .finance-hero{padding:17px;border-radius:20px;background:radial-gradient(circle at 90% 10%,rgba(13,159,113,.11),transparent 34%),linear-gradient(135deg,#fff,#f4faf7);box-shadow:var(--a010-shadow);}
[data-theme="dark"] .shell[data-shell="admin"] .finance-hero{background:radial-gradient(circle at 90% 10%,rgba(13,159,113,.13),transparent 34%),linear-gradient(135deg,#171d19,#142019);}
.shell[data-shell="admin"] .finance-hero span{font-size:10.5px;}
.shell[data-shell="admin"] .finance-hero b{font-size:34px;font-weight:820;letter-spacing:-.045em;}
.shell[data-shell="admin"] .finance-hero small{font-size:10.5px;}
.shell[data-shell="admin"] .finance-metrics{gap:7px;}
.shell[data-shell="admin"] .finance-metrics > div{padding:10px;border-radius:14px;}
.shell[data-shell="admin"] .finance-metrics span{font-size:9px;}
.shell[data-shell="admin"] .finance-metrics b{margin-top:3px;font-size:13px;}
.shell[data-shell="admin"] .admin010-payment-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:11px;align-items:start;}
.shell[data-shell="admin"] .admin010-payment-card > div{min-width:0;}
.shell[data-shell="admin"] .admin010-payment-card h3{margin:5px 0 2px;font-size:13.5px;}
.shell[data-shell="admin"] .admin010-payment-card p,
.shell[data-shell="admin"] .admin010-payment-card small{margin:0;color:var(--a010-muted);font-size:10.75px;line-height:1.32;}
.shell[data-shell="admin"] .admin010-payment-card strong{font-size:16px;white-space:nowrap;}
.shell[data-shell="admin"] .admin010-payment-card .btn{grid-column:1/-1;}

/* ----- Management / team / settings ----- */
.shell[data-shell="admin"] .admin010-management-section{margin-top:12px;}
.shell[data-shell="admin"] .admin010-management-section .section-head{margin-bottom:6px;}
.shell[data-shell="admin"] .admin010-management-section .section-head h2{font-size:11px;color:var(--a010-muted);text-transform:uppercase;letter-spacing:.11em;font-weight:720;}
.shell[data-shell="admin"] .admin010-staff-card{display:grid;gap:7px;padding:11px;}
.shell[data-shell="admin"] .admin010-staff-card > .btn{width:100%;}
.shell[data-shell="admin"] .admin010-rule-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:11px;align-items:center;}
.shell[data-shell="admin"] .admin010-rule-card > div{min-width:0;}
.shell[data-shell="admin"] .admin010-rule-card b,
.shell[data-shell="admin"] .admin010-rule-card small{display:block;}
.shell[data-shell="admin"] .admin010-rule-card b{font-size:13px;}
.shell[data-shell="admin"] .admin010-rule-card small{margin-top:2px;color:var(--a010-muted);font-size:10.5px;}
.shell[data-shell="admin"] .admin010-rule-card .link{grid-column:1/-1;justify-self:start;}
.shell[data-shell="admin"] .admin010-settings-section{margin-top:13px;}
.shell[data-shell="admin"] .admin010-tariff-settings{display:grid;gap:7px;}
.shell[data-shell="admin"] .admin010-tariff-setting{display:grid;grid-template-columns:minmax(0,1fr) auto 14px;gap:8px;align-items:center;width:100%;padding:10px 11px;text-align:left;color:var(--a010-text);background:var(--a010-surface);border:1px solid var(--a010-line);border-radius:13px;}
.shell[data-shell="admin"] .admin010-tariff-setting span,
.shell[data-shell="admin"] .admin010-tariff-setting b,
.shell[data-shell="admin"] .admin010-tariff-setting small{display:block;}
.shell[data-shell="admin"] .admin010-tariff-setting b{font-size:13px;}
.shell[data-shell="admin"] .admin010-tariff-setting small{margin-top:2px;color:var(--a010-muted);font-size:10.25px;line-height:1.3;}
.shell[data-shell="admin"] .admin010-tariff-setting strong{font-size:13px;white-space:nowrap;}
.shell[data-shell="admin"] .trainer-card.compact-trainer{gap:11px;}
.shell[data-shell="admin"] .trainer-card.compact-trainer .t-avatar{width:48px;height:48px;}
.shell[data-shell="admin"] .trainer-card.compact-trainer b{font-size:13.5px;}
.shell[data-shell="admin"] .trainer-card.compact-trainer p{font-size:11px;line-height:1.35;}
.shell[data-shell="admin"] .trainer-card.compact-trainer small{font-size:10.5px;line-height:1.3;}
.shell[data-shell="admin"] .trainer-photo-form{gap:9px;}
.shell[data-shell="admin"] .photo-picker{min-height:88px;padding:12px;}

/* ----- Audit ----- */
.shell[data-shell="admin"] .admin010-audit-row{width:100%;display:grid;grid-template-columns:60px minmax(0,1fr) 14px;gap:8px;align-items:center;padding:10px;text-align:left;}
.shell[data-shell="admin"] .admin010-audit-row time{color:var(--a010-muted);font-size:9.75px;line-height:1.22;}
.shell[data-shell="admin"] .admin010-audit-row span,
.shell[data-shell="admin"] .admin010-audit-row b,
.shell[data-shell="admin"] .admin010-audit-row small{display:block;}
.shell[data-shell="admin"] .admin010-audit-row b{font-size:12.5px;font-weight:690;}
.shell[data-shell="admin"] .admin010-audit-row small{margin-top:1px;color:var(--a010-muted);font-size:10.25px;}
.admin010-json{max-height:220px;overflow:auto;margin:7px 0 0;padding:9px;border-radius:11px;background:#0e1511;color:#dce8e1;font-size:10px;white-space:pre-wrap;word-break:break-word;}

/* ----- Schedule ----- */
.shell[data-shell="admin"] .admin010-schedule-row{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 11px;}
.shell[data-shell="admin"] .admin010-schedule-row time,
.shell[data-shell="admin"] .admin010-schedule-row time b,
.shell[data-shell="admin"] .admin010-schedule-row time small,
.shell[data-shell="admin"] .admin010-schedule-row > div,
.shell[data-shell="admin"] .admin010-schedule-row > div b,
.shell[data-shell="admin"] .admin010-schedule-row > div small{display:block;}
.shell[data-shell="admin"] .admin010-schedule-row time b,
.shell[data-shell="admin"] .admin010-schedule-row > div b{font-size:12.5px;}
.shell[data-shell="admin"] .admin010-schedule-row time small,
.shell[data-shell="admin"] .admin010-schedule-row > div small{margin-top:1px;color:var(--a010-muted);font-size:10.25px;}

/* ----- Health ----- */
.shell[data-shell="admin"] .admin010-health-overall{display:flex;gap:10px;align-items:center;margin:7px 0 11px;padding:11px;border:1px solid var(--a010-line);border-radius:14px;background:var(--a010-surface);}
.shell[data-shell="admin"] .admin010-health-overall.warning{background:var(--a010-warn-soft);}
.shell[data-shell="admin"] .admin010-health-overall.error{background:var(--a010-danger-soft);}
.shell[data-shell="admin"] .admin010-health-overall > span{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:var(--a010-green);background:var(--a010-green-soft);}
.shell[data-shell="admin"] .admin010-health-overall span svg{width:18px;height:18px;}
.shell[data-shell="admin"] .admin010-health-overall b,
.shell[data-shell="admin"] .admin010-health-overall small{display:block;}
.shell[data-shell="admin"] .admin010-health-overall b{font-size:13px;}
.shell[data-shell="admin"] .admin010-health-overall small{margin-top:2px;color:var(--a010-muted);font-size:10.25px;}
.shell[data-shell="admin"] .admin010-health-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px 11px;}
.shell[data-shell="admin"] .admin010-health-dot{width:7px;height:7px;border-radius:50%;background:var(--a010-green);}
.shell[data-shell="admin"] .admin010-health-row.warning .admin010-health-dot{background:var(--a010-warn);}
.shell[data-shell="admin"] .admin010-health-row.error .admin010-health-dot{background:var(--a010-danger);}
.shell[data-shell="admin"] .admin010-health-row b,
.shell[data-shell="admin"] .admin010-health-row small{display:block;}
.shell[data-shell="admin"] .admin010-health-row b{font-size:12.5px;}
.shell[data-shell="admin"] .admin010-health-row small{margin-top:1px;color:var(--a010-muted);font-size:10.25px;}
.shell[data-shell="admin"] .admin010-health-row strong{font-size:13.5px;}

/* ----- Empty states / confirms / preview ----- */
.shell[data-shell="admin"] .admin010-small-state{min-height:108px;padding:16px 12px;}
.shell[data-shell="admin"] .admin010-small-state > svg,
.shell[data-shell="admin"] .state.admin010-small-state > svg{width:38px;height:38px;max-width:38px;max-height:38px;margin-bottom:3px;}
.admin010-confirm{display:grid;gap:10px;}
.admin010-confirm > p{margin:0;font-size:13px;line-height:1.4;}
.admin010-confirm-details{display:grid;gap:4px;padding:10px;border-radius:12px;background:var(--a010-soft,#f5f8f6);}
.admin010-confirm-details b,
.admin010-confirm-details small{display:block;}
.admin010-confirm-details small,
.admin010-confirm-details p{color:var(--a010-muted,#707a74);font-size:10.75px;line-height:1.35;}
.admin010-confirm-details p{margin:4px 0 0;}
.admin010-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.shell[data-shell="admin"] .admin010-preview-banner{align-items:center;padding:8px 10px;border-radius:11px;font-size:12px;}
.shell[data-shell="admin"] .admin010-preview-banner > span{display:flex;flex-direction:column;gap:1px;}
.shell[data-shell="admin"] .admin010-preview-banner small{font-size:8.5px;letter-spacing:.11em;}
.shell[data-shell="admin"] .admin010-preview-access{padding:11px;}

@media (max-width:360px){
  .shell[data-shell="admin"] .role-page-head h1{font-size:26px;}
  .shell[data-shell="admin"] .admin010-client-actions,
  .shell[data-shell="admin"] .admin010-content-toolbar,
  .shell[data-shell="admin"] .admin010-export-row{display:grid;grid-template-columns:1fr 1fr;}
  .shell[data-shell="admin"] .admin010-client-actions .btn:first-child{grid-column:1/-1;}
  .shell[data-shell="admin"] .admin010-schedule-row{grid-template-columns:68px minmax(0,1fr);}
  .shell[data-shell="admin"] .admin010-schedule-row > .badge{grid-column:2;justify-self:start;}
}

/* FF_BUILD_UI=0.1.0.2 */



/* FF_ADMIN_HOME_MICRO_POLISH=0.1.0.4-ui3 */

/*
 * Role control must read as secondary UI,
 * not as another primary CTA.
 */

.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-controls
.role-preview-switch{
  min-height:34px !important;

  padding:
    0
    10px !important;

  gap:6px !important;

  border:
    1px solid
    rgba(13,119,89,.08) !important;

  border-radius:13px !important;

  background:
    rgba(255,255,255,.56) !important;

  color:
    rgba(8,112,82,.88) !important;

  box-shadow:none !important;

  font-size:9.75px !important;

  font-weight:690 !important;

  letter-spacing:.018em !important;

  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}


[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-controls
.role-preview-switch{
  border-color:
    rgba(126,207,178,.09) !important;

  background:
    rgba(25,32,28,.52) !important;

  color:
    rgba(137,214,185,.88) !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-controls
.role-preview-switch svg{
  width:15px !important;
  height:15px !important;

  opacity:.70 !important;
}


.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-controls
.role-preview-switch span{
  letter-spacing:.018em !important;
}


/*
 * Ignore the font glyph used by the old switch.
 * Draw a precise CSS chevron instead.
 */

.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-controls
.role-preview-switch i{
  display:block !important;

  flex:
    0
    0
    7px !important;

  width:7px !important;
  height:7px !important;

  margin:
    -3px
    1px
    0
    0 !important;

  overflow:hidden !important;

  border:0 !important;

  border-right:
    1.4px solid
    currentColor !important;

  border-bottom:
    1.4px solid
    currentColor !important;

  font-size:0 !important;

  line-height:0 !important;

  opacity:.34 !important;

  transform:
    rotate(45deg) !important;

  transform-origin:center !important;
}


/* Tariff + payment date */

.shell[data-shell="admin"][data-route="a-home"]
.admin010-week-client-list
.row-body small{
  display:block !important;

  margin-top:2px !important;

  color:
    var(--a010-muted) !important;

  font-size:10px !important;

  line-height:1.25 !important;

  font-weight:470 !important;
}

/* ============================================================
   FF_TG_NATIVE_LAYOUT=0.1.1
   Unified Telegram fullscreen layout for all roles/routes.
   ============================================================ */

:root{
  --ff-tg-safe-top:0px;
  --ff-tg-content-top:0px;
  --ff-tg-safe-bottom:0px;
  --ff-tg-content-bottom:0px;
  --ff-tg-dock-lift:18px;
}

html.ff-tg-native{
  --safe-bottom:max(env(safe-area-inset-bottom,0px),var(--ff-tg-safe-bottom),var(--ff-tg-content-bottom));
}

html.ff-tg-native body,
html.ff-tg-native .shell{
  min-height:var(--tg-viewport-stable-height,100dvh);
}

.tg-contextbar{display:none}

html.ff-tg-native .tg-contextbar{
  position:relative;
  z-index:26;
  display:flex;
  align-items:center;
  width:100%;
  gap:8px;
  min-height:calc(var(--ff-tg-content-top) + 48px);
  padding:calc(var(--ff-tg-content-top) + 7px) 16px 7px;
  background:var(--bg);
  border:0;
}

html.ff-tg-native .tg-contextbar .spacer{flex:1}
html.ff-tg-native .tg-contextbar .icon-btn,
html.ff-tg-native .tg-contextbar .avatar{flex:none}
html.ff-tg-native .tg-contextbar .role-preview-switch{max-width:min(240px,62vw);min-height:36px}

html.ff-tg-native .tg-page-title{
  min-width:0;
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em;
}

html.ff-tg-native .tg-contextbar-root{
  justify-content:flex-end;
}

html.ff-tg-native .tg-contextbar-nested{
  min-height:calc(var(--ff-tg-content-top) + 46px);
  padding-bottom:5px;
}

/* Context bar already consumes Telegram content-safe top. */
html.ff-tg-native .tg-contextbar ~ .content{
  padding-top:12px!important;
}

/* Screens without context bar consume content-safe top directly. */
html.ff-tg-native .shell > .content:first-child{
  padding-top:calc(var(--ff-tg-content-top) + 14px)!important;
}

html.ff-tg-native .content.intro-only{
  padding-top:calc(var(--ff-tg-content-top) + 14px)!important;
}

/* Admin Overview has controls integrated into approved Hero. */
html.ff-tg-native .shell[data-shell="admin"][data-route="a-home"] .content{
  padding-top:calc(var(--ff-tg-content-top) + 12px)!important;
}

html.ff-tg-native .role-preview-banner{
  top:var(--ff-tg-content-top)!important;
}

/* Never duplicate Telegram native BackButton. */
html.ff-tg-native .topbar.compact,
html.ff-tg-native .tb-back{
  display:none!important;
}

/* Dock: geometry frozen, fullscreen offset only. */
html.ff-tg-native .bottom-nav{
  bottom:calc(var(--safe-bottom) + var(--ff-tg-dock-lift))!important;
}

html.ff-tg-native .content.with-dock{
  padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + var(--ff-tg-dock-lift) + 30px)!important;
}

html.ff-tg-native .content.no-dock{
  padding-bottom:calc(var(--safe-bottom) + 26px)!important;
}

html.ff-platform-telegram.ff-keyboard-open .bottom-nav{
  opacity:0!important;
  pointer-events:none!important;
  transform:translateY(calc(100% + 48px))!important;
}

html.ff-tg-native .sheet-backdrop{
  padding-top:var(--ff-tg-content-top);
}

html.ff-tg-native .sheet{
  max-height:calc(100dvh - var(--ff-tg-content-top) - 8px)!important;
  padding-bottom:calc(var(--safe-bottom) + 20px)!important;
}

html.ff-tg-native body.ff-client-chat-viewport .content.no-dock{
  padding-top:8px!important;
  padding-bottom:8px!important;
}

html.ff-tg-native body.ff-client-chat-viewport .chat-composer{
  margin-bottom:max(0px,var(--ff-tg-content-bottom));
}

html.ff-tg-native .toast{
  bottom:calc(var(--nav-h) + var(--safe-bottom) + var(--ff-tg-dock-lift) + 24px)!important;
}

html.ff-tg-native .splash,
html.ff-tg-native .fatal{
  padding-top:var(--ff-tg-content-top);
  padding-bottom:var(--safe-bottom);
}

@media(max-width:360px){
  :root{--ff-tg-dock-lift:14px}
  html.ff-tg-native .tg-contextbar{padding-left:12px;padding-right:12px}
  html.ff-tg-native .tg-contextbar .role-preview-switch{max-width:68vw}
}

html:not(.ff-tg-native) .tg-contextbar{display:none!important}

/* RELEASE CONTRACT: Admin/Trainer/Client unified; nested uses Telegram BackButton;
   dock height/tabs/glass unchanged; backend/database unchanged. */


/* ========================================================================
   FF_ADMIN_DARK_CALIBRATION=0.1.2

   Final admin dark-theme layer.
   Light theme is intentionally untouched.
   Trainer/client selectors are intentionally absent.
   Dock geometry is frozen; only dark colors/contrast are calibrated.
   ======================================================================== */

html[data-theme="dark"]
.shell[data-shell="admin"]{
  --bg:#0f1411;
  --surface:#19201c;
  --surface-2:#222b25;
  --ink:#f5f8f6;
  --ink-2:#c0cac4;
  --ink-3:#87938c;
  --line:#2b352f;

  --ff-role-page:#0f1411;
  --ff-role-card:#19201c;
  --ff-role-text:#f5f8f6;
  --ff-role-muted:#b8c2bc;
  --ff-role-line:rgba(225,241,232,.125);

  --a010-surface:#19201c;
  --a010-soft:#222a25;
  --a010-line:rgba(226,242,233,.13);
  --a010-text:#f5f8f6;
  --a010-muted:#b9c3bd;
  --a010-green:#67d8b1;
  --a010-green-soft:rgba(55,181,137,.16);
  --a010-warn:#f0c363;
  --a010-warn-soft:rgba(198,139,24,.16);
  --a010-danger:#f18f8b;
  --a010-danger-soft:rgba(204,72,72,.16);
  --a010-blue:#9bc4f5;
  --a010-blue-soft:rgba(72,127,194,.18);
  --a010-shadow:none;

  background:
    radial-gradient(
      circle at 96% 2%,
      rgba(22,157,113,.075),
      transparent 28rem
    ),
    #0f1411 !important;

  color:var(--a010-text);
}


/* ----- Shared admin surfaces: eliminate surviving light islands ----- */

html[data-theme="dark"]
.shell[data-shell="admin"] .card,
html[data-theme="dark"]
.shell[data-shell="admin"] .row,
html[data-theme="dark"]
.shell[data-shell="admin"] .acc,
html[data-theme="dark"]
.shell[data-shell="admin"] .state,
html[data-theme="dark"]
.shell[data-shell="admin"] .role-card-list,
html[data-theme="dark"]
.shell[data-shell="admin"] .role-search,
html[data-theme="dark"]
.shell[data-shell="admin"] .role-course-acc,
html[data-theme="dark"]
.shell[data-shell="admin"] .finance-metrics > div,
html[data-theme="dark"]
.shell[data-shell="admin"] .admin010-client-card,
html[data-theme="dark"]
.shell[data-shell="admin"] .admin010-access-card,
html[data-theme="dark"]
.shell[data-shell="admin"] .admin010-course-card,
html[data-theme="dark"]
.shell[data-shell="admin"] .admin010-payment-card,
html[data-theme="dark"]
.shell[data-shell="admin"] .admin010-rule-card,
html[data-theme="dark"]
.shell[data-shell="admin"] .admin010-staff-card,
html[data-theme="dark"]
.shell[data-shell="admin"] .admin010-settings-section,
html[data-theme="dark"]
.shell[data-shell="admin"] .admin010-editor-section,
html[data-theme="dark"]
.shell[data-shell="admin"] .admin010-health-row,
html[data-theme="dark"]
.shell[data-shell="admin"] .admin010-schedule-row,
html[data-theme="dark"]
.shell[data-shell="admin"] .admin010-audit-row,
html[data-theme="dark"]
.shell[data-shell="admin"] .admin010-workout-row{
  background:var(--a010-surface) !important;
  border-color:var(--a010-line) !important;
  color:var(--a010-text) !important;
  box-shadow:none !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"] .role-page-head h1,
html[data-theme="dark"]
.shell[data-shell="admin"] .role-section-head h2,
html[data-theme="dark"]
.shell[data-shell="admin"] .section-head h2,
html[data-theme="dark"]
.shell[data-shell="admin"] .row-body b,
html[data-theme="dark"]
.shell[data-shell="admin"] .state b,
html[data-theme="dark"]
.shell[data-shell="admin"] .admin010-action-copy b{
  color:var(--a010-text) !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"] .role-page-head p,
html[data-theme="dark"]
.shell[data-shell="admin"] .row-body small,
html[data-theme="dark"]
.shell[data-shell="admin"] .state p,
html[data-theme="dark"]
.shell[data-shell="admin"] .admin010-action-copy small{
  color:var(--a010-muted) !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"] .section-head .link,
html[data-theme="dark"]
.shell[data-shell="admin"] .role-section-head .link,
html[data-theme="dark"]
.shell[data-shell="admin"] .role-section-head button{
  color:#62d3aa !important;
}


/* ----- Overview Hero: clearer hierarchy + visible profile photo ----- */

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin-role-hero.admin010-hero.admin010-hero-integrated{
  border-color:rgba(206,235,221,.13) !important;

  background:
    radial-gradient(
      circle at 86% 12%,
      rgba(45,173,132,.16),
      transparent 34%
    ),
    radial-gradient(
      circle at 100% 88%,
      rgba(73,132,195,.10),
      transparent 39%
    ),
    linear-gradient(
      120deg,
      #1a211d 0%,
      #18201c 48%,
      #182823 100%
    ) !important;

  box-shadow:
    0 8px 28px rgba(0,0,0,.16) !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-integrated::after{
  background:
    linear-gradient(
      90deg,
      rgba(26,33,29,.99) 0%,
      rgba(26,33,29,.95) 28%,
      rgba(25,33,29,.78) 43%,
      rgba(24,33,29,.36) 58%,
      rgba(20,29,25,.08) 77%,
      rgba(20,29,25,.01) 100%
    ) !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-profile-photo img{
  opacity:.54 !important;

  filter:
    grayscale(.16)
    saturate(.66)
    contrast(.96)
    brightness(.88)
    !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-brand-copy b,
html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-integrated .role-hero-copy h1{
  color:#f7faf8 !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-brand-copy small,
html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-integrated .role-hero-copy p{
  color:#bdc7c1 !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-controls .role-preview-switch,
html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-bell{
  border:1px solid rgba(215,238,226,.10) !important;
  background:rgba(32,41,36,.78) !important;
  color:#a7e5cf !important;
  box-shadow:none !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-integrated .role-hero-status{
  border-color:rgba(231,184,84,.18) !important;
  background:rgba(31,38,33,.86) !important;
  color:#c4ccc7 !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-hero-integrated .role-hero-status.warn b{
  color:#f0c363 !important;
}


/* ----- Overview KPI cards ----- */

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-metrics .role-metric{
  background:#19201c !important;
  border-color:rgba(224,240,231,.12) !important;
  box-shadow:none !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-metrics .role-metric-copy b{
  color:#f7faf8 !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-metrics .role-metric-copy small,
html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-metrics .role-metric-copy em{
  color:#b7c1bb !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-metrics .role-metric > .chev{
  color:#8f9b94 !important;
}


/* ----- Attention ----- */

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-action-card{
  background:#19201c !important;
  border-color:rgba(225,240,232,.12) !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-action-card.warning{
  background:
    linear-gradient(
      135deg,
      #19201c 0%,
      #201f18 55%,
      #2a2118 100%
    ) !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-action-card.danger{
  background:
    linear-gradient(
      135deg,
      #19201c 0%,
      #271b1b 100%
    ) !important;
}


/* ----- Activity: remove the surviving #fff container ----- */

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.activity-strip{
  background:#19201c !important;
  border-color:rgba(225,240,232,.12) !important;
  box-shadow:none !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.activity-strip > div{
  background:transparent !important;
  border-color:rgba(225,240,232,.085) !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.activity-strip > div:nth-child(odd){
  border-right-color:rgba(225,240,232,.085) !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.activity-strip > div:nth-child(-n+2){
  border-bottom-color:rgba(225,240,232,.085) !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.activity-strip > div > span:first-child{
  background:#222b25 !important;
  color:#9ca9a1 !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.activity-strip-copy b{
  color:#f7faf8 !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.activity-strip-copy small{
  color:#b7c1bb !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.role-period-chip{
  color:#b7c1bb !important;
  background:#1b221e !important;
  border:1px solid rgba(225,240,232,.075);
}


/* ----- Weekly new clients ----- */

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-week-client-list,
html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.ff52-recent-list{
  background:#19201c !important;
  border-color:rgba(225,240,232,.12) !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-week-client-list .row{
  background:transparent !important;
  color:#f5f8f6 !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-week-client-list .row + .row{
  border-top-color:rgba(225,240,232,.085) !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-week-client-list .row-body b{
  color:#f7faf8 !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-week-client-list .row-body small{
  color:#b7c1bb !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.admin010-week-client-list .row-icon{
  background:#222b25 !important;
  color:#b9c5bd !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.role-new-chip,
html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-home"]
.badge.ok{
  color:#91e5c7 !important;
  background:rgba(38,179,129,.17) !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"] .role-empty-inline{
  background:#19201c !important;
  border-color:rgba(225,240,232,.12) !important;
}


/* ----- Finance and other late light-gradient survivors ----- */

html[data-theme="dark"]
.shell[data-shell="admin"] .finance-hero{
  border-color:rgba(225,240,232,.12) !important;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(43,176,129,.14),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #19201c,
      #17241e
    ) !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"] .finance-hero b{
  color:#f7faf8 !important;
}


/* ----- Floating dock: geometry untouched, improve dark legibility ----- */

html[data-theme="dark"]
.shell[data-shell="admin"] .bottom-nav{
  border-color:rgba(230,244,236,.12) !important;
  background:rgba(24,31,27,.95) !important;

  box-shadow:
    0 16px 38px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.045) !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"] .bottom-nav button{
  color:#9ca8a1 !important;
}

html[data-theme="dark"]
.shell[data-shell="admin"] .bottom-nav button.active{
  color:#79dfba !important;
  background:rgba(25,155,111,.20) !important;
}


/* Release contract:
 * - light theme untouched
 * - trainer untouched
 * - client untouched
 * - dock height/tabs/geometry untouched
 * - Telegram native layout untouched
 * - backend/database untouched
 */


/* ============================================================
   FF_ADMIN_CLIENTS_WORKSPACE=0.1.3
   Admin Clients workspace calibration.
   Overview / Trainer / Client layouts are intentionally untouched.
   ============================================================ */

/* ---------- Clients root ---------- */

.shell[data-shell="admin"][data-route="a-clients"] .admin013-clients-head{
  margin-bottom:14px;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:stretch;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-search{
  min-height:46px;
  border-radius:15px;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-search > span{
  color:var(--a010-muted);
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-search input{
  font-size:13px;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-grant-btn{
  min-height:46px;
  padding-inline:15px;
  border-radius:15px;
  white-space:nowrap;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-filters{
  display:flex;
  flex-wrap:nowrap;
  gap:7px;
  margin:9px -16px 13px;
  padding:0 16px 2px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-filters::-webkit-scrollbar{
  display:none;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-filters .fchip{
  flex:0 0 auto;
  min-height:34px;
  padding:0 13px;
  scroll-snap-align:start;
  white-space:nowrap;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-list{
  display:grid;
  gap:9px;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-card{
  width:100%;
  gap:10px;
  padding:13px;
  border:1px solid var(--a010-line);
  border-radius:17px;
  background:var(--a010-surface);
  color:var(--a010-text);
  box-shadow:var(--a010-shadow);
  text-align:left;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-card:active{
  transform:translateY(1px);
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-card-head{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto 12px;
  gap:10px;
  align-items:center;
  width:100%;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-avatar{
  width:42px;
  height:42px;
  border-radius:13px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:var(--a010-soft);
  color:var(--a010-text);
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-avatar-img,
.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-avatar-img img{
  width:100%;
  height:100%;
  border-radius:inherit;
  object-fit:cover;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-identity{
  min-width:0;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-identity b,
.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-identity small{
  display:block;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-identity b{
  overflow:hidden;
  color:var(--a010-text);
  font-size:14.5px;
  font-weight:760;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-identity small{
  margin-top:2px;
  overflow:hidden;
  color:var(--a010-muted);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-facts{
  display:grid;
  grid-template-columns:minmax(0,1fr) 128px;
  gap:7px;
  width:100%;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-facts > span{
  min-width:0;
  padding:9px 10px;
  border-radius:12px;
  background:var(--a010-soft);
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-facts small,
.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-facts b{
  display:block;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-facts small{
  margin-bottom:3px;
  color:var(--a010-muted);
  font-size:9.5px;
  font-weight:650;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-facts b{
  overflow:hidden;
  color:var(--a010-text);
  font-size:11.5px;
  font-weight:720;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  padding-top:8px;
  border-top:1px solid var(--a010-line);
  color:var(--a010-muted);
  font-size:10.75px;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-foot > span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.shell[data-shell="admin"][data-route="a-clients"] .admin013-client-foot b{
  flex:0 0 auto;
  color:var(--a010-warn);
  font-size:10px;
}

/* ---------- Client detail ---------- */

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-head{
  gap:9px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-profile{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:13px;
  border-radius:17px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-profile-avatar{
  width:56px;
  height:56px;
  overflow:hidden;
  border-radius:16px;
  background:var(--a010-soft);
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-profile-avatar .profile-user-avatar,
.shell[data-shell="admin"][data-route="a-client"] .admin013-client-profile-avatar .profile-user-avatar img{
  width:100%;
  height:100%;
  border-radius:inherit;
  object-fit:cover;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-profile-copy{
  min-width:0;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-profile-copy .eyebrow{
  margin:0 0 3px;
  font-size:9px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-profile-copy b,
.shell[data-shell="admin"][data-route="a-client"] .admin013-client-profile-copy small{
  display:block;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-profile-copy b{
  overflow:hidden;
  color:var(--a010-text);
  font-size:17px;
  font-weight:790;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-profile-copy small{
  margin-top:2px;
  color:var(--a010-muted);
  font-size:11px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1.25fr;
  gap:7px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-actions .btn{
  width:100%;
  min-height:42px;
  padding:0 10px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:12px;
  white-space:nowrap;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-actions .btn svg{
  width:16px;
  height:16px;
  flex:0 0 auto;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-summary{
  gap:7px;
  margin:10px 0 14px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-summary > div{
  min-height:60px;
  padding:10px 11px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-summary small{
  font-size:10.5px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-summary b{
  font-size:20px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-client-section{
  margin-top:16px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-access-list{
  gap:9px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-access-card{
  padding:13px;
  border-radius:16px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-access-top b{
  font-size:14px;
  line-height:1.2;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-access-top small{
  margin-top:2px;
  font-size:11px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-access-meta{
  gap:3px;
  margin:8px 0 10px;
  font-size:11.5px;
  line-height:1.35;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-access-actions{
  gap:7px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-action-pill{
  min-height:32px;
  padding:0 11px;
  border:1px solid var(--a010-line);
  border-radius:10px;
  background:var(--a010-soft);
  color:var(--a010-text);
  font-size:11px;
  font-weight:700;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-action-pill:active{
  transform:translateY(1px);
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-payment-list{
  display:grid;
  gap:7px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-payment-row{
  min-height:58px;
  border:1px solid var(--a010-line);
  border-radius:14px;
  background:var(--a010-surface);
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-empty-access,
.shell[data-shell="admin"][data-route="a-client"] .admin013-empty-payment{
  border-radius:15px;
}

.shell[data-shell="admin"][data-route="a-client"] .admin013-danger-zone{
  margin-top:16px;
  border-radius:16px;
}

/* ---------- Grant access sheet ---------- */

.sheet:has(#admin010GrantForm) .sheet-head{
  margin-bottom:12px;
}

.sheet:has(#admin010GrantForm) .admin010-form.form{
  gap:11px;
}

.sheet:has(#admin010GrantForm) .admin010-form.form label{
  color:var(--ink-2);
  font-size:11.5px;
  font-weight:680;
}

.sheet:has(#admin010GrantForm) .picker-button{
  min-height:48px;
  border-radius:14px;
  font-size:13px;
}

.sheet:has(#admin010GrantForm) .admin010-form-summary{
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
}

.sheet:has(#admin010GrantForm) .admin010-form-summary b{
  font-size:13.5px;
}

.sheet:has(#admin010GrantForm) .admin010-form-summary small{
  margin-top:3px;
  font-size:11px;
}

.sheet:has(#admin010GrantForm) .admin010-form > .btn{
  min-height:48px;
  border-radius:15px;
}

/* ---------- Admin Clients dark mode ---------- */

html[data-theme="dark"] .shell[data-shell="admin"][data-route="a-clients"] .role-preview-switch,
html[data-theme="dark"] .shell[data-shell="admin"][data-route="a-client"] .role-preview-switch{
  border-color:rgba(211,235,223,.12) !important;
  background:#1b241f !important;
  color:#9edfc8 !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .shell[data-shell="admin"][data-route="a-clients"] .role-preview-switch i,
html[data-theme="dark"] .shell[data-shell="admin"][data-route="a-client"] .role-preview-switch i{
  color:#7fbba6 !important;
}

html[data-theme="dark"] .shell[data-shell="admin"][data-route="a-clients"] .admin013-client-card,
html[data-theme="dark"] .shell[data-shell="admin"][data-route="a-client"] .admin013-client-profile,
html[data-theme="dark"] .shell[data-shell="admin"][data-route="a-client"] .admin013-payment-row{
  background:var(--a010-surface) !important;
  border-color:var(--a010-line) !important;
  color:var(--a010-text) !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .shell[data-shell="admin"][data-route="a-clients"] .admin013-client-facts > span,
html[data-theme="dark"] .shell[data-shell="admin"][data-route="a-client"] .admin013-action-pill{
  background:#202823 !important;
  border-color:rgba(221,239,229,.10) !important;
  color:#f6faf8 !important;
}

html[data-theme="dark"] .sheet:has(#admin010GrantForm){
  background:#151b17 !important;
  color:#f6faf8 !important;
}

html[data-theme="dark"] .sheet:has(#admin010GrantForm) .sheet-head h2{
  color:#f6faf8 !important;
}

html[data-theme="dark"] .sheet:has(#admin010GrantForm) .sheet-head .x,
html[data-theme="dark"] .sheet:has(#admin010GrantForm) .picker-button,
html[data-theme="dark"] .sheet:has(#admin010GrantForm) .admin010-form-summary{
  border-color:rgba(221,239,229,.11) !important;
  background:#1c241f !important;
  color:#f6faf8 !important;
}

html[data-theme="dark"] .sheet:has(#admin010GrantForm) .admin010-form.form label,
html[data-theme="dark"] .sheet:has(#admin010GrantForm) .admin010-form-summary small{
  color:#aebbb4 !important;
}

@media(max-width:360px){
  .shell[data-shell="admin"][data-route="a-clients"] .admin013-client-facts{
    grid-template-columns:minmax(0,1fr) 110px;
  }

  .shell[data-shell="admin"][data-route="a-client"] .admin013-client-actions{
    grid-template-columns:1fr 1fr;
  }

  .shell[data-shell="admin"][data-route="a-client"] .admin013-preview-btn{
    grid-column:1/-1;
  }
}

/* Release contract: Overview, Trainer/Client UI, Telegram-native layout,
   dock geometry, backend and DB are untouched by this layer. */

/* FF_ADMIN_CLIENTS_COMPACT=0.1.4 */

html.ff-tg-native
.shell[data-shell="admin"][data-route="a-clients"]
.tg-contextbar-root{
  display:none!important
}

html.ff-tg-native
.shell[data-shell="admin"][data-route="a-clients"]
.tg-contextbar ~ .content{
  padding-top:
    calc(
      var(--ff-tg-content-top) + 12px
    )!important
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-clients-head{
  margin-bottom:12px
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-clients-title-row{
  display:grid;
  grid-template-columns:
    minmax(0,1fr) auto;
  align-items:center;
  gap:10px
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-clients-title-row h1{
  margin:0
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-clients-head>p{
  margin-top:3px
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-clients-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-clients-controls
.role-preview-switch{
  min-height:34px;
  max-width:112px;
  padding:0 9px
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-clients-controls
.role-preview-switch span{
  font-size:9px
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-clients-controls .icon-btn,

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-clients-controls .avatar{
  width:36px;
  height:36px;
  min-width:36px
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-client-filters{
  margin-top:8px;
  margin-bottom:11px
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-client-filters .fchip{
  min-height:32px;
  padding-inline:11px
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin013-client-list{
  gap:7px
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-client-card{
  display:grid;
  grid-template-columns:
    40px minmax(0,1fr) auto 10px;
  align-items:center;
  gap:9px;
  min-height:60px;
  padding:9px 11px;
  border-radius:15px
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-client-avatar{
  width:40px;
  height:40px;
  border-radius:12px
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-client-identity b{
  font-size:14px
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin014-client-card .badge{
  justify-self:end;
  white-space:nowrap
}

@media(max-width:380px){

  .shell[data-shell="admin"][data-route="a-clients"]
  .admin014-clients-controls{
    gap:4px
  }

  .shell[data-shell="admin"][data-route="a-clients"]
  .admin014-clients-controls
  .role-preview-switch{
    max-width:96px;
    padding-inline:7px
  }

  .shell[data-shell="admin"][data-route="a-clients"]
  .admin014-clients-controls .icon-btn,

  .shell[data-shell="admin"][data-route="a-clients"]
  .admin014-clients-controls .avatar{
    width:34px;
    height:34px;
    min-width:34px
  }

  .shell[data-shell="admin"][data-route="a-clients"]
  .admin014-client-card{
    grid-template-columns:
      38px minmax(0,1fr) auto 10px;
    gap:8px
  }

  .shell[data-shell="admin"][data-route="a-clients"]
  .admin014-client-avatar{
    width:38px;
    height:38px
  }
}

/* FF_ADMIN_CLIENTS_FILTERS_AVATAR=0.1.5 */

.shell[data-shell="admin"][data-route="a-clients"]
.admin015-client-filters{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center;
  justify-content:space-between;
  gap:5px!important;
  width:100%;
  margin:9px 0 13px!important;
  padding:0!important;
  overflow:visible!important;
  scroll-snap-type:none!important;
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin015-client-filters .fchip{
  flex:0 1 auto;
  min-width:0;
  min-height:34px;
  padding:0 10px!important;
  font-size:10.25px!important;
  line-height:1;
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin015-more-filter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.shell[data-shell="admin"][data-route="a-clients"]
.admin015-more-filter::after{
  content:"";
  width:6px;
  height:6px;
  margin-top:-3px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transform-origin:center;
}

.shell[data-shell="admin"][data-route="a-client"]
.admin013-client-profile-avatar
.admin015-client-profile-avatar-safe{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  flex:0 0 auto!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border:0!important;
  border-radius:inherit!important;
  overflow:hidden!important;
}

.shell[data-shell="admin"][data-route="a-client"]
.admin013-client-profile-avatar
.admin015-client-profile-avatar-safe
.user-avatar-fallback{
  width:100%!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  font-size:18px!important;
  font-weight:800!important;
  line-height:1!important;
}

.shell[data-shell="admin"][data-route="a-client"]
.admin013-client-profile-avatar
.admin015-client-profile-avatar-safe>img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
}

@media(max-width:380px){

  .shell[data-shell="admin"][data-route="a-clients"]
  .admin015-client-filters{
    gap:3px!important;
  }

  .shell[data-shell="admin"][data-route="a-clients"]
  .admin015-client-filters .fchip{
    padding-inline:7px!important;
    font-size:9.5px!important;
  }

  .shell[data-shell="admin"][data-route="a-clients"]
  .admin015-more-filter{
    gap:5px;
  }
}

/* ============================================================
   FF_ADMIN_CLIENT_DETAIL_WORKSPACE=0.1.7
   ============================================================ */

.shell[data-shell="admin"][data-route="a-client"]
.admin017-client-head{
  gap:8px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-client-profile{
  grid-template-columns:
    64px minmax(0,1fr) auto;
  gap:13px;
  min-height:94px;
  padding:14px 15px;
  border-radius:18px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-client-profile-avatar{
  width:64px;
  height:64px;
  border-radius:17px;
  display:grid;
  place-items:center;
  overflow:hidden;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-client-profile-avatar
.profile-user-avatar{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  border-radius:inherit;
  overflow:hidden;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-client-profile-avatar
.user-avatar-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-size:20px;
  font-weight:800;
  line-height:1;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-client-profile-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-client-profile-copy b{
  font-size:19px;
  line-height:1.12;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-client-profile-copy small{
  margin-top:4px;
  font-size:11.5px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-client-actions{
  grid-template-columns:
    1fr .95fr 1.15fr;
  gap:7px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-client-actions .btn{
  min-height:44px;
  border-radius:14px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-client-summary{
  gap:8px;
  margin:10px 0 17px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-client-summary > .admin017-kpi{
  min-height:72px;
  padding:10px;
  display:flex;
  align-items:center;
  gap:9px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-kpi-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--a010-green-soft);
  color:var(--a010-green);
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-kpi-icon svg{
  width:19px;
  height:19px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-kpi-copy{
  min-width:0;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-kpi-copy small,
.shell[data-shell="admin"][data-route="a-client"]
.admin017-kpi-copy b{
  display:block;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-kpi-copy small{
  margin:0 0 2px;
  color:var(--a010-muted);
  font-size:10.5px;
  line-height:1.2;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-kpi-copy b{
  color:var(--a010-text);
  font-size:20px;
  line-height:1;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-client-section{
  margin-top:18px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-section-head{
  margin-bottom:8px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-section-head h2{
  font-size:19px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-access-list{
  gap:8px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-access-card{
  display:grid;
  grid-template-columns:
    42px minmax(0,1fr);
  gap:11px;
  padding:13px;
  border-radius:17px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-access-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--a010-green-soft);
  color:var(--a010-green);
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-access-icon svg{
  width:20px;
  height:20px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-access-body{
  min-width:0;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-access-top{
  gap:8px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-access-top b{
  font-size:14px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-access-meta{
  display:grid;
  gap:5px;
  margin:8px 0 10px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-access-meta > span{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--a010-muted);
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-access-meta svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-access-meta em{
  min-width:0;
  font-style:normal;
  line-height:1.3;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-access-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-access-actions
.admin013-action-pill{
  min-height:32px;
  padding-inline:11px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-payment-list{
  gap:7px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-payment-row{
  min-height:56px;
  padding:9px 10px;
  border-radius:15px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-payment-row
.row-icon{
  background:var(--a010-soft);
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-empty-card{
  min-height:74px;
  padding:12px;
  border:1px solid var(--a010-line);
  border-radius:16px;
  background:var(--a010-surface);
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-empty-card > span:first-child{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--a010-green-soft);
  color:var(--a010-green);
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-empty-card > span:first-child svg{
  width:19px;
  height:19px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-empty-card b{
  font-size:13px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-empty-card small{
  margin-top:3px;
  color:var(--a010-muted);
  font-size:11px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-detail-acc{
  margin-top:8px;
  border-radius:15px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-detail-acc summary{
  display:flex;
  align-items:center;
  gap:9px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-acc-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--a010-green-soft);
  color:var(--a010-green);
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-acc-icon svg{
  width:16px;
  height:16px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-danger-zone{
  display:grid;
  grid-template-columns:
    38px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:12px;
  border:1px solid
    color-mix(
      in srgb,
      var(--a010-danger) 26%,
      transparent
    );
  border-radius:16px;
  background:var(--a010-danger-soft);
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-danger-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:var(--a010-danger);
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-danger-icon svg{
  width:19px;
  height:19px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-danger-zone > div{
  min-width:0;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-danger-zone > div b,
.shell[data-shell="admin"][data-route="a-client"]
.admin017-danger-zone > div small{
  display:block;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-danger-zone > div b{
  font-size:12.5px;
  line-height:1.2;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-danger-zone > div small{
  margin-top:3px;
  color:var(--a010-muted);
  font-size:10.5px;
}


.shell[data-shell="admin"][data-route="a-client"]
.admin017-danger-zone .btn{
  background:transparent;
  box-shadow:none;
}


html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-client"]
.admin017-client-profile,

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-client"]
.admin017-kpi,

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-client"]
.admin017-access-card,

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-client"]
.admin017-empty-card,

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-client"]
.admin017-detail-acc{
  border-color:var(--a010-line);
  background:var(--a010-surface);
  box-shadow:none;
}


@media(max-width:360px){

  .shell[data-shell="admin"][data-route="a-client"]
  .admin017-client-profile{
    grid-template-columns:
      56px minmax(0,1fr) auto;

    gap:10px;
    padding:12px;
  }


  .shell[data-shell="admin"][data-route="a-client"]
  .admin017-client-profile-avatar{
    width:56px;
    height:56px;
  }


  .shell[data-shell="admin"][data-route="a-client"]
  .admin017-client-profile-copy b{
    font-size:17px;
  }


  .shell[data-shell="admin"][data-route="a-client"]
  .admin017-kpi-icon{
    width:34px;
    height:34px;
    flex-basis:34px;
  }


  .shell[data-shell="admin"][data-route="a-client"]
  .admin017-access-card{
    grid-template-columns:
      38px minmax(0,1fr);

    gap:9px;
    padding:11px;
  }


  .shell[data-shell="admin"][data-route="a-client"]
  .admin017-access-icon{
    width:38px;
    height:38px;
  }


  .shell[data-shell="admin"][data-route="a-client"]
  .admin017-danger-zone{
    grid-template-columns:
      34px minmax(0,1fr);
  }


  .shell[data-shell="admin"][data-route="a-client"]
  .admin017-danger-zone .btn{
    grid-column:2;
    justify-self:start;
  }

}


/* ============================================================
   FF_CLIENT_WORKSPACE_CORE=0.1.7.1
   Shared visual workspace for ADMIN + TRAINER.
   Fullscreen scroll and floating dock geometry intentionally untouched.
   ============================================================ */

.shell[data-shell="admin"][data-route="a-client"] .cw-workspace,
.shell[data-shell="trainer"][data-route="t-client"] .cw-workspace{
  display:flex;
  flex-direction:column;
  gap:0;
}

.shell[data-shell="admin"][data-route="a-client"] .cw-profile-card,
.shell[data-shell="trainer"][data-route="t-client"] .cw-profile-card{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:86px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

.shell[data-shell="admin"][data-route="a-client"] .cw-profile-avatar,
.shell[data-shell="trainer"][data-route="t-client"] .cw-profile-avatar{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:16px;
  background:var(--surface-2);
}

.shell[data-shell="admin"][data-route="a-client"] .cw-profile-avatar .user-avatar,
.shell[data-shell="trainer"][data-route="t-client"] .cw-profile-avatar .user-avatar,
.shell[data-shell="admin"][data-route="a-client"] .cw-profile-avatar img,
.shell[data-shell="trainer"][data-route="t-client"] .cw-profile-avatar img{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:block;
  margin:0!important;
  border:0!important;
  border-radius:inherit!important;
  object-fit:cover;
  object-position:center;
}

.shell[data-shell="admin"][data-route="a-client"] .cw-profile-avatar .user-avatar{
  display:grid;
  place-items:center;
}

.shell[data-shell="trainer"][data-route="t-client"] .cw-profile-avatar .user-avatar{
  display:grid;
  place-items:center;
}

.shell[data-shell="admin"][data-route="a-client"] .cw-profile-avatar .user-avatar-fallback,
.shell[data-shell="trainer"][data-route="t-client"] .cw-profile-avatar .user-avatar-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-size:20px;
  font-weight:800;
  line-height:1;
  color:var(--ink-2);
}

.shell[data-shell="admin"][data-route="a-client"] .cw-profile-copy,
.shell[data-shell="trainer"][data-route="t-client"] .cw-profile-copy{
  min-width:0;
}

.shell[data-shell="admin"][data-route="a-client"] .cw-profile-copy>b,
.shell[data-shell="trainer"][data-route="t-client"] .cw-profile-copy>b{
  display:block;
  overflow:hidden;
  font-size:20px;
  line-height:1.08;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.shell[data-shell="admin"][data-route="a-client"] .cw-profile-copy>small,
.shell[data-shell="trainer"][data-route="t-client"] .cw-profile-copy>small{
  display:block;
  margin-top:4px;
  overflow:hidden;
  color:var(--ink-2);
  font-size:12px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.shell[data-shell="admin"][data-route="a-client"] .cw-profile-copy>span,
.shell[data-shell="trainer"][data-route="t-client"] .cw-profile-copy>span{
  display:block;
  margin-top:6px;
  overflow:hidden;
  color:var(--ink-2);
  font-size:11px;
  line-height:1.25;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.shell[data-shell="admin"][data-route="a-client"] .cw-actions,
.shell[data-shell="trainer"][data-route="t-client"] .cw-actions{
  display:grid;
  grid-template-columns:1fr .9fr 1.15fr;
  gap:7px;
  margin-top:8px;
}

.shell[data-shell="trainer"][data-route="t-client"] .cw-actions.single{
  grid-template-columns:minmax(0,180px);
}

.shell[data-shell="admin"][data-route="a-client"] .cw-actions .btn,
.shell[data-shell="trainer"][data-route="t-client"] .cw-actions .btn{
  min-height:42px;
  padding:0 10px;
  border-radius:13px;
  font-size:12px;
}

.shell[data-shell="admin"][data-route="a-client"] .cw-actions .btn svg,
.shell[data-shell="trainer"][data-route="t-client"] .cw-actions .btn svg{
  width:16px;
  height:16px;
}

.shell[data-shell="admin"][data-route="a-client"] .cw-section,
.shell[data-shell="trainer"][data-route="t-client"] .cw-section{
  margin-top:20px;
}

.shell[data-shell="admin"][data-route="a-client"] .cw-section-head,
.shell[data-shell="trainer"][data-route="t-client"] .cw-section-head{
  align-items:flex-end;
  margin-bottom:9px;
}

.shell[data-shell="admin"][data-route="a-client"] .cw-section-head>div,
.shell[data-shell="trainer"][data-route="t-client"] .cw-section-head>div{
  min-width:0;
}

.shell[data-shell="admin"][data-route="a-client"] .cw-section-head .eyebrow,
.shell[data-shell="trainer"][data-route="t-client"] .cw-section-head .eyebrow{
  display:block;
  margin-bottom:2px;
  color:var(--ink-3);
  font-size:9px;
  line-height:1;
  letter-spacing:.12em;
}

.shell[data-shell="admin"][data-route="a-client"] .cw-section-head h2,
.shell[data-shell="trainer"][data-route="t-client"] .cw-section-head h2{
  font-size:20px;
  line-height:1.08;
}

.shell[data-shell="admin"][data-route="a-client"] .cw-section-head>span,
.shell[data-shell="trainer"][data-route="t-client"] .cw-section-head>span{
  color:var(--ink-3);
  font-size:11px;
  font-weight:700;
}

.cw-progress-list{
  display:grid;
  gap:8px;
}

.cw-progress-card{
  padding:14px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

.cw-progress-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:12px;
}

.cw-progress-top>div{
  min-width:0;
}

.cw-progress-top small,
.cw-progress-top b{
  display:block;
}

.cw-progress-top small{
  margin-bottom:3px;
  color:var(--ink-2);
  font-size:10.5px;
}

.cw-progress-top b{
  overflow:hidden;
  font-size:15px;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cw-progress-top strong{
  color:var(--green);
  font-size:28px;
  line-height:.95;
  letter-spacing:-.035em;
}

.cw-progress-top strong i{
  margin-left:1px;
  font-size:12px;
  font-style:normal;
  font-weight:800;
}

.cw-progress-line{
  height:7px;
  margin:12px 0 11px;
  overflow:hidden;
  border-radius:999px;
  background:var(--surface-2);
}

.cw-progress-line>i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:var(--green);
}

.cw-progress-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.cw-progress-meta>span{
  min-width:0;
  padding:8px 9px;
  border-radius:11px;
  background:var(--surface-2);
}

.cw-progress-meta small,
.cw-progress-meta b{
  display:block;
}

.cw-progress-meta small{
  margin-bottom:2px;
  color:var(--ink-2);
  font-size:9.5px;
}

.cw-progress-meta b{
  overflow:hidden;
  font-size:11.5px;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cw-progress-foot{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:5px 12px;
  margin-top:9px;
  color:var(--ink-2);
  font-size:10px;
  line-height:1.3;
}

.cw-measure-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.cw-measure-card{
  min-width:0;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

.cw-measure-card>small{
  display:block;
  overflow:hidden;
  margin-bottom:5px;
  color:var(--ink-2);
  font-size:10px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cw-measure-card>b{
  display:block;
  overflow:hidden;
  font-size:19px;
  line-height:1;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cw-measure-card>b i{
  color:var(--ink-2);
  font-size:10px;
  font-style:normal;
  font-weight:600;
}

.cw-measure-card>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-top:8px;
}

.cw-measure-delta{
  overflow:hidden;
  font-size:9.5px;
  font-weight:750;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cw-measure-delta.up,
.cw-measure-delta.down{
  color:var(--ink);
}

.cw-measure-delta.neutral{
  color:var(--ink-3);
}

.cw-measure-card time{
  flex:0 0 auto;
  color:var(--ink-3);
  font-size:9px;
}

.cw-photo-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}

.cw-photo-strip figure{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}

.cw-photo-slot,
.cw-photo-image{
  width:100%;
  aspect-ratio:3/4;
  display:grid;
  place-items:center;
}

.cw-photo-slot{
  color:var(--green);
  background:var(--green-soft);
}

.cw-photo-slot svg{
  width:24px;
  height:24px;
}

.cw-photo-image{
  display:block;
  object-fit:cover;
}

.cw-photo-strip figcaption{
  overflow:hidden;
  padding:7px 7px 8px;
  color:var(--ink-2);
  font-size:8.5px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cw-empty{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-height:78px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
}

.cw-empty.compact{
  min-height:70px;
}

.cw-empty>span:first-child{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--green);
  background:var(--green-soft);
}

.cw-empty>span:first-child svg{
  width:20px;
  height:20px;
}

.cw-empty b,
.cw-empty small{
  display:block;
}

.cw-empty b{
  font-size:13px;
  line-height:1.2;
}

.cw-empty small{
  margin-top:3px;
  color:var(--ink-2);
  font-size:10.5px;
  line-height:1.35;
}

.cw-access-list{
  display:grid;
  gap:8px;
}

.cw-access-card{
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

.cw-access-main{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
}

.cw-access-icon,
.cw-payment-icon,
.cw-summary-icon{
  display:grid;
  place-items:center;
  color:var(--green);
  background:var(--green-soft);
}

.cw-access-icon{
  width:40px;
  height:40px;
  border-radius:12px;
}

.cw-access-icon svg{
  width:19px;
  height:19px;
}

.cw-access-main>div{
  min-width:0;
}

.cw-access-main>div>b,
.cw-access-main>div>small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cw-access-main>div>b{
  font-size:13px;
}

.cw-access-main>div>small{
  margin-top:2px;
  color:var(--ink-2);
  font-size:10px;
}

.cw-access-meta{
  display:grid;
  gap:5px;
  margin:9px 0 10px 49px;
}

.cw-access-meta>span{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  color:var(--ink-2);
}

.cw-access-meta svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
}

.cw-access-meta b{
  overflow:hidden;
  font-size:10.5px;
  font-weight:500;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cw-access-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-left:49px;
}

.cw-access-actions .admin013-action-pill{
  min-height:31px;
  padding-inline:10px;
}

.cw-payment-list{
  display:grid;
  gap:7px;
}

.cw-payment-row{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-height:56px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface);
}

.cw-payment-icon{
  width:36px;
  height:36px;
  border-radius:11px;
}

.cw-payment-icon svg{
  width:17px;
  height:17px;
}

.cw-payment-row>span:nth-child(2){
  min-width:0;
}

.cw-payment-row>span:nth-child(2)>b,
.cw-payment-row>span:nth-child(2)>small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cw-payment-row>span:nth-child(2)>b{
  font-size:12.5px;
}

.cw-payment-row>span:nth-child(2)>small{
  margin-top:2px;
  color:var(--ink-2);
  font-size:9.5px;
}

.cw-profile-details{
  margin-top:8px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface);
  box-shadow:none;
}

.cw-profile-details summary{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:48px;
}

.cw-summary-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:9px;
}

.cw-summary-icon svg{
  width:15px;
  height:15px;
}

.cw-profile-facts{
  display:grid;
}

.cw-profile-facts>div{
  display:grid;
  grid-template-columns:minmax(0,120px) minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:40px;
  border-top:1px solid var(--line);
}

.cw-profile-facts>div:first-child{
  border-top:0;
}

.cw-profile-facts small{
  color:var(--ink-2);
  font-size:10.5px;
}

.cw-profile-facts b{
  overflow:hidden;
  font-size:11.5px;
  text-align:right;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cw-note-form{
  margin-top:9px;
}

.cw-reminders{
  gap:6px;
}

.cw-reminders .fchip{
  min-height:32px;
}

.cw-danger-zone{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:11px 12px;
  border:1px solid color-mix(in srgb,var(--danger) 28%,transparent);
  border-radius:16px;
  background:var(--coral-soft);
}

.cw-danger-zone>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  color:var(--danger);
}

.cw-danger-zone>span svg{
  width:18px;
  height:18px;
}

.cw-danger-zone>div{
  min-width:0;
}

.cw-danger-zone b,
.cw-danger-zone small{
  display:block;
}

.cw-danger-zone b{
  font-size:11.5px;
  line-height:1.2;
}

.cw-danger-zone small{
  margin-top:3px;
  color:var(--ink-2);
  font-size:9.5px;
}

.cw-danger-zone .btn{
  min-height:34px;
  padding-inline:9px;
  background:transparent;
  box-shadow:none;
}

/* Trainer client list: same compact visual language as Admin clients. */

.shell[data-shell="trainer"][data-route="t-clients"] .cw-list-head{
  margin-bottom:10px;
}

.shell[data-shell="trainer"][data-route="t-clients"] .cw-list-head h1{
  margin:0;
}

.shell[data-shell="trainer"][data-route="t-clients"] .cw-list-head p{
  margin-top:4px;
  color:var(--ink-2);
  font-size:11px;
}

.shell[data-shell="trainer"][data-route="t-clients"] .cw-client-search{
  min-height:44px;
  margin-bottom:9px;
}

.shell[data-shell="trainer"][data-route="t-clients"] .cw-client-list{
  display:grid;
  gap:7px;
}

.shell[data-shell="trainer"][data-route="t-clients"] .cw-client-list-card{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto 10px;
  align-items:center;
  gap:9px;
  min-height:62px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

.shell[data-shell="trainer"][data-route="t-clients"] .cw-client-list-avatar{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:12px;
  background:var(--surface-2);
}

.shell[data-shell="trainer"][data-route="t-clients"] .cw-client-list-avatar .user-avatar,
.shell[data-shell="trainer"][data-route="t-clients"] .cw-client-list-avatar img{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border:0!important;
  border-radius:inherit!important;
  object-fit:cover;
}

.shell[data-shell="trainer"][data-route="t-clients"] .cw-client-list-copy{
  min-width:0;
  text-align:left;
}

.shell[data-shell="trainer"][data-route="t-clients"] .cw-client-list-copy b,
.shell[data-shell="trainer"][data-route="t-clients"] .cw-client-list-copy small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.shell[data-shell="trainer"][data-route="t-clients"] .cw-client-list-copy b{
  font-size:14px;
}

.shell[data-shell="trainer"][data-route="t-clients"] .cw-client-list-copy small{
  margin-top:2px;
  color:var(--ink-2);
  font-size:10px;
}

@media(max-width:380px){

  .shell[data-shell="admin"][data-route="a-client"] .cw-profile-card,
  .shell[data-shell="trainer"][data-route="t-client"] .cw-profile-card{
    grid-template-columns:52px minmax(0,1fr) auto;
    gap:9px;
    padding:11px;
  }

  .shell[data-shell="admin"][data-route="a-client"] .cw-profile-avatar,
  .shell[data-shell="trainer"][data-route="t-client"] .cw-profile-avatar{
    width:52px;
    height:52px;
  }

  .shell[data-shell="admin"][data-route="a-client"] .cw-profile-copy>b,
  .shell[data-shell="trainer"][data-route="t-client"] .cw-profile-copy>b{
    font-size:18px;
  }

  .shell[data-shell="admin"][data-route="a-client"] .cw-actions,
  .shell[data-shell="trainer"][data-route="t-client"] .cw-actions{
    gap:5px;
  }

  .shell[data-shell="admin"][data-route="a-client"] .cw-actions .btn,
  .shell[data-shell="trainer"][data-route="t-client"] .cw-actions .btn{
    padding-inline:7px;
    font-size:11px;
  }

  .cw-progress-card{
    padding:12px;
  }

  .cw-progress-meta{
    gap:5px;
  }

  .cw-measure-grid{
    gap:6px;
  }

  .cw-measure-card{
    padding:10px;
  }

  .cw-access-main{
    grid-template-columns:36px minmax(0,1fr) auto;
    gap:7px;
  }

  .cw-access-icon{
    width:36px;
    height:36px;
  }

  .cw-access-meta,
  .cw-access-actions{
    margin-left:43px;
  }

  .cw-danger-zone{
    grid-template-columns:34px minmax(0,1fr);
  }

  .cw-danger-zone>span{
    width:34px;
    height:34px;
  }

  .cw-danger-zone .btn{
    grid-column:2;
    justify-self:start;
  }
}

/* ============================================================
   FF_TRAINER_WORKSPACE_POLISH=0.1.7.3

   IMPORTANT:
   - native Telegram contextbar is NOT moved
   - fullscreen scroll is NOT touched
   - dock geometry is NOT touched
   ============================================================ */


/* ------------------------------------------------------------
   TRAINER / CLIENTS
   Put title into the EXISTING Telegram-safe context row.
   ------------------------------------------------------------ */

html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.tg-contextbar-root{
  align-items:center;
  gap:7px;
}


html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.tg-contextbar-root::before{
  content:"Клиенты";
  flex:0 1 auto;

  color:var(--text);

  font-size:28px;
  font-weight:820;
  line-height:1;
  letter-spacing:-.045em;

  white-space:nowrap;
}


html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.tg-contextbar-root
.spacer{
  flex:1 1 auto;
}


/* compact TRAINER pill */

html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.tg-contextbar-root
.role-preview-switch{
  flex:0 0 auto;

  width:auto;
  max-width:108px;
  min-height:36px;

  padding:0 10px;

  border-radius:13px;
}


html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.tg-contextbar-root
.role-preview-switch span{
  font-size:10.5px;
  line-height:1;
}


/* bell + trainer avatar */

html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.tg-contextbar-root
.icon-btn,

html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.tg-contextbar-root
.avatar{
  flex:0 0 36px;

  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
}


html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.tg-contextbar-root
.avatar{
  overflow:hidden;
  border-radius:50%;
}


html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.tg-contextbar-root
.avatar img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;
}


/* The title is now in contextbar, so don't duplicate it below. */

html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.cw-list-head{
  gap:0;
  margin:0 0 10px;
}


html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.cw-list-head h1{
  display:none;
}


html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.cw-list-head p{
  margin:0;

  color:var(--muted);

  font-size:12px;
  line-height:1.3;
}


/* ------------------------------------------------------------
   TRAINER CLIENT SEARCH
   ------------------------------------------------------------ */

.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-search{
  height:48px;
  min-height:48px;

  margin:0 0 10px;

  border-radius:15px;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-search input{
  font-size:14px;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-search svg{
  width:20px;
  height:20px;
}


/* ------------------------------------------------------------
   TRAINER CLIENT LIST
   One compact row: avatar / name / status / chevron
   ------------------------------------------------------------ */

.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list{
  display:flex;
  flex-direction:column;

  gap:7px;

  padding:0;
  background:transparent;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-card{
  display:grid;

  grid-template-columns:
    42px
    minmax(0,1fr)
    auto
    14px;

  align-items:center;

  gap:10px;

  min-height:64px;

  padding:10px 12px;

  border-radius:16px;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-avatar{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;

  overflow:hidden;

  border-radius:12px;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-avatar
.user-avatar,

.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-avatar img,

.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-avatar
.user-avatar-fallback{
  width:100%;
  height:100%;

  border-radius:inherit;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-avatar img{
  display:block;

  object-fit:cover;
  object-position:center;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-copy{
  min-width:0;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-copy b{
  display:block;

  overflow:hidden;

  color:var(--text);

  font-size:16px;
  font-weight:760;
  line-height:1.1;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-copy small{
  display:block;

  overflow:hidden;

  margin-top:3px;

  color:var(--muted);

  font-size:11px;
  line-height:1.15;

  text-overflow:ellipsis;
  white-space:nowrap;
}


/* normalize status badge — no rectangular text block */

.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-card
.badge{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-height:27px;

  padding:0 9px;

  border:0;
  border-radius:999px;

  font-size:10px;
  font-weight:780;
  line-height:1;

  white-space:nowrap;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-card
.chev{
  margin:0;

  font-size:21px;
  font-style:normal;
  line-height:1;

  opacity:.62;
}


/* ------------------------------------------------------------
   SHARED CLIENT IDENTITY CARD
   Admin + Trainer should look the same here.
   ------------------------------------------------------------ */

.shell[data-route="a-client"]
.cw-profile-card,

.shell[data-route="t-client"]
.cw-profile-card{
  display:grid;

  grid-template-columns:
    52px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:11px;

  min-height:76px;

  padding:11px 12px;

  border-radius:17px;
}


.shell[data-route="a-client"]
.cw-profile-avatar,

.shell[data-route="t-client"]
.cw-profile-avatar{
  width:52px;
  height:52px;
  min-width:52px;
  min-height:52px;

  overflow:hidden;

  border-radius:14px;
}


.shell[data-route="a-client"]
.cw-profile-avatar
.user-avatar,

.shell[data-route="t-client"]
.cw-profile-avatar
.user-avatar,

.shell[data-route="a-client"]
.cw-profile-avatar
.user-avatar-fallback,

.shell[data-route="t-client"]
.cw-profile-avatar
.user-avatar-fallback,

.shell[data-route="a-client"]
.cw-profile-avatar img,

.shell[data-route="t-client"]
.cw-profile-avatar img{
  width:100%;
  height:100%;

  border-radius:inherit;
}


.shell[data-route="a-client"]
.cw-profile-avatar img,

.shell[data-route="t-client"]
.cw-profile-avatar img{
  display:block;

  object-fit:cover;
  object-position:center;
}


.shell[data-route="a-client"]
.cw-profile-copy,

.shell[data-route="t-client"]
.cw-profile-copy{
  min-width:0;
}


.shell[data-route="a-client"]
.cw-profile-copy > b,

.shell[data-route="t-client"]
.cw-profile-copy > b{
  overflow:hidden;

  font-size:19px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.025em;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.shell[data-route="a-client"]
.cw-profile-copy > small,

.shell[data-route="t-client"]
.cw-profile-copy > small{
  overflow:hidden;

  margin-top:3px;

  font-size:11.5px;
  line-height:1.15;

  text-overflow:ellipsis;
  white-space:nowrap;
}


/* normal pill in client profile */

.shell[data-route="a-client"]
.cw-profile-copy > span,

.shell[data-route="t-client"]
.cw-profile-copy > span,

.shell[data-route="a-client"]
.cw-profile-card > .badge,

.shell[data-route="t-client"]
.cw-profile-card > .badge{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-height:28px;

  padding:0 10px;

  border-radius:999px;

  font-size:10px;
  font-weight:800;
  line-height:1;

  white-space:nowrap;
}


/* ------------------------------------------------------------
   CLIENT ACTIONS
   ------------------------------------------------------------ */

.shell[data-route="a-client"]
.cw-actions,

.shell[data-route="t-client"]
.cw-actions{
  gap:6px;

  margin-top:7px;
}


.shell[data-route="a-client"]
.cw-actions .btn,

.shell[data-route="t-client"]
.cw-actions .btn{
  min-height:42px;
  height:42px;

  padding-top:0;
  padding-bottom:0;

  border-radius:13px;

  font-size:12px;
  line-height:1;
}


.shell[data-route="a-client"]
.cw-actions .btn svg,

.shell[data-route="t-client"]
.cw-actions .btn svg{
  width:17px;
  height:17px;
}


/* Trainer has one main action, don't stretch it absurdly wide. */

.shell[data-shell="trainer"][data-route="t-client"]
.cw-actions.single{
  display:block;
}


.shell[data-shell="trainer"][data-route="t-client"]
.cw-actions.single .btn{
  width:min(100%,220px);
}


/* ------------------------------------------------------------
   CLIENT WORKSPACE RHYTHM
   Keep progress itself unchanged; only compact the rhythm.
   ------------------------------------------------------------ */

.shell[data-route="a-client"]
.cw-workspace,

.shell[data-route="t-client"]
.cw-workspace{
  gap:0;
}


.shell[data-route="a-client"]
.cw-section,

.shell[data-route="t-client"]
.cw-section{
  margin-top:18px;
}


.shell[data-route="a-client"]
.cw-section-head,

.shell[data-route="t-client"]
.cw-section-head{
  margin-bottom:8px;
}


.shell[data-route="a-client"]
.cw-section-head h2,

.shell[data-route="t-client"]
.cw-section-head h2{
  font-size:24px;
  line-height:1.02;
  letter-spacing:-.035em;
}


.shell[data-route="a-client"]
.cw-section-head > span,

.shell[data-route="t-client"]
.cw-section-head > span{
  font-size:11px;
}


/* ------------------------------------------------------------
   TRAINER NESTED PAGE
   Keep Telegram BackButton/native title architecture.
   Only normalize trainer role pill.
   ------------------------------------------------------------ */

html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-client"]
.tg-contextbar-nested
.role-preview-switch{
  min-height:36px;

  padding:0 10px;

  border-radius:13px;
}


html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-client"]
.tg-contextbar-nested
.role-preview-switch span{
  font-size:10.5px;
}


/* ------------------------------------------------------------
   DARK
   ------------------------------------------------------------ */

html[data-theme="dark"]
.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-card,

html[data-theme="dark"]
.shell[data-route="t-client"]
.cw-profile-card{
  box-shadow:none;
}


/* ------------------------------------------------------------
   SMALL PHONE
   ------------------------------------------------------------ */

@media(max-width:380px){

  html.ff-tg-native
  .shell[data-shell="trainer"][data-route="t-clients"]
  .tg-contextbar-root::before{
    font-size:24px;
  }


  html.ff-tg-native
  .shell[data-shell="trainer"][data-route="t-clients"]
  .tg-contextbar-root{
    gap:5px;
  }


  html.ff-tg-native
  .shell[data-shell="trainer"][data-route="t-clients"]
  .tg-contextbar-root
  .role-preview-switch{
    max-width:94px;

    padding-inline:8px;
  }


  html.ff-tg-native
  .shell[data-shell="trainer"][data-route="t-clients"]
  .tg-contextbar-root
  .icon-btn,

  html.ff-tg-native
  .shell[data-shell="trainer"][data-route="t-clients"]
  .tg-contextbar-root
  .avatar{
    flex-basis:34px;

    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
  }


  .shell[data-route="a-client"]
  .cw-profile-card,

  .shell[data-route="t-client"]
  .cw-profile-card{
    grid-template-columns:
      46px
      minmax(0,1fr)
      auto;

    gap:9px;

    min-height:68px;

    padding:9px 10px;
  }


  .shell[data-route="a-client"]
  .cw-profile-avatar,

  .shell[data-route="t-client"]
  .cw-profile-avatar{
    width:46px;
    height:46px;
    min-width:46px;
    min-height:46px;
  }


  .shell[data-route="a-client"]
  .cw-profile-copy > b,

  .shell[data-route="t-client"]
  .cw-profile-copy > b{
    font-size:17px;
  }


  .shell[data-route="a-client"]
  .cw-section-head h2,

  .shell[data-route="t-client"]
  .cw-section-head h2{
    font-size:22px;
  }
}


/* ============================================================
   FF_CLIENT_WORKSPACE_FOLD=0.1.7.4
   Compact shared Admin + Trainer client workspace
   ============================================================ */


/* ------------------------------------------------------------
   TRAINER ROLE SWITCH
   Role preview belongs to Admin only.
   ------------------------------------------------------------ */

.shell[data-shell="trainer"]
.role-preview-switch,

.shell[data-shell="trainer"]
.cw-trainer-role-hidden{
  display:none!important;
}


/* ------------------------------------------------------------
   TRAINER ROOT CLIENTS

   0.1.7.3 could place "Клиенты" in contextbar pseudo-element.
   Return the real page heading and keep Telegram controls clean.
   ------------------------------------------------------------ */

html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.tg-contextbar-root::before{
  content:none!important;
  display:none!important;
}


html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.cw-list-head h1{
  display:block!important;

  margin:0!important;

  font-size:28px!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
}


html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.cw-list-head{
  display:grid!important;

  gap:4px!important;

  margin:2px 0 10px!important;
}


html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.cw-list-head p{
  margin:0!important;

  font-size:12px!important;
  line-height:1.25!important;
}


/* ------------------------------------------------------------
   TRAINER NESTED CLIENT

   Telegram already provides native BackButton.
   Remove duplicated client title/context row.
   ------------------------------------------------------------ */

html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-client"]
.tg-contextbar-nested.cw-trainer-nested-clean{
  display:block!important;

  width:100%!important;
  height:0!important;
  min-height:0!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;

  border:0!important;

  opacity:0!important;
  pointer-events:none!important;
}


/* ------------------------------------------------------------
   PROFILE CARD — Admin + Trainer
   ------------------------------------------------------------ */

.shell[data-route="a-client"]
.cw-profile-card,

.shell[data-route="t-client"]
.cw-profile-card{
  min-height:0!important;
  height:auto!important;

  grid-template-columns:
    46px
    minmax(0,1fr)
    auto!important;

  gap:10px!important;

  padding:9px 11px!important;

  border-radius:15px!important;
}


.shell[data-route="a-client"]
.cw-profile-avatar,

.shell[data-route="t-client"]
.cw-profile-avatar{
  width:46px!important;
  height:46px!important;

  min-width:46px!important;
  min-height:46px!important;

  border-radius:12px!important;
}


.shell[data-route="a-client"]
.cw-profile-avatar
.user-avatar,

.shell[data-route="t-client"]
.cw-profile-avatar
.user-avatar,

.shell[data-route="a-client"]
.cw-profile-avatar
.user-avatar-fallback,

.shell[data-route="t-client"]
.cw-profile-avatar
.user-avatar-fallback,

.shell[data-route="a-client"]
.cw-profile-avatar img,

.shell[data-route="t-client"]
.cw-profile-avatar img{
  width:100%!important;
  height:100%!important;

  border-radius:inherit!important;
}


.shell[data-route="a-client"]
.cw-profile-copy > b,

.shell[data-route="t-client"]
.cw-profile-copy > b{
  font-size:17px!important;
  line-height:1.05!important;

  letter-spacing:-.02em!important;
}


.shell[data-route="a-client"]
.cw-profile-copy > small,

.shell[data-route="t-client"]
.cw-profile-copy > small{
  margin-top:2px!important;

  font-size:11px!important;
  line-height:1.15!important;
}


.shell[data-route="a-client"]
.cw-profile-card .badge,

.shell[data-route="t-client"]
.cw-profile-card .badge,

.shell[data-route="a-client"]
.cw-profile-copy > span,

.shell[data-route="t-client"]
.cw-profile-copy > span{
  display:inline-flex!important;

  align-items:center!important;
  justify-content:center!important;

  width:auto!important;
  min-width:0!important;

  min-height:26px!important;
  height:26px!important;

  padding:0 9px!important;

  border-radius:999px!important;

  font-size:9.5px!important;
  font-weight:800!important;
  line-height:1!important;

  white-space:nowrap!important;
}


/* ------------------------------------------------------------
   ACTIONS
   ------------------------------------------------------------ */

.shell[data-route="a-client"]
.cw-actions,

.shell[data-route="t-client"]
.cw-actions{
  gap:6px!important;

  margin:6px 0 0!important;
}


.shell[data-route="a-client"]
.cw-actions .btn,

.shell[data-route="t-client"]
.cw-actions .btn{
  min-height:39px!important;
  height:39px!important;

  padding-top:0!important;
  padding-bottom:0!important;

  border-radius:12px!important;

  font-size:11.5px!important;
}


.shell[data-shell="trainer"][data-route="t-client"]
.cw-actions.single{
  display:block!important;
}


.shell[data-shell="trainer"][data-route="t-client"]
.cw-actions.single .btn{
  width:min(100%,200px)!important;
}


/* ------------------------------------------------------------
   ACCORDION
   ------------------------------------------------------------ */

.shell[data-route="a-client"]
.cw-fold,

.shell[data-route="t-client"]
.cw-fold{
  display:block!important;

  width:100%!important;

  margin:8px 0 0!important;
  padding:0!important;

  overflow:hidden!important;

  border:1px solid var(--line)!important;
  border-radius:15px!important;

  background:var(--card)!important;

  box-shadow:none!important;
}


.shell[data-route="a-client"]
.cw-fold > summary,

.shell[data-route="t-client"]
.cw-fold > summary{
  list-style:none!important;
}


.shell[data-route="a-client"]
.cw-fold > summary::-webkit-details-marker,

.shell[data-route="t-client"]
.cw-fold > summary::-webkit-details-marker{
  display:none!important;
}


.shell[data-route="a-client"]
.cw-fold-summary,

.shell[data-route="t-client"]
.cw-fold-summary{
  display:grid!important;

  grid-template-columns:
    minmax(0,1fr)
    auto
    14px!important;

  align-items:center!important;

  gap:8px!important;

  min-height:51px!important;

  padding:0 13px!important;

  cursor:pointer!important;

  user-select:none!important;
}


.shell[data-route="a-client"]
.cw-fold-title,

.shell[data-route="t-client"]
.cw-fold-title{
  overflow:hidden!important;

  color:var(--text)!important;

  font-size:16px!important;
  font-weight:790!important;
  line-height:1.1!important;
  letter-spacing:-.015em!important;

  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}


.shell[data-route="a-client"]
.cw-fold-meta,

.shell[data-route="t-client"]
.cw-fold-meta{
  color:var(--muted)!important;

  font-size:10.5px!important;
  font-weight:700!important;
  line-height:1!important;

  white-space:nowrap!important;
}


.shell[data-route="a-client"]
.cw-fold-chevron,

.shell[data-route="t-client"]
.cw-fold-chevron{
  width:7px!important;
  height:7px!important;

  border-right:1.5px solid currentColor!important;
  border-bottom:1.5px solid currentColor!important;

  color:var(--muted)!important;

  transform:
    rotate(45deg)
    translate(-1px,-1px)!important;

  transition:
    transform .18s ease!important;
}


.shell[data-route="a-client"]
.cw-fold[open]
> .cw-fold-summary
> .cw-fold-chevron,

.shell[data-route="t-client"]
.cw-fold[open]
> .cw-fold-summary
> .cw-fold-chevron{
  transform:
    rotate(225deg)
    translate(-1px,-1px)!important;
}


.shell[data-route="a-client"]
.cw-fold-body,

.shell[data-route="t-client"]
.cw-fold-body{
  padding:
    0
    11px
    11px!important;
}


/* subtle divider only when opened */

.shell[data-route="a-client"]
.cw-fold[open]
> .cw-fold-summary,

.shell[data-route="t-client"]
.cw-fold[open]
> .cw-fold-summary{
  margin-bottom:9px!important;

  border-bottom:
    1px solid var(--line)!important;
}


/* Old section spacing must not survive after conversion */

.shell[data-route="a-client"]
.cw-fold.cw-section,

.shell[data-route="t-client"]
.cw-fold.cw-section,

.shell[data-route="a-client"]
.cw-fold.section,

.shell[data-route="t-client"]
.cw-fold.section{
  margin-top:8px!important;
}


/* ------------------------------------------------------------
   EXISTING DETAILS:
   Data client / notes / history
   Make them visually identical to the new folds.
   ------------------------------------------------------------ */

.shell[data-route="a-client"]
details.cw-existing-fold,

.shell[data-route="t-client"]
details.cw-existing-fold{
  margin:8px 0 0!important;

  overflow:hidden!important;

  border:1px solid var(--line)!important;
  border-radius:15px!important;

  background:var(--card)!important;

  box-shadow:none!important;
}


.shell[data-route="a-client"]
details.cw-existing-fold > summary,

.shell[data-route="t-client"]
details.cw-existing-fold > summary{
  min-height:51px!important;

  padding:0 13px!important;

  display:flex!important;

  align-items:center!important;

  gap:8px!important;

  font-size:15px!important;
  font-weight:780!important;
  line-height:1.1!important;
}


.shell[data-route="a-client"]
details.cw-existing-fold .acc-body,

.shell[data-route="t-client"]
details.cw-existing-fold .acc-body{
  padding:
    0
    11px
    11px!important;
}


/* ------------------------------------------------------------
   PROGRESS — compact instead of giant dashboard tiles
   Existing calculation/data remains untouched.
   ------------------------------------------------------------ */

.shell[data-route="a-client"]
.cw-progress-compact-card,

.shell[data-route="t-client"]
.cw-progress-compact-card{
  min-height:0!important;

  margin:0 0 7px!important;

  padding:11px 12px!important;

  border-radius:14px!important;

  box-shadow:none!important;
}


.shell[data-route="a-client"]
.cw-progress-compact-card:last-child,

.shell[data-route="t-client"]
.cw-progress-compact-card:last-child{
  margin-bottom:0!important;
}


.shell[data-route="a-client"]
.cw-progress-compact-card h3,

.shell[data-route="t-client"]
.cw-progress-compact-card h3,

.shell[data-route="a-client"]
.cw-progress-compact-card b,

.shell[data-route="t-client"]
.cw-progress-compact-card b{
  line-height:1.12!important;
}


.shell[data-route="a-client"]
.cw-progress-stats-inline,

.shell[data-route="t-client"]
.cw-progress-stats-inline{
  display:flex!important;

  flex-wrap:wrap!important;

  align-items:center!important;

  gap:5px 14px!important;

  margin-top:7px!important;
}


.shell[data-route="a-client"]
.cw-progress-stat-inline,

.shell[data-route="t-client"]
.cw-progress-stat-inline{
  width:auto!important;
  min-width:0!important;
  min-height:0!important;

  margin:0!important;
  padding:0!important;

  border:0!important;
  border-radius:0!important;

  background:transparent!important;
  box-shadow:none!important;
}


.shell[data-route="a-client"]
.cw-progress-stat-inline small,

.shell[data-route="t-client"]
.cw-progress-stat-inline small,

.shell[data-route="a-client"]
.cw-progress-stat-inline span,

.shell[data-route="t-client"]
.cw-progress-stat-inline span{
  display:inline!important;

  margin-right:4px!important;

  color:var(--muted)!important;

  font-size:10.5px!important;
}


.shell[data-route="a-client"]
.cw-progress-stat-inline b,

.shell[data-route="t-client"]
.cw-progress-stat-inline b{
  display:inline!important;

  font-size:11.5px!important;
}


/* ------------------------------------------------------------
   EMPTY STATES inside folded sections
   ------------------------------------------------------------ */

.shell[data-route="a-client"]
.cw-fold-body
.role-empty-inline,

.shell[data-route="t-client"]
.cw-fold-body
.role-empty-inline,

.shell[data-route="a-client"]
.cw-fold-body
.state,

.shell[data-route="t-client"]
.cw-fold-body
.state{
  min-height:58px!important;

  margin:0!important;
  padding:9px 10px!important;

  border-radius:12px!important;
}


.shell[data-route="a-client"]
.cw-fold-body
.role-empty-inline > span:first-child,

.shell[data-route="t-client"]
.cw-fold-body
.role-empty-inline > span:first-child{
  width:34px!important;
  height:34px!important;

  min-width:34px!important;
}


/* ------------------------------------------------------------
   WORKSPACE RHYTHM

   Remove giant gaps/headings left by old section system.
   ------------------------------------------------------------ */

.shell[data-route="a-client"]
.cw-workspace,

.shell[data-route="t-client"]
.cw-workspace{
  gap:0!important;
}


.shell[data-route="a-client"]
.cw-fold-ready
.cw-section-head,

.shell[data-route="t-client"]
.cw-fold-ready
.cw-section-head{
  margin:0!important;
}


.shell[data-route="a-client"]
.cw-fold-ready
.cw-section-head h2,

.shell[data-route="t-client"]
.cw-fold-ready
.cw-section-head h2{
  font-size:16px!important;
}


/* ------------------------------------------------------------
   TRAINER CLIENT LIST
   Keep compact, no role pill.
   ------------------------------------------------------------ */

.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-search{
  min-height:46px!important;
  height:46px!important;

  margin-bottom:9px!important;

  border-radius:14px!important;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list{
  gap:6px!important;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-card{
  min-height:60px!important;

  padding:8px 11px!important;

  border-radius:15px!important;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-avatar{
  width:40px!important;
  height:40px!important;

  min-width:40px!important;
  min-height:40px!important;

  border-radius:11px!important;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-card
.badge{
  width:auto!important;

  min-height:25px!important;
  height:25px!important;

  padding:0 8px!important;

  border-radius:999px!important;

  font-size:9.5px!important;
  line-height:1!important;
}


/* ------------------------------------------------------------
   DARK
   ------------------------------------------------------------ */

html[data-theme="dark"]
.shell[data-route="a-client"]
.cw-fold,

html[data-theme="dark"]
.shell[data-route="t-client"]
.cw-fold,

html[data-theme="dark"]
.shell[data-route="a-client"]
details.cw-existing-fold,

html[data-theme="dark"]
.shell[data-route="t-client"]
details.cw-existing-fold{
  background:var(--card)!important;

  border-color:var(--line)!important;

  box-shadow:none!important;
}


/* ------------------------------------------------------------
   SMALL PHONE
   ------------------------------------------------------------ */

@media(max-width:380px){

  .shell[data-route="a-client"]
  .cw-profile-card,

  .shell[data-route="t-client"]
  .cw-profile-card{
    grid-template-columns:
      42px
      minmax(0,1fr)
      auto!important;

    gap:8px!important;

    padding:8px 9px!important;
  }


  .shell[data-route="a-client"]
  .cw-profile-avatar,

  .shell[data-route="t-client"]
  .cw-profile-avatar{
    width:42px!important;
    height:42px!important;

    min-width:42px!important;
    min-height:42px!important;
  }


  .shell[data-route="a-client"]
  .cw-profile-copy > b,

  .shell[data-route="t-client"]
  .cw-profile-copy > b{
    font-size:16px!important;
  }


  .shell[data-route="a-client"]
  .cw-fold-title,

  .shell[data-route="t-client"]
  .cw-fold-title{
    font-size:15px!important;
  }


  .shell[data-route="a-client"]
  .cw-fold-summary,

  .shell[data-route="t-client"]
  .cw-fold-summary{
    min-height:48px!important;

    padding-inline:11px!important;
  }

}


/* ==========================================================
   FF_CLIENT_WORKSPACE_POLISH=0.1.7.5
   ========================================================== */


/* ----------------------------------------------------------
   TRAINER
   No role-switch pill for trainer.
   ---------------------------------------------------------- */

.shell[data-shell="trainer"]
.role-preview-switch{
  display:none!important;
}


/* ----------------------------------------------------------
   TRAINER CLIENTS ROOT
   Bell/avatar visually share the heading row without
   moving Telegram-native DOM nodes.
   ---------------------------------------------------------- */

html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.tg-contextbar-root{
  position:relative;

  z-index:2;

  display:flex!important;

  align-items:center!important;
  justify-content:flex-end!important;

  min-height:38px!important;
  height:38px!important;

  margin:0 0 -38px!important;
  padding:0!important;

  gap:6px!important;
}


html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.cw-list-head{
  box-sizing:border-box;

  min-height:38px!important;

  padding-right:88px!important;

  margin:
    0
    0
    10px!important;
}


html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.cw-list-head h1{
  display:block!important;

  margin:0!important;

  font-size:28px!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
}


html.ff-tg-native
.shell[data-shell="trainer"][data-route="t-clients"]
.cw-list-head p{
  margin:4px 0 0!important;

  font-size:11.5px!important;
  line-height:1.2!important;
}


/* ----------------------------------------------------------
   PROFILE CARD
   ---------------------------------------------------------- */

.shell[data-route="a-client"]
.cw-profile-card,

.shell[data-route="t-client"]
.cw-profile-card{
  grid-template-columns:
    42px
    minmax(0,1fr)
    auto!important;

  min-height:0!important;

  gap:9px!important;

  padding:8px 10px!important;

  border-radius:15px!important;
}


.shell[data-route="a-client"]
.cw-profile-avatar,

.shell[data-route="t-client"]
.cw-profile-avatar{
  width:42px!important;
  height:42px!important;

  min-width:42px!important;
  min-height:42px!important;

  border-radius:11px!important;
}


.shell[data-route="a-client"]
.cw-profile-copy > b,

.shell[data-route="t-client"]
.cw-profile-copy > b{
  font-size:17px!important;
  line-height:1.05!important;
}


.shell[data-route="a-client"]
.cw-profile-copy > small,

.shell[data-route="t-client"]
.cw-profile-copy > small{
  margin-top:2px!important;

  font-size:10.5px!important;
  line-height:1.1!important;
}


.shell[data-route="a-client"]
.cw-profile-card .badge,

.shell[data-route="t-client"]
.cw-profile-card .badge{
  width:auto!important;

  min-height:25px!important;
  height:25px!important;

  padding:0 8px!important;

  border-radius:999px!important;

  font-size:9px!important;
  line-height:1!important;
}


/* ----------------------------------------------------------
   ACTIONS
   ---------------------------------------------------------- */

.shell[data-route="a-client"]
.cw-actions,

.shell[data-route="t-client"]
.cw-actions{
  gap:6px!important;

  margin-top:6px!important;
}


.shell[data-route="a-client"]
.cw-actions .btn,

.shell[data-route="t-client"]
.cw-actions .btn{
  min-height:38px!important;
  height:38px!important;

  border-radius:12px!important;

  font-size:11.5px!important;
}


/* Trainer has one actual operation here — message. */

.shell[data-shell="trainer"][data-route="t-client"]
.cw-actions.single,

.shell[data-shell="trainer"][data-route="t-client"]
.cw-actions{
  grid-template-columns:1fr!important;
}


.shell[data-shell="trainer"][data-route="t-client"]
.cw-actions.single .btn,

.shell[data-shell="trainer"][data-route="t-client"]
.cw-actions .btn:only-child{
  width:100%!important;
  max-width:none!important;
}


/* ----------------------------------------------------------
   ALL ACCORDIONS
   Same visual language.
   ---------------------------------------------------------- */

.shell[data-route="a-client"]
.cw-fold,

.shell[data-route="t-client"]
.cw-fold,

.shell[data-route="a-client"]
.cw-existing-fold-unified,

.shell[data-route="t-client"]
.cw-existing-fold-unified{
  margin-top:7px!important;

  border:
    1px solid
    var(--line)!important;

  border-radius:14px!important;

  background:
    var(--card)!important;

  box-shadow:none!important;
}


.shell[data-route="a-client"]
.cw-fold-summary,

.shell[data-route="t-client"]
.cw-fold-summary{
  display:grid!important;

  grid-template-columns:
    minmax(0,1fr)
    auto
    13px!important;

  align-items:center!important;

  gap:8px!important;

  min-height:48px!important;

  padding:0 12px!important;

  background:transparent!important;
}


.shell[data-route="a-client"]
.cw-fold-title,

.shell[data-route="t-client"]
.cw-fold-title{
  font-size:15.5px!important;
  font-weight:780!important;
  line-height:1.05!important;

  letter-spacing:-.015em!important;
}


.shell[data-route="a-client"]
.cw-fold-meta,

.shell[data-route="t-client"]
.cw-fold-meta{
  min-width:12px;

  text-align:right;

  color:var(--text)!important;

  font-size:10px!important;
  font-weight:760!important;
  line-height:1!important;
}


.shell[data-route="a-client"]
.cw-fold-body,

.shell[data-route="t-client"]
.cw-fold-body{
  padding:
    0
    10px
    10px!important;
}


.shell[data-route="a-client"]
.cw-fold[open]
> .cw-fold-summary,

.shell[data-route="t-client"]
.cw-fold[open]
> .cw-fold-summary{
  margin-bottom:8px!important;
}


/* ----------------------------------------------------------
   DATA CLIENT

   IMPORTANT:
   Exactly same accordion shell as Access/Payments/etc.
   No green icon chip / special summary.
   ---------------------------------------------------------- */

.shell[data-route="a-client"]
.cw-data-fold,

.shell[data-route="t-client"]
.cw-data-fold{
  margin-top:7px!important;

  padding:0!important;

  border:
    1px solid
    var(--line)!important;

  border-radius:14px!important;

  background:
    var(--card)!important;

  box-shadow:none!important;
}


.shell[data-route="a-client"]
.cw-data-fold
> .cw-fold-summary,

.shell[data-route="t-client"]
.cw-data-fold
> .cw-fold-summary{
  min-height:48px!important;

  padding:0 12px!important;

  border:0!important;

  background:transparent!important;
}


/*
 * Old icon tile and legacy pseudo-elements must not leak
 * into the normalized summary.
 */

.shell[data-route="a-client"]
.cw-data-fold
> .cw-fold-summary
.icon-chip,

.shell[data-route="t-client"]
.cw-data-fold
> .cw-fold-summary
.icon-chip,

.shell[data-route="a-client"]
.cw-data-fold
> .cw-fold-summary
svg:not(.cw-fold-chevron),

.shell[data-route="t-client"]
.cw-data-fold
> .cw-fold-summary
svg:not(.cw-fold-chevron){
  display:none!important;
}


/* Data content itself: simple facts, not big dashboard tiles. */

.shell[data-route="a-client"]
.cw-data-body,

.shell[data-route="t-client"]
.cw-data-body{
  padding:
    0
    12px
    10px!important;
}


.shell[data-route="a-client"]
.cw-data-body
.profile-grid,

.shell[data-route="t-client"]
.cw-data-body
.profile-grid,

.shell[data-route="a-client"]
.cw-data-body
.admin017-profile-grid,

.shell[data-route="t-client"]
.cw-data-body
.admin017-profile-grid{
  display:grid!important;

  grid-template-columns:
    1fr
    1fr!important;

  gap:0!important;

  overflow:hidden!important;

  border:
    1px solid
    var(--line)!important;

  border-radius:12px!important;

  background:transparent!important;
}


.shell[data-route="a-client"]
.cw-data-body
.profile-grid > *,

.shell[data-route="t-client"]
.cw-data-body
.profile-grid > *,

.shell[data-route="a-client"]
.cw-data-body
.admin017-profile-grid > *,

.shell[data-route="t-client"]
.cw-data-body
.admin017-profile-grid > *{
  min-height:52px!important;

  padding:9px 10px!important;

  border-radius:0!important;

  background:transparent!important;

  box-shadow:none!important;
}


/* ----------------------------------------------------------
   PROGRESS
   Flat course information instead of gray KPI boxes.
   ---------------------------------------------------------- */

.shell[data-route="a-client"]
.cw-progress-compact-card,

.shell[data-route="t-client"]
.cw-progress-compact-card{
  position:relative;

  min-height:0!important;

  margin:0 0 6px!important;

  padding:10px 11px!important;

  border-radius:13px!important;

  box-shadow:none!important;
}


.shell[data-route="a-client"]
.cw-progress-compact-card:last-child,

.shell[data-route="t-client"]
.cw-progress-compact-card:last-child{
  margin-bottom:0!important;
}


.shell[data-route="a-client"]
.cw0175-metric-hidden,

.shell[data-route="t-client"]
.cw0175-metric-hidden{
  display:none!important;
}


.shell[data-route="a-client"]
.cw-progress-flat-meta,

.shell[data-route="t-client"]
.cw-progress-flat-meta{
  display:flex;

  align-items:center;

  gap:7px;

  margin-top:8px;

  color:var(--text);

  font-size:11px;
  line-height:1.2;
}


.shell[data-route="a-client"]
.cw-progress-flat-meta strong,

.shell[data-route="t-client"]
.cw-progress-flat-meta strong{
  font-weight:780;
}


.shell[data-route="a-client"]
.cw-progress-flat-meta > span:first-of-type,

.shell[data-route="t-client"]
.cw-progress-flat-meta > span:first-of-type{
  color:var(--muted);
}


/*
 * Kill legacy gray stat wrappers if they become empty
 * after metric extraction.
 */

.shell[data-route="a-client"]
.cw-progress-stats-inline:empty,

.shell[data-route="t-client"]
.cw-progress-stats-inline:empty{
  display:none!important;
}


/* ----------------------------------------------------------
   EMPTY SECTION CONTENT
   ---------------------------------------------------------- */

.shell[data-route="a-client"]
.cw-fold-body
.role-empty-inline,

.shell[data-route="t-client"]
.cw-fold-body
.role-empty-inline,

.shell[data-route="a-client"]
.cw-fold-body
.state,

.shell[data-route="t-client"]
.cw-fold-body
.state{
  min-height:52px!important;

  padding:8px 9px!important;

  border-radius:11px!important;
}


/* ----------------------------------------------------------
   TRAINER CLIENT LIST
   ---------------------------------------------------------- */

.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-search{
  height:45px!important;
  min-height:45px!important;

  margin-bottom:8px!important;

  border-radius:14px!important;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list{
  gap:6px!important;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-card{
  min-height:58px!important;

  padding:8px 10px!important;

  border-radius:14px!important;
}


.shell[data-shell="trainer"][data-route="t-clients"]
.cw-client-list-avatar{
  width:38px!important;
  height:38px!important;

  min-width:38px!important;
  min-height:38px!important;

  border-radius:10px!important;
}


/* ----------------------------------------------------------
   DARK
   ---------------------------------------------------------- */

html[data-theme="dark"]
.shell[data-route="a-client"]
.cw-fold,

html[data-theme="dark"]
.shell[data-route="t-client"]
.cw-fold,

html[data-theme="dark"]
.shell[data-route="a-client"]
.cw-data-fold,

html[data-theme="dark"]
.shell[data-route="t-client"]
.cw-data-fold{
  border-color:
    var(--line)!important;

  background:
    var(--card)!important;

  box-shadow:none!important;
}


/* ----------------------------------------------------------
   SMALL PHONES
   ---------------------------------------------------------- */

@media(max-width:380px){

  html.ff-tg-native
  .shell[data-shell="trainer"][data-route="t-clients"]
  .cw-list-head{
    padding-right:80px!important;
  }


  html.ff-tg-native
  .shell[data-shell="trainer"][data-route="t-clients"]
  .cw-list-head h1{
    font-size:25px!important;
  }


  .shell[data-route="a-client"]
  .cw-fold-title,

  .shell[data-route="t-client"]
  .cw-fold-title{
    font-size:14.5px!important;
  }


  .shell[data-route="a-client"]
  .cw-profile-card,

  .shell[data-route="t-client"]
  .cw-profile-card{
    grid-template-columns:
      40px
      minmax(0,1fr)
      auto!important;

    padding:8px 9px!important;
  }


  .shell[data-route="a-client"]
  .cw-profile-avatar,

  .shell[data-route="t-client"]
  .cw-profile-avatar{
    width:40px!important;
    height:40px!important;

    min-width:40px!important;
    min-height:40px!important;
  }

}


/* ==========================================================
   FF_ADMIN_CLIENT_DATA_CHEVRON_FIX=0.1.7.5.1
   ADMIN ONLY
   ========================================================== */


/*
 * "Данные клиента" must be exactly the same visual
 * accordion pattern as Доступы / Оплаты.
 *
 * Remove:
 * - browser details marker
 * - legacy acc pseudo chevron
 * - previous secondary arrow
 *
 * Keep exactly ONE .cw-fold-chevron.
 */

.shell[data-route="a-client"]
.cw-data-fold
> summary{
    position:relative!important;

    display:grid!important;

    grid-template-columns:
        minmax(0,1fr)
        8px!important;

    align-items:center!important;

    gap:12px!important;

    min-height:48px!important;

    margin:0!important;
    padding:0 13px!important;

    list-style:none!important;

    cursor:pointer!important;

    background:transparent!important;

    -webkit-appearance:none!important;
    appearance:none!important;
}


.shell[data-route="a-client"]
.cw-data-fold
> summary::-webkit-details-marker{
    display:none!important;
}


.shell[data-route="a-client"]
.cw-data-fold
> summary::marker{
    content:""!important;

    font-size:0!important;
}


/* Kill every legacy pseudo arrow */

.shell[data-route="a-client"]
.cw-data-fold
> summary::before,

.shell[data-route="a-client"]
.cw-data-fold
> summary::after{
    content:none!important;

    display:none!important;

    width:0!important;
    height:0!important;

    margin:0!important;
    padding:0!important;

    border:0!important;

    background:none!important;

    transform:none!important;
}


/* Title occupies only the first column */

.shell[data-route="a-client"]
.cw-data-fold
> summary
> .cw-fold-title{
    grid-column:1!important;

    min-width:0!important;

    margin:0!important;

    overflow:hidden!important;

    color:var(--text)!important;

    font-size:15.5px!important;
    font-weight:780!important;
    line-height:1.05!important;
    letter-spacing:-.015em!important;

    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}


/* There is no counter for client data */

.shell[data-route="a-client"]
.cw-data-fold
> summary
> .cw-fold-meta{
    display:none!important;
}


/*
 * Hide any old children/icons which could behave
 * like an additional arrow.
 */

.shell[data-route="a-client"]
.cw-data-fold
> summary
> svg,

.shell[data-route="a-client"]
.cw-data-fold
> summary
> .chev,

.shell[data-route="a-client"]
.cw-data-fold
> summary
> .acc-chevron,

.shell[data-route="a-client"]
.cw-data-fold
> summary
> .accordion-chevron{
    display:none!important;
}


/*
 * The ONE allowed chevron.
 * Reset legacy styles completely.
 */

.shell[data-route="a-client"]
.cw-data-fold
> summary
> .cw-fold-chevron{
    all:unset!important;

    box-sizing:border-box!important;

    display:block!important;

    grid-column:2!important;

    justify-self:end!important;
    align-self:center!important;

    width:8px!important;
    height:8px!important;

    margin:0 2px 3px 0!important;

    border-right:
        1.7px solid
        var(--text)!important;

    border-bottom:
        1.7px solid
        var(--text)!important;

    opacity:.85!important;

    transform:
        rotate(45deg)!important;

    transform-origin:center!important;

    transition:
        transform .16s ease!important;
}


.shell[data-route="a-client"]
.cw-data-fold[open]
> summary
> .cw-fold-chevron{
    margin:
        3px
        2px
        0
        0!important;

    transform:
        rotate(225deg)!important;
}


/*
 * Same shell geometry as the neighbouring
 * standard accordions.
 */

.shell[data-route="a-client"]
.cw-data-fold{
    margin-top:7px!important;

    padding:0!important;

    overflow:hidden!important;

    border:
        1px solid
        var(--line)!important;

    border-radius:
        14px!important;

    background:
        var(--card)!important;

    box-shadow:
        none!important;
}


/* Do not let legacy accordion CSS change the summary */

.shell[data-route="a-client"]
.cw-data-fold
> summary:hover,

.shell[data-route="a-client"]
.cw-data-fold
> summary:focus,

.shell[data-route="a-client"]
.cw-data-fold
> summary:active{
    background:
        transparent!important;
}


/* Open body remains unchanged */

.shell[data-route="a-client"]
.cw-data-fold[open]
> .cw-fold-summary{
    margin-bottom:
        8px!important;

    border-bottom:
        1px solid
        var(--line)!important;
}


/* DARK */

html[data-theme="dark"]
.shell[data-route="a-client"]
.cw-data-fold
> summary
> .cw-fold-chevron{
    border-color:
        var(--text)!important;
}


/* ==========================================================
   FF_ADMIN_CLIENT_DATA_CHEVRON_FIX_2=0.1.7.5.2
   ADMIN ONLY
   ========================================================== */


/*
 * Robust solution:
 * hide every old child-chevron and draw exactly one arrow
 * as summary::after.
 */

.shell[data-route="a-client"]
.cw-data-fold
> summary{
    display:grid!important;

    grid-template-columns:
        minmax(0,1fr)
        10px!important;

    align-items:center!important;

    gap:10px!important;

    padding:
        0
        13px!important;

    list-style:none!important;
}


/* native marker off */

.shell[data-route="a-client"]
.cw-data-fold
> summary::-webkit-details-marker{
    display:none!important;
}


.shell[data-route="a-client"]
.cw-data-fold
> summary::marker{
    content:""!important;
}


/* old generated child arrow off */

.shell[data-route="a-client"]
.cw-data-fold
> summary
> .cw-fold-chevron,

.shell[data-route="a-client"]
.cw-data-fold
> summary
> .chev,

.shell[data-route="a-client"]
.cw-data-fold
> summary
> .acc-chevron,

.shell[data-route="a-client"]
.cw-data-fold
> summary
> .accordion-chevron{
    display:none!important;
}


/* no left pseudo decoration */

.shell[data-route="a-client"]
.cw-data-fold
> summary::before{
    content:none!important;
    display:none!important;
}


/*
 * Exactly one visible chevron.
 * Closed = down.
 */

.shell[data-route="a-client"]
.cw-data-fold
> summary::after{
    content:""!important;

    display:block!important;

    grid-column:2!important;
    grid-row:1!important;

    justify-self:end!important;
    align-self:center!important;

    box-sizing:border-box!important;

    width:8px!important;
    height:8px!important;

    margin:
        0
        2px
        3px
        0!important;

    padding:0!important;

    border:0!important;
    border-right:
        1.7px solid
        var(--text)!important;

    border-bottom:
        1.7px solid
        var(--text)!important;

    background:none!important;

    opacity:.82!important;

    transform:
        rotate(45deg)!important;

    transform-origin:center!important;

    transition:
        transform .16s ease,
        margin .16s ease!important;
}


/* Open = up */

.shell[data-route="a-client"]
.cw-data-fold[open]
> summary::after{
    margin:
        3px
        2px
        0
        0!important;

    transform:
        rotate(225deg)!important;
}


/* Title uses first column */

.shell[data-route="a-client"]
.cw-data-fold
> summary
> .cw-fold-title{
    grid-column:1!important;
    grid-row:1!important;

    min-width:0!important;
}


/* no counter in this section */

.shell[data-route="a-client"]
.cw-data-fold
> summary
> .cw-fold-meta{
    display:none!important;
}


/* same row dimensions as neighbouring accordions */

.shell[data-route="a-client"]
.cw-data-fold
> summary{
    min-height:48px!important;
    height:auto!important;

    margin:0!important;

    background:transparent!important;
}


/* dark theme */

html[data-theme="dark"]
.shell[data-route="a-client"]
.cw-data-fold
> summary::after{
    border-right-color:
        var(--text)!important;

    border-bottom-color:
        var(--text)!important;
}


/* ==========================================================
   FF_ADMIN_CLIENT_UI_FIX=0.1.7.5.3
   ADMIN ONLY
   Progress workspace is intentionally untouched.
   ========================================================== */


/* ==========================================================
   1. ADMIN CLIENT DATA
   Exactly one proper chevron.
   ========================================================== */

.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold
> summary{
    position:relative!important;

    display:grid!important;

    grid-template-columns:
        minmax(0,1fr)
        10px!important;

    align-items:center!important;

    gap:10px!important;

    min-height:48px!important;

    margin:0!important;
    padding:0 13px!important;

    list-style:none!important;

    background:transparent!important;
}


.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold
> summary::-webkit-details-marker{
    display:none!important;
}


.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold
> summary::marker{
    content:""!important;
}


/* remove every old physical arrow */

.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold
> summary
> .cw-fold-chevron,

.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold
> summary
> .chev,

.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold
> summary
> .acc-chevron,

.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold
> summary
> .accordion-chevron{
    display:none!important;
}


.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold
> summary::before{
    content:none!important;
    display:none!important;
}


/* one generated chevron */

.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold
> summary::after{
    content:""!important;

    display:block!important;

    grid-column:2!important;
    grid-row:1!important;

    justify-self:end!important;
    align-self:center!important;

    width:8px!important;
    height:8px!important;

    box-sizing:border-box!important;

    margin:
        0
        2px
        3px
        0!important;

    padding:0!important;

    border:0!important;

    border-right:
        1.7px solid
        currentColor!important;

    border-bottom:
        1.7px solid
        currentColor!important;

    background:none!important;

    color:var(--text)!important;

    opacity:.82!important;

    transform:
        rotate(45deg)!important;

    transform-origin:center!important;
}


.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold[open]
> summary::after{
    margin:
        3px
        2px
        0
        0!important;

    transform:
        rotate(225deg)!important;
}


.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold
> summary
> .cw-fold-title{
    grid-column:1!important;
    grid-row:1!important;

    min-width:0!important;
}


.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold
> summary
> .cw-fold-meta{
    display:none!important;
}


/* ==========================================================
   2. ADMIN ROLE SWITCH ON CLIENTS ROOT
   Old glyph ⌄ is visually crooked.
   Replace it with precise CSS chevron.
   ========================================================== */

.shell[data-shell="admin"][data-route="a-clients"]
.role-preview-switch
> i{
    display:block!important;

    flex:
        0
        0
        7px!important;

    width:7px!important;
    height:7px!important;

    box-sizing:border-box!important;

    margin:
        -3px
        1px
        0
        2px!important;

    padding:0!important;

    overflow:hidden!important;

    font-size:0!important;
    line-height:0!important;

    color:currentColor!important;

    border:0!important;

    border-right:
        1.5px solid
        currentColor!important;

    border-bottom:
        1.5px solid
        currentColor!important;

    background:none!important;

    opacity:.72!important;

    transform:
        rotate(45deg)!important;

    transform-origin:center!important;
}


.shell[data-shell="admin"][data-route="a-clients"]
.role-preview-switch
> i::before,

.shell[data-shell="admin"][data-route="a-clients"]
.role-preview-switch
> i::after{
    content:none!important;
    display:none!important;
}


/* ==========================================================
   3. ADMIN CLIENT CHAT
   Composer occupies the actual bottom of visualViewport.

   Important:
   - no global dock on a-thread;
   - visualViewport itself accounts for Android keyboard;
   - therefore Telegram contentSafeArea bottom must NOT
     lift composer for a second time.
   ========================================================== */

body.ff-admin-thread-viewport{
    height:
        var(
            --ff-admin-thread-vh,
            100dvh
        )!important;

    min-height:0!important;

    overflow:hidden!important;

    overscroll-behavior:none!important;
}


body.ff-admin-thread-viewport
.shell[data-shell="admin"][data-route="a-thread"]{
    height:
        var(
            --ff-admin-thread-vh,
            100dvh
        )!important;

    min-height:0!important;
    max-height:
        var(
            --ff-admin-thread-vh,
            100dvh
        )!important;

    overflow:hidden!important;
}


body.ff-admin-thread-viewport
.shell[data-shell="admin"][data-route="a-thread"]
.tg-contextbar{
    flex:
        0
        0
        auto!important;
}


body.ff-admin-thread-viewport
.shell[data-shell="admin"][data-route="a-thread"]
.content.no-dock{
    flex:
        1
        1
        auto!important;

    min-height:0!important;

    overflow:hidden!important;

    gap:0!important;

    /*
     * visualViewport handles keyboard height.
     * Only real device safe-area remains here.
     */
    padding-bottom:
        max(
            6px,
            env(
                safe-area-inset-bottom,
                0px
            )
        )!important;
}


body.ff-admin-thread-viewport
.shell[data-shell="admin"][data-route="a-thread"]
.chat-screen{
    display:flex!important;

    flex:
        1
        1
        auto!important;

    flex-direction:column!important;

    width:100%!important;
    height:100%!important;

    min-height:0!important;
    max-height:none!important;

    gap:8px!important;

    overflow:hidden!important;
}


body.ff-admin-thread-viewport
.shell[data-shell="admin"][data-route="a-thread"]
.chat-log{
    flex:
        1
        1
        auto!important;

    min-height:0!important;

    overflow-x:hidden!important;
    overflow-y:auto!important;

    overscroll-behavior:contain!important;

    -webkit-overflow-scrolling:touch;

    padding:
        0
        0
        8px!important;
}


/*
 * This is the important part.
 * No sticky "bottom + Telegram inset".
 * Flex layout puts composer at actual visible bottom.
 */

body.ff-admin-thread-viewport
.shell[data-shell="admin"][data-route="a-thread"]
.chat-composer{
    position:relative!important;

    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;

    flex:
        0
        0
        auto!important;

    width:100%!important;

    margin:
        0!important;

    transform:none!important;
}


/*
 * Prevent old native Telegram rule from adding
 * content-safe bottom to this composer.
 */

html.ff-tg-native
body.ff-admin-thread-viewport
.shell[data-shell="admin"][data-route="a-thread"]
.chat-composer{
    margin-bottom:
        0!important;
}


/*
 * Keep empty state in the message area,
 * but it must not determine composer position.
 */

body.ff-admin-thread-viewport
.shell[data-shell="admin"][data-route="a-thread"]
.chat-log
> .state:only-child{
    flex:
        0
        0
        auto!important;
}


/* DARK */

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-clients"]
.role-preview-switch
> i{
    border-right-color:
        currentColor!important;

    border-bottom-color:
        currentColor!important;
}


/* ==========================================================
   FF_ADMIN_UI_FINAL=0.1.7.5.4
   ADMIN ONLY
   ========================================================== */


/* ==========================================================
   1. CLIENT WORKSPACE
   ALL accordion chevrons use ONE implementation.
   ========================================================== */

.shell[data-shell="admin"][data-route="a-client"]
.cw-fold-summary{
    position:relative!important;

    display:grid!important;

    grid-template-columns:
        minmax(0,1fr)
        auto
        12px!important;

    align-items:center!important;

    gap:8px!important;

    padding-left:13px!important;
    padding-right:13px!important;

    list-style:none!important;
}


.shell[data-shell="admin"][data-route="a-client"]
.cw-fold-summary::-webkit-details-marker{
    display:none!important;
}


.shell[data-shell="admin"][data-route="a-client"]
.cw-fold-summary::marker{
    content:""!important;
}


/*
 * Disable every historical physical chevron.
 */

.shell[data-shell="admin"][data-route="a-client"]
.cw-fold-summary
> .cw-fold-chevron,

.shell[data-shell="admin"][data-route="a-client"]
.cw-fold-summary
> .chev,

.shell[data-shell="admin"][data-route="a-client"]
.cw-fold-summary
> .acc-chevron,

.shell[data-shell="admin"][data-route="a-client"]
.cw-fold-summary
> .accordion-chevron{
    display:none!important;
}


.shell[data-shell="admin"][data-route="a-client"]
.cw-fold-summary::before{
    content:none!important;
    display:none!important;
}


/*
 * ONE arrow for Progress / Measurements / Photos /
 * Access / Payments / Client data.
 */

.shell[data-shell="admin"][data-route="a-client"]
.cw-fold-summary::after{
    content:""!important;

    display:block!important;

    grid-column:3!important;
    grid-row:1!important;

    justify-self:end!important;
    align-self:center!important;

    box-sizing:border-box!important;

    width:7px!important;
    height:7px!important;

    margin:
        0
        2px
        3px
        0!important;

    padding:0!important;

    border:0!important;

    border-right:
        1.6px solid
        currentColor!important;

    border-bottom:
        1.6px solid
        currentColor!important;

    background:none!important;

    color:var(--text)!important;

    opacity:.82!important;

    transform:
        rotate(45deg)!important;

    transform-origin:center!important;

    transition:
        transform .16s ease,
        margin .16s ease!important;
}


.shell[data-shell="admin"][data-route="a-client"]
details[open]
> .cw-fold-summary::after{
    margin:
        3px
        2px
        0
        0!important;

    transform:
        rotate(225deg)!important;
}


/*
 * Client data uses the exact same grid.
 * Empty meta remains as column 2.
 */

.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold
> .cw-fold-summary{
    grid-template-columns:
        minmax(0,1fr)
        auto
        12px!important;
}


.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold
> .cw-fold-summary
> .cw-fold-meta{
    display:block!important;

    min-width:0!important;
    width:0!important;

    margin:0!important;
    padding:0!important;

    overflow:hidden!important;
}


/*
 * Explicitly kill the previous data-only ::after
 * geometry by replacing it with the shared rule above.
 */

.shell[data-shell="admin"][data-route="a-client"]
.cw-data-fold
> .cw-fold-summary::after{
    grid-column:3!important;

    width:7px!important;
    height:7px!important;

    border-right-width:
        1.6px!important;

    border-bottom-width:
        1.6px!important;
}


/* ==========================================================
   2. ADMIN ROLE PILL
   ONE chevron implementation on EVERY admin screen.
   ========================================================== */

.shell[data-shell="admin"]
.role-preview-switch{
    display:inline-flex!important;

    align-items:center!important;

    gap:7px!important;
}


/*
 * Remove old text/glyph arrow.
 */

.shell[data-shell="admin"]
.role-preview-switch
> i{
    display:none!important;
}


/*
 * Same arrow everywhere:
 * Overview / Clients / Client / Chat / Content / Finance / More.
 */

.shell[data-shell="admin"]
.role-preview-switch::after{
    content:""!important;

    display:block!important;

    flex:
        0
        0
        6px!important;

    box-sizing:border-box!important;

    width:6px!important;
    height:6px!important;

    margin:
        -2px
        1px
        0
        1px!important;

    padding:0!important;

    border:0!important;

    border-right:
        1.4px solid
        currentColor!important;

    border-bottom:
        1.4px solid
        currentColor!important;

    background:none!important;

    opacity:.68!important;

    transform:
        rotate(45deg)!important;

    transform-origin:center!important;
}


/* ==========================================================
   3. ADMIN CLIENT CHAT
   Closed keyboard: raise composer slightly.
   Open keyboard: almost flush to keyboard.
   ========================================================== */

html.ff-tg-native
body.ff-admin-thread-viewport
.shell[data-shell="admin"][data-route="a-thread"]
.chat-composer{
    margin:
        0
        0
        var(
            --ff-admin-chat-bottom-gap,
            16px
        )
        0!important;
}


/*
 * Keep current correct visualViewport layout.
 * Only bottom breathing room changes.
 */

body.ff-admin-thread-viewport
.shell[data-shell="admin"][data-route="a-thread"]
.content.no-dock{
    padding-bottom:
        max(
            2px,
            env(
                safe-area-inset-bottom,
                0px
            )
        )!important;
}


/* ==========================================================
   DARK
   ========================================================== */

html[data-theme="dark"]
.shell[data-shell="admin"][data-route="a-client"]
.cw-fold-summary::after,

html[data-theme="dark"]
.shell[data-shell="admin"]
.role-preview-switch::after{
    color:var(--text)!important;
}


/* ==========================================================
   FF_ADMIN_CLIENTS_ROLE_CHEVRON_DEDUP=0.1.7.5.5
   ========================================================== */

/*
 * Старый route-specific selector из 0.1.7.5.3
 * имеет большую specificity, чем глобальный hide из 0.1.7.5.4.
 *
 * Поэтому именно здесь принудительно гасим legacy <i>.
 * Единая стрелка остаётся через .role-preview-switch::after.
 */

.shell[data-shell="admin"][data-route="a-clients"]
.role-preview-switch
> i{
    display:none!important;

    width:0!important;
    height:0!important;

    flex:0 0 0!important;

    margin:0!important;
    padding:0!important;

    border:0!important;

    overflow:hidden!important;

    font-size:0!important;
    line-height:0!important;

    opacity:0!important;

    transform:none!important;
}


.shell[data-shell="admin"][data-route="a-clients"]
.role-preview-switch
> i::before,

.shell[data-shell="admin"][data-route="a-clients"]
.role-preview-switch
> i::after{
    content:none!important;
    display:none!important;
}


/*
 * Оставляем ровно одну новую стрелку из 0.1.7.5.4.
 */

.shell[data-shell="admin"][data-route="a-clients"]
.role-preview-switch::after{
    display:block!important;
}


/* ==========================================================
   FF_ADMIN_OVERVIEW_ROLE_CHEVRON_DEDUP=0.1.7.5.6
   ADMIN OVERVIEW ONLY
   ========================================================== */

/*
 * Overview still has an old direct-child arrow.
 * Hide it completely and keep only the global
 * .role-preview-switch::after chevron.
 */

.shell[data-shell="admin"][data-route="a-home"]
.role-preview-switch
> i{
    display:none!important;

    width:0!important;
    height:0!important;

    flex:0 0 0!important;

    margin:0!important;
    padding:0!important;

    overflow:hidden!important;

    border:0!important;

    font-size:0!important;
    line-height:0!important;

    opacity:0!important;

    transform:none!important;
}

.shell[data-shell="admin"][data-route="a-home"]
.role-preview-switch
> i::before,

.shell[data-shell="admin"][data-route="a-home"]
.role-preview-switch
> i::after{
    content:none!important;
    display:none!important;
}

/* keep exactly one global arrow */

.shell[data-shell="admin"][data-route="a-home"]
.role-preview-switch::after{
    display:block!important;
}


/* ==========================================================
   FF_ADMIN_ROLE_PILL_FINAL=0.1.7.5.7

   One physical chevron implementation for every admin route.
   ========================================================== */


/*
 * 1. Completely remove legacy glyph.
 */

.shell[data-shell="admin"]
.role-preview-switch
> i{
    display:none!important;
    visibility:hidden!important;

    width:0!important;
    height:0!important;

    min-width:0!important;
    min-height:0!important;

    flex:0 0 0!important;

    margin:0!important;
    padding:0!important;

    border:0!important;

    overflow:hidden!important;

    font-size:0!important;
    line-height:0!important;

    opacity:0!important;

    transform:none!important;
}


.shell[data-shell="admin"]
.role-preview-switch
> i::before,

.shell[data-shell="admin"]
.role-preview-switch
> i::after{
    content:none!important;
    display:none!important;
}


/*
 * 2. Kill every old button-level pseudo chevron.
 */

.shell[data-shell="admin"]
.role-preview-switch::before,

.shell[data-shell="admin"]
.role-preview-switch::after{
    content:none!important;
    display:none!important;
}


/*
 * 3. The label owns the ONLY chevron.
 */

.shell[data-shell="admin"]
.role-preview-switch
> span{
    display:inline-flex!important;

    align-items:center!important;

    gap:8px!important;
}


.shell[data-shell="admin"]
.role-preview-switch
> span::before{
    content:none!important;
    display:none!important;
}


.shell[data-shell="admin"]
.role-preview-switch
> span::after{
    content:""!important;

    display:block!important;

    flex:0 0 6px!important;

    box-sizing:border-box!important;

    width:6px!important;
    height:6px!important;

    margin:
        -3px
        1px
        0
        1px!important;

    padding:0!important;

    border:0!important;

    border-right:
        1.4px solid
        currentColor!important;

    border-bottom:
        1.4px solid
        currentColor!important;

    background:none!important;

    opacity:.66!important;

    transform:
        rotate(45deg)!important;

    transform-origin:center!important;
}


/*
 * 4. Normalize spacing after removing old arrow nodes.
 */

.shell[data-shell="admin"]
.role-preview-switch{
    display:inline-flex!important;

    align-items:center!important;

    gap:7px!important;
}


/*
 * Dark theme inherits currentColor exactly like light.
 */

html[data-theme="dark"]
.shell[data-shell="admin"]
.role-preview-switch
> span::after{
    color:currentColor!important;
}


/* ==========================================================
   FF_ADMIN_ROLE_PILL_COMPACT=0.1.7.6.3
   ========================================================== */

.shell[data-shell="admin"]
.role-preview-switch{
    width:auto!important;
    min-width:0!important;
    max-width:max-content!important;

    flex:
        0
        0
        auto!important;

    justify-content:center!important;

    padding:
        0
        18px!important;

    white-space:nowrap!important;
}


.shell[data-shell="admin"]
.role-preview-switch
> span{
    width:auto!important;
    min-width:0!important;
    flex:0 0 auto!important;
}


/*
 * Slightly tighter compact/nested variant.
 */

.shell[data-shell="admin"]
.role-preview-switch.compact{
    padding:
        0
        16px!important;
}



/* ============================================================
   FF_ADMIN_CONTENT_PACKAGE_1=0.1.7.6.3

   Admin Content layout normalization only.
   Business logic / backend / database untouched.
   ============================================================ */


/* ADMIN CONTENT ROOT */

html.ff-tg-native
.shell[data-shell="admin"][data-route="a-content"]
.tg-contextbar ~ .content {
    padding-top: 12px !important;
}

html.ff-tg-native
.shell[data-shell="admin"][data-route="a-content"]
.page-head {
    margin-top: 0 !important;
}


/* CONTENT SHEETS */

html.ff-tg-native
body:has(
    .shell[data-shell="admin"][data-route="a-content"]
)
.sheet-backdrop {
    box-sizing: border-box !important;

    padding:
        var(--ff-tg-content-top)
        0
        0 !important;

    align-items: flex-end !important;

    overflow: hidden !important;
}


html.ff-tg-native
body:has(
    .shell[data-shell="admin"][data-route="a-content"]
)
.sheet {
    box-sizing: border-box !important;

    width: min(100%, 680px) !important;
    max-width: 680px !important;

    max-height:
        calc(
            100dvh
            - var(--ff-tg-content-top)
            - 6px
        ) !important;

    margin: 0 auto !important;

    border-radius:
        26px
        26px
        0
        0 !important;

    padding-top: 14px !important;

    padding-bottom:
        calc(
            max(
                var(--safe-bottom),
                env(
                    safe-area-inset-bottom,
                    0px
                )
            )
            + 18px
        ) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
}


html.ff-tg-native
body:has(
    .shell[data-shell="admin"][data-route="a-content"]
)
.sheet
form,

html.ff-tg-native
body:has(
    .shell[data-shell="admin"][data-route="a-content"]
)
.sheet
.form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


html.ff-tg-native
body:has(
    .shell[data-shell="admin"][data-route="a-content"]
)
.sheet
input,

html.ff-tg-native
body:has(
    .shell[data-shell="admin"][data-route="a-content"]
)
.sheet
textarea,

html.ff-tg-native
body:has(
    .shell[data-shell="admin"][data-route="a-content"]
)
.sheet
select,

html.ff-tg-native
body:has(
    .shell[data-shell="admin"][data-route="a-content"]
)
.sheet
.picker-button {
    max-width: 100% !important;
    box-sizing: border-box !important;
}


html.ff-tg-native
body:has(
    .shell[data-shell="admin"][data-route="a-content"]
)
.sheet
h1,

html.ff-tg-native
body:has(
    .shell[data-shell="admin"][data-route="a-content"]
)
.sheet
h2,

html.ff-tg-native
body:has(
    .shell[data-shell="admin"][data-route="a-content"]
)
.sheet
h3,

html.ff-tg-native
body:has(
    .shell[data-shell="admin"][data-route="a-content"]
)
.sheet
b,

html.ff-tg-native
body:has(
    .shell[data-shell="admin"][data-route="a-content"]
)
.sheet
span,

html.ff-tg-native
body:has(
    .shell[data-shell="admin"][data-route="a-content"]
)
.sheet
p {
    overflow-wrap: anywhere;
}


@media (max-width: 520px) {

    html.ff-tg-native
    body:has(
        .shell[data-shell="admin"][data-route="a-content"]
    )
    .sheet {
        width: 100% !important;
        max-width: none !important;
    }

}


/* FF_ADMIN_CONTENT_PACKAGE_1_END=0.1.7.6.3 */

/* ============================================================
   FF_ADMIN_CONTENT_ROOT_V2=0.1.7.6.3
   Clean root renderer. No post-render DOM polish.
   ============================================================ */

.shell[data-shell="admin"][data-route="a-content"] .admin-content-root-v2{display:flex;flex-direction:column;gap:0;width:100%;}
.shell[data-shell="admin"][data-route="a-content"] .admin-content-root-head{margin:0 0 14px;}
.shell[data-shell="admin"][data-route="a-content"] .admin-content-root-head h1{margin:0;font-size:34px;line-height:1.02;font-weight:850;letter-spacing:-.04em;}
.shell[data-shell="admin"][data-route="a-content"] .admin-content-root-head p{margin:7px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.35;}
.shell[data-shell="admin"][data-route="a-content"] .admin-content-root-actions{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:10px;margin:0 0 12px;}
.shell[data-shell="admin"][data-route="a-content"] .admin-content-root-actions.single{grid-template-columns:1fr;}
.shell[data-shell="admin"][data-route="a-content"] .admin-content-root-actions .btn{width:100%;min-height:48px;margin:0;border-radius:15px;padding:0 12px;font-size:14px;font-weight:720;white-space:nowrap;}
.shell[data-shell="admin"][data-route="a-content"] .admin-content-primary{border:0;color:#fff;background:linear-gradient(135deg,#09976e,#077d5d);box-shadow:0 8px 22px rgba(7,125,93,.12);}
.shell[data-shell="admin"][data-route="a-content"] .admin-content-review{box-shadow:none;}
.shell[data-shell="admin"][data-route="a-content"] .admin-content-root-list{display:flex;flex-direction:column;gap:9px;}
.shell[data-shell="admin"][data-route="a-content"] details.admin-content-root-card{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:17px;background:var(--surface);box-shadow:none;}
.shell[data-shell="admin"][data-route="a-content"] details.admin-content-root-card>summary{position:relative;display:flex;align-items:center;gap:10px;min-height:68px;padding:12px 44px 12px 16px;list-style:none;cursor:pointer;}
.shell[data-shell="admin"][data-route="a-content"] details.admin-content-root-card>summary::-webkit-details-marker{display:none;}
.shell[data-shell="admin"][data-route="a-content"] details.admin-content-root-card>summary::marker{content:'';}
.shell[data-shell="admin"][data-route="a-content"] details.admin-content-root-card>summary::after{content:'';position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;opacity:.48;transform:translateY(-68%) rotate(45deg);transition:transform .15s ease;}
.shell[data-shell="admin"][data-route="a-content"] details.admin-content-root-card[open]>summary::after{transform:translateY(-32%) rotate(225deg);}
.shell[data-shell="admin"][data-route="a-content"] .admin-content-root-card-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px;}
.shell[data-shell="admin"][data-route="a-content"] .admin-content-root-card-copy b{overflow:hidden;color:var(--ink);font-size:16.5px;line-height:1.15;font-weight:780;letter-spacing:-.015em;text-overflow:ellipsis;white-space:nowrap;}
.shell[data-shell="admin"][data-route="a-content"] .admin-content-root-card-copy small{color:var(--ink-2);font-size:12px;line-height:1.25;font-weight:560;}
.shell[data-shell="admin"][data-route="a-content"] .admin-content-root-card-state{flex:none;display:flex;align-items:center;}
.shell[data-shell="admin"][data-route="a-content"] .admin-content-root-card-state .badge{white-space:nowrap;}
.shell[data-shell="admin"][data-route="a-content"] details.admin-content-root-card>.acc-body{border-top:1px solid var(--line);}
html[data-theme="dark"] .shell[data-shell="admin"][data-route="a-content"] details.admin-content-root-card{border-color:rgba(226,241,232,.07);background:rgba(25,30,27,.96);}
html[data-theme="dark"] .shell[data-shell="admin"][data-route="a-content"] details.admin-content-root-card>.acc-body{border-top-color:rgba(226,241,232,.07);}
@media(max-width:430px){
  .shell[data-shell="admin"][data-route="a-content"] .admin-content-root-head h1{font-size:33px;}
  .shell[data-shell="admin"][data-route="a-content"] .admin-content-root-actions{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);}
  .shell[data-shell="admin"][data-route="a-content"] .admin-content-root-actions .btn{font-size:13.5px;padding-inline:10px;}
}