.fd-page, .fd-cmp, .fd-pick, .fd-sheet { --fd-line: color-mix(in oklch, var(--c-rule) 80%, transparent); --fd-soft: var(--c-paper-3); --fd-lime: oklch(86% 0.2 128); --fd-lime-ring: oklch(62% 0.17 140); }

.fd-page { max-width: 620px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.fd-page > .page-head { margin-bottom: 0; }
.view.fd-page > * + * { margin-top: 0; }    
.view.fd-page > .page-head + * { margin-top: var(--space-1); }
.fd-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.fd-lapor { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--fd-line); border-radius: var(--r-pill); background: var(--c-card); color: var(--c-muted); font: inherit; font-size: var(--text-sm); font-weight: 650; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.fd-lapor:hover { color: var(--c-ink); background: var(--fd-soft); }
.fd-lapor.is-on { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.fd-tabs { width: 100%; }
.fd-list { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

 
.fd-new { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: var(--r-lg); background: var(--c-card); border: 1px solid var(--fd-line); box-shadow: 0 1px 2px rgb(15 23 42 / 0.04); }
.fd-new__av .avatar { --sz: 38px; }
.fd-new__in { flex: 1; min-width: 0; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--fd-soft); color: var(--c-muted); font: inherit; font-size: var(--text-md); text-align: left; cursor: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.fd-new__in:hover { background: var(--c-paper-4); }
.fd-new__plus { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); cursor: pointer; box-shadow: 0 8px 18px -10px color-mix(in oklch, var(--c-accent) 85%, black); transition: transform var(--dur-micro) var(--ease-out), filter var(--dur-micro) var(--ease-out); }
.fd-new__plus:hover { filter: brightness(1.06); }
.fd-new__plus:active, .fd-new__in:active { transform: scale(0.95); }
.fd-new__plus .ic { width: 22px; height: 22px; stroke-width: 2.4; }
.fd-new.is-cta { flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-4); }
.fd-new__txt { display: flex; flex-direction: column; gap: 2px; }
.fd-new__txt b { font-size: var(--text-md); color: var(--c-ink); }
.fd-new__txt span { font-size: var(--text-sm); color: var(--c-muted); }

 
.fd-readywrap[hidden] { display: none; }
.fd-ready { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 14px; border: 1px solid var(--fd-line); border-radius: var(--r-lg); background: var(--c-card); color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.fd-ready:hover { background: color-mix(in oklch, var(--c-card) 92%, var(--c-ink)); }
.fd-ready:active { transform: scale(0.985); }
.fd-ready > .ic { flex: none; color: var(--c-faint); }
.fd-ready.is-on { border-color: color-mix(in oklab, var(--fd-lime-ring) 45%, transparent); background: color-mix(in oklab, var(--fd-lime) 10%, var(--c-card)); }
.fd-ready__dot, .fd-siap__dot { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c-paper-4); box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-paper-4) 40%, transparent); }
.fd-ready.is-on .fd-ready__dot, .fd-siap:not(.is-end) .fd-siap__dot { background: var(--fd-lime); box-shadow: 0 0 0 3px color-mix(in oklab, var(--fd-lime-ring) 30%, transparent), inset 0 0 0 1.5px var(--fd-lime-ring); }
.fd-ready.is-on .fd-ready__dot::after, .fd-siap:not(.is-end) .fd-siap__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--fd-lime-ring); opacity: 0; animation: fdPing 2.2s var(--ease-out) infinite; }
@keyframes fdPing { 0% { transform: scale(0.6); opacity: 0.7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
.fd-ready__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fd-ready__t b { font-size: var(--text-md); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-ready__t small { font-size: var(--text-xs); color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-ready__avs { flex: none; display: flex; }
.fd-ready__avs .avatar { --sz: 26px; box-shadow: 0 0 0 2px var(--c-card); }
.fd-ready__avs .avatar + .avatar { margin-left: -8px; }

 
.fd-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 2px; border-radius: var(--r-lg); background: var(--c-card); border: 1px solid var(--fd-line); box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 10px 28px -22px rgb(15 23 42 / 0.28); min-width: 0; animation: fdIn var(--dur-short) var(--ease-out) both; }
:root[data-theme="dark"] .fd-card { box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); }
.fd-card.is-gone { opacity: 0; transform: scale(0.98); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.fd-card.is-hidden { border-style: dashed; }
@keyframes fdIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.fd-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.fd-av { display: block; border-radius: 50%; }
.fd-av .avatar { --sz: 42px; }
.fd-av .comm-logo, .fd-mark { width: 42px; height: 42px; border-radius: 12px; }
.fd-mark { display: grid; place-items: center; background: var(--fd-soft); overflow: hidden; }
.fd-mark img { width: 70%; height: 70%; object-fit: contain; }
.fd-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fd-name { margin: 0; font-size: var(--text-md); line-height: 1.3; color: var(--c-ink); overflow-wrap: anywhere; }
.fd-name a, .fd-name b { font-weight: 650; color: inherit; text-decoration: none; }
 
.fd-verb { font-weight: 400; color: var(--c-muted); }
.fd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; font-size: var(--text-xs); color: var(--c-faint); line-height: 1.4; }
.fd-dot { color: var(--c-faint); }
.fd-comm { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; color: var(--c-muted); font-weight: 600; text-decoration: none; }
.fd-comm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-comm .comm-logo { width: 16px; height: 16px; border-radius: 5px; font-size: 7px; flex: none; }
.fd-ver { display: inline-block; width: 15px; height: 15px; flex: none; }
.fd-rep { color: var(--c-loss); font-weight: 700; }
.fd-menu { width: 40px; height: 40px; margin-right: -8px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--c-faint); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.fd-menu:hover { background: var(--fd-soft); color: var(--c-ink); }

.fd-hid { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: var(--r-md); background: color-mix(in oklab, var(--medal-gold) 20%, var(--c-card)); color: var(--c-ink); font-size: var(--text-sm); line-height: 1.4; }
.fd-hid .ic { flex: none; margin-top: 2px; color: color-mix(in oklab, var(--medal-gold) 60%, var(--c-ink)); }
 
.fd-card.is-folded { padding: 0; gap: 0; }
.fd-card.is-folded > :not(.fd-fold) { display: none; }
.fd-fold {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-radius: inherit;
  background: none; color: var(--c-muted); font: inherit; font-size: var(--text-sm); font-weight: 600; text-align: left; cursor: pointer;
}
.fd-fold > span { flex: 1; min-width: 0; }
.fd-fold .ic { flex: none; color: color-mix(in oklab, var(--medal-gold) 60%, var(--c-ink)); }
.fd-fold .fd-fold__go { color: var(--c-muted); }
.fd-fold:hover { color: var(--c-ink); background: var(--fd-soft); }
.fd-fold:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

.fd-text { font-size: var(--text-md); line-height: 1.5; color: var(--c-ink); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; cursor: pointer; }
.fd-text.is-full, .fd-text.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; cursor: auto; }
.fd-text a { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.fd-more { align-self: flex-start; margin-top: -6px; padding: 2px 0; border: 0; background: none; color: var(--c-muted); font: inherit; font-size: var(--text-sm); font-weight: 650; cursor: pointer; }

 
.fd-media { position: relative; overflow: hidden; border-radius: 16px; background: var(--fd-soft); }
.fd-g { display: grid; gap: 3px; }
.fd-g1 { aspect-ratio: var(--ar, 1.333); }
.fd-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); aspect-ratio: 1.6; }
.fd-g3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 1.33; }
.fd-g3 > :first-child { grid-row: span 2; }
.fd-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 1.15; }
.fd-ph { display: block; position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; background: var(--fd-soft); cursor: zoom-in; overflow: hidden; }
.fd-ph img, .fd-vid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-long) var(--ease-out); }
.fd-ph:active img { transform: scale(0.985); }
.fd-ph.is-err::after, .fd-vid.is-err::after { content: "Foto tidak tersedia"; position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--text-xs); color: var(--c-faint); }
.fd-vid { aspect-ratio: var(--ar, 1.777); background: #000; }
.fd-vid video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.fd-vid video.fd-auto { position: absolute; inset: 0; }    
.fd-vid.is-auto .fd-play { background: none; }
.fd-vid.is-auto .fd-play span { opacity: 0; transform: scale(0.8); }
.fd-bisu { position: absolute; left: 10px; bottom: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(0 0 0 / 0.55); color: #fff; opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease-out); }
.fd-bisu .ic { width: 15px; height: 15px; }
.fd-vid.is-auto .fd-bisu { opacity: 1; }
.fd-play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 0.35)); cursor: pointer; }
.fd-play span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.22); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); color: #fff; box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.6); transition: transform var(--dur-micro) var(--ease-out); }
.fd-play .ic { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; }
.fd-play:hover span { transform: scale(1.06); }
.fd-dur { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: var(--r-pill); background: rgb(0 0 0 / 0.55); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.fd-vid.is-wait .fd-play span { animation: fdPulse 900ms var(--ease-in-out) infinite alternate; }
@keyframes fdPulse { to { transform: scale(0.92); opacity: 0.7; } }

 
.fd-auto { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; min-width: 0; }
.fd-auto__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fd-auto__k { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent-text); }
.fd-auto__t { margin: 0; font-size: var(--text-lg); font-weight: 700; line-height: 1.3; color: var(--c-ink); overflow-wrap: anywhere; text-wrap: balance; }
.fd-auto__s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--c-muted); }

 
.fd-mb { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid color-mix(in oklch, var(--c-accent) 22%, transparent);
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--c-accent) 16%, transparent), transparent 60%), linear-gradient(170deg, color-mix(in oklch, var(--c-accent) 9%, var(--c-card)), var(--c-card)); }
.fd-mb.is-slot { border-color: color-mix(in oklab, var(--c-live) 30%, transparent); background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--c-live) 12%, transparent), transparent 60%), linear-gradient(170deg, color-mix(in oklab, var(--c-live) 6%, var(--c-card)), var(--c-card)); }
.fd-mb__in { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; min-width: 0; }
.fd-mb__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 10px 0 8px; border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-accent-ink); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; }
.fd-mb__badge .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.fd-mb__badge.is-slot, .fd-mb__badge.is-live { background: var(--c-live-solid); color: #fff; }
.fd-mb__badge.is-off { background: var(--c-paper-4); color: var(--c-muted); }
.fd-mb__t { margin: 0; font-size: var(--text-lg); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--c-ink); overflow-wrap: anywhere; text-wrap: balance; }
.fd-mb__ls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fd-mb__ls li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); color: var(--c-ink); line-height: 1.4; overflow-wrap: anywhere; }
.fd-mb__ls .ic { flex: none; margin-top: 2px; color: var(--c-accent-text); }
.fd-mb.is-slot .fd-mb__ls .ic { color: var(--c-live); }
.fd-mb__foot { display: flex; align-items: center; gap: 10px; min-width: 0; padding-top: 8px; border-top: 1px dashed color-mix(in oklch, var(--c-rule) 90%, transparent); }
.fd-mb__avs { flex: none; display: flex; }
.fd-mb__avs:empty { display: none; }
.fd-mb__avs .avatar { --sz: 28px; box-shadow: 0 0 0 2px var(--c-card); }
.fd-mb__avs .avatar + .avatar { margin-left: -9px; }
.fd-mb__n { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--c-muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-mb__left { flex: none; font-size: var(--text-sm); font-weight: 750; color: var(--c-accent-text); font-variant-numeric: tabular-nums; }
.fd-mb.is-slot .fd-mb__left { color: var(--c-live); }

 
.fd-mbact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: -2px; }
.fd-mbact > :only-child { grid-column: 1 / -1; }
.fd-mbact > .btn { justify-content: center; min-height: 44px; padding-inline: 16px; border-radius: var(--r-pill); white-space: nowrap; }
.fd-mbact > .btn span { overflow: hidden; text-overflow: ellipsis; }
.fd-state { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); background: var(--fd-soft); color: var(--c-muted); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; min-width: 0; }
.fd-state span { overflow: hidden; text-overflow: ellipsis; }
.fd-state .ic { flex: none; }
.fd-state.is-ok { background: color-mix(in oklab, var(--c-win) 14%, var(--c-card)); color: var(--c-win); }
.fd-state.is-wait { background: color-mix(in oklab, var(--medal-gold) 22%, var(--c-card)); color: color-mix(in oklab, var(--medal-bronze) 70%, var(--c-ink)); }
.fd-state.is-live { background: color-mix(in oklab, var(--c-live) 14%, var(--c-card)); color: var(--c-live); }

 
.fd-lagi { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid color-mix(in oklab, var(--c-win) 22%, transparent); background: linear-gradient(170deg, color-mix(in oklab, var(--c-win) 10%, var(--c-card)), var(--c-card)); }
.fd-lagi__row { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.fd-lagi__ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--c-win); color: #fff; box-shadow: 0 8px 18px -10px var(--c-win); }
:root[data-theme="dark"] .fd-lagi__ic { color: oklch(20% 0.04 150); }
.fd-lagi__ic .ic { width: 22px; height: 22px; stroke-width: 2.3; }
.fd-lagi .fd-auto__k { color: var(--c-win); }
.fd-lagi .fd-auto__s { gap: 8px; }
.fd-lagi .fd-mb__avs .avatar { --sz: 24px; }

 
.fd-siap { display: flex; align-items: flex-start; gap: 14px; padding: 12px 16px; border-radius: 18px; border: 1px solid color-mix(in oklab, var(--fd-lime-ring) 35%, transparent); background: linear-gradient(170deg, color-mix(in oklab, var(--fd-lime) 12%, var(--c-card)), var(--c-card)); }
.fd-siap .fd-siap__dot { margin-top: 5px; }
.fd-siap .fd-auto__k { color: color-mix(in oklab, var(--fd-lime-ring) 80%, var(--c-ink)); }
.fd-siap__t { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.fd-siap__note { flex-basis: 100%; color: var(--c-ink); overflow-wrap: anywhere; }
.fd-siap .fd-auto__s .ic { width: 14px; height: 14px; }
.fd-siap.is-end { border-color: var(--fd-line); background: var(--fd-soft); }
.fd-siap.is-end .fd-auto__k, .fd-siap.is-end .fd-siap__t { color: var(--c-muted); }

 
.fd-auto--streak { position: relative; overflow: hidden; align-items: flex-start; background: radial-gradient(120% 95% at 0% 0%, color-mix(in oklab, var(--medal-gold) 34%, var(--c-card)), color-mix(in oklab, var(--c-live) 9%, var(--c-card)) 75%); border: 1px solid color-mix(in oklab, var(--medal-bronze) 32%, transparent); }
.fd-auto--streak { gap: 8px; padding: 12px 14px; }
.fd-streak { align-self: stretch; display: flex; align-items: center; gap: 10px; }
.fd-streak__ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(160deg, var(--medal-gold), var(--c-live)); color: #fff; box-shadow: 0 10px 22px -12px var(--c-live); }
.fd-streak__ic .ic { width: 24px; height: 24px; }
.fd-streak__n { font-size: 2rem; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.fd-streak__l { font-size: var(--text-xs); font-weight: 700; line-height: 1.25; color: var(--c-muted); }
.fd-streak__go { margin-left: auto; border-radius: var(--r-pill); }

 
.fd-sb { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; border-radius: 18px; color: #fff; background-color: oklch(25% 0.06 255);
  background-image: radial-gradient(90% 70% at 50% 0%, oklch(48% 0.13 245 / 0.55), transparent 70%), linear-gradient(170deg, oklch(22% 0.05 258), oklch(29% 0.08 252)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); }
.fd-sb::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(140 200 255 / 0.5), transparent); z-index: -1; }
.fd-sb__k { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.1); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(88% 0.1 215); }
.fd-sb__k .ic { width: 13px; height: 13px; color: var(--medal-gold); }
.fd-sb__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.fd-sb__tm { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.fd-sb__tm b { max-width: 100%; font-size: var(--text-sm); font-weight: 650; line-height: 1.3; color: rgb(255 255 255 / 0.78); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fd-sb__tm.is-win b { color: #fff; font-weight: 750; }
.fd-sb__av { display: flex; justify-content: center; }
.fd-sb__av .avatar { --sz: 36px; box-shadow: 0 0 0 2px oklch(25% 0.06 255); }
.fd-sb__av .avatar + .avatar { margin-left: -10px; }
.fd-sb__tm.is-win .fd-sb__av .avatar { box-shadow: 0 0 0 2px var(--medal-gold); }
.fd-sb__w { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--medal-gold) 22%, transparent); color: var(--medal-gold); font-size: 11px; font-weight: 800; }
.fd-sb__w .ic { width: 12px; height: 12px; }
.fd-sb__mid { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 4px; }
.fd-sb__sc { display: flex; align-items: baseline; gap: 6px; font-size: 2.25rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 24px oklch(70% 0.14 230 / 0.55); }
.fd-sb__sc i { font-style: normal; font-weight: 600; color: rgb(255 255 255 / 0.45); transform: translateY(-0.06em); }
.fd-sb__g { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.6); }
.fd-sb__sets { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: var(--text-xs); font-weight: 650; color: rgb(255 255 255 / 0.62); font-variant-numeric: tabular-nums; }
.fd-sb__sets span { color: rgb(255 255 255 / 0.3); }

 
.fd-bar { position: relative; display: flex; align-items: center; gap: 4px; padding: 8px 0 8px; border-top: 1px solid var(--fd-line); margin-top: 2px; }
.fd-rx { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.fd-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--fd-soft); color: var(--c-ink); font: inherit; font-size: var(--text-sm); font-weight: 650; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.fd-pill:hover { background: var(--c-paper-4); }
.fd-pill:active { transform: scale(0.94); }
.fd-pill b { font-weight: 700; font-variant-numeric: tabular-nums; }
.fd-pill__e { font-size: 16px; line-height: 1; }
.fd-pill.is-on { background: var(--c-accent-dim); box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--c-accent) 60%, transparent); color: var(--c-accent-text); }
.fd-gas { padding-left: 10px; }
.fd-gas .ic { width: 18px; height: 18px; flex: none; transition: transform var(--dur-short) var(--ease-out); }
.fd-gas.is-on { background: var(--c-accent); color: var(--c-accent-ink); box-shadow: 0 6px 14px -8px color-mix(in oklch, var(--c-accent) 85%, black); }
.fd-gas.is-on .ic { transform: rotate(-18deg); }
.fd-pill.is-pop .ic, .fd-pill.is-pop .fd-pill__e { animation: fdPop 420ms var(--ease-out); }
.fd-gas.is-pop .ic { animation-name: fdSwing; }
@keyframes fdPop { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } }
@keyframes fdSwing { 0% { transform: rotate(0) scale(1); } 40% { transform: rotate(-38deg) scale(1.3); } 75% { transform: rotate(-10deg) scale(0.95); } 100% { transform: rotate(-18deg) scale(1); } }
.fd-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 40px; height: 40px; padding: 0 8px; border: 0; border-radius: var(--r-pill); background: none; color: var(--c-muted); font: inherit; font-size: var(--text-sm); font-weight: 650; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.fd-ic:hover { background: var(--fd-soft); color: var(--c-ink); }
.fd-ic:active { transform: scale(0.92); }
.fd-ic .ic { width: 21px; height: 21px; }
.fd-ic b { font-weight: 650; font-variant-numeric: tabular-nums; }

 
.fd-pick { position: absolute; left: -4px; right: -4px; bottom: calc(100% - 2px); z-index: 30; display: flex; justify-content: space-between; gap: 0; padding: 5px; border-radius: var(--r-pill); background: var(--c-card); border: 1px solid var(--fd-line);
  box-shadow: 0 18px 40px -14px rgb(15 23 42 / 0.45), 0 2px 8px rgb(15 23 42 / 0.1); transform-origin: 12% 100%; animation: fdPickIn 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.fd-pick.is-out { animation: fdPickOut 140ms var(--ease-in) both; }
@keyframes fdPickIn { from { opacity: 0; transform: translateY(8px) scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes fdPickOut { to { opacity: 0; transform: translateY(6px) scale(0.85); } }
.fd-pick__e { position: relative; flex: 1 1 0; min-width: 0; max-width: 46px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 24px; line-height: 1; cursor: pointer;
  animation: fdEmoIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--i) * 22ms); transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.fd-pick__e small { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: var(--r-pill); background: rgb(15 23 42 / 0.85); color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease-out); }
.fd-pick__e:hover, .fd-pick__e:focus-visible { transform: translateY(-6px) scale(1.3); outline: none; }
.fd-pick__e:hover small, .fd-pick__e:focus-visible small { opacity: 1; }
.fd-pick__e.is-on { background: var(--c-accent-dim); }
@keyframes fdEmoIn { from { opacity: 0; transform: translateY(10px) scale(0.5); } to { opacity: 1; transform: none; } }

 
.fd-cp { display: flex; flex-direction: column; gap: 2px; margin-top: -4px; padding-bottom: 10px; }
.fd-cp__c { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 2px 0; border: 0; background: none; color: var(--c-ink); font: inherit; font-size: var(--text-sm); line-height: 1.4; text-align: left; cursor: pointer; }
.fd-cp__c .avatar { --sz: 24px; flex: none; }
.fd-cp__c > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-cp__c b { font-weight: 650; }
.fd-cp__all { align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--c-muted); font: inherit; font-size: var(--text-sm); font-weight: 650; cursor: pointer; }
.fd-cp__all:hover { color: var(--c-ink); }
.fd-cp__all .ic { width: 14px; height: 14px; }

