/* =============================================================================
   Anakgym Redesign 2026 — app-integration shell
   -----------------------------------------------------------------------------
   Glues the design-system tokens (design-system.css) onto the real vanilla app:
   global font swap, the new fixed bottom navigation, the quick-add sheet, and
   the layout adjustments needed so existing panels coexist with the new chrome.
   Screen-by-screen reskins layer on top of this.
   ============================================================================= */

/* --- global font: adopt Barlow across the whole app --- */
body.ank,
body.ank #app,
body.ank button,
body.ank input,
body.ank select,
body.ank textarea {
  font-family: var(--ank-font-sans);
}

/* leave room for the fixed bottom nav so content never hides behind it.
   Top gap is removed so the sticky page headers sit flush at the very top
   (no jump when they pin on scroll); each header adds its own
   env(safe-area-inset-top) padding to clear the iOS status bar / notch. */
body.ank #app {
  padding-top: 0 !important;
  padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
}

/* legacy top tabs stay in the DOM (for compatibility) but never render */
#legacyTabs { display: none !important; }

/* ---------------------------------------------------------------------------
   BOTTOM NAV  (fixed, centered within the app's mobile column)
   --------------------------------------------------------------------------- */
.ank-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  z-index: 40;
  /* visual styling (border/bg/padding) comes from design-system.css .ank-nav */
}

.ank-ico {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  display: block;
}
.ank-nav button { position: relative; color: var(--ank-ink); padding: 4px 0; }
.ank-nav button[aria-current="true"] { color: var(--ank-accent); }
.ank-nav button[aria-current="true"] .ank-ico { stroke-width: 1.9; }
/* Track Kalori is reached via the center "+" (which has no dot), so fill the FAB
   when its slot is active — keeps the bottom nav showing a locked position. */
.ank-nav button[aria-current="true"] .ank-fab { background: var(--ank-accent); color: var(--ank-accent-ink); }
/* Slightly larger tap targets for the bottom nav (scoped so other .ank-ico
   icons elsewhere keep their size). */
.ank-nav .ank-ico { width: 25px; height: 25px; }
.ank-nav .ank-fab .ank-ico { width: 22px; height: 22px; }   /* keep + inset in its circle */

.ank-nav-badge {
  position: absolute;
  top: -2px;
  left: calc(50% + 7px);
  background: var(--ank-danger);
  color: #fff;
  border-radius: 999px;
  font-size: 9px; font-weight: 700; line-height: 14px;
  min-width: 14px; padding: 0 4px; text-align: center;
}

/* Small red dot on the Profil nav button when there's an unread DM/notification.
   (DM + bell icons live in the Profil header, so the alert surfaces here.) */
.ank-nav-notif-dot {
  position: absolute;
  top: 0; left: calc(50% + 6px);
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; border: 1.5px solid var(--ank-screen);
}

/* ---------------------------------------------------------------------------
   QUICK-ADD SHEET  (center + button)
   --------------------------------------------------------------------------- */
/* Lock the bottom sheets — quick-add "+" and the Profil "Buka sebagai" gateway —
   to the viewport so they never drift with page scroll and sit above the nav
   (base .ank-scrim is position:absolute / z-index 50 / flush to the bottom, which
   left the Profil sheet un-sticky and tap-through over the nav). */
#ankQuickMenu, #ankProfilSheet { position: fixed; inset: 0; z-index: 60; }
#ankQuickMenu.ank-scrim--bottom,
#ankProfilSheet.ank-scrim--bottom { padding-bottom: calc(92px + env(safe-area-inset-bottom)); align-items: flex-end; }

.ank-quick {
  width: 78%;
  max-width: 360px;
  background: var(--ank-surface);
  border: 1px solid var(--ank-hair);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--ank-shadow-dialog);
}
.ank-quick-head { padding: 13px 18px 11px; border-bottom: 1px solid var(--ank-hair); }
.ank-quick-item {
  width: 100%;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px;
  background: none; border: 0; border-bottom: 1px solid var(--ank-hair);
  cursor: pointer; text-align: left;
}
.ank-quick-item:last-child { border-bottom: 0; }
.ank-quick-item:active { background: var(--ank-soft); }
.ank-quick-ico {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--ank-hair); background: var(--ank-soft);
  display: grid; place-items: center; color: var(--ank-ink);
}
.ank-quick-text { display: flex; flex-direction: column; gap: 1px; }
.ank-quick-text b {
  font-family: var(--ank-font-display); font-size: 18px; font-weight: 600;
  letter-spacing: .02em; color: var(--ank-ink); line-height: 1.1;
}
.ank-quick-text small { font-size: 11.5px; color: var(--ank-sub); }

/* =============================================================================
   FEED RESKIN (redesign 2026)
   Restyles the existing forum-feed DOM to the prototype's flat, editorial feed:
   wordmark header + DM/notif, pill search, hairline-divided posts, outline
   category tags, accent like, unified "Otot terlatih" workout embed.
   Scoped under body.ank so it cleanly overrides the legacy feature styles.
   ============================================================================= */

/* --- feed header bar: wordmark + search + DM/notif on one row --- */
body.ank .ank-feed-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 4px 12px;
  border-bottom: 1px solid var(--ank-hair);   /* thin divider from the feed */
  margin-bottom: 4px;
}
body.ank .ank-feed-header .ank-logo { font-size: 19px; flex: 0 0 auto; }
/* compact, fully-rounded search that blends into the header bar */
body.ank .ank-feed-header .wt-feed-search-box {
  flex: 1 1 auto; min-width: 0;
  padding: 6px 12px; border-radius: 999px;
  background: var(--ank-soft); border: 1px solid transparent; gap: 7px;
}
body.ank .ank-feed-header .wt-feed-search-box:focus-within { border-color: var(--ank-hair); }
body.ank .ank-feed-header .wt-feed-search-box i { font-size: 15px; }
body.ank .ank-feed-header .wt-feed-search-box input { font-size: 12.5px; min-width: 0; }
body.ank .ank-feed-header .ank-headbtn { width: 34px; height: 34px; flex: 0 0 auto; }
body.ank .ank-feed-header-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
body.ank .ank-headbtn {
  position: relative;
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 10px;
  color: var(--ank-ink); cursor: pointer;
}
body.ank .ank-headbtn:active { background: var(--ank-soft); }
body.ank .ank-headbtn-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; box-sizing: border-box;
  padding: 0 4px; display: flex; align-items: center; justify-content: center;
  background: #ef4444; border: 1.5px solid var(--ank-screen);   /* notif red (message + bell) */
  border-radius: 999px; font-size: 9px; font-weight: 700; line-height: 1; color: #fff;
}

/* --- flatten the panel container so the feed sits on the screen --- */
body.ank .wt-forum-panel-card {
  background: none; border: 0; border-radius: 0; margin-bottom: 0; overflow: visible;
}

/* --- search + controls --- */
body.ank .wt-feed-controls {
  display: flex; align-items: center; gap: 10px;
  padding: 0 4px 12px;
}
body.ank .wt-feed-search-box {
  flex: 1;
  background: var(--ank-soft); border: 1px solid var(--ank-hair);
  border-radius: 10px; padding: 9px 12px;
}
body.ank .wt-feed-search-box i { color: var(--ank-sub); }
body.ank .wt-feed-search-box input {
  background: none; border: 0; color: var(--ank-ink);
  font-family: var(--ank-font-sans); font-size: 13px;
}
body.ank .wt-feed-search-box input::placeholder { color: var(--ank-sub); }
body.ank .wt-feed-post-btn {
  flex-shrink: 0;
  background: none; border: 1px solid var(--ank-accent);
  color: var(--ank-accent); border-radius: 10px;
  padding: 9px 14px; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 5px;
}
body.ank .wt-feed-post-btn .ti { font-size: 15px; }

/* --- post card: flat list item divided by hairlines --- */
body.ank #forumFeed .wt-forum-card,
body.ank #forumMyPostsFeed .wt-forum-card,
body.ank #userProfilePostsList .wt-forum-card {
  padding: 16px 4px;
  background: none; border: 0; border-radius: 0;
}
/* Thin hairline between consecutive posts (feed + both profile post lists). */
body.ank #forumFeed .wt-forum-card + .wt-forum-card,
body.ank #forumMyPostsFeed .wt-forum-card + .wt-forum-card,
body.ank #userProfilePostsList .wt-forum-card + .wt-forum-card { border-top: 1px solid var(--ank-hair); }
/* Drop the inline flex gap so the hairline sits flush like the feed. */
body.ank #userProfilePostsList { gap: 0 !important; }

body.ank .wt-forum-card-header { align-items: center; gap: 10px; margin-bottom: 10px; }
body.ank .wt-forum-author { font-size: 13.5px; font-weight: 600; color: var(--ank-ink); }
body.ank .wt-forum-meta { font-size: 11.5px; color: var(--ank-sub); }
body.ank .wt-forum-content {
  font-size: 14px; line-height: 1.6; color: var(--ank-ink); margin: 4px 0 0;
}
/* Breathing room between the caption and a shared photo/gallery — the caption has
   margin-bottom:0, so it used to sit flush against the image. Scoped to the
   caption→photo adjacency, so text-only posts, embeds and the detail modal
   (separate containers, already spaced) are untouched. */
body.ank .wt-forum-content + .wt-post-photo-box,
body.ank .wt-forum-content + .wt-post-gallery {
  margin-top: 12px;
}

/* category tag → outline accent, tiny uppercase */
body.ank .wt-forum-cat-badge {
  font-size: 9px; letter-spacing: .08em; font-weight: 700; text-transform: uppercase;
  color: var(--ank-accent); border: 1px solid var(--ank-accent);
  border-radius: 4px; padding: 3px 6px; background: none;
}

/* Per-post kebab menu (Follow · Block · Report) replacing the category badge. */
body.ank .wt-forum-kebab { color: var(--ank-sub) !important; border-radius: 8px; }
body.ank .wt-forum-kebab .ti { font-size: 18px; }
body.ank .wt-forum-kebab:active { background: var(--ank-soft); }
body.ank .wt-forum-kebab-menu {
  position: absolute; top: 30px; right: 0; z-index: 20; min-width: 150px;
  background: var(--ank-surface); border: 1px solid var(--ank-hair);
  border-radius: var(--ank-r-md, 10px); box-shadow: var(--ank-shadow-dialog);
  overflow: hidden; padding: 4px;
}
body.ank .wt-forum-kebab-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; background: none; border: 0; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--ank-ink); text-align: left;
  border-radius: 7px;
}
body.ank .wt-forum-kebab-menu button:active { background: var(--ank-soft); }
body.ank .wt-forum-kebab-menu button .ti { font-size: 16px; color: var(--ank-sub); }
body.ank .wt-forum-kebab-report { color: var(--ank-danger) !important; }
body.ank .wt-forum-kebab-report .ti { color: var(--ank-danger) !important; }

