
.pbk-nav-badge{display:none;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;margin-left:auto;font-size:10px;font-weight:800;background:rgba(124,92,252,.28);color:#c4b5fd;border-radius:9px;line-height:17px;}
.pbk-root{padding:2px 0 56px;color:#e7e9f3;font-family:system-ui,'Segoe UI',sans-serif;}
.pbk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.pbk-h1{font-size:26px;font-weight:900;letter-spacing:.01em;background:linear-gradient(135deg,#ffffff,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:flex;align-items:center;gap:10px;}
.pbk-sub{font-size:13px;color:#8a90ad;margin-top:5px;max-width:600px;line-height:1.55;}
.pbk-btn{border:none;border-radius:11px;font-weight:800;font-size:13px;cursor:pointer;padding:10px 17px;font-family:inherit;transition:transform .15s,filter .15s,background .15s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.pbk-btn-primary{background:linear-gradient(135deg,#8b6bff,#7C5CFC);color:#fff;box-shadow:0 6px 20px rgba(124,92,252,.38);}
.pbk-btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);}
.pbk-btn-ghost{background:rgba(255,255,255,.06);color:#c7cbe0;border:1px solid rgba(255,255,255,.13);}
.pbk-btn-ghost:hover{background:rgba(255,255,255,.11);}
/* overview */
.pbk-ov{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-bottom:24px;}
.pbk-ov-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 16px;backdrop-filter:blur(12px);}
.pbk-ov-l{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#7780a0;}
.pbk-ov-v{font-size:21px;font-weight:800;margin-top:5px;font-feature-settings:"tnum" 1;}
.pbk-ov-v.pos{color:#22c55e;}.pbk-ov-v.neg{color:#ef4444;}
.pbk-ov-v small{font-size:12px;font-weight:600;color:#8a90ad;}
/* grid + card */
.pbk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.pbk-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:18px 18px 16px;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s;}
.pbk-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pbc,#7C5CFC);}
.pbk-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,0,0,.45),inset 0 0 0 1px var(--pbc,#7C5CFC);border-color:transparent;}
.pbk-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.pbk-card-id{display:flex;align-items:flex-start;gap:11px;min-width:0;flex:1 1 auto;}
.pbk-emoji{font-size:26px;line-height:1.1;flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}
/* NAME FIT — the name used to be white-space:nowrap + text-overflow:ellipsis,
   so anything longer than the card ("FoC and HR but not TL Good") was chopped
   to "FoC and HR but n...". It now wraps onto as many lines as it needs and the
   whole strategy name is always readable. Grid rows stretch to equal height, so
   a two-line name simply makes that row a little taller. */
.pbk-card-name{font-size:15.5px;font-weight:800;color:#f3f4fb;line-height:1.25;white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
.pbk-card-meta{font-size:11px;color:#8089a6;margin-top:3px;line-height:1.4;white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
.pbk-grade{flex-shrink:0;min-width:38px;height:38px;padding:0 9px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:var(--gc,#8093b3);background:color-mix(in srgb,var(--gc,#8093b3) 16%,transparent);border:1px solid color-mix(in srgb,var(--gc,#8093b3) 40%,transparent);}
.pbk-spark{display:block;width:100%;height:46px;margin:14px 0 12px;}
.pbk-stat-row{display:flex;gap:10px;}
.pbk-stat{flex:1;}
.pbk-stat-l{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7780a0;}
.pbk-stat-v{font-size:16px;font-weight:800;margin-top:3px;color:#e7e9f3;font-feature-settings:"tnum" 1;}
.pbk-stat-v.pos{color:#22c55e;}.pbk-stat-v.neg{color:#ef4444;}
.pbk-wrbar{height:5px;border-radius:4px;background:rgba(239,68,68,.28);overflow:hidden;margin:13px 0 14px;}
.pbk-wrbar-fill{height:100%;background:linear-gradient(90deg,#16a34a,#22c55e);border-radius:4px;transition:width .5s;}
.pbk-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.pbk-trades-count{font-size:11px;font-weight:700;color:#8a90ad;}
.pbk-card-actions{display:flex;gap:6px;}
.pbk-mini{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#cfd3e6;border-radius:8px;padding:6px 9px;font-size:11px;font-weight:700;cursor:pointer;transition:background .15s;font-family:inherit;}
.pbk-mini:hover{background:rgba(124,92,252,.22);}
.pbk-mini-danger:hover{background:rgba(239,68,68,.22);}
/* empty */
.pbk-empty{text-align:center;padding:54px 24px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px dashed rgba(255,255,255,.14);border-radius:20px;}
.pbk-empty-ic{font-size:52px;margin-bottom:10px;}
.pbk-empty-h{font-size:20px;font-weight:800;color:#f3f4fb;}
.pbk-empty-p{font-size:13px;color:#8a90ad;max-width:480px;margin:10px auto 22px;line-height:1.6;}
.pbk-empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
/* modal */
.pbk-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(6,9,18,.66);backdrop-filter:blur(6px);}
.pbk-modal.open{display:flex;}
.pbk-modal-card{width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;background:#12131f;border:1px solid rgba(124,92,252,.25);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;}
.pbk-modal-card.wide{max-width:720px;}
.pbk-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08);font-size:16px;font-weight:800;color:#f3f4fb;}
.pbk-x{background:rgba(255,255,255,.07);border:none;color:#aab;width:30px;height:30px;border-radius:8px;font-size:14px;cursor:pointer;}
.pbk-x:hover{background:rgba(239,68,68,.25);color:#fff;}
.pbk-modal-body{padding:18px 20px;overflow-y:auto;}
.pbk-modal-foot{padding:14px 20px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:flex-end;gap:10px;}
.pbk-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;color:#9aa0bd;margin:14px 0 6px;text-transform:uppercase;}
.pbk-lbl:first-child{margin-top:0;}
.pbk-lbl-dim{color:#6a7090;font-weight:500;text-transform:none;letter-spacing:0;}
.pbk-input{width:100%;background:#0c0e17;color:#e7e9f3;border:1px solid #262a3c;border-radius:10px;padding:10px 12px;font-size:13px;font-family:inherit;outline:none;transition:border-color .15s;box-sizing:border-box;color-scheme:dark;}
select.pbk-input{color-scheme:dark;}
.pbk-input option, .pbk-input optgroup{background:#12131f;color:#e7e9f3;}
#fxReplay select{color-scheme:dark;}
#fxReplay select option{background:#11131b;color:#cdd9ef;}
/* ── Chart Replay: stop the app's global CSS from squishing the TradingView chart ──
   lightweight-charts paints into <canvas>es laid out inside its own <table>.
   The app has global rules — td{padding:7px 8px!important} (mobile) and a media
   reset that forces canvas{height:auto!important} — which leaked into that table
   and shrank the chart to ~276×138 inside its 330×340 box on phones (the "chart
   not full" bug). Neutralise those rules INSIDE the chart only: zero the table
   padding/borders/font so cells size to the chart, and make each canvas fill its
   (correctly-sized) pane wrapper. Verified: panes go 276×138 → 330×310. */
#fxLwc table,#fxLwc tr,#fxLwc td,#fxLwc tbody,#fxLwc thead,#fxLwc th{
  padding:0!important;margin:0!important;border:0!important;background:none!important;
  font-size:0!important;line-height:0!important;box-sizing:content-box!important;
}
#fxLwc canvas{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;}
/* custom dark dropdown (no native popup → no white-blank on any browser) */
.pbk-cdd{position:relative;}
.pbk-cdd-btn{width:100%;background:#0c0e17;color:#e7e9f3;border:1px solid #262a3c;border-radius:10px;padding:10px 12px;font-size:13px;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;text-align:left;}
.pbk-cdd.open .pbk-cdd-btn{border-color:#7C5CFC;}
.pbk-cdd-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pbk-cdd-arr{color:#7780a0;font-size:11px;flex-shrink:0;transition:transform .15s;}
.pbk-cdd.open .pbk-cdd-arr{transform:rotate(180deg);}
.pbk-cdd-panel{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;background:#12131f;border:1px solid #2a2f42;border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.6);max-height:230px;overflow-y:auto;padding:5px;}
.pbk-cdd.open .pbk-cdd-panel{display:block;}
.pbk-cdd-opt{padding:8px 11px;border-radius:7px;font-size:13px;color:#cfd3e6;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pbk-cdd-opt:hover{background:rgba(124,92,252,.18);color:#fff;}
.pbk-cdd-opt.on{background:rgba(124,92,252,.28);color:#fff;font-weight:700;}
.pbk-input:focus{border-color:#7C5CFC;}
.pbk-textarea{resize:vertical;min-height:64px;line-height:1.5;}
.pbk-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pbk-emoji-pick{display:flex;flex-wrap:wrap;gap:7px;}
.pbk-emoji-btn{width:38px;height:38px;border-radius:10px;border:1px solid #262a3c;background:#0c0e17;font-size:19px;cursor:pointer;transition:all .12s;}
.pbk-emoji-btn:hover{border-color:#7C5CFC;}
.pbk-emoji-btn.sel{border-color:#7C5CFC;background:rgba(124,92,252,.2);transform:scale(1.06);}
.pbk-color-pick{display:flex;flex-wrap:wrap;gap:9px;}
.pbk-color-btn{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .12s;}
.pbk-color-btn.sel{border-color:#fff;transform:scale(1.15);box-shadow:0 0 0 2px rgba(255,255,255,.2);}
.pbk-rule-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.pbk-rule-num{flex-shrink:0;width:22px;height:22px;border-radius:6px;background:rgba(124,92,252,.18);color:#c4b5fd;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.pbk-rule-del{flex-shrink:0;background:rgba(255,255,255,.06);border:none;color:#9aa;width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:12px;}
.pbk-rule-del:hover{background:rgba(239,68,68,.25);color:#fff;}
.pbk-add-rule{margin-top:4px;background:rgba(124,92,252,.12);border:1px dashed rgba(124,92,252,.4);color:#c4b5fd;border-radius:9px;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;width:100%;}
.pbk-add-rule:hover{background:rgba(124,92,252,.2);}
/* detail */
.pbk-d-hero{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.pbk-d-hero .pbk-emoji{font-size:34px;}
.pbk-d-hname{font-size:20px;font-weight:800;color:#f3f4fb;}
.pbk-d-hmeta{font-size:12px;color:#8089a6;margin-top:2px;}
.pbk-d-equity{width:100%;height:184px;background:#0c0e17;border:1px solid #1d2030;border-radius:12px;display:block;margin-bottom:16px;}
.pbk-d-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-bottom:16px;}
.pbk-d-tile{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:10px 12px;}
.pbk-d-tl{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7780a0;}
.pbk-d-v{font-size:16px;font-weight:800;margin-top:4px;color:#e7e9f3;font-feature-settings:"tnum" 1;}
.pbk-d-v.pos{color:#22c55e;}.pbk-d-v.neg{color:#ef4444;}
.pbk-d-sec{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9aa0bd;margin:18px 0 9px;}
.pbk-d-rules{list-style:none;padding:0;margin:0;}
.pbk-d-rules li{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:#cfd3e6;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);line-height:1.45;}
.pbk-d-rules li::before{content:'✓';color:#7C5CFC;font-weight:900;flex-shrink:0;}
.pbk-d-desc{font-size:13px;color:#aeb3cc;line-height:1.6;background:rgba(255,255,255,.03);border-radius:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.06);}
.pbk-tt{width:100%;border-collapse:collapse;font-size:12px;}
.pbk-tt th{text-align:left;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#7780a0;font-weight:700;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.1);}
.pbk-tt td{padding:8px;border-bottom:1px solid rgba(255,255,255,.05);color:#d2d6e8;}
.pbk-tt tr:hover td{background:rgba(255,255,255,.03);}
.pbk-pill{font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;}
.pbk-pill.buy{background:rgba(34,197,94,.18);color:#4ade80;}
.pbk-pill.sell{background:rgba(239,68,68,.18);color:#f87171;}
.pbk-untag{background:none;border:none;color:#8089a6;cursor:pointer;font-size:12px;padding:2px 6px;border-radius:6px;}
.pbk-untag:hover{background:rgba(239,68,68,.22);color:#fff;}
/* assign */
.pbk-asg-row{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:background .12s;border:1px solid transparent;}
.pbk-asg-row:hover{background:rgba(255,255,255,.04);}
.pbk-asg-row input{width:17px;height:17px;accent-color:#7C5CFC;cursor:pointer;flex-shrink:0;}
.pbk-asg-main{flex:1;min-width:0;}
.pbk-asg-l1{font-size:13px;font-weight:700;color:#e7e9f3;}
.pbk-asg-l2{font-size:11px;color:#8089a6;margin-top:1px;}
.pbk-asg-pnl{font-weight:800;font-size:13px;font-feature-settings:"tnum" 1;}
.pbk-asg-pnl.pos{color:#22c55e;}.pbk-asg-pnl.neg{color:#ef4444;}
.pbk-asg-other{font-size:10px;color:#c4b5fd;background:rgba(124,92,252,.16);padding:1px 6px;border-radius:5px;}
.pbk-asg-empty{text-align:center;color:#8089a6;font-size:13px;padding:30px;}
@media(max-width:560px){.pbk-row2{grid-template-columns:1fr;}}