@media (max-width: 380px) {
  .fd-rx .fd-pill:nth-child(n+3) { display: none; }    
}
@media (max-width: 360px) {
  .fd-pick__e { height: 34px; font-size: 21px; }
  .fd-card { padding-inline: 12px; }
  .fd-pill { padding: 0 10px; }
  .fd-ic { min-width: 36px; padding: 0 6px; }
  .fd-mbact > :nth-child(2) { padding-inline: 14px; }
  .fd-mbact > :nth-child(2) span { display: none; }    
  .fd-sb__sc { font-size: 2rem; }
  .fd-new__av, .fd-ready__avs { display: none; }
  .fd-new__in { padding: 0 14px; }
  .fd-mb__avs .avatar:nth-child(n+4) { display: none; }
}

 
.fd-list .empty > .tut-link, .fd-list .empty > .tut-duo { align-self: center; justify-content: center; }    
.fd-foot { display: grid; place-items: center; min-height: 56px; padding-bottom: var(--space-4); }
.fd-end { margin: 0; font-size: var(--text-sm); color: var(--c-faint); }
.fd-spin { width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--c-rule-2); border-top-color: var(--c-accent); animation: spin 700ms linear infinite; }
.fd-more-btn { min-width: 200px; }

 
.fd-skel { gap: 12px; padding-bottom: 14px; animation: none; }
.fd-skel__av { width: 42px; height: 42px; border-radius: 50%; }
.fd-skel .fd-who { gap: 6px; }
.fd-skel__l { width: 46%; height: 12px; border-radius: 6px; }
.fd-skel__s { width: 28%; height: 10px; border-radius: 6px; }
.fd-skel__b { width: 92%; height: 12px; border-radius: 6px; }
.fd-skel__m { width: 100%; aspect-ratio: 1.6; border-radius: 16px; }

 
.fd-post { padding-bottom: 0; }
.fd-detail { display: flex; flex-direction: column; gap: var(--space-4); }
.fd-cs { display: flex; flex-direction: column; gap: var(--space-3); }
.fd-cs__h { margin: 0 4px; font-size: var(--text-lg); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--c-ink); }
.fd-cs__h span { color: var(--c-faint); font-weight: 600; }
.fd-cs__list { display: flex; flex-direction: column; gap: 14px; }
.fd-cs__load { display: grid; place-items: center; min-height: 120px; }
.fd-cs__empty { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: var(--space-6) var(--space-4); border-radius: var(--r-lg); background: var(--c-card); border: 1px dashed var(--fd-line); color: var(--c-muted); font-size: var(--text-sm); text-align: center; }
.fd-c { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; animation: fdIn var(--dur-short) var(--ease-out) both; }
.fd-c.is-reply { margin-left: 42px; }
.fd-c__av .avatar { --sz: 32px; }
.fd-c.is-reply .fd-c__av .avatar { --sz: 26px; }
.fd-c__main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fd-c__bub { align-self: flex-start; max-width: 100%; display: flex; flex-direction: column; gap: 1px; padding: 8px 12px 9px; border-radius: 18px; border-top-left-radius: 6px; background: var(--c-card); border: 1px solid var(--fd-line); }
.fd-c.is-new .fd-c__bub { animation: fdFlash 1200ms var(--ease-out); }
@keyframes fdFlash { 0%, 30% { background: var(--c-accent-dim); } 100% { background: var(--c-card); } }
.fd-c.is-hidden .fd-c__bub { border-style: dashed; opacity: 0.75; }
.fd-c__nm { font-size: var(--text-sm); font-weight: 650; color: var(--c-ink); text-decoration: none; }
.fd-c__to { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--c-faint); }
.fd-c__to .ic { width: 12px; height: 12px; }
.fd-c__tx { margin: 0; font-size: var(--text-md); line-height: 1.45; color: var(--c-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.fd-c__tx a { color: var(--c-accent-text); }
.fd-c__hid { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: var(--text-xs); color: var(--c-faint); }
.fd-c__meta { display: flex; align-items: center; gap: 4px; padding-left: 10px; font-size: var(--text-xs); color: var(--c-faint); }
.fd-c__meta button { min-height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--c-muted); font: inherit; font-weight: 650; cursor: pointer; }
.fd-c__meta button:hover { background: var(--fd-soft); color: var(--c-ink); }
.fd-c__more { display: grid; place-items: center; width: 32px; padding: 0 !important; }

 
.fd-barwrap { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 6; margin-top: var(--space-2); padding: var(--space-2) 0 var(--space-3); background: linear-gradient(180deg, transparent, var(--c-paper) 30%); }
.fd-barwrap:empty { display: none; }
@media (min-width: 768px) { .fd-barwrap { bottom: 0; } }
.fd-cbar { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 6px 10px; border-radius: 26px; background: var(--c-card); border: 1px solid var(--fd-line); box-shadow: 0 12px 30px -18px rgb(15 23 42 / 0.45); }
.fd-cbar.is-cta { padding: 6px; }
.fd-cbar__row { display: flex; align-items: flex-end; gap: 8px; }
.fd-cbar__row > .avatar { --sz: 30px; margin-bottom: 7px; }
.fd-cbar__in { flex: 1; min-width: 0; min-height: 44px; max-height: 140px; padding: 11px 4px; border: 0; background: none; color: var(--c-ink); font: inherit; font-size: 16px; line-height: 1.4; resize: none; outline: none; }
.fd-cbar__go { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.fd-cbar__go:disabled { opacity: 0.35; cursor: default; }
.fd-cbar__go:not(:disabled):active { transform: scale(0.9); }
.fd-cbar__go .ic { width: 20px; height: 20px; }
.fd-cbar__re { display: flex; align-items: center; gap: 6px; padding: 4px 4px 0 6px; font-size: var(--text-xs); color: var(--c-muted); }
.fd-cbar__re[hidden] { display: none; }
.fd-cbar__re b { color: var(--c-ink); }
.fd-cbar__re button { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--fd-soft); color: var(--c-muted); cursor: pointer; }

 
.modal.fd-sheet { width: 100%; max-width: 620px; max-height: none; margin: auto auto 0; overflow: visible; }
.modal.fd-sheet[open] { animation: fdSheetIn 340ms cubic-bezier(0.32, 0.72, 0, 1) both; }
.modal.fd-sheet.is-out { animation: fdSheetOut 200ms var(--ease-in) both; }
.modal.fd-sheet.is-out::backdrop { opacity: 0; transition: opacity 200ms var(--ease-in); }
@keyframes fdSheetIn { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fdSheetOut { to { transform: translateY(100%); } }
.fd-sheet__box { display: flex; flex-direction: column; max-height: min(88dvh, 780px); border-radius: 24px 24px 0 0; background: var(--c-paper-2); border: 1px solid var(--c-rule-2); border-bottom: 0; box-shadow: 0 -20px 50px -20px rgb(15 23 42 / 0.35); padding-bottom: env(safe-area-inset-bottom); overflow: hidden; transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1); }
.fd-sheet__grab { flex: none; display: grid; place-items: center; height: 22px; cursor: grab; touch-action: none; }
.fd-sheet__grab i { width: 40px; height: 5px; border-radius: 3px; background: var(--c-rule-2); }
.fd-sheet__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 12px 10px 18px; }
.fd-sheet__head h2 { margin: 0; font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.01em; }
.fd-sheet__head h2 span { color: var(--c-faint); font-weight: 600; }
.fd-sheet__x { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--c-paper-3); color: var(--c-muted); cursor: pointer; }
.fd-sheet__x:hover { background: var(--c-paper-4); color: var(--c-ink); }
.fd-sheet__x .ic { width: 18px; height: 18px; }
.fd-sheet__body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px 18px 18px; display: flex; flex-direction: column; gap: var(--space-4); }
.fd-sheet--cmt .fd-sheet__box { height: min(82dvh, 720px); }
.fd-sheet--cmt .fd-sheet__body { padding: 0; gap: 0; overflow: hidden; }
.fd-sheet__list { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; border-top: 1px solid var(--fd-line); }
.fd-sheet__bar { flex: none; padding: 8px 10px 10px; border-top: 1px solid var(--fd-line); background: var(--c-paper-2); }
.fd-sheet__bar .fd-cbar { box-shadow: none; }
.fd-sheet .fd-cs__empty { background: transparent; border: 0; flex: 1; flex-direction: column; }
@media (min-width: 700px) {
  .modal.fd-sheet { margin-bottom: 24px; }
  .fd-sheet__box { border-radius: 24px; border-bottom: 1px solid var(--c-rule-2); }
}

 
.fd-plus { display: flex; flex-direction: column; border-radius: 16px; background: var(--c-card); border: 1px solid var(--fd-line); overflow: hidden; }
.fd-plus__it { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 14px; border: 0; background: none; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.fd-plus__it + .fd-plus__it { border-top: 1px solid var(--fd-line); }
.fd-plus__it:hover { background: var(--fd-soft); }
.fd-plus__it > .ic { flex: none; color: var(--c-faint); }
.fd-plus__ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--c-accent-dim); color: var(--c-accent-text); }
.fd-plus__ic .ic { width: 22px; height: 22px; }
.fd-plus__it:nth-child(2) .fd-plus__ic { background: var(--c-accent); color: var(--c-accent-ink); }
.fd-plus__it:nth-child(3) .fd-plus__ic { background: color-mix(in oklab, var(--fd-lime) 30%, var(--c-card)); color: color-mix(in oklab, var(--fd-lime-ring) 70%, var(--c-ink)); }
 