/* avatar initials → quiet soft circle */
body.ank .wt-forum-avatar-initial {
  background: var(--ank-soft); color: var(--ank-sub);
  font-family: var(--ank-font-display); font-weight: 700;
  border: 1px solid var(--ank-hair);
}

/* --- actions row (like · comment · report) --- */
body.ank .wt-forum-actions { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
/* Profil "Post Saya | Post Tersimpan" toggle */
body.ank .wt-profil-posttabs {
  display: flex; gap: 4px; margin-bottom: 14px;
  background: var(--ank-soft); border: 1px solid var(--ank-hair);
  border-radius: 999px; padding: 4px;
}
body.ank .wt-profil-posttab {
  flex: 1; background: none; border: 0; cursor: pointer; padding: 7px 0;
  font-size: 13px; font-weight: 600; color: var(--ank-sub); border-radius: 999px;
}
body.ank .wt-profil-posttab.is-active {
  background: var(--ank-ink); color: var(--ank-screen);
}

body.ank .wt-forum-comment-btn,
body.ank .wt-forum-like-btn,
body.ank .wt-forum-report-btn,
body.ank .wt-forum-save-btn,
body.ank .wt-forum-share-btn,
body.ank .wt-forum-delete-btn {
  color: var(--ank-sub); font-size: 12px; font-weight: 500; background: none; border: 0;
  cursor: pointer; touch-action: manipulation;   /* reliable tap on iOS */
  display: inline-flex; align-items: center; gap: 4px;
}
body.ank .wt-forum-comment-btn .ti { font-size: 16px; }
body.ank .wt-forum-save-btn .ti { font-size: 17px; }
body.ank .wt-forum-share-btn .ti { font-size: 17px; }

/* Quoted post inside a feed card (a repost) */
body.ank .wt-forum-quote {
  margin-top: 10px; padding: 10px 12px; border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md); background: var(--color-background-secondary);
  cursor: pointer;
}
body.ank .wt-forum-quote-head { display: flex; align-items: center; gap: 7px; }
body.ank .wt-forum-quote-head img,
body.ank .wt-forum-quote-head .wt-forum-avatar-initial { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
body.ank .wt-forum-quote-name { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
body.ank .wt-forum-quote-cat {
  font-size: 10px; color: var(--ank-sub); border: 0.5px solid var(--color-border-tertiary);
  border-radius: 99px; padding: 1px 7px; margin-left: auto; text-transform: capitalize;
}
body.ank .wt-forum-quote-text {
  margin: 6px 0 0; font-size: 13px; color: var(--color-text-secondary); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body.ank .wt-forum-quote-thumb { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; margin-top: 8px; }
body.ank .wt-forum-quote-attach {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  font-size: 11px; color: var(--color-text-info);
}

/* ── Share bottom-sheet (Instagram-style) ─────────────────────────────────── */
body.ank .wt-modal.wt-share-scrim { align-items: flex-end; justify-content: center; padding: 0; }
body.ank .wt-share-sheet {
  width: 100%; max-width: 560px; background: var(--color-background-primary);
  border-radius: 18px 18px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: 88vh; display: flex; flex-direction: column;
  animation: ank-up .22s cubic-bezier(.2,.8,.2,1);
}
body.ank .wt-share-grip {
  width: 36px; height: 4px; border-radius: 99px; background: var(--color-border-secondary);
  margin: 4px auto 8px;
}
body.ank .wt-share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
body.ank .wt-share-head h3 { margin: 0; font-size: 16px; }
body.ank .wt-share-caption, body.ank .wt-share-search {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; font-family: inherit;
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md);
  background: var(--color-background-secondary); color: var(--color-text-primary); margin-bottom: 10px;
}
body.ank .wt-share-caption { resize: none; min-height: 40px; }
body.ank .wt-share-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 4px;
  overflow-y: auto; flex: 1; min-height: 120px; max-height: 42vh; align-content: start; padding: 2px 0;
}
body.ank .wt-share-recip {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px;
  background: none; border: 0; cursor: pointer; color: var(--color-text-primary); min-width: 0;
}
body.ank .wt-share-av { position: relative; display: inline-flex; border-radius: 50%; }
body.ank .wt-share-av img, body.ank .wt-share-av .wt-forum-avatar-initial,
body.ank .wt-share-av .wt-coach-avatar { width: 60px; height: 60px; border-radius: 50%; }
body.ank .wt-share-recip.is-sel .wt-share-av { box-shadow: 0 0 0 2.5px var(--ank-accent); }
body.ank .wt-share-check {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ank-accent); color: #fff; display: none; align-items: center; justify-content: center;
  border: 2px solid var(--color-background-primary); font-size: 12px;
}
body.ank .wt-share-recip.is-sel .wt-share-check { display: flex; }
body.ank .wt-share-rname {
  font-size: 12px; max-width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
body.ank .wt-share-empty { grid-column: 1 / -1; text-align: center; color: var(--ank-sub); font-size: 13px; padding: 1.5rem 0; }
body.ank .wt-share-actions {
  display: flex; gap: 8px; justify-content: space-around; overflow-x: auto;
  border-top: 0.5px solid var(--color-border-tertiary); margin-top: 10px; padding-top: 12px;
}
body.ank .wt-share-act {
  display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0;
  cursor: pointer; color: var(--color-text-secondary); font-size: 11px; flex: 0 0 auto;
}
body.ank .wt-share-act-ic {
  width: 48px; height: 48px; border-radius: 50%; background: var(--color-background-secondary);
  display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--color-text-primary);
}
body.ank .wt-share-act[data-act="repost"] .wt-share-act-ic { background: var(--color-background-info); color: var(--color-text-info); }
body.ank .wt-share-send { margin-top: 12px; background: var(--ank-accent); color: #fff; border: 0; font-weight: 600; }
@keyframes ank-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
body.ank .wt-forum-save-btn.is-saved,
body.ank .wt-forum-save-btn.is-saved .ti { color: var(--ank-accent); }
body.ank .wt-forum-like-btn.active { color: var(--ank-like); }
body.ank .wt-forum-like-btn.active .ti { color: var(--ank-like); }
body.ank .wt-comment-like-btn { color: var(--ank-sub); }
body.ank .wt-comment-like-btn.active,
body.ank .wt-comment-like-btn.active .ti { color: var(--ank-like); }
/* Instagram-style heart "pop" when a like is added (JS adds .wt-heart-pop for one run). */
@keyframes wt-heart-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.45); }
  55%  { transform: scale(0.85); }
  78%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
body.ank .wt-forum-like-btn .ti.wt-heart-pop,
body.ank .wt-comment-like-btn .ti.wt-heart-pop {
  animation: wt-heart-pop 0.42s ease-in-out;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  body.ank .wt-forum-like-btn .ti.wt-heart-pop,
  body.ank .wt-comment-like-btn .ti.wt-heart-pop { animation: none; }
}

/* --- Forum polls (embed_type='poll') --- */
body.ank .wt-poll { margin: 10px 0 2px; display: flex; flex-direction: column; gap: 7px; }
body.ank .wt-poll-opt {
  display: block; width: 100%; text-align: left; font: inherit; font-size: var(--ank-fs-sm);
  padding: 10px 12px; border: 1px solid var(--ank-hair); border-radius: 10px;
  background: var(--ank-surface); color: var(--ank-ink); cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
body.ank .wt-poll-opt:not(.is-result):active { transform: scale(0.99); }
body.ank .wt-poll-opt:not(.is-result):hover  { border-color: var(--ank-accent); }
body.ank .wt-poll-opt.is-result {
  position: relative; overflow: hidden; cursor: default;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
body.ank .wt-poll-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--ank-soft); z-index: 0; transition: width .45s ease;
}
body.ank .wt-poll-opt.is-mine { border-color: var(--ank-accent); }
body.ank .wt-poll-opt.is-mine .wt-poll-bar { background: rgba(111,147,184,0.20); }
body.ank .wt-poll-lbl {
  position: relative; z-index: 1; font-weight: 500; min-width: 0;
  display: inline-flex; align-items: center; gap: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.ank .wt-poll-lbl .ti { color: var(--ank-accent); font-size: 15px; flex-shrink: 0; }
body.ank .wt-poll-pct {
  position: relative; z-index: 1; font-weight: 600; flex-shrink: 0;
  font-variant-numeric: tabular-nums; color: var(--ank-sub);
}
body.ank .wt-poll-meta { font-size: var(--ank-fs-meta); color: var(--ank-sub); margin-top: 1px; }

/* Poll composer — clean IG/Threads style: borderless caption + filled option pills */
/* Caption: drop the generic grey field box (body.ank .wt-modal textarea) so the question
   reads clean & isn't a frame cramped against the modal edges. */
body.ank #createPostModal .wt-ig-caption {
  background: transparent; border: 0; border-radius: 0; padding: 8px 16px 12px;
}
body.ank .wt-poll-edit { display: flex; flex-direction: column; gap: 8px; }
body.ank .wt-poll-edit-row { display: flex; align-items: center; gap: 6px; }
body.ank .wt-poll-opt-input {
  flex: 1; min-width: 0; font: inherit; font-size: var(--ank-fs-body);
  padding: 13px 15px; border: 1px solid transparent; border-radius: 14px;
  background: var(--ank-soft); color: var(--ank-ink); transition: border-color .15s, background .15s;
}
body.ank .wt-poll-opt-input::placeholder { color: var(--ank-sub); }
body.ank .wt-poll-opt-input:focus { border-color: var(--ank-accent); background: var(--ank-surface); outline: none; }
body.ank .wt-poll-opt-del {
  flex-shrink: 0; width: 34px; height: 34px; border: 0; background: none;
  color: var(--ank-sub); cursor: pointer; border-radius: 50%; line-height: 1;
}
body.ank .wt-poll-opt-del:active { background: var(--ank-soft); }
/* "Add option" = dashed full-width slot, like Threads */
body.ank .wt-poll-edit-add {
  width: 100%; text-align: left; font: inherit; font-size: var(--ank-fs-body);
  padding: 13px 15px; margin-top: 8px; border: 1px dashed var(--ank-fill); border-radius: 14px;
  background: none; color: var(--ank-sub); cursor: pointer;
}
body.ank .wt-poll-edit-add:active { background: var(--ank-soft); }
/* Duration on its own row, divided from the options */
body.ank .wt-poll-edit-dur {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--ank-hair);
  font-size: var(--ank-fs-sm); font-weight: 500; color: var(--ank-ink);
}
body.ank .wt-poll-edit-dur select {
  font: inherit; font-size: var(--ank-fs-sm); padding: 7px 12px; border: 1px solid var(--ank-hair);
  border-radius: 10px; background: var(--ank-surface); color: var(--ank-ink);
}
body.ank .wt-poll-edit-hint { margin: 8px 0 0; font-size: var(--ank-fs-meta); color: var(--ank-sub); }
body.ank #createPostPollBtn.is-active,
body.ank #createPostPollBtn.is-active .ti { color: var(--ank-accent); }

