


#tb-fit .pf-wrap { display: flex; flex-direction: column; min-height: 60vh; }

@media (max-width: 768px) {
    #tb-fit .pf-wrap {
        position: fixed; inset: 0; z-index: 101;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        background: radial-gradient(circle at 50% -5%, #131820, #05070a);
        
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
}

#tb-fit .pf-top {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 10px;
    
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
    background: linear-gradient(180deg, #0e131a, rgba(14,19,26,.9));
    border-bottom: 1px solid rgba(255,255,255,.08);
}
#tb-fit .pf-back, #tb-fit .pf-sync {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
    color: #e6edf3; display: grid; place-items: center; cursor: pointer; padding: 0;
}
#tb-fit .pf-sync { color: #8b949e; }
#tb-fit .pf-back:hover, #tb-fit .pf-sync:hover { border-color: rgba(255,255,255,.18); color: #fff; }
#tb-fit .pf-back svg { width: 18px; height: 18px; }
#tb-fit .pf-sync svg { width: 15px; height: 15px; }
#tb-fit .pf-title { flex: 1; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .5px; color: #fff; }
#tb-fit .pf-title small { display: block; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #FC4C02; margin-top: 1px; }

#tb-fit .pf-body { padding: 16px 16px 40px; }
#tb-fit .pf-block { margin-bottom: 18px; }
#tb-fit .pf-sec { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: #8b949e; margin: 0 0 9px; }
#tb-fit .pf-loading { color: #8b949e; font-size: 12px; padding: 10px 0; }


.pf-ci { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 11px 12px; margin-bottom: 16px;
         background: linear-gradient(160deg, rgba(240,180,41,.15), rgba(22,27,34,.6)); border: 1px solid rgba(240,180,41,.42); }