.fd-pj__lbl { margin: var(--space-4) 0 var(--space-2) 4px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.fd-plus--pj .fd-plus__it .fd-plus__ic { background: var(--c-accent-dim); color: var(--c-accent-text); }    
.fd-plus__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fd-plus__t b { font-size: var(--text-md); font-weight: 650; }
.fd-plus__t small { font-size: var(--text-sm); color: var(--c-muted); line-height: 1.35; }

 
.fd-rd { display: flex; flex-direction: column; gap: var(--space-3); }
.fd-rd__jam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.fd-rd__lead { margin: 0; font-size: var(--text-sm); color: var(--c-muted); line-height: 1.5; }
.fd-rd__me { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in oklab, var(--fd-lime) 16%, var(--c-card)); color: var(--c-ink); font-size: var(--text-sm); line-height: 1.45; }
.fd-rd__me .ic { flex: none; margin-top: 2px; color: color-mix(in oklab, var(--fd-lime-ring) 80%, var(--c-ink)); }
.fd-rd__act { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.fd-rd__act .btn { min-height: 46px; border-radius: var(--r-pill); justify-content: center; }
.fd-rd__act .btn-primary { flex: 1 1 180px; }
.fd-rd__sec { display: flex; flex-direction: column; gap: 10px; padding-top: var(--space-4); border-top: 1px solid var(--fd-line); }
.fd-rd__sec h3 { margin: 0; font-size: var(--text-md); font-weight: 750; text-transform: none; letter-spacing: 0; color: var(--c-ink); }
.fd-rd__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-radius: 16px; background: var(--c-card); border: 1px solid var(--fd-line); overflow: hidden; }
.fd-rd__it { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-width: 0; }
.fd-rd__it + .fd-rd__it { border-top: 1px solid var(--fd-line); }
.fd-rd__av { flex: none; border-radius: 50%; }
.fd-rd__av .avatar { --sz: 40px; }
.fd-rd__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fd-rd__main b { font-size: var(--text-md); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-rd__main span { font-size: var(--text-sm); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.fd-rd__main small { font-size: var(--text-xs); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-rd__it .btn { flex: none; border-radius: var(--r-pill); }
.fd-rd__empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px; border-radius: 14px; background: var(--fd-soft); color: var(--c-muted); font-size: var(--text-sm); line-height: 1.45; }
.fd-rd__empty .ic { flex: none; }

 
.fd-jw { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-accent-dim); }
.fd-jw b { font-size: var(--text-md); color: var(--c-ink); }
.fd-jw span { font-size: var(--text-sm); }

 
.fd-cmp { display: flex; flex-direction: column; gap: var(--space-3); }
.fd-cmp__who { display: flex; align-items: center; gap: 10px; }
.fd-cmp__who > .avatar { --sz: 44px; }
.fd-cmp__id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.fd-cmp__id b { font-size: var(--text-md); color: var(--c-ink); }
.fd-cmp__to { gap: 0; }
.fd-cmp__to .select { min-height: 36px; padding-block: 4px; font-size: var(--text-sm); border-radius: var(--r-pill); }
.fd-cmp__f { position: relative; }
.fd-cmp__ta { min-height: 120px; font-size: 16px; line-height: 1.5; resize: none; }
.fd-cmp__n { position: absolute; right: 12px; bottom: 8px; font-size: 11px; color: var(--c-faint); font-variant-numeric: tabular-nums; pointer-events: none; }
.fd-cmp__pv { display: grid; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fd-cmp__pv.n1 { grid-template-columns: minmax(0, 1fr); }
.fd-cmp__pv.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-cmp__pv.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-cmp__tile { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--fd-soft); animation: fdIn var(--dur-short) var(--ease-out) both; }
.fd-cmp__pv.n1 .fd-cmp__tile { aspect-ratio: 16 / 10; }
.fd-cmp__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-cmp__x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.55); color: #fff; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fd-cmp__badge { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-pill); background: rgb(0 0 0 / 0.55); color: #fff; font-size: 11px; font-weight: 700; }
.fd-cmp__badge .ic { fill: currentColor; }
.fd-cmp__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fd-tool { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--c-accent-dim); color: var(--c-accent-text); font: inherit; font-size: var(--text-sm); font-weight: 650; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.fd-tool:active { transform: scale(0.96); }
.fd-tool:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.fd-tool .ic { width: 18px; height: 18px; }
.fd-prog { display: flex; flex-direction: column; gap: 6px; }
.fd-prog[hidden] { display: none; }
.fd-prog__bar { display: block; height: 6px; border-radius: 6px; background: var(--fd-soft); overflow: hidden; }
.fd-prog__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c-accent); transition: width 200ms var(--ease-out); }
.fd-prog.is-busy .fd-prog__bar i { width: 100% !important; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: fdBusy 1100ms linear infinite; }
@keyframes fdBusy { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.fd-prog__t { font-size: var(--text-xs); color: var(--c-muted); }

@media (min-width: 900px) { .fd-page { gap: var(--space-4); } }
@media (prefers-reduced-motion: reduce) {
  .fd-card, .fd-c, .fd-pick, .fd-pick__e, .fd-cmp__tile, .modal.fd-sheet[open], .modal.fd-sheet.is-out { animation: none !important; }
  .fd-pill.is-pop .ic, .fd-pill.is-pop .fd-pill__e { animation: none !important; }
  .fd-ready__dot::after, .fd-siap__dot::after { animation: none !important; display: none; }
}

 
.fd-quick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: start; padding: 16px; border-radius: var(--r-lg); background: var(--c-card); border: 1px solid var(--c-accent-line); box-shadow: var(--c-shadow-card); }
.fd-quick__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c-accent-dim); color: var(--c-accent-text); }
.fd-quick__txt h2 { margin: 0; font-size: var(--text-lg); line-height: 1.25; text-wrap: balance; }
.fd-quick__txt p { margin: 4px 0 0; color: var(--c-muted); font-size: var(--text-sm); }
.fd-quick__act { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 2px; }