/* Other user's profile = full-screen modal: lock its top bar below the iOS
   status bar / notch (it was flush at top:0, 'terlalu mepet atas'). */
body.ank #userProfileModal .wt-modal-header {
  padding-top: calc(4px + env(safe-area-inset-top)) !important;
}

/* The full-screen user-profile modal (later in DOM) shares z-index:1000 with
   the upgrade / ToS gate modals, so liking a post there opened those gates
   BEHIND it and the like looked dead. Lift the gates above it. */
body.ank #upgradeModal,
body.ank #tosModal,
body.ank #forumTosModal { z-index: 1400; }

/* --- workout embed: unified "Otot terlatih" soft card --- */
body.ank .wt-embed-chip {
  background: var(--ank-soft); border: 1px solid var(--ank-hair);
  border-radius: 11px; padding: 11px 13px; margin-top: 11px;
  display: flex; align-items: center; gap: 8px;
}
body.ank .wt-embed-chip:has(+ .wt-embed-recap) {
  border-bottom: 0; border-radius: 11px 11px 0 0; margin-bottom: 0;
}
body.ank .wt-embed-chip-icon { color: var(--ank-accent); }
body.ank .wt-embed-chip-label { font-size: 12.5px; font-weight: 600; color: var(--ank-ink); }
body.ank .wt-embed-chip-meta { font-size: 11px; color: var(--ank-sub); }
body.ank .wt-embed-chip-chevron { color: var(--ank-sub); margin-left: auto; }

body.ank .wt-embed-recap {
  background: var(--ank-soft); border: 1px solid var(--ank-hair); border-top: 0;
  border-radius: 0 0 11px 11px; padding: 4px 13px 12px; margin-top: 0;
}
body.ank .wt-embed-recap-title {
  font-size: var(--ank-fs-kicker); letter-spacing: var(--ank-ls-kicker);
  text-transform: uppercase; color: var(--ank-sub); font-weight: 600; margin: 8px 0 9px;
}
body.ank .wt-embed-recap-row { display: flex; align-items: center; gap: 9px; margin: 7px 0; }
body.ank .wt-embed-recap-name { font-size: 10px; color: var(--ank-sub); width: 52px; flex: 0 0 auto; }
body.ank .wt-embed-recap-track {
  flex: 1; height: 5px; border-radius: 3px; background: var(--ank-fill); overflow: hidden;
}
body.ank .wt-embed-recap-fill { display: block; height: 100%; background: var(--ank-accent); border-radius: 3px; }
body.ank .wt-embed-recap-pct { font-size: 11px; font-weight: 700; color: var(--ank-ink); font-family: var(--ank-font-display); }

/* "new posts" indicator chip, if present */
body.ank .wt-forum-new-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 4px 6px;
  color: var(--ank-accent); font-size: 11.5px; font-weight: 600;
}

/* legacy Feed|Profil toggle is superseded by the bottom nav — force-hide it
   (its .wt-forum-topbar display:flex otherwise overrides the [hidden] attr) */
body.ank .wt-forum-topbar { display: none !important; }

/* =============================================================================
   FEED — POST DETAIL + COMMENTS + SEARCH (redesign 2026)
   Scoped to the post-detail modal and the feed search results so other modals
   are untouched until their own reskin pass.
   ============================================================================= */

/* --- post detail modal chrome --- */
body.ank #postDetailModal { background: var(--ank-scrim); }
body.ank #postDetailModal .wt-modal-inner {
  background: var(--ank-surface);
  border: 1px solid var(--ank-hair);
  border-radius: var(--ank-r-lg);
  box-shadow: var(--ank-shadow-dialog);
}
body.ank #postDetailModal .wt-modal-header { margin-bottom: 14px; }
body.ank #postDetailModal .wt-modal-header h2 {
  font-family: var(--ank-font-display); text-transform: uppercase;
  letter-spacing: var(--ank-ls-kicker); font-size: 13px; font-weight: 600; color: var(--ank-sub);
}
body.ank #postDetailModal .wt-btn-icon { color: var(--ank-ink); }

body.ank #postDetailAuthor .wt-forum-author { font-size: 13.5px; }
body.ank #postDetailAuthor .wt-forum-meta { font-size: 11.5px; }
body.ank #postDetailContent { font-size: 14px; line-height: 1.6; color: var(--ank-ink); }

/* reactions / actions divider row */
body.ank #postDetailModal #postDetailReactions .wt-forum-comment-btn,
body.ank #postDetailModal #postDetailReactions .wt-forum-like-btn,
body.ank #postDetailModal #postDetailReactions .wt-forum-vote-btn { color: var(--ank-sub); }
body.ank #postDetailModal #postDetailReactions .wt-forum-like-btn.active,
body.ank #postDetailModal #postDetailReactions .wt-forum-like-btn.active .ti { color: var(--ank-like); }

/* "Komentar" header → kicker */
body.ank #postDetailCommentsHeader {
  font-family: var(--ank-font-sans); font-size: var(--ank-fs-kicker);
  letter-spacing: var(--ank-ls-kicker); text-transform: uppercase;
  font-weight: 600; color: var(--ank-sub);
}

/* --- comment rows --- */
body.ank #postDetailCommentsList .wt-forum-comment-row {
  padding: 12px 0; border-bottom: 1px solid var(--ank-hair); gap: 10px;
}
body.ank #postDetailCommentsList .wt-forum-comment-row:last-child { border-bottom: 0; }
body.ank #postDetailCommentsList .wt-forum-author { color: var(--ank-ink); }
body.ank #postDetailCommentsList .wt-forum-meta { color: var(--ank-sub); }
body.ank .wt-forum-reply-btn {
  margin-top: 7px; padding: 0; background: none; border: 0;
  font-size: 10.5px; font-weight: 600; color: var(--ank-sub); cursor: pointer;
}
/* mentions render in the accent hue */
body.ank .wt-mention { color: var(--ank-mention); font-weight: 600; }

/* --- comment composer --- */
/* Match the "Buat Post" caption field: clean & borderless, not a boxed input.
   (Wins over the generic `body.ank .wt-modal textarea` box via the 2 IDs.) */
body.ank #postDetailModal #postDetailCommentInput {
  background: transparent; border: 0; border-radius: 0;
  padding: 6px 2px; color: var(--ank-ink); font-family: var(--ank-font-sans);
  font-size: var(--ank-fs-body); line-height: 1.5;
}
body.ank #postDetailModal #postDetailCommentInput:focus {
  border: 0; outline: none; box-shadow: none;
}
body.ank #postDetailModal #postDetailCommentInput::placeholder { color: var(--ank-sub); }
body.ank #postDetailCommentSubmit {
  background: var(--ank-accent) !important; color: var(--ank-accent-ink) !important;
  border: 0 !important; border-radius: var(--ank-r-sm); font-weight: 600;
}
body.ank #commentReplyIndicator {
  background: var(--ank-soft); border: 1px solid var(--ank-hair);
  border-radius: var(--ank-r-sm); color: var(--ank-sub);
}

/* --- feed search results --- */
body.ank #forumSearchResults .wt-search-section + .wt-search-section { border-top: 1px solid var(--ank-hair); }
body.ank #forumSearchResults .wt-search-section-title {
  font-size: var(--ank-fs-kicker); letter-spacing: var(--ank-ls-kicker);
  text-transform: uppercase; font-weight: 600; color: var(--ank-sub);
  padding: 14px 4px 6px;
}
body.ank #forumSearchResults .wt-search-person {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left; padding: 11px 4px;
  background: none; border: 0; border-top: 1px solid var(--ank-hair); cursor: pointer;
}
body.ank #forumSearchResults .wt-search-section-title + .wt-search-person { border-top: 0; }
body.ank #forumSearchResults .wt-search-person:active { background: var(--ank-soft); }
body.ank #forumSearchResults .wt-search-person-name { font-size: 13px; font-weight: 600; color: var(--ank-ink); }
body.ank #forumSearchResults .wt-search-person-sub { font-weight: 400; color: var(--ank-sub); }

/* when the search box is focused/active, give it the accent ring like the proto */
body.ank .wt-feed-search-box:focus-within { border-color: var(--ank-accent); }

/* --- full workout embed card (post detail / embed view): drop the legacy blue
       tint for the neutral soft surface; keep the recap as a plain divided
       section (not a nested soft box like the compact feed embed). --- */
body.ank .wt-embed-card {
  background: var(--ank-soft);
  border: 1px solid var(--ank-hair);
  border-radius: var(--ank-r-md);
}
body.ank .wt-embed-card .wt-embed-recap {
  background: none; border: 0; border-top: 1px solid var(--ank-hair);
  border-radius: 0; padding: 10px 0 0; margin-top: 12px;
}
body.ank .wt-embed-title { color: var(--ank-ink); }
body.ank .wt-embed-head .ti { color: var(--ank-accent); }
/* AI badge → accent fill like the prototype */
body.ank .wt-badge-ai { background: var(--ank-accent); color: #fff; }

/* =============================================================================
   PROFIL RESKIN (redesign 2026) — IG-style hero + TDEE card + records + posts
   ============================================================================= */

/* --- top bar (PROFIL kicker + DM + menu) --- */
body.ank .ank-profil-topbar {
  display: flex; align-items: center; gap: 12px; padding: 18px 4px 8px;
}
body.ank .ank-profil-topbar .ank-kicker { font-size: var(--ank-fs-kicker); }
body.ank .ank-profil-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }

/* --- hero --- */
body.ank .ank-profil-hero { padding: 4px 4px 0; }