.pf-ci.ok { background: linear-gradient(160deg, rgba(0,255,148,.1), rgba(22,27,34,.6)); border-color: rgba(0,255,148,.3); }
.pf-ci .ci-ic { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(240,180,41,.16); color: #f0b429; }
.pf-ci.ok .ci-ic { background: rgba(0,255,148,.14); color: #00FF94; }
.pf-ci .ci-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pf-ci .ci-tx { flex: 1; font-size: 12px; color: #e6edf3; line-height: 1.45; }
.pf-ci .ci-tx b { color: #f0b429; font-weight: 600; }
.pf-ci.ok .ci-tx b { color: #00FF94; }
.pf-ci .ci-btn { margin-top: 8px; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; color: #1a1206; background: #f0b429; border: none; border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.pf-ci .ci-days { flex: 0 0 auto; align-self: center; text-align: center; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 22px; color: #f0b429; line-height: 1;
                  background: rgba(240,180,41,.14); border: 1px solid rgba(240,180,41,.4); border-radius: 10px; padding: 8px 10px; }
.pf-ci .ci-days small { display: block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 8px; color: #5b6673; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }


.pf-delta { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: #8b949e; margin-bottom: 10px; padding: 0 2px; }
.pf-delta .up { color: #00FF94; font-weight: 600; }
.pf-delta .down { color: #ff6b6b; font-weight: 600; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
.pf-stat { background: rgba(22,27,34,.7); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 10px 6px; text-align: center; }
.pf-stat .v { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 18px; color: #e6edf3; }
.pf-stat .l { font-size: 9.5px; color: #8b949e; text-transform: uppercase; letter-spacing: .06em; margin-top: 1px; }
.pf-spark { padding: 11px 12px; background: rgba(22,27,34,.6); border: 1px solid rgba(252,76,2,.2); border-radius: 12px; margin-bottom: 6px; }
.pf-spark .sh { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #8b949e; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.pf-spark .sh b { color: #e6edf3; font-weight: 600; font-family: 'Rajdhani', sans-serif; font-size: 12px; }
.pf-spark svg { width: 100%; height: 48px; display: block; }
.pf-spark .lbls { display: flex; justify-content: space-between; font-size: 9.5px; color: #5b6673; margin-top: 4px; }
.pf-scoreline { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 0 2px; }
.pf-scoreline .lbl { color: #e6edf3; font-weight: 600; font-family: 'Rajdhani', sans-serif; letter-spacing: .3px; }
.pf-scoreline .lbl b { color: #FC4C02; }
.pf-scoreline .rk { font-size: 11.5px; color: #5b6673; }


.pf-erow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.pf-erow:last-child { border-bottom: none; }
.pf-erow .ed { flex: 0 0 46px; font-size: 10.5px; color: #5b6673; font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: .3px; }
.pf-erow .et { flex: 1; min-width: 0; font-size: 12px; color: #e6edf3; }
.pf-erow .et small { display: block; color: #8b949e; font-size: 10.5px; }
.pf-erow .ev { flex-shrink: 0; text-align: right; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .3px; }
.pf-erow .ev.paid { color: #00FF94; }
.pf-erow .ev.computed { color: #8b949e; font-size: 11px; }
.pf-erow .ev.represado { color: #f0b429; font-size: 11px; }
.pf-erow .ev small { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 8.5px; color: #5b6673; margin-top: 1px; }
.pf-regnote { font-size: 10.5px; color: #5b6673; line-height: 1.45; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.08); }
.pf-regnote b { color: #8b949e; font-weight: 600; }


.pf-tm { display: inline-block; margin-top: 3px; font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 5px; padding: 2px 7px; }
.pf-tm.best { color: #ffd166; background: rgba(255,209,102,.14); border: 1px solid rgba(255,209,102,.4); }
.pf-tm.qual { color: #8b949e; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }


.pf-anotar { flex: 0 0 auto; align-self: center; margin-left: 8px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; color: #58a6ff; background: rgba(88,166,255,.08); border: 1px solid rgba(88,166,255,.3); border-radius: 7px; padding: 4px 9px; cursor: pointer; }
.pf-anotar:hover { background: rgba(88,166,255,.16); }
.pf-empty { color: #8b949e; font-size: 12px; padding: 10px 0; line-height: 1.5; }

.pf-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.pf-golink { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #FC4C02; cursor: pointer; }
.pf-golink svg { width: 15px; height: 15px; }
.pf-src { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: #5b6673; letter-spacing: .05em; }
.pf-src b { color: #FC4C02; font-weight: 700; letter-spacing: .1em; }


.perf-fit-hook { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 11px; border-radius: 10px;
                 background: rgba(240,180,41,.1); border: 1px solid rgba(240,180,41,.36); font-size: 11.5px; color: #e6edf3; }
.perf-fit-hook.ok { background: rgba(0,255,148,.08); border-color: rgba(0,255,148,.3); }
.perf-fit-hook svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: #f0b429; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.perf-fit-hook.ok svg { stroke: #00FF94; }
.perf-fit-hook .pfh-t { flex: 1; min-width: 90px; line-height: 1.35; }
.perf-fit-hook .pfh-t b { color: #f0b429; font-weight: 600; }
.perf-fit-hook.ok .pfh-t b { color: #00FF94; }
.perf-fit-hook .pfh-btn { flex: 0 0 auto; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; color: #1a1206; background: #f0b429; border: none; border-radius: 7px; padding: 6px 10px; cursor: pointer; }

.perf-fit-link { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 12px; padding: 10px; border-radius: 10px;
                 background: rgba(252,76,2,.1); border: 1px solid rgba(252,76,2,.4); color: #FC4C02; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.perf-fit-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


.pf-body-act { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pf-btn { flex: 1; min-width: 140px; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: #fff; background: #FC4C02; border: none; border-radius: 10px; padding: 11px; cursor: pointer; }
.pf-btn-ghost { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: #8b949e; background: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 11px 16px; cursor: pointer; }

.pf-remind { display: flex; align-items: center; gap: 10px; background: rgba(240,180,41,.1); border: 1px solid rgba(240,180,41,.36); border-radius: 10px; padding: 9px 11px; margin-bottom: 12px; font-size: 11.5px; color: #e6edf3; }
.pf-remind span { flex: 1; }
.pf-remind-btn { flex: 0 0 auto; font-size: 10.5px; font-weight: 600; color: #1a1206; background: #f0b429; border: none; border-radius: 7px; padding: 6px 10px; cursor: pointer; }

.pf-bodytop { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.pf-bw { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 24px; color: #fff; }
.pf-bl { font-size: 10px; color: #8b949e; text-transform: uppercase; letter-spacing: .06em; }
.pf-trendv { font-size: 12px; color: #58a6ff; font-weight: 600; }
.pf-trend { margin-bottom: 12px; }
.pf-trend-h { font-size: 10px; color: #8b949e; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.pf-trend svg { width: 100%; height: 48px; display: block; background: rgba(22,27,34,.5); border: 1px solid rgba(88,166,255,.2); border-radius: 10px; }

.pf-metrics { display: flex; flex-direction: column; gap: 7px; margin-bottom: 4px; }
.pf-metric { display: flex; align-items: center; gap: 10px; background: rgba(22,27,34,.6); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 9px 12px; }
.pf-metric .pf-mn { flex: 1; min-width: 0; font-size: 12px; color: #e6edf3; }
.pf-metric .pf-mn small { display: block; font-size: 9.5px; color: #5b6673; }
.pf-metric .pf-mv { flex-shrink: 0; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.pf-metric .pf-mv.na { color: #5b6673; }
.pf-mb { flex: 0 0 auto; font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; padding: 3px 8px; min-width: 62px; text-align: center; }
.pf-mb.ok   { color: #00FF94; background: rgba(0,255,148,.12); }
.pf-mb.warn { color: #f0b429; background: rgba(240,180,41,.14); }
.pf-mb.bad  { color: #f85149; background: rgba(248,81,73,.14); }
.pf-mb.flat { color: #8b949e; background: transparent; }

.pf-mnote { font-size: 11px; color: #e6edf3; line-height: 1.45; margin-top: 10px; padding: 9px 11px; background: rgba(88,166,255,.08); border: 1px solid rgba(88,166,255,.25); border-radius: 10px; }
.pf-disc { font-size: 10px; color: #5b6673; line-height: 1.4; margin-top: 10px; }


.pf-sheet-bg { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; }
.pf-sheet-bg[hidden] { display: none; }
.pf-sheet { width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; background: linear-gradient(180deg, #131820, #0b0f14); border: 1px solid rgba(252,76,2,.28); border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -18px 50px rgba(0,0,0,.5); }
@media (min-width: 620px) { .pf-sheet-bg { align-items: center; } .pf-sheet { border-radius: 18px; } }
.pf-sheet-h { display: flex; align-items: center; justify-content: space-between; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px; color: #fff; letter-spacing: .4px; margin-bottom: 14px; }
.pf-sheet-x { background: none; border: none; color: #8b949e; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.pf-frow { margin-bottom: 11px; }
.pf-frow > label { display: block; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .7px; text-transform: uppercase; color: #8b949e; margin-bottom: 5px; }
.pf-inp { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 0 12px; }
.pf-inp:focus-within { border-color: rgba(252,76,2,.5); }
.pf-inp input { flex: 1; min-width: 0; background: transparent; border: none; color: #fff; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 18px; padding: 11px 0; outline: none; }
.pf-inp span { color: #8b949e; font-size: 12px; font-family: 'Inter', sans-serif; }
.pf-imc { font-size: 11.5px; color: #8b949e; margin: -4px 0 12px; min-height: 16px; }
.pf-fdiv { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: #5b6673; margin: 14px 0 9px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.pf-f3 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-f3 .pf-frow { margin-bottom: 0; }
.pf-f3 .pf-inp { padding: 0 10px; }
.pf-f3 .pf-inp input { font-size: 15px; }
.pf-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-seg button { flex: 1; min-width: 90px; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; color: #8b949e; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px 6px; cursor: pointer; }
.pf-seg button.on { color: #fff; background: rgba(252,76,2,.85); border-color: rgba(252,76,2,.85); }
.pf-sheet-act { display: flex; gap: 10px; margin-top: 16px; }
.pf-priv { font-size: 10.5px; color: #5b6673; margin-top: 12px; }


.pf-goalrow { margin-bottom: 14px; }
.pf-goalrow:last-of-type { margin-bottom: 8px; }
.pf-goalhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pf-goalv { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 22px; color: #fff; }
.pf-goalv small { font-size: 12px; color: #8b949e; font-weight: 600; }
.pf-goalpct { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px; color: #FC4C02; }
.pf-goalpct.done { color: #00FF94; }
.pf-goalbar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.pf-goalbar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #FC4C02, #ff7a3c); transition: width .4s ease; }
.pf-goalfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; font-size: 11.5px; color: #8b949e; }
.pf-goalfoot b { color: #e6edf3; font-weight: 700; }
.pf-goaldone { color: #00FF94; font-weight: 600; }
.pf-goaledit { flex: 0 0 auto; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: #FC4C02; background: transparent; border: 1px solid rgba(252,76,2,.4); border-radius: 7px; padding: 5px 10px; cursor: pointer; }


.pf-trendv.good { color: #00FF94; }
.pf-trendv.bad  { color: #f0b429; }
.pf-objbar { font-size: 11px; color: #e6edf3; line-height: 1.4; margin: -2px 0 12px; padding: 8px 11px; background: rgba(252,76,2,.08); border: 1px solid rgba(252,76,2,.22); border-radius: 10px; }
.pf-metric.lead { border-color: rgba(252,76,2,.45); background: rgba(252,76,2,.06); }


.pf-mtr { padding: 10px 12px; margin-bottom: 8px; background: rgba(22,27,34,.6); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; }
.pf-mtr:last-of-type { margin-bottom: 0; }
.pf-mtr-h { display: flex; align-items: baseline; gap: 8px; }
.pf-mtr-n { flex: 0 0 auto; font-size: 12px; color: #e6edf3; font-weight: 600; }
.pf-mtr-v { flex: 1; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.pf-mtr-d { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: #58a6ff; }
.pf-mtr-d.good { color: #00FF94; }
.pf-mtr-d.bad  { color: #f0b429; }
.pf-mtr-flat { flex: 0 0 auto; font-size: 10.5px; color: #5b6673; }
.pf-mtr-spark { margin-top: 6px; }
.pf-mtr-spark svg { width: 100%; height: 30px; display: block; }