.fd-page {
  --sp-a: oklch(100% 0 0); --sp-b: oklch(98.2% 0.013 248); --sp-line: oklch(90.5% 0.02 250);
  --sp-streak: oklch(66% 0.13 245 / 0.22); --sp-blue: oklch(55% 0.2 258); --sp-tile: oklch(95.5% 0.03 250);
  --sp-lime-a: oklch(94% 0.18 116); --sp-lime-b: oklch(88% 0.21 124); --sp-lime-ink: oklch(19% 0.03 262);
  --sp-link: oklch(50% 0.18 255); --sp-now: oklch(55% 0.2 258); --sp-empty: oklch(96% 0.012 250); --sp-empty-line: oklch(86% 0.02 250);
  --sp-title: oklch(18% 0.04 262);
}
:root[data-theme="dark"] .fd-page {
  --sp-a: oklch(23.5% 0.075 260); --sp-b: oklch(17% 0.055 263); --sp-line: oklch(45% 0.13 256 / 0.45);
  --sp-streak: oklch(70% 0.17 250 / 0.38); --sp-blue: oklch(66% 0.19 252); --sp-tile: oklch(24% 0.08 258);
  --sp-link: oklch(82% 0.12 220); --sp-now: oklch(92% 0.19 116); --sp-empty: oklch(22% 0.06 260); --sp-empty-line: oklch(36% 0.07 258);
  --sp-title: oklch(98% 0.005 250);
}
.fd-page .fd-sport { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--sp-line); border-radius: 22px; background: linear-gradient(160deg, var(--sp-a), var(--sp-b)); box-shadow: 0 1px 2px oklch(30% 0.03 255 / 0.05), 0 12px 28px -20px oklch(40% 0.12 255 / 0.35); }
:root[data-theme="dark"] .fd-page .fd-sport { box-shadow: inset 0 1px 0 oklch(80% 0.1 250 / 0.08), 0 14px 32px -22px oklch(45% 0.2 255 / 0.7); }
.fd-page .fd-sport::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: 72%; height: 78%; pointer-events: none;
  background:
    linear-gradient(-17deg, transparent 47.6%, var(--sp-streak) 48%, transparent 48.4%),
    linear-gradient(-12deg, transparent 38.6%, var(--sp-streak) 39%, transparent 39.3%),
    linear-gradient(-22deg, transparent 57.7%, var(--sp-streak) 58%, transparent 58.3%),
    linear-gradient(-9deg, transparent 67.8%, var(--sp-streak) 68%, transparent 68.2%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }
.fd-page .fd-quick { gap: 14px 16px; align-items: center; padding: 18px; }
.fd-page .fd-quick__ic { width: 64px; height: 64px; border-radius: 18px; background: var(--sp-tile); color: var(--sp-blue); border: 1px solid color-mix(in oklab, var(--sp-blue) 28%, transparent); }
.fd-page .fd-quick__ic .ic { width: 34px; height: 34px; transform: rotate(-38deg); }
.fd-page .fd-quick__txt h2 { font-family: var(--font-sport); font-size: 1.8125rem; line-height: 1.05; font-style: italic; font-weight: 800; font-stretch: normal; letter-spacing: 0; color: var(--sp-title); }
.fd-page .fd-quick__txt p { margin-top: 4px; font-size: var(--text-md); color: var(--c-muted); }
.fd-page .fd-quick__act { gap: 6px; }
.fd-quick__go { --btn-bg: var(--sp-lime-b); --btn-fg: var(--sp-lime-ink); --btn-bd: transparent; position: relative; overflow: hidden; min-height: 56px; border-radius: 16px; font-size: 1.0625rem; font-weight: 800;
  background-image: linear-gradient(115deg, transparent 0 12%, oklch(100% 0 0 / 0.3) 12% 18%, transparent 18% 70%, oklch(100% 0 0 / 0.22) 70% 75%, transparent 75%), linear-gradient(90deg, var(--sp-lime-a), var(--sp-lime-b));
  box-shadow: 0 12px 24px -14px oklch(72% 0.2 125 / 0.9); }
.fd-quick__go:hover, .fd-quick__go:focus-visible { --btn-bg: var(--sp-lime-a); --btn-fg: var(--sp-lime-ink); --btn-bd: transparent; filter: brightness(1.03); }
.fd-quick__go > .ic:last-child { position: absolute; right: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; stroke-width: 2.6; }
.fd-quick__play .ic { width: 22px; height: 22px; fill: currentColor; }
.fd-page .fd-ready { min-height: 76px; padding: 14px 16px; gap: 14px; border-radius: 22px; }
.fd-ready__ic { position: relative; flex: none; display: grid; place-items: center; color: var(--sp-blue); }
.fd-ready__ic > .ic { width: 36px; height: 36px; }
.fd-ready__ic .fd-ready__dot { position: absolute; top: -1px; right: -6px; width: 11px; height: 11px; background: var(--sp-blue); box-shadow: 0 0 0 2.5px var(--sp-a); }
.fd-page .fd-ready__t b { font-size: 1.0625rem; font-weight: 800; }
.fd-page .fd-ready__t small { font-size: var(--text-sm); }
.fd-quick__go .ic { color: var(--sp-lime-ink); }    
.fd-page .sm-weeks li:last-child small { white-space: nowrap; }
@media (max-width: 439px) { .fd-page .sm-weeks li:last-child small { white-space: normal; } }    