/* top row: avatar (left) + inline stats (right) */
body.ank .ank-profil-top { display: flex; align-items: center; gap: 16px; }
body.ank .ank-profil-avatar-wrap { width: 72px; height: 72px; flex: 0 0 auto; position: relative; }
body.ank .wt-profile-hero-avatar {
  background: var(--ank-soft); color: var(--ank-sub);
  font-family: var(--ank-font-display); font-weight: 700; font-size: 24px;
  border: 1px solid var(--ank-hair); box-shadow: none;
}
body.ank .ank-profil-top .wt-profile-stats {
  flex: 1; min-width: 0; display: flex; margin: 0; padding: 0; border: 0; background: none; gap: 0;
}
body.ank .wt-profile-stat { flex: 1; text-align: center; border: 0; padding: 0; }
body.ank .wt-profile-stat strong {
  display: block; font-family: var(--ank-font-display); font-weight: 600;
  font-size: 19px; color: var(--ank-ink); letter-spacing: .02em;
}
body.ank .wt-profile-stat span {
  display: block; font-size: 10px; color: var(--ank-sub); margin-top: 3px; text-transform: none; letter-spacing: 0;
}

/* name + gym: full-width line, left-aligned (flush with the bio & posts) */
body.ank .ank-profil-nameline {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 12px 0 0;
}
body.ank .ank-profil-name {
  font-family: var(--ank-font-display); font-weight: 700; font-size: 21px;
  color: var(--ank-ink); letter-spacing: .01em; line-height: 1.05; margin: 0;
}
body.ank .ank-profil-gym {
  font-size: 12px; color: var(--ank-sub); font-weight: 500;
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
}
body.ank .ank-profil-gym .ti { font-size: 13px; }

/* membership reminder block (above bio) */
body.ank #forumViewProfil #membershipSection:not(:empty) { margin: 10px 0 0; }

/* bio (left-aligned, flush with name) */
body.ank .ank-profil-bio {
  margin: 8px 0 0; font-size: 13px; color: var(--ank-sub);
  line-height: 1.5; white-space: pre-wrap;
}
body.ank .ank-profil-actions { display: flex; gap: 8px; margin-top: 13px; }
body.ank .ank-profil-edit {
  flex: 1; padding: 10px 0; background: transparent; border: 1px solid var(--ank-hair);
  border-radius: 9px; color: var(--ank-ink);
  font-family: var(--ank-font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; cursor: pointer;
}
body.ank .ank-profil-upgrade { border-color: var(--ank-accent); color: var(--ank-accent); flex: 0 0 auto; padding: 10px 16px; }

/* overflow menu — presented as a BOTTOM SHEET (IG-style). The anchored-dropdown
   form resisted touch scrolling on the owner's iOS device across five fixes
   (height cap, live max-height, body lock, manual driver, touch-action opt-out);
   the fixed-overlay sheet is the exact structural pattern every scrolling modal
   in this app uses, which is proven to touch-scroll on the same device. */
body.ank .ank-profil-menu {
  position: fixed; left: 50%; bottom: 0; top: auto; right: auto;
  transform: translateX(-50%);
  width: min(480px, 100%); box-sizing: border-box;
  z-index: 1300;                       /* above nav/FABs, below confirm (2000) */
  background: var(--ank-surface); border: 1px solid var(--ank-hair); border-bottom: 0;
  border-radius: 16px 16px 0 0; box-shadow: var(--ank-shadow-dialog);
  overflow-x: hidden; overflow-y: auto;
  max-height: 72vh;
  max-height: 72dvh;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  /* Belt & braces: scrolling is ALSO driven manually (forum.js touch driver).
     touch-action:none keeps Safari out of gesture arbitration so every
     touchmove reaches the driver (same recipe as the draggable FABs). */
  touch-action: none;
}
/* touch-action does NOT inherit and the global `* { touch-action:manipulation }`
   re-enables native panning on every child — override the whole subtree so the
   gesture-arbitration opt-out holds no matter which row the finger lands on. */
body.ank .ank-profil-menu * { touch-action: none; }
/* Tiny shell-version footer (filled from the SW cache name on open) — lets the
   owner verify which deployed version the device is actually running. */
body.ank .ank-profil-menu .ank-menu-version {
  text-align: center; padding: 8px 0 2px; font-size: 10px; color: var(--ank-sub);
}
/* The sticky topbar (z:30) is a stacking context, so the menu's z-index only
   counts INSIDE it — without this the bottom nav (z:40) paints above the sheet
   and swallows touches on its lower rows. Raised only while the menu is open
   (class toggled by the forum.js observer) so the topbar never sits above
   scrims/sheets the rest of the time. */
body.ank .ank-profil-topbar.ank-menu-open { z-index: 1300; }
body.ank .ank-profil-menu .wt-forum-menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 13px 16px; background: none; border: 0; border-bottom: 1px solid var(--ank-hair);
  color: var(--ank-ink); font-size: 13.5px; cursor: pointer; text-align: left;
}
body.ank .ank-profil-menu .wt-forum-menu-item:last-child { border-bottom: 0; }
body.ank .ank-profil-menu .wt-forum-menu-item:active { background: var(--ank-soft); }
body.ank .ank-profil-menu .wt-forum-menu-item i { color: var(--ank-sub); font-size: 17px; }
/* Grouped kebab: small section headers + a divider before the destructive group */
body.ank .ank-profil-menu .ank-menu-label {
  padding: 9px 16px 4px; font-size: 10px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--ank-sub); background: var(--ank-soft);
  border-bottom: 1px solid var(--ank-hair);
}
body.ank .ank-profil-menu .ank-menu-sep {
  height: 6px; background: var(--ank-soft); border-bottom: 1px solid var(--ank-hair);
}

/* --- TDEE + macros card --- */
/* TDEE card — Cutting|Maintenance|Bulking chips + KALORI&TDEE / PROTEIN /
   KARBO / LEMAK columns (reference design). */
body.ank .ank-tdee { margin: 16px 0 0; }

/* goal chips */
body.ank .ank-tdee-chips { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
body.ank .ank-tdee-chip {
  padding: 5px 13px; border-radius: var(--ank-r-pill);
  border: 1px solid var(--ank-hair); background: var(--ank-surface);
  color: var(--ank-sub); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer;
}
body.ank .ank-tdee-chip.active { border-color: var(--ank-accent); color: var(--ank-accent); background: var(--ank-soft); }

/* four columns */
/* four evenly-spaced columns, divided by hairlines for tidy alignment */
body.ank .ank-tdee-cols { display: flex; gap: 0; }
body.ank .ank-tdee-col {
  flex: 1 1 0; min-width: 0; padding: 0 10px;
  border-left: 1px solid color-mix(in srgb, var(--ank-accent) 18%, var(--ank-hair));
}
body.ank .ank-tdee-col:first-child { padding-left: 0; border-left: 0; }
body.ank .ank-tdee-col:last-child  { padding-right: 0; }
body.ank .ank-tdee-col-label {
  display: block; font-size: var(--ank-fs-kicker); letter-spacing: var(--ank-ls-kicker);
  text-transform: uppercase; font-weight: 600; color: var(--ank-sub); white-space: nowrap;
}
body.ank .ank-tdee-col-val {
  display: block; font-family: var(--ank-font-display); font-weight: 700; font-size: 19px;
  color: var(--ank-ink); letter-spacing: .01em; margin-top: 6px; white-space: nowrap;
}
body.ank .ank-tdee-col-unit { font-family: var(--ank-font-sans); font-size: 10px; color: var(--ank-sub); font-weight: 500; }

body.ank .ank-tdee-bmr {
  font-size: 11px; color: var(--ank-sub); opacity: .85;
  margin-top: 13px; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ank-accent) 18%, var(--ank-hair));
}

/* --- sections (records, my posts) --- */
body.ank #forumViewProfil .wt-section {
  background: none; border: 0; border-radius: 0; padding: 0; margin: 22px 0 0;
}
body.ank #forumViewProfil .wt-section-title {
  font-family: var(--ank-font-sans); font-size: var(--ank-fs-kicker);
  letter-spacing: var(--ank-ls-kicker); text-transform: uppercase; font-weight: 600;
  color: var(--ank-ink); margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ank-hair);
}

/* personal records → quiet stat tiles */
body.ank #personalRecords .wt-stat-card {
  background: var(--ank-soft); border: 1px solid var(--ank-hair); border-radius: var(--ank-r-md); box-shadow: none;
}
body.ank #personalRecords .wt-stat-label { color: var(--ank-sub); font-size: 11px; }
body.ank #personalRecords .wt-stat-value { color: var(--ank-ink); font-family: var(--ank-font-display); }

/* my posts list rows reuse the feed card styling already themed above */

/* =============================================================================
   EDIT PROFIL MODAL (redesign 2026) — prototype "EditSheet" look
   Scoped to #profileEditModal so other modals stay on legacy styling until
   their own pass.
   ============================================================================= */
body.ank #profileEditModal { background: var(--ank-scrim); }
body.ank #profileEditModal .wt-modal-inner {
  background: var(--ank-surface); border: 1px solid var(--ank-hair);
  border-radius: var(--ank-r-lg); box-shadow: var(--ank-shadow-dialog);
}
body.ank #profileEditModal .wt-modal-header h2 {
  font-family: var(--ank-font-display); text-transform: uppercase;
  letter-spacing: var(--ank-ls-kicker); font-size: 13px; font-weight: 600; color: var(--ank-sub);
}
body.ank #profileEditModal .wt-btn-icon { color: var(--ank-ink); }

/* avatar + camera badge */
body.ank #profileEditModal #profileEditAvatar {
  background: var(--ank-soft); color: var(--ank-sub);
  font-family: var(--ank-font-display); font-weight: 700; border: 1px solid var(--ank-hair); box-shadow: none;
}
body.ank #profileEditModal .wt-profile-hero-cam {
  background: var(--ank-accent); color: #fff; border: 2px solid var(--ank-surface);
}

/* inputs / selects / textareas → soft rounded fields */
body.ank #profileEditModal .wt-input {
  background: var(--ank-soft); border: 1px solid var(--ank-hair);
  border-radius: 9px; color: var(--ank-ink); font-family: var(--ank-font-sans); font-size: 13.5px;
}
body.ank #profileEditModal .wt-input::placeholder { color: var(--ank-sub); }
body.ank #profileEditModal .wt-input:focus { border-color: var(--ank-accent); outline: none; }
body.ank #profileEditModal #epGymResults {
  background: var(--ank-surface); border: 1px solid var(--ank-hair); border-radius: var(--ank-r-sm);
}

/* secondary buttons inside the editor */
body.ank #profileEditModal #profileEditPhotoBtn {
  background: transparent; border: 1px solid var(--ank-hair); border-radius: 9px;
  color: var(--ank-ink); font-weight: 600; font-size: 12.5px;
}
body.ank #profileEditModal #epGymNearby { color: var(--ank-accent) !important; }

/* activity-level chips */
body.ank #profileEditModal .wt-chip {
  background: var(--ank-surface); border: 1px solid var(--ank-hair);
  color: var(--ank-sub); border-radius: var(--ank-r-pill); font-size: 13px;
}
body.ank #profileEditModal .wt-chip-active {
  border-color: var(--ank-accent); color: var(--ank-accent); background: var(--ank-soft);
}

/* primary save → accent */
body.ank #profileEditModal #profileSave {
  background: var(--ank-accent) !important; color: var(--ank-accent-ink) !important;
  border: 0 !important; border-radius: var(--ank-r-sm); font-weight: 600;
}

/* =============================================================================
   LEARN RESKIN (redesign 2026) — editorial article list + reader + paywall
   ============================================================================= */

/* --- Learn header bar: title + search pill + category dropdown (sticky) --- */
body.ank .ank-learn-head {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  background: var(--ank-screen);
  margin: 0 -16px 4px; padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--ank-hair);
}
body.ank .ank-learn-head .ank-logo { font-size: 19px; flex: 0 0 auto; }
/* compact, fully-rounded search that blends into the header bar */
body.ank .ank-learn-head .wt-feed-search-box {
  flex: 1 1 auto; min-width: 0;
  padding: 6px 12px; border-radius: 999px;
  background: var(--ank-soft); border: 1px solid transparent; gap: 7px;
}
body.ank .ank-learn-head .wt-feed-search-box:focus-within { border-color: var(--ank-hair); }
body.ank .ank-learn-head .wt-feed-search-box i { font-size: 15px; color: var(--ank-sub); }
body.ank .ank-learn-head .wt-feed-search-box input {
  background: none; border: 0; min-width: 0; font-size: 12.5px; color: var(--ank-ink);
}
body.ank .ank-learn-head .wt-feed-search-box input::placeholder { color: var(--ank-sub); }
body.ank .ank-learn-head #learnFreeCount { flex: 0 0 auto; font-size: var(--ank-fs-kicker); }

/* category dropdown → compact soft pill */
body.ank #tab-learn .wt-learn-cat {
  flex: 0 0 auto; max-width: 38%;
  background: var(--ank-soft); border: 1px solid var(--ank-hair);
  border-radius: 999px; color: var(--ank-ink); font-family: var(--ank-font-sans);
  font-size: 12.5px; min-height: 34px; padding: 0 10px;
}

/* --- article list → flat, hairline-divided rows --- */
body.ank #learnContent { gap: 0 !important; border-top: 1px solid var(--ank-hair); }
body.ank #learnContent .wt-article-card {
  background: none; border: 0; border-bottom: 1px solid var(--ank-hair);
  border-radius: 0; padding: 15px 4px;
}
/* category tag → accent kicker (drop the colored pill) */
body.ank #learnContent .wt-cat-tag,
body.ank #articleContent .wt-cat-tag {
  display: inline-block; background: none !important; padding: 0; margin-bottom: 0;
  color: var(--ank-accent) !important; font-family: var(--ank-font-sans);
  font-size: var(--ank-fs-kicker); letter-spacing: var(--ank-ls-kicker);
  text-transform: uppercase; font-weight: 600;
}
body.ank #learnContent .wt-article-card h3 {
  font-size: 14px !important; font-weight: 600; color: var(--ank-ink);
  line-height: 1.35; margin: 6px 0 7px !important; letter-spacing: .01em;
}
body.ank #learnContent .wt-article-card p { color: var(--ank-sub) !important; font-size: 12.5px !important; }
body.ank #learnContent .wt-article-card > div:last-child { color: var(--ank-sub) !important; font-size: 11px !important; }
body.ank #learnContent .wt-article-card > div:last-child span:last-child { color: var(--ank-accent) !important; }

/* --- article reader modal --- */
body.ank #articleModal { background: var(--ank-scrim); }
body.ank #articleModal .wt-modal-inner {
  background: var(--ank-surface); border: 1px solid var(--ank-hair);
  border-radius: var(--ank-r-lg); box-shadow: var(--ank-shadow-dialog);
}
body.ank #articleModal .wt-modal-header h2 {
  font-family: var(--ank-font-display); text-transform: uppercase;
  letter-spacing: var(--ank-ls-kicker); font-size: 13px; font-weight: 600; color: var(--ank-sub);
}
body.ank #articleModal .wt-btn-icon { color: var(--ank-ink); }
body.ank #articleContent h2 {
  font-family: var(--ank-font-display); font-size: 22px; font-weight: 600;
  color: var(--ank-ink); line-height: 1.2; letter-spacing: .01em; margin: 8px 0 12px !important;
}
/* TL;DR block + source links → neutral soft */
body.ank #articleContent > div[style*="background"] { background: var(--ank-soft) !important; border: 1px solid var(--ank-hair); }
body.ank #articleContent a[style*="background"] {
  background: var(--ank-accent) !important; color: #fff !important; border: 0 !important;
}

/* --- paywall modal --- */
body.ank #paywallModal { background: var(--ank-scrim); }
body.ank #paywallModal .wt-modal-inner {
  background: var(--ank-surface); border: 1px solid var(--ank-hair);
  border-radius: var(--ank-r-lg); box-shadow: var(--ank-shadow-dialog); text-align: center;
}
body.ank #paywallModal .wt-modal-header { justify-content: flex-end; margin-bottom: 6px; }
body.ank #paywallModal .wt-modal-header h2 { display: none; }
body.ank #paywallModal .wt-btn-icon { color: var(--ank-ink); }
body.ank #paywallUpgradeBtn {
  background: var(--ank-accent) !important; color: var(--ank-accent-ink) !important;
  border: 0 !important; border-radius: var(--ank-r-sm); font-weight: 600;
}
body.ank #paywallClose2 {
  background: transparent; border: 1px solid var(--ank-hair); color: var(--ank-ink); border-radius: var(--ank-r-sm);
}
body.ank #paywallModal p { color: var(--ank-sub) !important; }

/* =============================================================================
   PROGRESS RESKIN (redesign 2026) — summary (body weight + strength) + timeline
   ============================================================================= */

/* header */
body.ank .ank-prog-head { padding: 18px 4px 12px; }

/* Ringkasan | Riwayat → pill segmented control (dark-fill active, matches the
   coach toggles). Was a rounded-rect with a light active pill. */
body.ank #tab-progress .wt-subtabs {
  gap: 4px; padding: 4px; margin-bottom: 16px;
  background: var(--ank-soft); border: 1px solid var(--ank-hair); border-radius: 999px;
}
body.ank #tab-progress .wt-subtab {
  border-radius: 999px; color: var(--ank-sub); font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
body.ank #tab-progress .wt-subtab.active {
  background: var(--ank-ink); color: var(--ank-surface); box-shadow: none;
}

/* Reusable segmented pill toggle (dark-fill active) — one shared look for the
   app's single-select toggles, matching the coach + Progress controls. */
body.ank .ank-seg { display: flex; gap: 4px; background: var(--ank-soft);
  border: 1px solid var(--ank-hair); border-radius: 999px; padding: 4px; }
body.ank .ank-seg-btn { flex: 1; border: 0; background: none; font: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--ank-sub); padding: 8px 4px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s; }
body.ank .ank-seg-btn.on, body.ank .ank-seg-btn.active {
  background: var(--ank-ink); color: var(--ank-surface); }

/* --- soft cards for body-weight + strength sections --- */
body.ank #progressBodyWeight .wt-section,
body.ank #progressContent .wt-section {
  background: var(--ank-soft); border: 1px solid var(--ank-hair);
  border-radius: 13px; padding: 13px 14px; margin: 0 0 12px;
}
body.ank #progressBodyWeight .wt-section-title,
body.ank #progressContent .wt-section-title {
  font-family: var(--ank-font-sans); font-size: var(--ank-fs-kicker);
  letter-spacing: var(--ank-ls-kicker); text-transform: uppercase; font-weight: 600;
  color: var(--ank-sub); margin: 0;
}

/* body-weight chart adopts the brand accent (SVG reads --color-text-info) */
body.ank #progressBodyWeight { --color-text-info: var(--ank-accent); }
body.ank #progressBodyWeight .wt-recap-settings-btn {
  background: transparent; border: 1px solid var(--ank-hair); color: var(--ank-ink); border-radius: 50%;
}

/* range / view chips (body-weight chart) → ank pills */
body.ank #progressBodyWeight .wt-chip {
  background: transparent; border: 1px solid var(--ank-hair); color: var(--ank-sub);
  border-radius: var(--ank-r-pill); font-size: 11px; font-weight: 600; padding: 4px 11px;
}
body.ank #progressBodyWeight .wt-chip-active {
  background: var(--ank-accent); border-color: var(--ank-accent); color: #fff;
}

/* --- timeline (session history) cards --- */
body.ank #historyContent > div {
  background: var(--ank-soft) !important; border: 1px solid var(--ank-hair) !important;
  border-radius: var(--ank-r-md) !important;
}
body.ank #historyContent > div button {
  background: transparent !important; border: 1px solid var(--ank-hair) !important;
  color: var(--ank-ink) !important; border-radius: var(--ank-r-sm) !important;
}

/* =============================================================================
   WORKOUT RESKIN (redesign 2026)
   The exercise cards / coach / recap are heavily inline-styled with --color-*
   vars, so we remap those vars to the ank palette inside #tab-workout for a
   wholesale reskin, then override the chrome (header, actions, timer, fab).
   ============================================================================= */
body.ank #tab-workout {
  --color-background-primary:   var(--ank-surface);
  --color-background-secondary: var(--ank-soft);
  --color-background-tertiary:  var(--ank-fill);
  --color-background-info:      var(--ank-soft);
  --color-background-success:   color-mix(in srgb, var(--ank-accent) 14%, transparent);
  --color-background-warning:   var(--ank-soft);
  --color-border-tertiary:      var(--ank-hair);
  --color-border-secondary:     var(--ank-hair);
  --color-border-info:          var(--ank-accent);
  --color-border-success:       var(--ank-accent);
  --color-text-primary:         var(--ank-ink);
  --color-text-secondary:       var(--ank-sub);
  --color-text-tertiary:        var(--ank-sub);
  --color-text-info:            var(--ank-accent);
  --color-text-success:         var(--ank-accent);
}

/* header */
body.ank .ank-workout-head { padding: 18px 4px 14px; }

/* coach insight + recap cards → soft surface */
body.ank #coachCard .wt-coach {
  border: 1px solid var(--ank-hair); border-radius: var(--ank-r-md); padding: 14px;
}
body.ank #coachCard .wt-coach-dot-active { background: var(--ank-accent) !important; }
body.ank #weeklyRecap .wt-section,
body.ank #weeklyRecap .wt-recap-card {
  background: var(--ank-soft); border: 1px solid var(--ank-hair); border-radius: 13px;
}

/* exercise / superset cards: card chrome already adopts the remapped vars */
body.ank #exercises .wt-superset-wrap {
  border-color: var(--ank-accent) !important; border-radius: var(--ank-r-md);
}
body.ank #exercises .wt-superset-header { color: var(--ank-accent); }

/* action buttons */
body.ank #addExerciseBtn,
body.ank #useTemplateBtn {
  background: transparent !important; border: 1px solid var(--ank-hair) !important;
  color: var(--ank-ink) !important; border-radius: 10px; font-weight: 600;
}
body.ank #finishBtn {
  background: var(--ank-accent) !important; color: var(--ank-accent-ink) !important;
  border: 0 !important; border-radius: 10px; font-weight: 600;
}
body.ank #finishBtn .ti { color: var(--ank-accent-ink) !important; }

/* coach/bot floating button → accent ring */
body.ank #workoutBotFab {
  background: var(--ank-accent) !important; color: #fff !important; border: 0 !important;
  box-shadow: 0 8px 24px -8px var(--ank-accent);
}
body.ank .wt-fab-menu { background: var(--ank-surface); border: 1px solid var(--ank-hair); border-radius: var(--ank-r-md); }
body.ank .wt-fab-menu-item { color: var(--ank-ink); }

/* --- empty state --- */
body.ank .ank-workout-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px 24px; gap: 0;
}
body.ank .ank-workout-empty-ico {
  width: 76px; height: 76px; border-radius: 50%; border: 1px solid var(--ank-hair);
  display: grid; place-items: center; margin-bottom: 22px;
}
body.ank .ank-workout-empty-ico .ti { font-size: 30px; color: var(--ank-accent); }
body.ank .ank-workout-empty-title {
  font-family: var(--ank-font-display); font-size: 26px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ank-ink);
  margin: 12px 0 8px; line-height: 1.1;
}
body.ank .ank-workout-empty-sub {
  font-size: 12.5px; color: var(--ank-sub); line-height: 1.6; max-width: 230px; margin: 0;
}

/* --- rest timer modal (prototype RestSheet look) --- */
body.ank #timerModal { background: var(--ank-scrim); }
body.ank #timerModal .wt-modal-inner {
  background: var(--ank-surface); border: 1px solid var(--ank-hair);
  border-radius: var(--ank-r-lg); box-shadow: var(--ank-shadow-dialog);
}
body.ank #timerDisplay {
  font-family: var(--ank-font-display); font-weight: 600; letter-spacing: .06em; color: var(--ank-ink);
}
body.ank #timerModal #timerMinus,
body.ank #timerModal #timerPlus,
body.ank #timerModal #timerPause {
  background: transparent; border: 1px solid var(--ank-hair); color: var(--ank-ink); border-radius: var(--ank-r-sm);
}
body.ank #timerModal #timerSkip {
  background: var(--ank-accent) !important; color: var(--ank-accent-ink) !important; border: 0 !important; border-radius: var(--ank-r-sm);
}
body.ank #timerModal .wt-btn-icon { color: var(--ank-ink); }

/* --- minimised floating rest timer --- */
body.ank .wt-mini-timer {
  background: var(--ank-surface); border: 1px solid var(--ank-hair);
  border-radius: var(--ank-r-pill); box-shadow: var(--ank-shadow-dialog);
  /* sit just above the fixed bottom nav instead of overlapping it */
  bottom: calc(92px + env(safe-area-inset-bottom));
}
/* in full-screen workout the nav is hidden → drop the timer back down */
body.ank.ank-workout-fs .wt-mini-timer { bottom: calc(20px + env(safe-area-inset-bottom)); }
/* when the resume-workout bar is showing, lift the rest-timer pill above it */
body.ank.ank-has-workout-mini .wt-mini-timer { bottom: calc(144px + env(safe-area-inset-bottom)); }

/* minimised active-workout resume bar (floats just above the bottom nav) */
body.ank .ank-workout-mini {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(82px + env(safe-area-inset-bottom));
  width: 100%; max-width: 480px; padding: 0 12px; z-index: 41;
}
body.ank .ank-workout-mini-main {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: var(--ank-surface); border: 1px solid var(--ank-hair);
  border-radius: var(--ank-r-md); padding: 11px 14px; cursor: pointer;
  box-shadow: var(--ank-shadow-dialog); color: var(--ank-ink);
}
body.ank .ank-workout-mini-ico {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%;
  background: color-mix(in srgb, var(--ank-accent) 14%, transparent);
  display: grid; place-items: center; color: var(--ank-accent);
}
body.ank .ank-workout-mini-ico .ank-ico { width: 16px; height: 16px; }
body.ank .ank-workout-mini-label { font-size: 13px; font-weight: 600; }
body.ank .ank-workout-mini-time {
  margin-left: auto; font-family: var(--ank-font-display); font-weight: 600;
  font-size: 15px; letter-spacing: .04em; color: var(--ank-ink); font-variant-numeric: tabular-nums;
}
body.ank .ank-workout-mini-chev { width: 18px; height: 18px; color: var(--ank-sub); flex: 0 0 auto; }
body.ank .wt-mini-timer-main { color: var(--ank-accent); }
body.ank .wt-mini-timer-btn { color: var(--ank-ink); }

/* =============================================================================
   GLOBAL MODAL RESKIN (redesign 2026)
   Themes every remaining .wt-modal at once: ank chrome + remap of the legacy
   --color-* vars so inline-styled modal bodies adopt the new palette. The
   earlier per-modal rules (post detail, edit profil, article, paywall, timer)
   are more specific and still win where they add extras.
   ============================================================================= */
body.ank .wt-modal { background: var(--ank-scrim); }
body.ank .wt-modal-inner {
  background: var(--ank-surface);
  border: 1px solid var(--ank-hair);
  border-radius: var(--ank-r-lg);
  box-shadow: var(--ank-shadow-dialog);
  /* remap legacy palette vars for inline-styled content inside the modal */
  --color-background-primary:   var(--ank-surface);
  --color-background-secondary: var(--ank-soft);
  --color-background-tertiary:  var(--ank-fill);
  --color-background-info:      color-mix(in srgb, var(--ank-accent) 12%, transparent);
  --color-border-tertiary:      var(--ank-hair);
  --color-border-secondary:     var(--ank-hair);
  --color-border-info:          var(--ank-accent);
  --color-text-primary:         var(--ank-ink);
  --color-text-secondary:       var(--ank-sub);
  --color-text-tertiary:        var(--ank-sub);
  --color-text-info:            var(--ank-accent);
}
body.ank .wt-modal-header h2 { color: var(--ank-ink); }
body.ank .wt-modal .wt-btn-icon { color: var(--ank-ink); border-color: var(--ank-hair); }

/* form controls inside modals → soft rounded fields */
body.ank .wt-modal .wt-input,
body.ank .wt-modal input[type="text"],
body.ank .wt-modal input[type="search"],
body.ank .wt-modal input[type="number"],
body.ank .wt-modal input[type="date"],
body.ank .wt-modal select,
body.ank .wt-modal textarea {
  background: var(--ank-soft); border: 1px solid var(--ank-hair);
  border-radius: 9px; color: var(--ank-ink); font-family: var(--ank-font-sans);
}
body.ank .wt-modal .wt-input::placeholder,
body.ank .wt-modal textarea::placeholder { color: var(--ank-sub); }
body.ank .wt-modal .wt-input:focus,
body.ank .wt-modal textarea:focus,
body.ank .wt-modal select:focus { border-color: var(--ank-accent); outline: none; }

/* primary CTAs (any modal button that inline-references the info background)
   → solid accent, matching the prototype's primary button */
body.ank .wt-modal button[style*="color-background-info"] {
  background: var(--ank-accent) !important; color: #fff !important;
  border: 0 !important; border-radius: var(--ank-r-sm) !important;
}
body.ank .wt-modal button[style*="color-background-info"] .ti { color: #fff !important; }

/* neutral / secondary modal buttons */
body.ank .wt-modal .wt-fab { border-radius: var(--ank-r-sm); }

/* Native date/time fields (booking modal): render the value left-aligned with a
   consistent height to match the other fields — iOS centers it natively, which
   looked untidy next to the dropdown above. Tapping still opens the picker. */
body.ank #coachBookModal input[type="date"],
body.ank #coachBookModal input[type="time"] {
  -webkit-appearance: none; appearance: none;
  text-align: left; min-height: 40px;
}

/* chips inside modals */
body.ank .wt-modal .wt-chip {
  background: var(--ank-surface); border: 1px solid var(--ank-hair);
  color: var(--ank-sub); border-radius: var(--ank-r-pill);
}
body.ank .wt-modal .wt-chip-active {
  background: var(--ank-soft); border-color: var(--ank-accent); color: var(--ank-accent);
}
/* "Mulai" session button (coach program popup) — filled brand blue so it reads
   as the clear primary action. Must live here (loaded last) to beat the generic
   `.wt-modal .wt-chip` rule above. */
body.ank .wt-modal .prog-start-btn.wt-chip {
  background: var(--ank-accent); border-color: var(--ank-accent);
  color: var(--ank-accent-ink); font-weight: 600;
}

/* list/menu rows used across modals */
body.ank .wt-modal .wt-forum-menu-item { color: var(--ank-ink); }
body.ank .wt-modal .wt-forum-menu-item i { color: var(--ank-sub); }

/* bottom-sheet style modals (notif panel, etc.) keep ank surface */
body.ank #notifPanel .wt-modal-inner,
body.ank #dmInboxModal .wt-modal-inner,
body.ank #dmThreadModal .wt-modal-inner { background: var(--ank-surface); }

/* --- full-screen workout (reached via + → Mulai Workout) --- */
body.ank .ank-workout-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(16px + env(safe-area-inset-top)) 4px 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--ank-hair);
}
body.ank .ank-workout-topbar-center {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
body.ank .ank-workout-topbar-center .ank-kicker { font-size: var(--ank-fs-kicker); }
body.ank .ank-workout-timer {
  font-family: var(--ank-font-display); font-weight: 600; font-size: 18px;
  letter-spacing: .08em; color: var(--ank-ink); font-variant-numeric: tabular-nums;
}
body.ank .ank-workout-finish {
  background: none; border: 0; padding: 6px 4px; cursor: pointer;
  color: var(--ank-accent); font-weight: 600; font-size: 13px; letter-spacing: .02em;
}
/* top-right Batal — discard the in-progress session */
body.ank .ank-workout-cancel {
  flex: 0 0 auto; background: none; border: 0; padding: 6px 4px; cursor: pointer;
  color: var(--ank-danger); font-weight: 600; font-size: 13px; letter-spacing: .02em;
}
body.ank .ank-workout-cancel:active { opacity: .6; }

/* overlay the workout panel + hide the bottom nav while a session is open */
body.ank.ank-workout-fs .ank-nav { display: none; }
body.ank.ank-workout-fs #tab-workout {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: 0; bottom: 0; width: 100%; max-width: 480px; z-index: 45;
  background: var(--ank-screen); overflow-y: auto;
  padding: 0 16px calc(20px + env(safe-area-inset-bottom));
}

/* --- Create Post → bottom sheet with the Bagikan CTA pinned at the bottom --- */
body.ank #createPostModal { align-items: flex-end; }
body.ank #createPostModal .wt-modal-inner {
  width: 100%; max-width: 520px; margin: 0;
  border-radius: var(--ank-r-xl) var(--ank-r-xl) 0 0;
  border-bottom: 0;
  animation: ank-slide-up var(--ank-dur) var(--ank-ease) both;
}
body.ank #createPostModal #createPostSubmit {
  display: block; text-align: center;
  background: var(--ank-accent); color: #fff; border: 0;
  border-radius: var(--ank-r-sm); font-weight: 600; font-size: 14px;
}

/* --- Bottom nav stays visible everywhere, including the workout screen --- */
body.ank.ank-workout-fs .ank-nav { display: flex; }   /* never hide the nav */
body.ank.ank-workout-fs #tab-workout {
  z-index: 38;                                          /* below the nav (z 40) */
  bottom: calc(79px + env(safe-area-inset-bottom));     /* leave room for the nav */
  padding-bottom: 16px;
}
/* rest-timer mini always rides above the (now always-visible) nav */
body.ank.ank-workout-fs .wt-mini-timer { bottom: calc(92px + env(safe-area-inset-bottom)); }

/* =============================================================================
   STICKY HEADER BARS (lock position; only content scrolls underneath)
   ============================================================================= */
/* Feed header bar */
body.ank .ank-feed-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--ank-screen);
  /* full-bleed divider across the mobile column despite the -4px content inset */
  margin: 0 -16px 4px; padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
}
/* Profil header bar */
body.ank .ank-profil-topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--ank-screen);
  margin: 0 -16px; padding: calc(18px + env(safe-area-inset-top)) 16px 10px;
  border-bottom: 1px solid var(--ank-hair);
}
/* Progress header bar */
body.ank .ank-prog-head {
  position: sticky; top: 0; z-index: 30;
  background: var(--ank-screen);
  margin: 0 -16px; padding: calc(18px + env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--ank-hair);
}
/* give the content below each sticky header a little breathing room */
/* Ringkasan/Riwayat toggle: locked as a floating pill just above the bottom
   nav, always reachable while scrolling. Only shows on Progress (descendant of
   #tab-progress, hidden with the tab). bottom = the nav's real height + a small
   gap. Keeps the framed-pill look from the base rule. */
body.ank #tab-progress #progressSubtabs {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(68px + max(18px, env(safe-area-inset-bottom)));
  width: calc(100% - 24px); max-width: 456px; box-sizing: border-box;
  margin: 0; z-index: 39;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
/* room so the last content clears the floating toggle (on top of #app's nav reserve) */
body.ank #tab-progress { padding-bottom: 76px; }
/* Admin tab has no sticky header — clear the status bar / notch directly */
body.ank #tab-admin { padding-top: env(safe-area-inset-top); }
body.ank .ank-profil-hero { padding-top: 12px; }

/* --- Riwayat nesting: no frame around each exercise, just the chevron --- */
body.ank #historyContent .wt-hist-ex,
body.ank #historyContent .wt-hist-ex-head {
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
body.ank #historyContent .wt-hist-ex-head:active { background: var(--ank-soft) !important; }
body.ank #historyContent .wt-hist-chev { transition: transform .15s; }

/* Progres & Profil titles: render the wordmark at the Learn header title size */
body.ank .ank-prog-head .ank-logo,
body.ank .ank-profil-topbar .ank-logo { font-size: 19px; }

/* =============================================================================
   UNIFIED HEADER BARS — identical boundary + title position on every tab.
   One shared shell for every top-of-page header so the bottom hairline and the
   title sit at exactly the same spot when switching tabs (was: top padding 14
   vs 18, bottom 10 vs 12 vs 14, Admin had no border and wasn't sticky). Placed
   after the per-header rules above so it wins on source order. Inner layout
   (Workout's centered timer, Admin's action buttons, the search pills) is left
   to each header's own rules — only the shared shell is unified here.
   ============================================================================= */
body.ank .ank-feed-header,
body.ank .ank-learn-head,
body.ank .ank-prog-head,
body.ank .ank-profil-topbar,
body.ank .ank-workout-topbar,
body.ank .wt-admin-head {
  position: sticky; top: 0; z-index: 30;
  background: var(--ank-screen);
  margin: 0 -16px 4px;
  /* Fixed content row + equal padding → the bottom hairline lands at the SAME Y
     on every tab no matter what the header holds (plain title vs search pill vs
     icon buttons vs the workout timer). display:flex + center makes a lone title
     sit at the same height as tall content, so the divider never jumps. */
  display: flex; align-items: center;
  min-height: calc(64px + env(safe-area-inset-top));
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--ank-hair);
  box-sizing: border-box;
}
/* Normalise the tall inner controls so they fit the content row (the feed/learn
   search pill rendered ~48px from a box-sizing clash; the workout timer stack
   was ~43px) — otherwise they'd push their header's divider lower than the rest. */
body.ank .ank-feed-header .wt-feed-search-box,
body.ank .ank-learn-head .wt-feed-search-box {
  min-height: 0; height: 38px; padding-top: 0; padding-bottom: 0;
  box-sizing: border-box; align-items: center;
}
body.ank .ank-workout-topbar-center { gap: 0; }
body.ank .ank-workout-topbar-center .ank-kicker,
body.ank .ank-workout-timer { line-height: 1.15; }

/* every wordmark title at the same size + vertical rhythm (Workout keeps its
   own centered kicker; it's a session bar, not a wordmark header) */
body.ank .ank-feed-header .ank-logo,
body.ank .ank-learn-head .ank-logo,
body.ank .ank-prog-head .ank-logo,
body.ank .ank-profil-topbar .ank-logo,
body.ank .wt-admin-title {
  font-size: 19px;
  line-height: 1.2;
}
/* Admin head now carries the notch padding itself (like the others), so the
   tab no longer needs its own top inset. */
body.ank #tab-admin { padding-top: 0; }

/* Exercise picker: selected row = soft accent tint with readable text
   (the global --color-background-info remap was too saturated, hiding the name) */
body.ank #exerciseList > button { color: var(--ank-ink); }
body.ank #exerciseList > button[style*="background"] {
  background: color-mix(in srgb, var(--ank-accent) 14%, transparent) !important;
  border-color: var(--ank-accent) !important;
}

/* Shared workout TEMPLATE embed was hard-coded green. Its inline styles use
   var(--color-text-success)/-border-success/-background-success, so remapping
   those vars on the card recolours the border, icon, title and add-button to
   the brand accent without touching the JS. */
body.ank .wt-embed-card--template {
  --color-text-success: var(--ank-accent);
  --color-background-success: color-mix(in srgb, var(--ank-accent) 14%, transparent);
  --color-border-success: var(--ank-accent);
}

/* =============================================================================
   SBD CARD (Profil) — heaviest Squat/Bench/Deadlift, total + bodyweight multiple
   Matches the redesign system (soft surface, Barlow display, hairline dividers).
   ============================================================================= */
body.ank .ank-sbd {
  position: relative;
  display: flex; align-items: stretch; gap: 0;
  background: var(--ank-soft); border: 1px solid var(--ank-hair);
  border-radius: 14px; padding: 16px 14px; overflow: hidden;
}
body.ank .ank-sbd-head {
  flex: 0 0 38%; min-width: 0; padding-right: 16px;
  display: flex; flex-direction: column; justify-content: center;
}
body.ank .ank-sbd-mark {
  font-family: var(--ank-font-display); font-style: italic; font-weight: 700;
  font-size: 52px; line-height: .82; letter-spacing: -.02em; color: var(--ank-ink);
}
body.ank .ank-sbd-total {
  margin-top: 12px; font-size: var(--ank-fs-kicker); letter-spacing: var(--ank-ls-kicker);
  text-transform: uppercase; font-weight: 600; color: var(--ank-sub);
}
/* bodyweight = the prominent stat: big number above its label */
body.ank .ank-sbd-bw {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ank-hair);
  display: flex; flex-direction: column; line-height: 1;
}
body.ank .ank-sbd-bw-num {
  font-family: var(--ank-font-display); font-weight: 700; font-size: 30px;
  color: var(--ank-ink); letter-spacing: .01em;
}
body.ank .ank-sbd-bw-label {
  margin-top: 5px; font-size: var(--ank-fs-kicker); letter-spacing: var(--ank-ls-kicker);
  text-transform: uppercase; font-weight: 600; color: var(--ank-sub);
}

body.ank .ank-sbd-cols { flex: 1 1 0; min-width: 0; display: flex; }
body.ank .ank-sbd-col {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 2px 4px; border-left: 1px solid var(--ank-hair);
}
body.ank .ank-sbd-col-label {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--ank-sub);
}
body.ank .ank-sbd-col-val {
  font-family: var(--ank-font-display); font-weight: 700; font-size: 26px;
  line-height: 1.1; color: var(--ank-ink); margin: 6px 0 2px;
}
body.ank .ank-sbd-col-unit {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--ank-sub);
}

/* --- SBD per-lift video slot (9:16 thumbnail in each column) --- */
body.ank .ank-sbd-col { gap: 0; }
body.ank .ank-sbd-vid {
  position: relative; width: 54px; aspect-ratio: 1; margin: 0 auto 8px;
  border-radius: 50%; overflow: hidden; cursor: pointer; padding: 0;
  border: 1px solid var(--ank-hair); background: var(--ank-fill);
  display: grid; place-items: center;
}
body.ank .ank-sbd-vid-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
body.ank .ank-sbd-vid-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; background: rgba(0,0,0,.22);
}
body.ank .ank-sbd-vid-play svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
body.ank .ank-sbd-vid-add { color: var(--ank-sub); }
body.ank .ank-sbd-vid:active { transform: scale(.96); }
/* Empty (no clip) slot on another user's card — placeholder box, not tappable. */
body.ank .ank-sbd-vid-empty { cursor: default; background: var(--ank-fill); }
body.ank .ank-sbd-vid-empty:active { transform: none; }

/* --- full-screen video player overlay --- */
body.ank .ank-sbd-scrim {
  position: fixed; inset: 0; z-index: 1400; background: rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: ank-fade var(--ank-dur-fast) ease-out both;
}
body.ank .ank-sbd-player {
  position: relative; width: min(92vw, 420px); max-height: 90vh;
  display: flex; flex-direction: column; gap: 10px;
}
body.ank .ank-sbd-player-vid {
  width: 100%; aspect-ratio: 9/16; max-height: 78vh; object-fit: contain;
  background: #000; border-radius: 14px;
}
body.ank .ank-sbd-player-img {
  width: 100%; max-height: 78vh; object-fit: contain;
  background: #000; border-radius: 14px; display: block;
}
body.ank .ank-sbd-player-bar { display: flex; align-items: center; gap: 8px; }
body.ank .ank-sbd-player-title {
  font-family: var(--ank-font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #fff; margin-right: auto;
}
body.ank .ank-sbd-player-replace,
body.ank .ank-sbd-player-del,
body.ank .ank-sbd-player-close {
  background: rgba(255,255,255,.14); color: #fff; border: 0; cursor: pointer;
  border-radius: var(--ank-r-pill); padding: 7px 13px; font-size: 12.5px; font-weight: 600;
}
body.ank .ank-sbd-player-del { color: #ff8b7a; }
body.ank .ank-sbd-player-close { padding: 7px 12px; }

/* --- transcode progress --- */
body.ank .ank-sbd-progress {
  position: fixed; inset: 0; z-index: 1420; background: var(--ank-scrim);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: ank-fade var(--ank-dur-fast) ease-out both;
}
body.ank .ank-sbd-progress-card {
  width: min(86vw, 320px); background: var(--ank-surface); border: 1px solid var(--ank-hair);
  border-radius: var(--ank-r-lg); box-shadow: var(--ank-shadow-dialog);
  padding: 24px 20px; text-align: center;
}
body.ank .ank-sbd-spinner {
  width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid var(--ank-hair); border-top-color: var(--ank-accent);
  animation: ank-spin .8s linear infinite;
}
@keyframes ank-spin { to { transform: rotate(360deg); } }
body.ank .ank-sbd-progress-text { font-size: 14px; font-weight: 600; color: var(--ank-ink); margin: 0 0 12px; }
body.ank .ank-sbd-progress-bar { height: 6px; border-radius: 3px; background: var(--ank-fill); overflow: hidden; }
body.ank .ank-sbd-progress-bar span { display: block; height: 100%; width: 2%; background: var(--ank-accent); border-radius: 3px; transition: width .25s; }
body.ank .ank-sbd-progress-hint { font-size: 11px; color: var(--ank-sub); margin: 10px 0 0; }

/* =============================================================================
   PROFIL CARD POLISH — membership chip, unified SBD + TDEE surfaces
   ============================================================================= */

/* membership reminder: compact pill chip above the bio */
body.ank .ank-member-card {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ank-soft); border: 1px solid var(--ank-hair);
  border-radius: var(--ank-r-pill); padding: 6px 12px; cursor: pointer;
  font-size: 12px; color: var(--ank-sub); max-width: 100%;
}
body.ank .ank-member-card .ti { font-size: 15px; color: var(--ank-sub); flex-shrink: 0; }
body.ank .ank-member-card span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* TDEE + SBD share one quiet accent-tinted surface so they read as a set */
body.ank .ank-tdee,
body.ank .ank-sbd {
  background: color-mix(in srgb, var(--ank-accent) 7%, var(--ank-surface));
  border: 1px solid color-mix(in srgb, var(--ank-accent) 22%, var(--ank-hair));
  border-radius: var(--ank-r-lg);
}
/* Share-SBD button — icon-only chip pinned to the card's top-right corner */
body.ank .ank-sbd-share-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ank-surface); border: 1px solid var(--ank-hair);
  border-radius: 50%; cursor: pointer;
}
body.ank .ank-sbd-share-btn i { font-size: 15px; color: var(--ank-accent); }
body.ank .ank-sbd-share-btn:active { opacity: .6; }

/* --- viewed user's lift proof videos (user-profile modal) --- */
body.ank .ank-sbd-proof { margin: 4px 0 16px; }
body.ank .ank-sbd-proof-title {
  font-size: var(--ank-fs-kicker); letter-spacing: var(--ank-ls-kicker);
  text-transform: uppercase; font-weight: 600; color: var(--ank-sub); margin-bottom: 8px;
}
body.ank .ank-sbd-proof-row { display: flex; gap: 10px; }
body.ank .ank-sbd-proof .ank-sbd-vid {
  position: relative; width: 72px; aspect-ratio: 9/16; flex: 0 0 auto;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--ank-hair);
  background: var(--ank-soft); cursor: pointer; padding: 0;
}
body.ank .ank-sbd-proof .ank-sbd-vid-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; text-align: center; background: linear-gradient(transparent, rgba(0,0,0,.6));
}

/* --- SBD video report reason picker --- */
body.ank .ank-sbd-report {
  width: min(360px, 86vw); background: var(--ank-surface);
  border: 1px solid var(--ank-hair); border-radius: var(--ank-r-lg); padding: 18px;
}
body.ank .ank-sbd-report-title { font-size: 15px; font-weight: 600; color: var(--ank-ink); margin-bottom: 14px; }
body.ank .ank-sbd-report-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
body.ank .ank-sbd-report-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ank-ink); cursor: pointer; }
body.ank .ank-sbd-report-opt input { width: auto; min-width: 16px; }
body.ank .ank-sbd-report-actions { display: flex; gap: 10px; }
body.ank .ank-sbd-report-cancel,
body.ank .ank-sbd-report-submit {
  flex: 1; min-height: 42px; border-radius: var(--ank-r-sm); font-weight: 600; cursor: pointer;
}
body.ank .ank-sbd-report-cancel { background: var(--ank-soft); border: 1px solid var(--ank-hair); color: var(--ank-ink); }
body.ank .ank-sbd-report-submit { background: var(--ank-danger); border: 0; color: #fff; }
body.ank .ank-sbd-player-report { background: none; border: 0; color: #ffd479; font-weight: 600; padding: 7px 10px; cursor: pointer; }
body.ank .ank-tdee { margin: 14px 0 0; padding: 15px 16px; }
body.ank .ank-sbd  { padding: 16px; }

/* SBD section: no card chrome / title (the inner .ank-sbd is the card) */
body.ank #forumViewProfil #personalRecordsSection { margin-top: 14px; }
body.ank #personalRecords { margin: 0; }

/* the inner column dividers go a touch lighter on the tinted surface */
body.ank .ank-sbd-col,
body.ank .ank-tdee-cols { border-color: color-mix(in srgb, var(--ank-accent) 18%, var(--ank-hair)); }

/* ---- HYROX simulation overlay -------------------------------------------- */
#hyroxSimOverlay { font-family: var(--font-sans); }
.hx-wrap { max-width: 560px; margin: 0 auto; padding: 0 16px calc(40px + env(safe-area-inset-bottom)); }
/* Sticky header matching the app's other headers (same height + safe-area top so
   the X + title clear the iPhone status bar / notch instead of bleeding into it). */
.hx-top {
  position: sticky; top: 0; z-index: 5;
  background: var(--color-background-primary);
  display: flex; align-items: center; gap: 10px;
  margin: 0 -16px 8px;
  min-height: calc(64px + env(safe-area-inset-top));
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--ank-hair, var(--color-border-tertiary));
  box-sizing: border-box;
}
.hx-title { font-size: 18px; font-weight: 700; margin: 0; }
.hx-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-hint { font-size: 12px; color: var(--color-text-secondary); margin: 8px 2px 0; line-height: 1.45; }
.hx-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.hx-pick { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 0; }
.hx-pick input { width: 18px; height: 18px; flex-shrink: 0; }
.hx-clockwrap { text-align: center; margin: 18px 0; }
.hx-clock { font-size: 56px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hx-cur { font-size: 14px; color: var(--color-text-secondary); margin-top: 8px; font-weight: 500; }
.hx-target { font-size: 13px; margin-top: 6px; font-weight: 600; color: var(--color-text-secondary); }
.hx-target.hx-target-ok { color: var(--color-text-success); }
.hx-target.hx-target-over { color: var(--color-text-danger); }

/* Coach-sent HYROX assignment card on the Workout page (#hyroxAssignBox) */
.hx-assign-card {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 14px;
  border-radius: var(--border-radius-lg); border: 1px solid var(--color-border-info);
  background: var(--color-background-info);
}
.hx-assign-main { flex: 1; min-width: 0; }
.hx-assign-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.hx-assign-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.hx-assign-start {
  flex-shrink: 0; display: inline-flex; align-items: center; padding: 9px 14px; font-size: 13px; font-weight: 600;
  border-radius: 999px; border: none; cursor: pointer;
  background: var(--color-text-info); color: #fff;
}
.hx-next { margin-top: 4px; font-size: 17px; padding: 16px; }
.hx-actions { display: flex; gap: 8px; justify-content: center; margin: 12px 0 18px; }
.hx-list { display: flex; flex-direction: column; gap: 6px; }
.hx-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-tertiary); }
.hx-item-ic { flex-shrink: 0; width: 20px; text-align: center; color: var(--color-text-tertiary); font-size: 18px; }
.hx-item-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; display: flex; flex-direction: column; }
.hx-item-name small { font-size: 11px; color: var(--color-text-secondary); font-weight: 400; }
.hx-item-split { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; color: var(--color-text-secondary); }
.hx-item.hx-done { opacity: 0.85; }
.hx-item.hx-done .hx-item-ic { color: var(--color-text-success); }
.hx-item.hx-cur { border-color: var(--color-border-info); background: var(--color-background-info); }
.hx-item.hx-cur .hx-item-ic { color: var(--color-text-info); }
.hx-item.hx-todo { opacity: 0.6; }
/* HYROX station icons = uploaded pictograms rendered as a currentColor mask */
.hx-mask { display: inline-block; width: 22px; height: 22px; vertical-align: middle;
  background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain; }

/* HYROX best-total card (Progress tab) */
.prog-hx-best { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.prog-hx-best-row { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: var(--border-radius-md);
  background: var(--color-background-info); }
.prog-hx-best-row span { font-size: 13px; color: var(--color-text-secondary); font-weight: 500; }
.prog-hx-best-row b { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--color-text-info); }