/* ui-patterns.css — platform patterns ported from docs/design/form-kit-designs.html
   (#datetime, #platform, #popups). Classes are the design's names prefixed fk-; markup examples
   live in /debug/forms. Generated by scripts/port-design-patterns.js — edit the design, then re-run. */
:root{--fk-shell:rgba(148,163,184,.06);--fk-body:"Plus Jakarta Sans","Manrope",system-ui,sans-serif;--fk-r:6px;--fk-r-sm:4px}
html[data-theme="light"]{--fk-shell:rgba(15,23,42,.035)}
/* shape-critical: the site forces border-radius:0 !important on buttons/inputs/img */
.fk-avatar.fk-round,.fk-pod .fk-av2,.fk-chat .fk-comp .fk-send,.fk-chat .fk-comp input{border-radius:999px!important}
.fk-cal-g button{border-radius:10px!important}
/* demo backdrop used by the gallery and any in-page preview */
.fk-frame{display:grid;place-items:center;padding:1.25rem;border-radius:1rem;background:repeating-linear-gradient(135deg,var(--bg-secondary),var(--bg-secondary) 12px,var(--bg-primary) 12px,var(--bg-primary) 24px)}
.fk-avail .fk-c:focus-visible{outline:2px solid var(--brand-primary);outline-offset:1px}
.fk-kbd{font:600 10.5px var(--fk-mono);color:var(--text-muted);border:1px solid var(--border-default);border-bottom-width:2px;border-radius:4px;padding:1px 6px}
.fk-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:3px;font:700 10.5px var(--fk-display);letter-spacing:.1em;text-transform:uppercase;border:1px solid transparent}
.fk-b-live{background:rgba(var(--st-error-rgb),.14);color:var(--fk-err-tx);border-color:rgba(var(--st-error-rgb),.35)}
.fk-b-live .fk-pulse{width:7px;height:7px;border-radius:50%;background:var(--fk-err-tx);box-shadow:0 0 0 0 rgba(var(--st-error-rgb),.6);animation:fk-pulse 1.6s infinite}
@keyframes fk-pulse{70%{box-shadow:0 0 0 7px rgba(var(--st-error-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--st-error-rgb),0)}}
.fk-b-reg{background:rgba(var(--st-success-rgb),.13);color:var(--st-success);border-color:rgba(var(--st-success-rgb),.35)}
.fk-b-check{background:rgba(var(--st-warning-rgb),.13);color:var(--st-warning);border-color:rgba(var(--st-warning-rgb),.35)}
.fk-b-up{background:rgba(var(--fk-info-rgb),.12);color:var(--fk-info);border-color:rgba(var(--fk-info-rgb),.32)}
.fk-b-done{background:var(--border-subtle);color:var(--text-muted);border-color:var(--border-default)}
.fk-b-cancel{background:transparent;color:var(--text-muted);border-color:var(--border-default);text-decoration:line-through}
.fk-b-solid{background:var(--brand-primary);color:#fff}
.fk-b-sec{background:rgba(var(--brand-secondary-rgb),.15);color:var(--brand-secondary-light);border-color:rgba(var(--brand-secondary-rgb),.4)}
.fk-avatar{width:36px;height:36px;border-radius:var(--fk-r-sm);display:grid;place-items:center;font:700 13px var(--fk-display);color:#fff;flex:none;position:relative}
.fk-avatar.fk-lg{width:52px;height:52px;font-size:17px}
.fk-avatar.fk-sm{width:26px;height:26px;font-size:10px}
.fk-avatar.fk-round{border-radius:50%}
.fk-avatar .fk-st{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:var(--st-success);border:2px solid var(--bg-card)}
.fk-stack{display:flex}
.fk-stack .fk-avatar{border:2px solid var(--bg-card);margin-left:-8px}
.fk-stack .fk-avatar:first-child{margin-left:0}
.fk-up{color:var(--st-success)}
.fk-down{color:var(--fk-err-tx)}
@keyframes bx-blink{50%{opacity:.25}}
.fk-vs{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fk-vs .fk-t{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.fk-vs .fk-sc{font:700 30px var(--fk-display);font-variant-numeric:tabular-nums}
.fk-dt-field{display:flex;align-items:center;gap:12px;height:56px;padding:0 12px 0 8px;cursor:pointer;text-align:left}
.fk-dt-field .fk-cal-ic{width:40px;height:40px;flex:none;border-radius:10px;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-card);box-shadow:inset 0 0 0 1px var(--border-default)}
.fk-dt-field .fk-cal-ic b{display:block;background:var(--brand-primary);color:#fff;font:700 8.5px var(--fk-display);letter-spacing:.1em;text-align:center;padding:2px 0}
.fk-dt-field .fk-cal-ic span{flex:1;display:grid;place-items:center;font:700 16px var(--fk-display);color:var(--text-primary)}
.fk-dt-field .fk-v{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.fk-dt-field .fk-v b{font-size:14.5px;color:var(--text-primary)}
.fk-dt-field .fk-v small{font-size:12px;color:var(--text-muted)}
.fk-dt-field .fk-rel{margin-left:auto;font:600 11px var(--fk-mono);color:var(--fk-accent-tx);background:rgba(var(--brand-primary-rgb),.1);padding:3px 8px;border-radius:99px;white-space:nowrap}
.fk-dt-field[aria-expanded="true"]{border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(var(--brand-primary-rgb),.22)}
.fk-cal{width:100%;max-width:330px;background:var(--bg-card);border-radius:18px;box-shadow:inset 0 0 0 1px var(--border-default),var(--fk-shadow);padding:14px;display:flex;flex-direction:column;gap:12px}
.fk-cal-h{display:flex;align-items:center;justify-content:space-between}
.fk-cal-h b{font:700 15px var(--fk-display);letter-spacing:.02em;color:var(--text-primary)}
.fk-cal-h .fk-nav{display:flex;gap:4px}
.fk-cal-h .fk-nav button{width:32px;height:32px;border-radius:50%;border:0;background:var(--border-subtle);color:var(--text-secondary);cursor:pointer;transition:background .3s var(--fk-out),transform .4s var(--fk-ease)}
.fk-cal-h .fk-nav button:hover{background:var(--border-default);color:var(--text-primary)}
.fk-cal-h .fk-nav button:active{transform:scale(.9)}
.fk-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.fk-cal-g .fk-wd{font:700 10px var(--fk-mono);letter-spacing:.08em;color:var(--text-muted);padding:4px 0 6px}
.fk-cal-g button{position:relative;aspect-ratio:1;border:0;background:none;border-radius:10px;font:600 13px var(--fk-body);color:var(--text-secondary);cursor:pointer;font-variant-numeric:tabular-nums;transition:background .25s var(--fk-out),color .25s var(--fk-out),transform .4s var(--fk-ease)}
.fk-cal-g button:hover{background:var(--border-subtle);color:var(--text-primary)}
.fk-cal-g button:active{transform:scale(.9)}
.fk-cal-g button.fk-out{color:var(--text-muted);opacity:.45}
.fk-cal-g button:disabled{opacity:.28;cursor:not-allowed;text-decoration:line-through}
.fk-cal-g button.fk-today::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--fk-accent-tx)}
.fk-cal-g button.fk-ev::before{content:"";position:absolute;top:5px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--brand-secondary-light)}
.fk-cal-g button.fk-in{background:rgba(var(--brand-primary-rgb),.12);border-radius:0;color:var(--text-primary)}
.fk-cal-g button.fk-sel,.fk-cal-g button.fk-r0,.fk-cal-g button.fk-r1{background:linear-gradient(135deg,var(--brand-primary-dark),var(--brand-primary));color:#fff;box-shadow:0 6px 16px -6px rgba(var(--brand-primary-rgb),.8)}
.fk-cal-g button.fk-r0{border-radius:10px 0 0 10px}
.fk-cal-g button.fk-r1{border-radius:0 10px 10px 0}
.fk-cal-g button.fk-r0.r1{border-radius:10px}
.fk-cal-t{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--border-subtle)}
.fk-cal-t .fk-lab{font-size:12px;color:var(--text-muted);margin-right:auto;display:flex;gap:6px;align-items:center}
.fk-cal-t select{height:36px;width:auto;padding:0 28px 0 10px;font-family:var(--fk-mono);font-size:13px}
.fk-cal-t .fk-ampm{display:inline-flex;padding:3px;border-radius:99px;background:var(--form-input-bg);box-shadow:inset 0 0 0 1px var(--fk-input-line)}
.fk-cal-t .fk-ampm button{border:0;background:none;padding:5px 10px;border-radius:99px;font:700 11px var(--fk-display);color:var(--text-muted);cursor:pointer}
.fk-cal-t .fk-ampm button[aria-pressed="true"]{background:var(--brand-primary);color:#fff}
.fk-cal-f{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--text-muted)}
.fk-presets2{display:flex;flex-wrap:wrap;gap:6px}
.fk-presets2 button{height:30px;padding:0 12px;border-radius:99px;border:0;background:var(--fk-shell);box-shadow:inset 0 0 0 1px var(--border-default);color:var(--text-secondary);font:600 12px var(--fk-body);cursor:pointer;transition:background .3s var(--fk-out),transform .4s var(--fk-ease)}
.fk-presets2 button:hover{background:var(--border-subtle);color:var(--text-primary)}
.fk-presets2 button:active{transform:scale(.95)}
.fk-range2{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.fk-range2 .fk-arrow{color:var(--text-muted);font-size:12px}
.fk-range2 .fk-box{padding:10px 12px;border-radius:12px;background:var(--form-input-bg);box-shadow:inset 0 0 0 1px var(--fk-input-line);display:flex;flex-direction:column;gap:2px;cursor:pointer}
.fk-range2 .fk-box.fk-on{box-shadow:inset 0 0 0 1.5px var(--brand-primary),0 0 0 3px rgba(var(--brand-primary-rgb),.18)}
.fk-range2 small{font:700 10px var(--fk-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.fk-range2 b{font-size:14px;color:var(--text-primary)}
.fk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.fk-slots label{position:relative}
.fk-slots input{position:absolute;opacity:0;width:1px;height:1px}
.fk-slots span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 6px;border-radius:12px;background:var(--form-input-bg);box-shadow:inset 0 0 0 1px var(--fk-input-line);font:700 13px var(--fk-mono);color:var(--text-primary);cursor:pointer;transition:all .3s var(--fk-out)}
.fk-slots span small{font:500 10.5px var(--fk-body);color:var(--text-muted)}
.fk-slots span:hover{box-shadow:inset 0 0 0 1px var(--fk-line-strong)}
.fk-slots input:checked + span{background:rgba(var(--brand-primary-rgb),.14);box-shadow:inset 0 0 0 1.5px var(--brand-primary);color:var(--text-primary)}
.fk-slots input:disabled + span{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.fk-slots input:focus-visible + span{outline:2px solid var(--text-primary);outline-offset:2px}
.fk-tz{position:relative}
.fk-tz-list{margin-top:6px;list-style:none;padding:5px;background:var(--bg-card);border-radius:14px;box-shadow:inset 0 0 0 1px var(--border-default),var(--fk-shadow);max-height:220px;overflow:auto}
.fk-tz-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:13px;color:var(--text-secondary);cursor:pointer}
.fk-tz-list li:hover,.fk-tz-list li[aria-selected="true"]{background:var(--border-subtle);color:var(--text-primary)}
.fk-tz-off{font:700 11px var(--fk-mono);padding:2px 7px;border-radius:99px;background:var(--border-default);color:var(--text-primary);min-width:66px;text-align:center}
.fk-tz-now{margin-left:auto;font:500 11.5px var(--fk-mono);color:var(--text-muted)}
.fk-avail{display:grid;grid-template-columns:52px repeat(7,1fr);gap:3px;user-select:none;touch-action:none}
.fk-avail .fk-h{font:700 10px var(--fk-mono);letter-spacing:.06em;color:var(--text-muted);text-align:center;padding-bottom:4px}
.fk-avail .fk-t{font:600 10.5px var(--fk-mono);color:var(--text-muted);text-align:right;padding-right:6px;align-self:center}
.fk-avail .fk-c{height:26px;border-radius:5px;background:var(--form-input-bg);box-shadow:inset 0 0 0 1px var(--fk-input-line);cursor:pointer;transition:background .2s var(--fk-out),transform .3s var(--fk-ease)}
.fk-avail .fk-c:hover{box-shadow:inset 0 0 0 1px var(--fk-line-strong)}
.fk-avail .fk-c.fk-on{background:linear-gradient(135deg,rgba(var(--st-success-rgb),.85),rgba(var(--st-success-rgb),.6));box-shadow:none}
.fk-avail .fk-c.fk-maybe{background:repeating-linear-gradient(45deg,rgba(var(--st-warning-rgb),.55),rgba(var(--st-warning-rgb),.55) 4px,rgba(var(--st-warning-rgb),.25) 4px,rgba(var(--st-warning-rgb),.25) 8px);box-shadow:none}
.fk-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-muted)}
.fk-legend span{display:flex;gap:6px;align-items:center}
.fk-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.fk-sched{display:flex;flex-direction:column}
.fk-sched .fk-day{font:700 11px var(--fk-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding:10px 0 6px}
.fk-sched .fk-row{display:grid;grid-template-columns:70px 14px 1fr auto;gap:12px;align-items:center;padding:8px 0}
.fk-sched .fk-time{font:700 13px var(--fk-mono);color:var(--text-primary);text-align:right}
.fk-sched .fk-dot{width:10px;height:10px;border-radius:50%;background:var(--fk-line-strong);box-shadow:0 0 0 4px var(--bg-card);position:relative;justify-self:center}
.fk-sched .fk-row.fk-live .fk-dot{background:var(--fk-err-tx);box-shadow:0 0 0 4px rgba(var(--st-error-rgb),.2)}
.fk-sched .fk-row.fk-done .fk-dot{background:var(--st-success)}
.fk-sched .fk-what{font-size:13.5px;color:var(--text-primary);min-width:0}
.fk-sched .fk-what small{display:block;font-size:12px;color:var(--text-muted)}
.fk-notif{width:100%;max-width:380px;background:var(--bg-card);border-radius:18px;box-shadow:inset 0 0 0 1px var(--border-default),var(--fk-shadow);overflow:hidden}
.fk-notif-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-subtle)}
.fk-notif-h b{font:700 14px var(--fk-display);letter-spacing:.04em;text-transform:uppercase}
.fk-notif-h .fk-cnt{font:700 10.5px var(--fk-mono);background:var(--brand-primary);color:#fff;padding:2px 7px;border-radius:99px}
.fk-notif-h a{margin-left:auto;font-size:12px;color:var(--fk-accent-tx);text-decoration:none}
.fk-notif-i{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-subtle);position:relative}
.fk-notif-i:last-child{border-bottom:0}
.fk-notif-i.fk-unread{background:rgba(var(--brand-primary-rgb),.05)}
.fk-notif-i.fk-unread::before{content:"";position:absolute;left:6px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--fk-accent-tx)}
.fk-notif-i .fk-ico{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:13px}
.fk-notif-i .fk-tx{font-size:13px;color:var(--text-secondary);min-width:0}
.fk-notif-i .fk-tx b{color:var(--text-primary)}
.fk-notif-i .fk-tx small{display:block;margin-top:2px;font-size:11.5px;color:var(--text-muted)}
.fk-notif-i .fk-acts{display:flex;gap:6px;margin-top:8px}
.fk-mu{border-radius:16px;background:var(--bg-card);box-shadow:inset 0 0 0 1px var(--border-default);overflow:hidden;min-width:0}
.fk-mu-h{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid var(--border-subtle);font:700 10.5px var(--fk-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.fk-mu-r{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13.5px;font-weight:600;color:var(--text-secondary)}
.fk-mu-r + .fk-mu-r{border-top:1px solid var(--border-subtle)}
.fk-mu-r .fk-seed{font:600 10.5px var(--fk-mono);color:var(--text-muted);width:18px}
.fk-mu-r .fk-sc{margin-left:auto;font:700 16px var(--fk-display);font-variant-numeric:tabular-nums;min-width:22px;text-align:right;color:var(--text-muted)}
.fk-mu-r.fk-win{color:var(--text-primary)}
.fk-mu-r.fk-win .fk-sc{color:var(--text-primary)}
.fk-mu-r.fk-win{box-shadow:inset 3px 0 0 var(--brand-primary)}
.fk-mu-f{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 14px;background:var(--bg-secondary);font-size:12px;color:var(--text-muted)}
.fk-draft{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start}
.fk-draft .fk-side{display:flex;flex-direction:column;gap:6px}
.fk-draft .fk-side.fk-red{align-items:flex-end}
.fk-draft .fk-lbl{font:700 11px var(--fk-display);letter-spacing:.12em;text-transform:uppercase}
.fk-draft .fk-bans{display:flex;gap:5px}
.fk-draft .fk-ban{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--bg-elevated);color:var(--text-muted);font:700 10px var(--fk-display);position:relative;overflow:hidden}
.fk-draft .fk-ban::after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 46%,var(--fk-err-tx) 46% 54%,transparent 54%)}
.fk-draft .fk-picks{display:flex;flex-direction:column;gap:5px;width:100%}
.fk-draft .fk-pick{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 5px;border-radius:10px;background:var(--form-input-bg);box-shadow:inset 0 0 0 1px var(--fk-input-line);font-size:12.5px;font-weight:600}
.fk-draft .fk-red .fk-pick{flex-direction:row-reverse;padding:5px 5px 5px 8px}
.fk-draft .fk-pick .fk-hero{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font:700 10px var(--fk-display);color:#fff}
.fk-draft .fk-pick.fk-now{box-shadow:inset 0 0 0 1.5px var(--brand-primary);animation:bx-blink 1.4s infinite}
.fk-draft .fk-pick.fk-empty{color:var(--text-muted);font-weight:500}
.fk-draft .fk-pick.fk-empty .fk-hero{background:var(--border-default)!important}
.fk-draft .fk-mid{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:18px}
.fk-draft .fk-mid b{font:700 26px var(--fk-display);font-variant-numeric:tabular-nums}
.fk-bid{border-radius:18px;background:var(--bg-card);box-shadow:inset 0 0 0 1px var(--border-default);padding:16px;display:flex;flex-direction:column;gap:12px}
.fk-bid .fk-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.fk-bid .fk-cur small{font:700 10px var(--fk-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.fk-bid .fk-cur b{display:block;font:700 30px var(--fk-display);font-variant-numeric:tabular-nums;line-height:1.05}
.fk-bid .fk-cur span{font-size:12px;color:var(--text-muted)}
.fk-bid .fk-tm{font:700 22px var(--fk-mono);color:var(--st-warning)}
.fk-bid .fk-bar2{height:4px;border-radius:2px;background:var(--border-default);overflow:hidden}
.fk-bid .fk-bar2 i{display:block;height:100%;background:var(--st-warning);transform-origin:left;transition:transform 1s linear}
.fk-bid .fk-inc{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fk-bid .fk-inc button{height:36px;border-radius:10px;border:0;background:var(--border-subtle);color:var(--text-primary);font:700 12.5px var(--fk-mono);cursor:pointer;transition:background .3s var(--fk-out),transform .4s var(--fk-ease)}
.fk-bid .fk-inc button:hover{background:var(--border-default)}
.fk-bid .fk-inc button:active{transform:scale(.94)}
.fk-chat{border-radius:18px;background:var(--bg-card);box-shadow:inset 0 0 0 1px var(--border-default);display:flex;flex-direction:column;overflow:hidden}
.fk-chat .fk-msgs{padding:14px;display:flex;flex-direction:column;gap:10px;max-height:240px;overflow:auto}
.fk-chat .fk-m{display:flex;gap:8px;align-items:flex-end;max-width:85%}
.fk-chat .fk-m .fk-bub{padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--bg-elevated);font-size:13px;color:var(--text-primary)}
.fk-chat .fk-m .fk-bub small{display:block;font-size:10.5px;color:var(--text-muted);margin-top:2px}
.fk-chat .fk-m.fk-me{align-self:flex-end;flex-direction:row-reverse}
.fk-chat .fk-m.fk-me .fk-bub{border-radius:14px 14px 4px 14px;background:linear-gradient(135deg,var(--brand-primary-dark),var(--brand-primary));color:#fff}
.fk-chat .fk-m.fk-me .fk-bub small{color:rgba(255,255,255,.75)}
.fk-chat .fk-sys{align-self:center;font-size:11.5px;color:var(--text-muted);background:var(--border-subtle);padding:3px 10px;border-radius:99px}
.fk-chat .fk-typing{display:flex;gap:3px;padding:10px 12px;border-radius:14px;background:var(--bg-elevated)}
.fk-chat .fk-typing i{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:fk-typ 1.2s infinite}
.fk-chat .fk-typing i:nth-child(2){animation-delay:.15s}
.fk-chat .fk-typing i:nth-child(3){animation-delay:.3s}
@keyframes fk-typ{30%{transform:translateY(-4px);opacity:1}0%,60%,100%{opacity:.4}}
.fk-chat .fk-comp{display:flex;align-items:center;gap:6px;padding:8px;border-top:1px solid var(--border-subtle)}
.fk-chat .fk-comp input{flex:1;height:40px;border-radius:99px;padding:0 16px}
.fk-chat .fk-comp .fk-send{width:40px;height:40px;border-radius:50%;border:0;background:var(--brand-primary);color:#fff;cursor:pointer;transition:transform .4s var(--fk-ease)}
.fk-chat .fk-comp .fk-send:active{transform:scale(.9)}
.fk-disp{border-radius:18px;background:var(--bg-card);box-shadow:inset 0 0 0 1px var(--border-default);padding:16px;display:flex;flex-direction:column;gap:12px}
.fk-disp .fk-top{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.fk-disp h5{margin:0;font:700 14.5px var(--fk-display);color:var(--text-primary)}
.fk-disp p{margin:0;font-size:13px;color:var(--text-secondary)}
.fk-disp .fk-ev{display:flex;gap:8px}
.fk-disp .fk-ev span{width:64px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--bg-elevated),var(--border-default));display:grid;place-items:center;color:var(--text-muted);font-size:13px}
.fk-disp .fk-tl{display:flex;gap:0;font-size:11.5px;color:var(--text-muted)}
.fk-disp .fk-tl span{flex:1;padding-top:8px;border-top:2px solid var(--border-default)}
.fk-disp .fk-tl span.fk-done{border-color:var(--brand-primary);color:var(--text-secondary)}
.fk-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:10px}
.fk-pod{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.fk-pod .fk-av2{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font:700 16px var(--fk-display);color:#fff;position:relative}
.fk-pod .fk-av2 .fk-crown{position:absolute;top:-14px;color:#f59e0b;font-size:14px}
.fk-pod b{font-size:13px;color:var(--text-primary)}
.fk-pod small{font:600 11px var(--fk-mono);color:var(--text-muted)}
.fk-pod .fk-blk{width:100%;border-radius:12px 12px 4px 4px;display:grid;place-items:center;font:700 22px var(--fk-display);color:#fff}
.fk-pod.fk-p1 .fk-blk{height:96px;background:linear-gradient(180deg,#f59e0b,#b45309)}
.fk-pod.fk-p2 .fk-blk{height:70px;background:linear-gradient(180deg,#94a3b8,#475569)}
.fk-pod.fk-p3 .fk-blk{height:54px;background:linear-gradient(180deg,#c2410c,#7c2d12)}
.fk-lb-row{display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:center;padding:9px 4px;border-top:1px solid var(--border-subtle);font-size:13px}
.fk-lb-row .fk-rk{font:700 12px var(--fk-mono);color:var(--text-muted)}
.fk-lb-row .fk-delta{font:700 11px var(--fk-mono)}
.fk-lb-row .fk-pts{font:700 13px var(--fk-mono);color:var(--text-primary)}
.fk-pp-pop{width:280px;background:var(--bg-card);border-radius:16px;box-shadow:0 20px 50px -14px rgba(0,0,0,.7),inset 0 0 0 1px var(--border-default);padding:14px;position:relative}
.fk-pp-pop::before{content:"";position:absolute;top:-6px;left:28px;width:12px;height:12px;background:var(--bg-card);transform:rotate(45deg);box-shadow:-1px -1px 0 var(--border-default)}
.fk-pp-pop .fk-who{display:flex;gap:10px;align-items:center}
.fk-pp-pop .fk-who b{display:block;font-size:14px}
.fk-pp-pop .fk-who small{font-size:12px;color:var(--text-muted)}
.fk-pp-pop .fk-st3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}
.fk-pp-pop .fk-st3 div{text-align:center;padding:8px 4px;border-radius:10px;background:var(--form-input-bg)}
.fk-pp-pop .fk-st3 b{display:block;font:700 15px var(--fk-display)}
.fk-pp-pop .fk-st3 small{font:600 9.5px var(--fk-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.fk-pp.fk-cmdk{width:min(560px,100%);border-radius:18px}
.fk-pp.fk-cmdk .fk-q{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-subtle)}
.fk-pp.fk-cmdk .fk-q input{flex:1;background:none;border:0;outline:none;color:var(--text-primary);font:500 16px var(--fk-body)}
.fk-pp.fk-cmdk .fk-res{padding:6px;max-height:260px;overflow:auto}
.fk-pp.fk-cmdk .fk-g{font:700 10px var(--fk-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding:8px 10px 4px}
.fk-pp.fk-cmdk .fk-it{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;font-size:13.5px;color:var(--text-secondary);cursor:pointer}
.fk-pp.fk-cmdk .fk-it:hover,.fk-pp.fk-cmdk .fk-it.fk-on{background:var(--border-subtle);color:var(--text-primary)}
.fk-pp.fk-cmdk .fk-it .fk-ii{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--border-default);color:var(--text-secondary);font-size:12px;flex:none}
.fk-pp.fk-cmdk .fk-it small{margin-left:auto;font-size:11.5px;color:var(--text-muted)}
.fk-pp.fk-cmdk .fk-ft{display:flex;gap:14px;padding:10px 16px;border-top:1px solid var(--border-subtle);font-size:11.5px;color:var(--text-muted)}
.fk-pp.fk-lb{width:min(620px,100%);background:#05070d;color:#fff;box-shadow:0 30px 70px -20px rgba(0,0,0,.8)}
.fk-pp.fk-lb .fk-img{aspect-ratio:16/9;max-width:100%;display:grid;place-items:center;background:linear-gradient(135deg,#111827,#1f2937);color:rgba(255,255,255,.4);font-size:13px;flex-direction:column;gap:6px;position:relative}
.fk-pp.fk-lb .fk-img .fk-navb{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.fk-pp.fk-lb .fk-img .fk-navb.fk-l{left:10px}
.fk-pp.fk-lb .fk-img .fk-navb.fk-r{right:10px}
.fk-pp.fk-lb .fk-cap{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;font-size:12.5px;color:rgba(255,255,255,.7)}
.fk-pp.fk-lb .fk-thumbs{display:flex;gap:6px;padding:0 16px 14px}
.fk-pp.fk-lb .fk-thumbs span{width:54px;height:34px;border-radius:6px;background:#1f2937;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.fk-pp.fk-lb .fk-thumbs span.fk-on{box-shadow:inset 0 0 0 2px var(--brand-primary)}