.fd-duo { container: fdduo / inline-size; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
@media (max-width: 339px) { .fd-duo { grid-template-columns: minmax(0, 1fr); } }
@container fdduo (max-width: 619px) {
  .fd-page .fd-duo .fd-quick { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; }
  .fd-page .fd-duo .fd-quick__ic { width: 46px; height: 46px; border-radius: 14px; }
  .fd-page .fd-duo .fd-quick__ic .ic { width: 26px; height: 26px; }
  .fd-page .fd-duo .fd-quick__txt h2 { font-size: 1.4rem; }
  .fd-page .fd-duo .fd-quick__txt p { font-size: var(--text-sm); line-height: 1.35; }
  .fd-page .fd-duo .fd-quick__act { margin-top: auto; }
  .fd-duo .fd-quick__go { min-height: 46px; padding: 0 10px; border-radius: 14px; font-size: var(--text-sm); gap: 6px; }
  .fd-duo .fd-quick__go > .ic:last-child { display: none; }
  .fd-duo .fd-quick__play .ic { width: 18px; height: 18px; }
}

 
.fd-promo { display: contents; }
.view.fd-page > .page-head + .fd-promo > :first-child { margin-top: var(--space-1); }

 
.fd-page.is-hl > .fd-promo, .fd-page.is-hl > .fd-readywrap { display: none; }
.fd-tab-ic { flex: none; width: 18px; height: 18px; }
.fd-tab-ic .ic-spark { transform-box: fill-box; transform-origin: center; }
.fd-tabs [aria-pressed="true"] .fd-tab-ic { color: var(--c-accent-text); }
.fd-tabs [aria-pressed="true"] .ic-spark { color: var(--fd-lime-ring); animation: hlKilau 2.4s ease-in-out infinite; }
@keyframes hlKilau { 0%, 62%, 100% { transform: scale(1); } 76% { transform: scale(1.35) rotate(40deg); } }
@media (prefers-reduced-motion: reduce) { .fd-tabs [aria-pressed="true"] .ic-spark { animation: none; } }
.hl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.hl-tile { position: relative; display: block; width: 100%; aspect-ratio: 9 / 15; overflow: hidden; padding: 0; border: 0; border-radius: 6px; background: #0d1117; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.hl-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hl-tile::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, rgb(4 10 24 / 0), rgb(4 10 24 / 0.86)); }
.hl-tile__d { position: absolute; z-index: 1; top: 5px; right: 5px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: var(--r-pill); background: rgb(4 10 24 / 0.72); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hl-tile__d .ic { width: 10px; height: 10px; fill: currentColor; stroke-width: 3; }
.hl-tile__a { position: absolute; z-index: 1; left: 6px; right: 6px; bottom: 6px; overflow: hidden; font-size: var(--text-xs); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.hl-tile:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.hl-view { position: fixed; inset: 0; z-index: 150; background: #000; color: #fff; }
.hl-col { position: relative; height: 100%; max-width: 480px; margin-inline: auto; }
.hl-scroll { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.hl-scroll::-webkit-scrollbar { display: none; }
.hl-sl { position: relative; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; background: #000; }
.hl-sl video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hl-sl::after { content: ""; position: absolute; z-index: 1; inset: auto 0 0; height: 42%; background: linear-gradient(to bottom, rgb(4 10 24 / 0), rgb(4 10 24 / 0.86)); pointer-events: none; }    
.hl-tap { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.hl-tap:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.hl-tap__i { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgb(4 10 24 / 0.6); }
.hl-tap__i[hidden] { display: none; }
.hl-tap__i .ic { width: 34px; height: 34px; }
.hl-gagal { position: absolute; z-index: 1; top: 50%; left: 0; right: 0; margin: 0; text-align: center; font-weight: 600; }
.hl-gagal[hidden] { display: none; }
.hl-info { position: absolute; z-index: 2; left: 14px; right: 76px; bottom: calc(18px + env(safe-area-inset-bottom)); text-shadow: 0 1px 8px rgb(0 0 0 / 0.8); pointer-events: none; }
.hl-info b { display: block; font-size: var(--text-md); font-weight: 800; }
.hl-info small { display: block; font-size: var(--text-sm); font-weight: 600; opacity: 0.88; }
.hl-info p { display: -webkit-box; margin: 6px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: var(--text-sm); line-height: 1.35; overflow-wrap: anywhere; }
.hl-aksi { position: absolute; z-index: 2; right: 8px; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.hl-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; min-height: 44px; padding: 0; border: 0; background: none; color: #fff; font: inherit; text-decoration: none; cursor: pointer; }
.hl-btn > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgb(4 10 24 / 0.58); }
.hl-btn > b { font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgb(0 0 0 / 0.8); }
.hl-btn[aria-pressed="true"] > span { background: #c6f432; color: #0c2200; }
.hl-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 12px; }
.hl-x { position: absolute; z-index: 3; top: calc(12px + env(safe-area-inset-top)); right: 10px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgb(4 10 24 / 0.58); color: #fff; cursor: pointer; }
.hl-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
 
.hl-kr__cepat { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); }
.hl-kr__c { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 76px; padding: 10px 4px; border: 1px solid var(--fd-line); border-radius: 16px; background: var(--c-card); color: var(--c-ink); font: inherit; text-decoration: none; cursor: pointer; }
.hl-kr__c:hover { background: var(--fd-soft); }
.hl-kr__c:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.hl-kr__ci { display: grid; place-items: center; width: 40px; height: 36px; border-radius: 12px; background: var(--c-accent); color: var(--c-accent-ink); }
.hl-kr__ci.is-wa { background: var(--c-wa); color: #FFFFFF; }
.hl-kr__cl { max-width: 100%; overflow: hidden; font-size: var(--text-xs); font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.hl-kr__l { flex: none; display: flex; flex-direction: column; border-radius: 16px; background: var(--c-card); border: 1px solid var(--fd-line); overflow: hidden; }    
.hl-kr__l:empty { display: none; }
.hl-kr__b { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 12px; border: 0; background: none; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; }
.hl-kr__b + .hl-kr__b { border-top: 1px solid var(--fd-line); }
.hl-kr__b:hover:not(:disabled) { background: var(--fd-soft); }
.hl-kr__b:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.hl-kr__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hl-kr__t b { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.hl-kr__t small { color: var(--c-muted); font-size: var(--text-xs); }
.hl-kr__k { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-accent-ink); font-size: var(--text-xs); font-weight: 700; }
.hl-kr__b.is-ok .hl-kr__k { background: var(--c-paper-3); color: var(--c-muted); }
.hl-kr__masuk { margin: 0; color: var(--c-muted); font-size: var(--text-sm); }
.fd-izin { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: var(--r-md); background: var(--c-paper); font-size: var(--text-sm); font-weight: 600; line-height: 1.35; cursor: pointer; }
.fd-izin[hidden] { display: none; }
.fd-izin input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--c-accent); }





.fd-card { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
:root[data-theme="dark"] .fd-card { box-shadow: inset 0 0 0 1px var(--x-line); }
.fd-card.is-hidden { box-shadow: inset 4px 0 0 var(--medal-gold), inset 0 0 0 1px var(--x-line); }
.fd-card.is-folded .fd-fold { border-radius: 0; }
.fd-name { color: var(--x-ink); }
.fd-menu { width: 44px; height: 44px; margin-right: -10px; }
.fd-mark, .fd-av .comm-logo { border-radius: 3px; }
.fd-hid { border-radius: 0; box-shadow: inset 4px 0 0 var(--medal-gold); padding-left: 16px; }
.fd-more { color: var(--x-muted); }
 
.fd-media { border-radius: 0; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.fd-play span { width: 70px; height: 52px; border-radius: 0; clip-path: var(--x-jg-b); background: var(--x-lime); color: var(--x-lime-ink); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.fd-play .ic { margin-left: 3px; }
.fd-dur { border-radius: 0; clip-path: var(--x-jg); padding: 3px 12px; background: var(--x-navy); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.85rem; }
.fd-bisu { border-radius: 0; clip-path: var(--x-jg); width: 34px; background: var(--x-navy); }
 
.fd-auto, .fd-mb, .fd-mb.is-slot, .fd-lagi, .fd-siap, .fd-siap.is-end, .fd-auto--streak { --fd-acc: var(--x-lime); border: 0; border-radius: 0; background: var(--x-chip);
  box-shadow: inset 4px 0 0 var(--fd-acc); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.fd-mb.is-slot { --fd-acc: var(--c-live); }
.fd-lagi { --fd-acc: var(--c-win); }
.fd-siap.is-end { --fd-acc: var(--x-line); }
.fd-auto--streak { --fd-acc: var(--medal-gold); }
.fd-mb__in, .fd-lagi, .fd-siap, .fd-auto--streak { padding-left: 18px; }
.fd-mb__badge { min-height: 26px; padding: 0 14px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-lime); color: var(--x-lime-ink);
  font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.02em; }
.fd-mb__badge.is-slot, .fd-mb__badge.is-live { background: var(--c-live-solid); color: #fff; }
.fd-mb__badge.is-off { background: var(--x-line); color: var(--x-ink); }
.fd-mb__t, .fd-auto__t { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.4rem; line-height: 1.02; letter-spacing: 0.005em; text-transform: uppercase; color: var(--x-ink); }
.fd-mb__ls li { color: var(--x-ink); }
.fd-mb__foot { border-top: 1px solid var(--x-line); }
.fd-mb__avs .avatar, .fd-ready__avs .avatar { box-shadow: 0 0 0 2px var(--x-chip); }
.fd-mb__left { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.1rem; }
.fd-auto__k { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.02em; }
.fd-siap .fd-auto__k { color: var(--x-ink); }
.fd-state { border-radius: 0; clip-path: var(--x-jg); padding: 0 16px; font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.95rem; text-transform: uppercase; }
.fd-lagi__ic, .fd-streak__ic { width: 48px; height: 42px; border-radius: 0; clip-path: var(--x-jg); background: var(--c-win); box-shadow: none; }
.fd-streak__ic { background: var(--c-live-solid); color: #fff; }
.fd-siap__t, .fd-streak__n { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 2.3rem; line-height: 0.95; letter-spacing: 0; color: var(--x-ink); }
.fd-streak__l { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.95rem; line-height: 1; text-transform: uppercase; color: var(--x-muted); }
.fd-streak__go { border-radius: 0; }
.fd-ready__dot, .fd-siap__dot { border-radius: 0; transform: skewX(-14deg); box-shadow: none; }
.fd-ready.is-on .fd-ready__dot, .fd-siap:not(.is-end) .fd-siap__dot { background: var(--x-lime); box-shadow: inset 0 0 0 1.5px var(--fd-lime-ring); }
.fd-ready.is-on .fd-ready__dot::after, .fd-siap:not(.is-end) .fd-siap__dot::after { border-radius: 0; }
 
.fd-sb { border-radius: 0; background: var(--x-navy); box-shadow: none; padding-inline: 26px;
  clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.fd-sb::after { inset: -12px -12px -12px auto; width: 28px; height: auto; background: repeating-linear-gradient(90deg, var(--x-lime) 0 5px, transparent 5px 12px); transform: skewX(-18deg); opacity: 0.9; }
.fd-sb__k { border-radius: 0; clip-path: var(--x-jg); padding: 3px 14px; background: var(--x-lime); color: var(--x-lime-ink); font-family: var(--font-sport); font-style: italic; font-size: 0.9rem; letter-spacing: 0.02em; }
.fd-sb__k .ic { color: currentColor; }
.fd-sb__sc { font-family: var(--font-sport); font-style: italic; font-size: 3rem; letter-spacing: 0; text-shadow: none; }
.fd-sb__g { font-family: var(--font-sport); font-style: italic; font-size: 0.85rem; letter-spacing: 0.04em; }
.fd-sb__w { border-radius: 0; clip-path: var(--x-jg); padding: 2px 12px; background: var(--medal-gold); color: var(--x-lime-ink); font-family: var(--font-sport); font-style: italic; font-size: 0.85rem; }
.fd-sb__av .avatar { box-shadow: 0 0 0 2px var(--x-navy); }
 
.fd-bar { border-top-color: var(--x-line); }
 
.fd-pill { --fd-pill-bg: var(--x-chip); position: relative; isolation: isolate; min-height: 44px; padding: 0 15px; border-radius: 0; background: none; color: var(--x-ink); }
.fd-pill::before { content: ""; position: absolute; inset: 4px 0; z-index: -1; background: var(--fd-pill-bg); clip-path: var(--x-jg); transition: background-color var(--dur-micro) var(--ease-out); }
.fd-pill:hover { background: none; --fd-pill-bg: color-mix(in oklab, var(--x-chip) 82%, var(--x-ink)); }
.fd-pill.is-on { --fd-pill-bg: color-mix(in oklab, var(--x-lime) 42%, var(--x-chip)); background: none; box-shadow: none; color: var(--x-ink); }
.fd-gas { padding-left: 15px; font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1rem; text-transform: uppercase; }
.fd-gas.is-on { --fd-pill-bg: var(--x-lime); background: none; color: var(--x-lime-ink); box-shadow: none; }
.fd-pill:focus-visible, .fd-gas:focus-visible { outline: none; box-shadow: none; }
.fd-pill:focus-visible::before { box-shadow: inset 0 0 0 3px var(--c-focus); }
@media (max-width: 360px) { .fd-pill { padding: 0 14px; } }
.fd-ic { min-width: 44px; height: 44px; }
.fd-pick { border-radius: 0; border-color: var(--x-line); background: var(--x-card); box-shadow: 0 10px 22px -12px rgb(4 13 32 / 0.5); }
.fd-pick__e small { border-radius: 0; clip-path: var(--x-jg); padding: 2px 10px; background: var(--x-navy); }
.fd-pick__e.is-on { background: color-mix(in oklab, var(--x-lime) 45%, transparent); }
 
.fd-new { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.fd-new__in { border-radius: 0; clip-path: var(--x-jg-b); padding: 0 22px; background: var(--x-chip); color: var(--x-muted); box-shadow: inset 0 -2px 0 var(--x-line); }
.fd-new__in:hover { background: color-mix(in oklab, var(--x-chip) 85%, var(--x-ink)); }
.fd-new__plus { width: 54px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-lime); color: var(--x-lime-ink); box-shadow: none; }
.fd-new__in:focus-visible, .fd-new__plus:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.fd-new__txt b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.2rem; text-transform: uppercase; color: var(--x-ink); }
@media (max-width: 360px) { .fd-new__in { padding: 0 20px; } }
 
.fd-lapor { min-height: 44px; padding: 0 18px; border: 0; border-radius: 0; clip-path: var(--x-jg); background: var(--x-chip); color: var(--x-ink);
  font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1rem; text-transform: uppercase; }
.fd-lapor:hover { background: color-mix(in oklab, var(--x-chip) 82%, var(--x-ink)); color: var(--x-ink); }
.fd-lapor.is-on { background: var(--x-navy); color: var(--x-date-ink); }
.fd-lapor:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
 
.fd-page .fd-sport { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
:root[data-theme="dark"] .fd-page .fd-sport { box-shadow: inset 0 0 0 1px var(--x-line); }
.fd-page .fd-sport::before { display: none; }
.fd-page .fd-quick::after { content: ""; position: absolute; z-index: -1; top: -12px; right: -10px; width: 46px; height: 76px; background: repeating-linear-gradient(90deg, var(--x-lime) 0 5px, transparent 5px 12px); transform: skewX(-18deg); pointer-events: none; }
.fd-page .fd-quick__ic, .fd-page .fd-duo .fd-quick__ic { width: 54px; height: 46px; border: 0; border-radius: 0; clip-path: var(--x-jg); background: var(--x-navy); color: var(--x-lime); }
.fd-page .fd-quick__txt h2 { text-transform: uppercase; color: var(--x-ink); }
.fd-page .fd-quick__txt p { color: var(--x-muted); }
.fd-quick__go, .fd-duo .fd-quick__go { --btn-bg: var(--x-lime); --btn-fg: var(--x-lime-ink); border-radius: 0; overflow: visible; background-image: none; box-shadow: none; }
.fd-quick__go:hover, .fd-quick__go:focus-visible { --btn-bg: var(--x-lime-hi); filter: none; }
.fd-quick__go:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.fd-page .fd-ready { border-radius: 0; box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 1px var(--x-line); padding-left: 18px; }
:root[data-theme="dark"] .fd-page .fd-ready { box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 1px var(--x-line); }
.fd-page .fd-ready.is-on { background: color-mix(in oklab, var(--x-lime) 14%, var(--x-card)); }
.fd-page .fd-ready:focus-visible { outline: none; box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 3px var(--c-focus); }
.fd-ready__ic { width: 54px; height: 46px; clip-path: var(--x-jg); background: var(--x-navy); color: var(--x-lime); }
.fd-ready__ic > .ic { width: 26px; height: 26px; }
.fd-ready__ic .fd-ready__dot { top: 7px; right: 11px; width: 9px; height: 9px; background: var(--c-live-solid); box-shadow: none; }
.fd-page .fd-ready__t b { font-family: var(--font-sport); font-style: italic; font-size: 1.3rem; line-height: 1.05; text-transform: uppercase; color: var(--x-ink); }
.fd-page .fd-ready__t small { color: var(--x-muted); }
@media (max-width: 400px) { .fd-page .fd-ready__t b { font-size: 1.1rem; } .fd-ready__ic { width: 48px; height: 42px; } .fd-page .fd-ready { gap: 12px; } }
 
.fd-cs__h { position: relative; padding-left: 16px; font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.4rem; line-height: 1; text-transform: uppercase; color: var(--x-ink); }
.fd-cs__h::before { content: ""; position: absolute; left: 2px; top: 0.06em; bottom: 0.1em; width: 6px; background: var(--x-lime); transform: skewX(-14deg); }
.fd-cs__empty { border-radius: 0; border-color: var(--x-line); background: var(--x-card); }
.fd-c__bub { border: 0; border-radius: 0; background: var(--x-chip); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.fd-c__nm { color: var(--x-ink); }
.fd-c__meta button { border-radius: 0; }
.fd-cbar { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.fd-cbar__go { width: 54px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-lime); color: var(--x-lime-ink); }
.fd-cbar__go:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.fd-cbar__re button { width: 36px; height: 36px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-chip); }
:is(.fd-cbar__re button, .fd-cmp__x):focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
 
.fd-sheet__box { border: 0; border-radius: 0; background: var(--x-card); box-shadow: none; clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 18px); }
@media (min-width: 700px) { .fd-sheet__box { border: 0; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); } }
.fd-sheet__grab i { width: 44px; height: 5px; border-radius: 0; background: var(--x-line); transform: skewX(-18deg); }
.fd-sheet__head h2 { position: relative; padding-left: 16px; font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: clamp(1.3rem, 5.6vw, 1.55rem); line-height: 1.02; letter-spacing: 0.01em; text-transform: uppercase; color: var(--x-ink); }
.fd-sheet__head h2::before { content: ""; position: absolute; left: 2px; top: 0.04em; bottom: 0.08em; width: 6px; background: var(--x-lime); transform: skewX(-14deg); }
.fd-sheet__x { width: 44px; height: 44px; background: var(--x-chip); color: var(--x-ink); }
.fd-sheet__bar { background: var(--x-card); border-top-color: var(--x-line); }
.fd-sheet__list { border-top-color: var(--x-line); }
 
.fd-plus { gap: 6px; border: 0; border-radius: 0; background: none; overflow: visible; }
.fd-plus__it { min-height: 64px; background: var(--x-chip); box-shadow: inset 4px 0 0 var(--x-lime); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); padding-left: 16px; }
.fd-plus__it + .fd-plus__it { border-top: 0; }
.fd-plus__it:hover { background: color-mix(in oklab, var(--x-chip) 85%, var(--x-ink)); }
.fd-plus__it:focus-visible { outline: none; box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 3px var(--c-focus); }
.fd-plus__ic, .fd-plus--pj .fd-plus__it .fd-plus__ic, .fd-plus__it:nth-child(3) .fd-plus__ic { width: 48px; height: 42px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-navy); color: var(--x-lime); }
.fd-plus__it:nth-child(2) .fd-plus__ic { background: var(--x-lime); color: var(--x-lime-ink); }
.fd-plus__t b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.15rem; line-height: 1.05; text-transform: uppercase; color: var(--x-ink); }
.fd-plus__t small { color: var(--x-muted); }
.fd-pj__lbl { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.01em; color: var(--x-ink); }
 
.fd-rd__me, .fd-jw { border-radius: 0; background: var(--x-chip); box-shadow: inset 4px 0 0 var(--x-lime); padding-left: 16px; }
.fd-rd__sec { border-top-color: var(--x-line); }
.fd-rd__sec h3 { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.2rem; text-transform: uppercase; color: var(--x-ink); }
.fd-rd__list { border: 0; border-radius: 0; background: var(--x-chip); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.fd-rd__it + .fd-rd__it { border-top-color: var(--x-line); }
.fd-rd__empty { border-radius: 0; background: var(--x-chip); }
.fd-rd__it .btn { border-radius: 0; }
.fd-cmp__to .select { border-radius: 0; }
.fd-cmp__tile { border-radius: 0; }
.fd-cmp__x { border-radius: 0; clip-path: var(--x-jg); width: 36px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--x-navy); }
.fd-cmp__badge { border-radius: 0; clip-path: var(--x-jg); padding: 3px 12px; background: var(--x-navy); }
.fd-tool { min-height: 44px; padding: 0 18px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-chip); color: var(--x-ink);
  font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1rem; text-transform: uppercase; }
.fd-tool:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.fd-prog__bar, .fd-prog__bar i { border-radius: 0; }
.fd-izin { border-radius: 0; }
 
.hl-tile { border-radius: 0; }
.hl-tile__d { border-radius: 0; clip-path: var(--x-jg); padding: 2px 10px; background: var(--x-navy); }
.hl-kr__c { border: 0; border-radius: 0; background: var(--x-chip); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.hl-kr__c:hover { background: var(--x-line); }
.hl-kr__c:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.hl-kr__ci { border-radius: 0; clip-path: var(--x-jg); background: var(--x-lime); color: var(--x-lime-ink); }
.hl-kr__cl { color: var(--x-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; }
.hl-kr__l { border: 0; border-radius: 0; background: var(--x-chip); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.hl-kr__b + .hl-kr__b { border-top-color: var(--x-line); }
.hl-kr__k { min-height: 36px; padding: 0 16px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-lime); color: var(--x-lime-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; }
.hl-kr__b.is-ok .hl-kr__k { background: var(--x-line); color: var(--x-ink); }


.fd-fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); z-index: 39; width: 62px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 4px 8px rgb(4 13 32 / 0.22)) drop-shadow(0 1px 1px rgb(4 13 32 / 0.16)); opacity: 0; transform: translateY(16px) scale(0.8); pointer-events: none;
  transition: opacity 0.16s ease, transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.35); -webkit-tap-highlight-color: transparent; }
.view.is-enter > .fd-fab { animation: none; }    
.fd-fab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fd-fab__b { display: grid; place-items: center; width: 100%; height: 100%; clip-path: var(--x-jg); background: var(--x-lime); color: var(--x-lime-ink); transition: transform 0.12s ease; }
.fd-fab .ic { width: 26px; height: 26px; stroke-width: 2.6; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.fd-fab:active .fd-fab__b { transform: scale(0.9); }
.fd-fab.is-tap .fd-fab__b { animation: fd-fab-tap 0.34s ease-out; }
.fd-fab.is-tap .ic { transform: rotate(90deg); }
@keyframes fd-fab-tap { 0% { transform: scale(0.84); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }
.fd-fab:focus-visible { outline: none; }
.fd-fab:focus-visible .fd-fab__b { box-shadow: inset 0 0 0 3px var(--c-focus); }
@media (min-width: 768px) { .fd-fab { bottom: 24px; right: max(24px, calc((100vw - 620px) / 2 - 86px)); } }    
@media (prefers-reduced-motion: reduce) { .fd-fab, .fd-fab .ic, .fd-fab__b { transition: none; } .fd-fab.is-tap .fd-fab__b { animation: none; } .fd-fab.is-tap .ic { transform: none; } }
 
.hl-col { transform-origin: 50% 45%; }
.hl-cubit { position: absolute; z-index: 3; top: calc(70px + env(safe-area-inset-top)); left: 50%; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 16px; border-radius: 999px; background: rgb(0 0 0 / 0.6); color: #fff; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; pointer-events: none; transform: translateX(-50%); animation: hl-cubit-in 0.3s ease both; transition: opacity 0.35s ease; }
.hl-cubit .ic { width: 16px; height: 16px; }
.hl-cubit.is-pergi { opacity: 0; }
@keyframes hl-cubit-in { from { opacity: 0; transform: translate(-50%, -6px); } }
@media (prefers-reduced-motion: reduce) { .hl-cubit { animation: none; transition: none; } }


.fd-sm { position: fixed; z-index: 160; width: 0; height: 0; pointer-events: none;
  --fd-sm-asap: 196 202 213; --fd-sm-serpih: #93a0b3; --fd-sm-gelap: #0e233e; --fd-sm-bulu: #d3dae5; --fd-sm-lime: #92b81a; --fd-sm-jejak: 14 35 62; }    
:root[data-theme="dark"] .fd-sm, .fd-sm.is-gelap { --fd-sm-asap: 214 221 233; --fd-sm-serpih: #c4cedc; --fd-sm-gelap: #8b9bb3; --fd-sm-bulu: #ffffff; --fd-sm-lime: #ccf541; --fd-sm-jejak: 236 245 255; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fd-sm { --fd-sm-asap: 214 221 233; --fd-sm-serpih: #c4cedc; --fd-sm-gelap: #8b9bb3; --fd-sm-bulu: #ffffff; --fd-sm-lime: #ccf541; --fd-sm-jejak: 236 245 255; } }
.fd-sm__r { position: absolute; left: -27px; top: -100px; width: 54px; height: 112px; transform-origin: 50% 94%; transform: scale(0.35) rotate(0deg); opacity: 0;
  filter: drop-shadow(0 4px 6px rgb(4 13 32 / 0.35)); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.12s ease; }
.fd-sm__r svg { width: 100%; height: 100%; display: block; }
.fd-sm.is-siap .fd-sm__r { opacity: 1; transform: scale(1) rotate(-58deg); }
.fd-sm.is-pukul .fd-sm__r { transform: scale(1.06) rotate(42deg); transition: transform 0.12s cubic-bezier(0.55, 0, 0.75, 0.2); }
 
.fd-sm.is-kanan .fd-sm__r { transform: scaleX(-1) scale(0.35) rotate(0deg); }
.fd-sm.is-kanan.is-siap .fd-sm__r { transform: scaleX(-1) scale(1) rotate(-58deg); }
.fd-sm.is-kanan.is-pukul .fd-sm__r { transform: scaleX(-1) scale(1.06) rotate(42deg); }    
.fd-sm__ring { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border: 3px solid rgb(204 245 65 / 0.9); border-radius: 50%; opacity: 0; transform: scale(0.5); transition: transform 0.9s linear, opacity 0.15s ease; }
.fd-sm.is-siap .fd-sm__ring { opacity: 0.85; transform: scale(1.35); }
.fd-sm.is-pukul .fd-sm__ring { opacity: 0; transition: opacity 0.08s ease; }
.fd-sm.is-pergi { opacity: 0; transition: opacity 0.2s ease; }
.fd-sm.is-lepas .fd-sm__r { opacity: 0; transition: opacity 0.2s ease; }
.fd-sm__jejak { position: absolute; left: 0; top: 0; width: 360px; height: 360px; }        
.fd-sm__k { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgb(4 13 32 / 0.4)); }
.fd-sm__k svg { display: block; width: 100%; height: 100%; }
.fd-sm__b { position: absolute; left: 0; top: 0; width: 440px; height: 440px; }    
.fd-card.is-sm { -webkit-user-select: none; user-select: none; }
.fd-card :is(img, video) { -webkit-touch-callout: none; }
.fd-card.is-kena { animation: fd-kena 0.44s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes fd-kena {
  10%, 90% { transform: translate(calc(var(--kuat, 4px) * -0.3), 0); }
  20%, 80% { transform: translate(calc(var(--kuat, 4px) * 0.55), calc(var(--kuat, 4px) * 0.2)); }
  30%, 50%, 70% { transform: translate(calc(var(--kuat, 4px) * -1), calc(var(--kuat, 4px) * -0.3)) rotate(-0.5deg); }
  40%, 60% { transform: translate(var(--kuat, 4px), calc(var(--kuat, 4px) * 0.3)) rotate(0.5deg); }
}
.fd-smash-n { display: flex; align-items: center; gap: 5px; margin: -4px 0 12px; color: var(--c-muted); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }    
.fd-smash-n .ic { width: 13px; height: 13px; color: var(--c-accent-text); }
.fd-smash-n.is-pop { animation: fd-smash-pop 0.36s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes fd-smash-pop { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fd-sm { display: none; } .fd-card.is-kena, .fd-smash-n.is-pop { animation: none; } }
.hl-sl video.is-kena { animation: fd-kena 0.44s cubic-bezier(0.36, 0.07, 0.19, 0.97); }    
.hl-btn.is-pop span { animation: fd-smash-pop 0.36s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@media (prefers-reduced-motion: reduce) { .hl-sl video.is-kena, .hl-btn.is-pop span { animation: none; } }
 
.fd-coach { --fc-tirai: oklch(12% 0.03 255 / 0.6); position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.fd-coach__s { position: fixed; background: var(--fc-tirai); pointer-events: auto; cursor: pointer; animation: fd-coach-in var(--dur-long) var(--ease-out) both; }
.fd-coach__lubang { position: fixed; border-radius: var(--r-lg); pointer-events: none; outline: 2px solid var(--c-accent); outline-offset: -1px; }
.fd-coach__lubang::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--c-accent); border-radius: inherit; animation: fd-coach-denyut 1.6s var(--ease-out) infinite; }
.fd-coach__jari { position: fixed; width: 0; height: 0; pointer-events: none; transition: opacity 0.15s ease; }
.fd-coach__dot { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; background: oklch(12% 0.03 255 / 0.5); border: 2px solid oklch(100% 0 0 / 0.9); animation: fd-coach-tekan 2.6s var(--ease-out) infinite; }
.fd-coach__dot i { position: absolute; inset: -9px; border: 3px solid var(--c-accent); border-radius: 50%; animation: fd-coach-cincin 2.6s linear infinite; }
.fd-coach__r { position: absolute; left: -15px; top: -112px; width: 30px; height: 62px; transform-origin: 50% 94%; animation: fd-coach-raket 2.6s cubic-bezier(0.4, 0, 0.3, 1) infinite; filter: drop-shadow(0 3px 5px oklch(10% 0.03 255 / 0.5)); }
.fd-coach__r svg { display: block; width: 100%; height: 100%; }
.fd-coach__kata { position: absolute; left: -60px; top: 36px; width: 120px; height: 24px; text-align: center; font-family: var(--font-sport); font-size: 1.05rem; font-style: italic; font-weight: 800; letter-spacing: 0.02em; color: oklch(100% 0 0); text-shadow: 0 1px 4px oklch(10% 0.03 255 / 0.8); }
.fd-coach__kata span { position: absolute; inset: 0; white-space: nowrap; }
.fd-coach__kata span:first-child { animation: fd-coach-kata1 2.6s linear infinite; }
.fd-coach__kata span:last-child { color: var(--c-accent); animation: fd-coach-kata2 2.6s linear infinite; }
.fd-coach.is-coba .fd-coach__jari, .fd-coach.is-ok .fd-coach__jari { opacity: 0; }
.fd-coach__tip { position: fixed; padding: var(--space-4); border: 1px solid var(--c-rule); border-radius: var(--r-lg); background: var(--c-paper-2); color: var(--c-ink); box-shadow: 0 18px 40px -16px oklch(10% 0.03 255 / 0.6); pointer-events: auto; animation: tcIn var(--dur-long) var(--ease-out) both; }
.fd-coach__tip b { display: flex; align-items: center; gap: 8px; font-family: var(--font-sport); font-size: 1.15rem; font-style: italic; font-weight: 800; line-height: 1.25; text-transform: uppercase; }
.fd-coach__tip b .ic { flex: none; width: 20px; height: 20px; color: var(--c-accent-text); }
.fd-coach__tip p { margin: 6px 0 0; font-size: var(--text-sm); line-height: 1.45; color: var(--c-muted); }
.fd-coach__act { display: flex; justify-content: flex-end; margin-top: var(--space-3); }
.fd-coach__act .btn { min-height: 44px; }
.fd-coach.is-ok .fd-coach__s { background: transparent; transition: background 0.4s ease; }
.fd-coach.is-ok .fd-coach__lubang::after { animation: none; }
.fd-coach.is-pergi { opacity: 0; transition: opacity 0.2s ease; }
@keyframes fd-coach-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fd-coach-denyut { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.03); opacity: 0; } }
@keyframes fd-coach-tekan { 0%, 6% { transform: scale(1); } 12%, 56% { transform: scale(0.84); } 62%, 100% { transform: scale(1); } }
@keyframes fd-coach-cincin { 0%, 10% { transform: scale(0.6); opacity: 0; } 14% { opacity: 0.95; } 56% { transform: scale(1.3); opacity: 0.95; } 60%, 100% { transform: scale(1.3); opacity: 0; } }
@keyframes fd-coach-raket { 0%, 16% { opacity: 0; transform: scale(0.6) rotate(-20deg); } 26% { opacity: 1; transform: scale(1) rotate(-50deg); } 56% { opacity: 1; transform: scale(1) rotate(-68deg); } 61% { opacity: 1; transform: scale(1.06) rotate(42deg); } 74%, 100% { opacity: 0; transform: scale(1) rotate(42deg); } }
@keyframes fd-coach-kata1 { 0%, 8% { opacity: 0; } 12%, 54% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes fd-coach-kata2 { 0%, 57% { opacity: 0; } 60%, 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fd-coach__s, .fd-coach__tip, .fd-coach__lubang::after, .fd-coach__dot, .fd-coach__dot i, .fd-coach__r, .fd-coach__kata span { animation: none; }
  .fd-coach__r { transform: rotate(-58deg); } .fd-coach__dot i { opacity: 0.95; transform: scale(1.2); } .fd-coach__kata span:last-child { opacity: 0; }
}


.fd-pm { position: fixed; inset: 0; z-index: 140; }
.fd-pm__tirai { position: absolute; inset: 0; background: color-mix(in oklch, var(--x-navy) 45%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.22s var(--ease-out); }
.fd-pm.is-buka .fd-pm__tirai { opacity: 1; }
.fd-pm__list { position: fixed; display: flex; flex-direction: column; gap: 8px; }
.fd-pm__list.is-gulir { overflow-y: auto; overscroll-behavior: contain; }
.fd-pm:not(.is-siap) .fd-pm__list { visibility: hidden; }
.fd-pm__it { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--x-ink); font: inherit; text-align: left; cursor: pointer; filter: drop-shadow(0 10px 16px oklch(15% 0.04 262 / 0.3));
  opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.25); transition: transform 0.36s cubic-bezier(0.2, 0.9, 0.25, 1.12), opacity 0.2s ease; transition-delay: calc(var(--i, 0) * 40ms); }
.fd-pm.is-siap:not(.is-buka):not(.is-tutup) .fd-pm__it { transition: none; }
.fd-pm.is-buka .fd-pm__it { opacity: 1; transform: none; }
.fd-pm.is-tutup .fd-pm__it { transition-duration: 0.2s, 0.16s; transition-timing-function: cubic-bezier(0.4, 0, 1, 1), ease; transition-delay: calc(var(--j, 0) * 25ms); }
.fd-pm__list.is-gulir .fd-pm__it { transform: none; }    
.fd-pm__k { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 16px 8px 12px; background: var(--x-card); box-shadow: inset 4px 0 0 var(--x-lime); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); transition: background-color var(--dur-micro) var(--ease-out), transform 0.12s ease; }
.fd-pm__it:hover .fd-pm__k { background: color-mix(in oklab, var(--x-card) 92%, var(--x-ink)); }
.fd-pm__it:active .fd-pm__k { transform: scale(0.98); }
.fd-pm__it:focus-visible { outline: none; }
.fd-pm__it:focus-visible .fd-pm__k { box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 3px var(--c-focus); }
.fd-pm .fd-plus__ic { width: 40px; height: 36px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-navy); color: var(--x-lime); }
.fd-pm .fd-plus__ic .ic { width: 19px; height: 19px; }
.fd-pm__it:nth-child(2) .fd-plus__ic { background: var(--x-lime); color: var(--x-lime-ink); }
.fd-pm__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fd-pm__t b { font-family: var(--font-sport); font-size: 0.95rem; font-style: italic; font-weight: 800; line-height: 1.1; text-transform: uppercase; color: var(--x-ink); }
.fd-pm__t small { font-size: 0.8rem; line-height: 1.3; color: var(--x-muted); }
.fd-pm__fab .ic { transform: rotate(0deg); }
.fd-pm.is-buka .fd-pm__fab .ic { transform: rotate(45deg); }    
@media (prefers-reduced-motion: reduce) {
  .fd-pm__it, .fd-pm.is-tutup .fd-pm__it { transform: none !important; transition: opacity 0.15s ease; transition-delay: 0s; }
  .fd-pm__tirai, .fd-pm__k, .fd-pm__fab .ic { transition: none; }
}
@media (max-height: 700px) { .fd-pm__k { min-height: 52px; padding-top: 6px; padding-bottom: 6px; } .fd-pm__t small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } }