/* aether-web — css/portfolio.css (Трек 10-2) Раздел «Портфель по адресу». ВСЁ scoped под :is(#page-portfolio,#page-brokers) + префикс .pf-* — не пересекается с глобальными/trades-классами (§1.3). Токены мокапа v8 как локальные переменные. Таблицы/ряды на flex (звезда-урок: не grid с фикс-колонками). */ :is(#page-portfolio,#page-brokers){ --pf-trench:#0C1219; --pf-reef:#121C27; --pf-border:rgba(255,255,255,.055); --pf-hair:rgba(255,255,255,.09); --pf-text:#EAF0F6; --pf-muted:#67768A; --pf-dim:#8A99AC; --pf-up:#3DDC97; --pf-dn:#f87171; --pf-amber:#F7B955; --pf-blue:#5B8DFF; --pf-teal:#5B8DFF; /* accent → our blue (was teal) */ --pf-grad-action:linear-gradient(135deg,#4A7BF0 0%,#7FA8FF 100%); /* blue CTA (was teal) */ color:var(--pf-text); } :is(#page-portfolio,#page-brokers) .pf-mono{font-family:'JetBrains Mono','SF Mono',Menlo,monospace;} /* full content width — :is(#page-portfolio,#page-brokers) is a .page (layout.css: position:absolute;inset:0 + its own 16/18px padding), same mechanism as #page-trades .tw-wrap: NO centered max-width, no extra horizontal padding (the .page provides it). Section fills the work area like Dashboard/Trades — no empty band on the right. */ :is(#page-portfolio,#page-brokers) .pf-wrap{padding-bottom:40px;} /* ── address bar + read-only banner ── */ :is(#page-portfolio,#page-brokers) .pf-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;} :is(#page-portfolio,#page-brokers) .pf-input{flex:1;min-width:240px;display:flex;align-items:center;gap:9px;background:var(--pf-trench);border:1px solid var(--pf-border);border-radius:10px;padding:11px 14px;} :is(#page-portfolio,#page-brokers) .pf-input svg{width:16px;height:16px;color:var(--pf-muted);flex-shrink:0;} :is(#page-portfolio,#page-brokers) .pf-input input{background:none;border:none;color:var(--pf-text);font-size:13px;flex:1;outline:none;font-family:'JetBrains Mono','SF Mono',Menlo,monospace;} :is(#page-portfolio,#page-brokers) .pf-input input::placeholder{color:var(--pf-muted);font-family:'Inter',sans-serif;} :is(#page-portfolio,#page-brokers) .pf-btn-show{font-size:13px;font-weight:600;border:none;border-radius:10px;padding:11px 20px;cursor:pointer;background:var(--pf-grad-action);color:#fff;} :is(#page-portfolio,#page-brokers) .pf-btn-ghost{font-size:13px;font-weight:600;border:1px solid var(--pf-hair);border-radius:10px;padding:11px 16px;cursor:pointer;background:transparent;color:var(--pf-text);} :is(#page-portfolio,#page-brokers) .pf-btn-show:disabled{opacity:.55;cursor:default;} :is(#page-portfolio,#page-brokers) .pf-err{color:var(--pf-dn);font-size:12px;margin:-6px 0 14px;min-height:14px;} :is(#page-portfolio,#page-brokers) .pf-ro{display:flex;align-items:center;gap:9px;background:rgba(91,141,255,.05);border:1px solid rgba(91,141,255,.15);border-radius:11px;padding:11px 16px;margin-bottom:24px;font-size:12px;color:var(--pf-dim);} :is(#page-portfolio,#page-brokers) .pf-ro b{color:var(--pf-text);font-weight:600;} :is(#page-portfolio,#page-brokers) .pf-ro .pf-lock{color:var(--pf-teal);} /* ── states ── */ :is(#page-portfolio,#page-brokers) .pf-empty,:is(#page-portfolio,#page-brokers) .pf-loading{padding:48px 20px;text-align:center;color:var(--pf-muted);font-size:13px;} :is(#page-portfolio,#page-brokers) .pf-skel{display:flex;flex-direction:column;gap:16px;} :is(#page-portfolio,#page-brokers) .pf-skel .pf-sk{height:120px;border-radius:16px;background:linear-gradient(90deg,var(--pf-trench) 25%,var(--pf-reef) 50%,var(--pf-trench) 75%);background-size:200% 100%;animation:pf-shimmer 1.3s linear infinite;} @keyframes pf-shimmer{to{background-position:-200% 0;}} /* ── top row: 3 aligned cards ── */ :is(#page-portfolio,#page-brokers) .pf-grid{display:grid;grid-template-columns:1.3fr 1.1fr 0.92fr;gap:20px;margin-bottom:20px;align-items:stretch;} :is(#page-portfolio,#page-brokers) .pf-card{background:var(--pf-trench);border:1px solid var(--pf-border);border-radius:16px;padding:24px;display:flex;flex-direction:column;} :is(#page-portfolio,#page-brokers) .pf-blk-t{font-size:17px;font-weight:700;letter-spacing:-.3px;} :is(#page-portfolio,#page-brokers) .pf-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;} :is(#page-portfolio,#page-brokers) .pf-info-i{width:18px;height:18px;border-radius:50%;border:1px solid var(--pf-border);display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:var(--pf-muted);} :is(#page-portfolio,#page-brokers) .pf-eyebrow{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--pf-muted);margin-bottom:10px;} :is(#page-portfolio,#page-brokers) .pf-eyebrow .pf-dot{width:6px;height:6px;border-radius:50%;background:var(--pf-teal);box-shadow:0 0 8px rgba(91,141,255,.6);} :is(#page-portfolio,#page-brokers) .pf-seg{display:inline-flex;background:#090D12;border:1px solid var(--pf-border);border-radius:9px;padding:3px;gap:2px;} :is(#page-portfolio,#page-brokers) .pf-seg span{font-size:11px;color:var(--pf-muted);padding:6px 14px;border-radius:6px;cursor:default;} :is(#page-portfolio,#page-brokers) .pf-seg span.on{background:var(--pf-reef);color:var(--pf-text);} /* dynamics (placeholder graph — real history = 10-2c) */ :is(#page-portfolio,#page-brokers) .pf-kv{display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px;} :is(#page-portfolio,#page-brokers) .pf-kv .k{color:var(--pf-muted);} :is(#page-portfolio,#page-brokers) .pf-kv .v{font-weight:600;} :is(#page-portfolio,#page-brokers) .pf-seg-row{margin:14px 0 4px;} :is(#page-portfolio,#page-brokers) .pf-graph{height:130px;width:100%;position:relative;margin-top:12px;flex:1;min-height:130px;} :is(#page-portfolio,#page-brokers) .pf-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--pf-muted);margin-top:10px;letter-spacing:.5px;} :is(#page-portfolio,#page-brokers) .pf-note{font-size:9.5px;color:var(--pf-amber);margin-top:14px;opacity:.85;letter-spacing:.3px;} :is(#page-portfolio,#page-brokers) .pf-acct-note{color:var(--pf-muted);} /* informational, not a warning */ /* total + orb */ :is(#page-portfolio,#page-brokers) .pf-tot-cur{font-size:11px;color:var(--pf-muted);border:1px solid var(--pf-border);border-radius:8px;padding:5px 10px;} :is(#page-portfolio,#page-brokers) .pf-tot-val{font-size:42px;font-weight:800;letter-spacing:-2px;margin:14px 0 8px;line-height:1;} :is(#page-portfolio,#page-brokers) .pf-tot-val .c{background:var(--pf-grad-action);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} :is(#page-portfolio,#page-brokers) .pf-tot-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--pf-muted);gap:10px;flex-wrap:wrap;} :is(#page-portfolio,#page-brokers) .pf-tot-meta .src{color:var(--pf-teal);} :is(#page-portfolio,#page-brokers) .pf-tot-meta .un{color:var(--pf-dn);} :is(#page-portfolio,#page-brokers) .pf-orb-stage{margin-top:20px;flex:1;min-height:200px;border-radius:14px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,rgba(91,141,255,.12),rgba(91,141,255,.07) 38%,transparent 70%);border:1px solid var(--pf-border);display:flex;flex-direction:column;align-items:center;justify-content:center;} :is(#page-portfolio,#page-brokers) .pf-orb{width:140px;height:140px;position:relative;} :is(#page-portfolio,#page-brokers) .pf-orb .ring{position:absolute;inset:0;border-radius:50%;} :is(#page-portfolio,#page-brokers) .pf-orb .r1{box-shadow:inset 0 0 0 1px rgba(91,141,255,.16);animation:pf-s1 14s linear infinite;} :is(#page-portfolio,#page-brokers) .pf-orb .r2{box-shadow:inset 0 0 0 1px rgba(91,141,255,.18);animation:pf-s2 18s linear infinite;} :is(#page-portfolio,#page-brokers) .pf-orb .r3{box-shadow:inset 0 0 0 1px rgba(201,166,255,.14);animation:pf-s3 22s linear infinite;} @keyframes pf-s1{to{transform:rotate(360deg);}} @keyframes pf-s2{from{transform:scale(.76) rotate(0)}to{transform:scale(.76) rotate(-360deg);}} @keyframes pf-s3{from{transform:scale(.54) rotate(0)}to{transform:scale(.54) rotate(360deg);}} :is(#page-portfolio,#page-brokers) .pf-orb i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--pf-teal);box-shadow:0 0 6px var(--pf-teal);} :is(#page-portfolio,#page-brokers) .pf-orb .core{position:absolute;left:50%;top:50%;width:30px;height:30px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 40% 35%,#AFC6FF,#5B8DFF 55%,#3D6BD6);box-shadow:0 0 36px rgba(91,141,255,.75);animation:pf-br 4s ease-in-out infinite;} @keyframes pf-br{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.14);}} /* Empty-state = ЕДИНАЯ десктопная структура на обеих платформах (решение Kamron'а 16.07, v13-карточка отменена): pf-bar (адрес+кнопки) + баннер .pf-ro + промпт .pf-empty (стиль выше, стр.37) + tracked .pf-row2-solo. Визитки-карточки нет нигде. Мобильный стек pf-bar (поле во всю ширину, кнопки под ним) — в mobile.css. */ :is(#page-portfolio,#page-brokers) .pf-stars{position:absolute;inset:0;} :is(#page-portfolio,#page-brokers) .pf-stars i{position:absolute;width:1.5px;height:1.5px;background:rgba(255,255,255,.4);border-radius:50%;animation:pf-tw 3s ease-in-out infinite;} @keyframes pf-tw{0%,100%{opacity:.2}50%{opacity:.8}} @media(prefers-reduced-motion:reduce){:is(#page-portfolio,#page-brokers) .pf-orb .ring,:is(#page-portfolio,#page-brokers) .pf-orb .core,:is(#page-portfolio,#page-brokers) .pf-stars i{animation:none;}} /* allocation */ :is(#page-portfolio,#page-brokers) .pf-donut{width:150px;height:150px;border-radius:50%;margin:14px auto 18px;position:relative;} :is(#page-portfolio,#page-brokers) .pf-donut::after{content:'';position:absolute;inset:21px;border-radius:50%;background:var(--pf-trench);} :is(#page-portfolio,#page-brokers) .pf-donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;} :is(#page-portfolio,#page-brokers) .pf-donut-c .n{font-size:17px;font-weight:800;} :is(#page-portfolio,#page-brokers) .pf-donut-c .l{font-size:9px;color:var(--pf-muted);letter-spacing:.5px;} :is(#page-portfolio,#page-brokers) .pf-leg{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:8px 0;border-top:1px solid var(--pf-border);} :is(#page-portfolio,#page-brokers) .pf-leg:first-of-type{border-top:none;} :is(#page-portfolio,#page-brokers) .pf-leg .d{width:9px;height:9px;border-radius:3px;flex-shrink:0;} :is(#page-portfolio,#page-brokers) .pf-leg .p{color:var(--pf-text);font-weight:600;margin-left:auto;} /* multichain: tabs (Hyperliquid ↔ Whole wallet) + on-chain view */ :is(#page-portfolio,#page-brokers) .pf-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--pf-border);} :is(#page-portfolio,#page-brokers) .pf-tab{font-size:13px;font-weight:600;border:none;background:transparent;color:var(--pf-muted);padding:10px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;} :is(#page-portfolio,#page-brokers) .pf-tab.on{color:var(--pf-text);border-bottom-color:var(--pf-teal);} :is(#page-portfolio,#page-brokers) .pf-oc-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:8px;padding:6px 2px;} :is(#page-portfolio,#page-brokers) .pf-oc-tot-l{font-size:11px;color:var(--pf-muted);} :is(#page-portfolio,#page-brokers) .pf-oc-tot{font-size:28px;font-weight:800;letter-spacing:-1px;} :is(#page-portfolio,#page-brokers) .pf-oc-src{font-size:11px;color:var(--pf-teal);} :is(#page-portfolio,#page-brokers) .pf-oc-chain{font-size:8.5px;font-weight:700;border-radius:5px;padding:2px 6px;letter-spacing:.3px;} /* 10-3: AI analysis panel */ :is(#page-portfolio,#page-brokers) .pf-ai{margin-bottom:20px;} :is(#page-portfolio,#page-brokers) .pf-ai-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} :is(#page-portfolio,#page-brokers) .pf-ai-btn{font-size:13px;font-weight:600;border:none;border-radius:10px;padding:11px 20px;cursor:pointer;background:var(--pf-grad-action);color:#fff;} :is(#page-portfolio,#page-brokers) .pf-ai-btn:disabled{opacity:.55;cursor:default;} :is(#page-portfolio,#page-brokers) .pf-ai-disc{font-size:11px;color:var(--pf-muted);} :is(#page-portfolio,#page-brokers) .pf-ai-out{margin-top:14px;background:var(--pf-trench);border:1px solid var(--pf-border);border-radius:14px;padding:18px 20px;font-size:13.5px;line-height:1.6;color:var(--pf-text);} :is(#page-portfolio,#page-brokers) .pf-ai-out h2,:is(#page-portfolio,#page-brokers) .pf-ai-out h3{font-size:14px;margin:12px 0 6px;} :is(#page-portfolio,#page-brokers) .pf-ai-out ul,:is(#page-portfolio,#page-brokers) .pf-ai-out ol{margin:6px 0 6px 18px;} :is(#page-portfolio,#page-brokers) .pf-ai-out em{color:var(--pf-muted);font-size:11.5px;} :is(#page-portfolio,#page-brokers) .pf-ai-out a{color:var(--pf-teal);} /* orb "comes alive" while AI analyses */ :is(#page-portfolio,#page-brokers) .pf-orb-stage.pf-orb-live{box-shadow:0 0 0 1px rgba(91,141,255,.4),0 0 28px rgba(91,141,255,.18) inset;transition:box-shadow .3s;} /* bottom row: wallets (placeholder) + assets (real) */ :is(#page-portfolio,#page-brokers) .pf-row2{display:grid;grid-template-columns:1.15fr 0.85fr;gap:20px;margin-bottom:24px;align-items:stretch;} :is(#page-portfolio,#page-brokers) .pf-row2-solo{margin-bottom:24px;} /* empty-state: tracked wallets full width */ :is(#page-portfolio,#page-brokers) .pf-panel{background:var(--pf-trench);border:1px solid var(--pf-border);border-radius:16px;padding:6px 0 10px;} :is(#page-portfolio,#page-brokers) .pf-panel-cap{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 12px;} :is(#page-portfolio,#page-brokers) .pf-panel-cap .t{font-size:16px;font-weight:700;} :is(#page-portfolio,#page-brokers) .pf-panel-cap .more{font-size:11.5px;color:var(--pf-muted);} /* wallets — honest "coming soon" placeholder (NO fake data, §1.4) */ /* compact placeholder — must NOT inflate the panel height next to the (short) assets table. No min-height / flex:1 — height = content only (row2 is align-items:start). */ :is(#page-portfolio,#page-brokers) .pf-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:24px 22px;text-align:center;color:var(--pf-muted);font-size:12px;} :is(#page-portfolio,#page-brokers) .pf-soon .ic{width:40px;height:40px;border-radius:12px;background:var(--pf-reef);display:flex;align-items:center;justify-content:center;color:var(--pf-teal);} :is(#page-portfolio,#page-brokers) .pf-soon .tag{font-size:10px;color:var(--pf-amber);border:1px solid rgba(247,185,85,.3);border-radius:6px;padding:3px 9px;} /* 10-2b: manual entry (off-HL, localStorage) — clearly separated from on-chain */ :is(#page-portfolio,#page-brokers) .pf-man-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;} :is(#page-portfolio,#page-brokers) .pf-man-title{font-size:18px;font-weight:700;} :is(#page-portfolio,#page-brokers) .pf-man-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px;} :is(#page-portfolio,#page-brokers) .pf-man-form input,:is(#page-portfolio,#page-brokers) .pf-man-form select{background:var(--pf-trench);border:1px solid var(--pf-border);border-radius:8px;padding:9px 11px;color:var(--pf-text);font-size:12.5px;outline:none;} :is(#page-portfolio,#page-brokers) .pf-man-form #pf-m-sym{width:120px;} :is(#page-portfolio,#page-brokers) .pf-man-form #pf-m-qty,:is(#page-portfolio,#page-brokers) .pf-man-form #pf-m-price{width:130px;} :is(#page-portfolio,#page-brokers) .pf-man-form #pf-m-note{flex:1;min-width:120px;} :is(#page-portfolio,#page-brokers) .pf-man-tot{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;padding:14px 2px 4px;} :is(#page-portfolio,#page-brokers) .pf-man-tot b{font-size:22px;font-weight:800;color:var(--pf-amber);} :is(#page-portfolio,#page-brokers) .pf-man-bd{font-size:12px;color:var(--pf-muted);padding:2px 2px 6px;} :is(#page-portfolio,#page-brokers) .pf-man-bd b{color:var(--pf-text);} :is(#page-portfolio,#page-brokers) .pf-src{font-size:9px;color:var(--pf-muted);border:1px solid var(--pf-border);border-radius:4px;padding:1px 5px;} :is(#page-portfolio,#page-brokers) .pf-man-tx{display:flex;align-items:center;gap:10px;padding:11px 22px;border-top:1px solid var(--pf-border);flex-wrap:wrap;} :is(#page-portfolio,#page-brokers) .pf-mtx-main{flex:1;min-width:0;font-size:12.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;} :is(#page-portfolio,#page-brokers) .pf-mtx-meta{font-size:10.5px;color:var(--pf-muted);} :is(#page-portfolio,#page-brokers) .pf-mtx-op{display:flex;gap:6px;flex-shrink:0;} /* 10-4: tracked wallets (localStorage) — real data only, flex rows (star-lesson) */ :is(#page-portfolio,#page-brokers) .pf-track-add{display:flex;gap:8px;flex-wrap:wrap;padding:6px 22px 4px;} :is(#page-portfolio,#page-brokers) .pf-track-add input{background:var(--pf-bg,#090D12);border:1px solid var(--pf-border);border-radius:8px;padding:8px 11px;color:var(--pf-text);font-size:12px;outline:none;} :is(#page-portfolio,#page-brokers) .pf-track-add #pf-track-addr{flex:1;min-width:180px;font-family:'JetBrains Mono','SF Mono',Menlo,monospace;} :is(#page-portfolio,#page-brokers) .pf-track-add #pf-track-name{width:130px;} :is(#page-portfolio,#page-brokers) .pf-btn-mini{font-size:11.5px;font-weight:600;border:none;border-radius:8px;padding:7px 14px;cursor:pointer;background:var(--pf-grad-action);color:#fff;} :is(#page-portfolio,#page-brokers) .pf-btn-mini.ghost{background:transparent;border:1px solid var(--pf-hair);color:var(--pf-muted);} :is(#page-portfolio,#page-brokers) .pf-pc-r{display:flex;align-items:center;padding:12px 22px;border-top:1px solid var(--pf-border);gap:10px;} :is(#page-portfolio,#page-brokers) .pf-w-wal{flex:1;min-width:0;display:flex;align-items:center;gap:11px;} :is(#page-portfolio,#page-brokers) .pf-w-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;} :is(#page-portfolio,#page-brokers) .pf-w-nm{font-size:13px;font-weight:600;} :is(#page-portfolio,#page-brokers) .pf-w-sub{font-size:10.5px;color:var(--pf-muted);margin-top:1px;} :is(#page-portfolio,#page-brokers) .pf-w-op{display:flex;gap:6px;flex-shrink:0;} :is(#page-portfolio,#page-brokers) .pf-track-note{padding:10px 22px 2px;font-size:10px;color:var(--pf-muted);} :is(#page-portfolio,#page-brokers) .pf-track-note.dim{opacity:.6;} :is(#page-portfolio,#page-brokers) .pf-view-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--pf-muted);background:var(--pf-trench);border:1px solid var(--pf-border);border-radius:8px;padding:5px 11px;margin-bottom:14px;} :is(#page-portfolio,#page-brokers) #pf-viewing:empty{display:none;} /* assets — honest flex table */ :is(#page-portfolio,#page-brokers) .pf-at-h{display:flex;padding:8px 22px;font-size:10.5px;color:var(--pf-muted);letter-spacing:.4px;} :is(#page-portfolio,#page-brokers) .pf-at-r{display:flex;align-items:center;padding:13px 22px;border-top:1px solid var(--pf-border);} :is(#page-portfolio,#page-brokers) .pf-at-r.unv{opacity:.5;} :is(#page-portfolio,#page-brokers) .pf-a-as{flex:1;min-width:0;display:flex;align-items:center;gap:11px;} :is(#page-portfolio,#page-brokers) .pf-a-ic{width:30px;height:30px;border-radius:50%;background:var(--pf-reef);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;} :is(#page-portfolio,#page-brokers) .pf-a-sym{font-weight:600;font-size:13px;} :is(#page-portfolio,#page-brokers) .pf-a-meta{font-size:10px;color:var(--pf-muted);margin-top:1px;} :is(#page-portfolio,#page-brokers) .pf-a-val{width:96px;text-align:right;flex-shrink:0;} :is(#page-portfolio,#page-brokers) .pf-a-val .v{font-size:13px;font-weight:600;} :is(#page-portfolio,#page-brokers) .pf-a-val .q{font-size:10px;color:var(--pf-muted);margin-top:1px;} :is(#page-portfolio,#page-brokers) .pf-a-st{width:112px;display:flex;justify-content:flex-end;flex-shrink:0;} :is(#page-portfolio,#page-brokers) .pf-pill{font-size:10px;border-radius:7px;padding:4px 10px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;} :is(#page-portfolio,#page-brokers) .pf-pill.ok{color:var(--pf-up);background:rgba(61,220,151,.1);} :is(#page-portfolio,#page-brokers) .pf-pill.warn{color:var(--pf-amber);background:rgba(247,185,85,.1);} :is(#page-portfolio,#page-brokers) .pf-up{color:var(--pf-up);} :is(#page-portfolio,#page-brokers) .pf-dn{color:var(--pf-dn);} :is(#page-portfolio,#page-brokers) .pf-divider{padding:11px 22px;font-size:11px;color:var(--pf-muted);border-top:1px solid var(--pf-border);cursor:pointer;display:flex;align-items:center;gap:7px;} :is(#page-portfolio,#page-brokers) .pf-divider:hover{color:var(--pf-text);} /* medium (tablet / narrow laptop, esp. with the app sidebar eating width): bottom row to ONE column early so wallets+assets never sit as two cramped columns (680–1200 case). */ @media(max-width:1200px){ :is(#page-portfolio,#page-brokers) .pf-row2{grid-template-columns:1fr;} } @media(max-width:1080px){ :is(#page-portfolio,#page-brokers) .pf-grid{grid-template-columns:1fr 1fr;} :is(#page-portfolio,#page-brokers) .pf-grid > :nth-child(3){grid-column:span 2;} } @media(max-width:680px){ :is(#page-portfolio,#page-brokers) .pf-grid{grid-template-columns:1fr;} :is(#page-portfolio,#page-brokers) .pf-grid > :nth-child(3){grid-column:span 1;} :is(#page-portfolio,#page-brokers) .pf-tot-val{font-size:34px;} :is(#page-portfolio,#page-brokers) .pf-a-val{width:auto;} /* let value column shrink */ :is(#page-portfolio,#page-brokers) .pf-a-st{width:auto;} /* status pill compact */ :is(#page-portfolio,#page-brokers) .pf-at-h{gap:12px;} /* 1.3: width:auto слепил Value+Status — зазор ≥8px */ :is(#page-portfolio,#page-brokers) .pf-soon{padding:20px 16px;} } /* ── Брокеры tab (read-only SnapTrade connect, slice 2) ─────────────────────── */ :is(#page-portfolio,#page-brokers) .brk{display:flex;flex-direction:column;gap:14px;} :is(#page-portfolio,#page-brokers) .brk-load,:is(#page-portfolio,#page-brokers) .brk-acc-empty{color:var(--pf-muted);font-size:13px;padding:24px 4px;text-align:center;} :is(#page-portfolio,#page-brokers) .brk-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:40px 20px;border:1px solid var(--pf-border);border-radius:16px;background:var(--pf-reef);} :is(#page-portfolio,#page-brokers) .brk-emoji{font-size:34px;} :is(#page-portfolio,#page-brokers) .brk-title{font-size:16px;font-weight:700;color:var(--pf-text);} :is(#page-portfolio,#page-brokers) .brk-sub{font-size:13px;color:var(--pf-dim);max-width:42ch;line-height:1.5;} :is(#page-portfolio,#page-brokers) .brk-connect{font-size:13px;font-weight:600;border:none;border-radius:10px;padding:11px 22px;cursor:pointer;background:var(--pf-grad-action);color:#fff;margin-top:4px;} :is(#page-portfolio,#page-brokers) .brk-connect:disabled{opacity:.55;cursor:default;} :is(#page-portfolio,#page-brokers) .brk-connect.ghost{background:transparent;border:1px solid var(--pf-border);color:var(--pf-dim);align-self:flex-start;margin-top:0;} :is(#page-portfolio,#page-brokers) .brk-ro{display:flex;align-items:center;gap:9px;background:rgba(91,141,255,.05);border:1px solid rgba(91,141,255,.15);border-radius:11px;padding:11px 16px;font-size:12px;color:var(--pf-dim);} :is(#page-portfolio,#page-brokers) .brk-ro b{color:var(--pf-text);font-weight:600;} :is(#page-portfolio,#page-brokers) .brk-ro .brk-lock{color:var(--pf-blue);} :is(#page-portfolio,#page-brokers) .brk-conn{border:1px solid var(--pf-border);border-radius:12px;background:var(--pf-reef);padding:14px 16px;} :is(#page-portfolio,#page-brokers) .brk-conn-top{display:flex;align-items:center;gap:12px;} :is(#page-portfolio,#page-brokers) .brk-broker{font-size:14px;font-weight:700;color:var(--pf-text);} :is(#page-portfolio,#page-brokers) .brk-status{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:3px 9px;border-radius:6px;background:rgba(255,255,255,.05);color:var(--pf-muted);} :is(#page-portfolio,#page-brokers) .brk-status.brk-active{color:var(--pf-up);background:rgba(61,220,151,.1);} :is(#page-portfolio,#page-brokers) .brk-status.brk-pending{color:var(--pf-amber);background:rgba(247,185,85,.1);} :is(#page-portfolio,#page-brokers) .brk-disc{margin-left:auto;font-size:12px;font-weight:600;border:1px solid var(--pf-border);background:transparent;color:var(--pf-dim);border-radius:8px;padding:7px 13px;cursor:pointer;} :is(#page-portfolio,#page-brokers) .brk-disc:hover{color:var(--pf-dn);border-color:rgba(248,113,113,.3);} :is(#page-portfolio,#page-brokers) .brk-acc-list{display:flex;flex-direction:column;gap:8px;} :is(#page-portfolio,#page-brokers) .brk-acc{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--pf-border);border-radius:11px;background:rgba(255,255,255,.018);padding:12px 16px;} :is(#page-portfolio,#page-brokers) .brk-acc-main{display:flex;flex-direction:column;gap:3px;min-width:0;} :is(#page-portfolio,#page-brokers) .brk-acc-name{font-size:13px;font-weight:600;color:var(--pf-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} :is(#page-portfolio,#page-brokers) .brk-acc-num{font-size:11px;color:var(--pf-muted);font-family:'JetBrains Mono','SF Mono',Menlo,monospace;} :is(#page-portfolio,#page-brokers) .brk-acc-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;} :is(#page-portfolio,#page-brokers) .brk-acc-val{font-size:15px;font-weight:700;color:var(--pf-text);font-family:'JetBrains Mono','SF Mono',Menlo,monospace;} :is(#page-portfolio,#page-brokers) .brk-acc-sync{font-size:10px;color:var(--pf-muted);} :is(#page-portfolio,#page-brokers) .brk-err{font-size:12px;color:var(--pf-dn);background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2);border-radius:10px;padding:10px 14px;} :is(#page-portfolio,#page-brokers) .brk-note{font-size:12px;color:var(--pf-amber);background:rgba(247,185,85,.08);border:1px solid rgba(247,185,85,.2);border-radius:10px;padding:10px 14px;} @media (max-width:640px){ :is(#page-portfolio,#page-brokers) .brk-acc{flex-direction:column;align-items:flex-start;gap:8px;} :is(#page-portfolio,#page-brokers) .brk-acc-side{align-items:flex-start;} } /* ── Брокеры · SnapTrade слайс 2 — overview / broker page / account page ─────────── */ :is(#page-portfolio,#page-brokers) .brk-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;margin-bottom:14px;} :is(#page-portfolio,#page-brokers) .brk-hero-tot{display:flex;flex-direction:column;justify-content:center;} :is(#page-portfolio,#page-brokers) .brk-tot-val{font-size:40px;font-weight:800;letter-spacing:-1.5px;line-height:1;margin:12px 0 0;} :is(#page-portfolio,#page-brokers) .brk-tot-val .c{background:var(--pf-grad-action);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} :is(#page-portfolio,#page-brokers) .brk-tot-meta{font-size:12px;color:var(--pf-muted);margin-top:12px;} :is(#page-portfolio,#page-brokers) .brk-alloc-head{display:flex;align-items:center;gap:9px;} :is(#page-portfolio,#page-brokers) .brk-alloc-tabs{display:flex;gap:4px;margin-left:auto;} :is(#page-portfolio,#page-brokers) .brk-alloc-tab{font-size:11px;font-weight:600;color:var(--pf-muted);padding:4px 9px;border-radius:7px;cursor:pointer;border:1px solid transparent;} :is(#page-portfolio,#page-brokers) .brk-alloc-tab.on{color:var(--pf-text);background:var(--pf-reef);border-color:var(--pf-border);} :is(#page-portfolio,#page-brokers) .brk-alloc-wrap{display:flex;align-items:center;gap:20px;margin-top:14px;} :is(#page-portfolio,#page-brokers) .brk-legs{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;} :is(#page-portfolio,#page-brokers) .brk-alloc-empty{color:var(--pf-muted);font-size:12.5px;padding:24px 0;text-align:center;} @media (max-width:520px){:is(#page-portfolio,#page-brokers) .brk-alloc-wrap{flex-direction:column;}} :is(#page-portfolio,#page-brokers) .brk-panel{background:var(--pf-trench);border:1px solid var(--pf-border);border-radius:16px;overflow:hidden;margin-bottom:14px;} :is(#page-portfolio,#page-brokers) .brk-panel-cap{display:flex;align-items:center;gap:9px;padding:14px 18px 11px;border-bottom:1px solid var(--pf-hair);} :is(#page-portfolio,#page-brokers) .brk-panel-cap .t{font-size:13px;font-weight:600;} :is(#page-portfolio,#page-brokers) .brk-panel-cap .hint{font-size:11px;color:var(--pf-dim);margin-left:auto;} :is(#page-portfolio,#page-brokers) .brk-ch-r{display:grid;grid-template-columns:2.4fr 1.3fr 0.7fr;gap:10px;align-items:center;padding:11px 18px;border-top:1px solid var(--pf-hair);} :is(#page-portfolio,#page-brokers) .brk-ch-r:first-of-type{border-top:none;} :is(#page-portfolio,#page-brokers) .brk-ch-as{display:flex;align-items:center;gap:11px;min-width:0;} :is(#page-portfolio,#page-brokers) .brk-ch-ic,:is(#page-portfolio,#page-brokers) .brk-pos-ic{width:30px;height:30px;border-radius:8px;background:var(--pf-reef);display:grid;place-items:center;font-weight:700;font-size:11px;flex:none;} :is(#page-portfolio,#page-brokers) .brk-ch-sym{font-weight:600;font-size:13px;} :is(#page-portfolio,#page-brokers) .brk-ch-nm{font-size:11px;color:var(--pf-muted);} :is(#page-portfolio,#page-brokers) .brk-chips{display:flex;gap:3px;margin-top:3px;} :is(#page-portfolio,#page-brokers) .brk-bchip{width:15px;height:15px;border-radius:4px;font-weight:700;font-size:8px;display:grid;place-items:center;color:#0b0f16;background:var(--pf-blue);} :is(#page-portfolio,#page-brokers) .brk-cell{font-family:'JetBrains Mono','SF Mono',monospace;font-size:12.5px;justify-self:end;text-align:right;} :is(#page-portfolio,#page-brokers) .brk-cell .sub{font-size:10px;color:var(--pf-dim);font-family:'Inter';} :is(#page-portfolio,#page-brokers) .brk-share{font-weight:600;} :is(#page-portfolio,#page-brokers) .brk-conn{background:var(--pf-trench);border:1px solid var(--pf-border);border-radius:16px;margin-bottom:12px;overflow:hidden;padding:0;} :is(#page-portfolio,#page-brokers) .brk-conn-h{display:flex;align-items:center;gap:12px;padding:15px 17px 13px;cursor:default;} :is(#page-portfolio,#page-brokers) .brk-blogo{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;font-weight:700;font-size:13px;color:#0b0f16;} :is(#page-portfolio,#page-brokers) .brk-conn-meta{min-width:0;} :is(#page-portfolio,#page-brokers) .brk-conn-name{font-weight:600;font-size:14px;} :is(#page-portfolio,#page-brokers) .brk-conn-sync{font-size:11.5px;color:var(--pf-muted);display:flex;align-items:center;gap:6px;margin-top:2px;} :is(#page-portfolio,#page-brokers) .brk-dot{width:7px;height:7px;border-radius:50%;} :is(#page-portfolio,#page-brokers) .brk-dot.ok{background:var(--pf-up);} :is(#page-portfolio,#page-brokers) .brk-dot.stale{background:var(--pf-amber);} :is(#page-portfolio,#page-brokers) .brk-conn-right{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px;} :is(#page-portfolio,#page-brokers) .brk-conn-tot{font-weight:700;font-size:16px;} /* Явная, но не тревожная кнопка отвязки (read-only, не деструктив): outline-пилюля, нейтральная в покое → мягкий красный на hover. Перебивает старое правило .brk-disc выше (идёт позже). */ :is(#page-portfolio,#page-brokers) .brk-disc{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:12px;font-weight:600;color:var(--pf-muted);background:rgba(255,255,255,.04);border:1px solid var(--pf-border);border-radius:8px;padding:6px 13px;cursor:pointer;transition:color .15s,border-color .15s,background .15s;} :is(#page-portfolio,#page-brokers) .brk-disc:hover{color:var(--pf-dn);border-color:rgba(248,113,113,.42);background:rgba(248,113,113,.07);} :is(#page-portfolio,#page-brokers) .brk-minibar{height:7px;border-radius:4px;display:flex;overflow:hidden;margin:0 17px 11px;} :is(#page-portfolio,#page-brokers) .brk-minibar i{height:100%;} :is(#page-portfolio,#page-brokers) .brk-accs{border-top:1px solid var(--pf-hair);padding:5px 9px;} :is(#page-portfolio,#page-brokers) .brk-accs .brk-acc{cursor:default;} :is(#page-portfolio,#page-brokers) .brk-acc-nm{font-size:13px;font-weight:500;} :is(#page-portfolio,#page-brokers) .brk-acc-mask{font-size:10.5px;color:var(--pf-dim);} :is(#page-portfolio,#page-brokers) .brk-acc-val{margin-left:auto;font-weight:700;font-size:13.5px;} :is(#page-portfolio,#page-brokers) .brk-acc-arrow{color:var(--pf-dim);} :is(#page-portfolio,#page-brokers) .brk-acc-empty{padding:12px;color:var(--pf-muted);font-size:12px;} :is(#page-portfolio,#page-brokers) .brk-addmore{display:flex;align-items:center;justify-content:center;gap:8px;border:1px dashed rgba(255,255,255,.13);border-radius:16px;padding:14px;color:var(--pf-muted);cursor:pointer;font-weight:500;font-size:13px;margin-bottom:14px;} :is(#page-portfolio,#page-brokers) .brk-addmore:hover{border-color:var(--pf-blue);color:var(--pf-text);} :is(#page-portfolio,#page-brokers) .brk-soon{padding:18px;color:var(--pf-muted);font-size:12.5px;display:flex;align-items:center;gap:12px;justify-content:center;} :is(#page-portfolio,#page-brokers) .brk-mini-btn{font-size:12px;font-weight:600;border:1px solid var(--pf-border);background:var(--pf-reef);color:var(--pf-text);border-radius:8px;padding:6px 12px;cursor:pointer;} :is(#page-portfolio,#page-brokers) .brk-connect-btn{font-size:13px;font-weight:600;border:none;border-radius:10px;padding:11px 22px;cursor:pointer;background:var(--pf-grad-action);color:#fff;} :is(#page-portfolio,#page-brokers) .brk-connect-btn.ghost{background:transparent;border:1px solid var(--pf-border);color:var(--pf-dim);} :is(#page-portfolio,#page-brokers) .brk-back{display:inline-flex;align-items:center;gap:7px;color:var(--pf-muted);font-size:13px;cursor:pointer;margin-bottom:14px;font-weight:500;} :is(#page-portfolio,#page-brokers) .brk-back:hover{color:var(--pf-text);} :is(#page-portfolio,#page-brokers) .brk-acct-head{display:flex;align-items:center;gap:13px;margin-bottom:18px;} :is(#page-portfolio,#page-brokers) .brk-acct-h-meta .nm{font-size:18px;font-weight:700;} :is(#page-portfolio,#page-brokers) .brk-acct-h-meta .sub{font-size:12.5px;color:var(--pf-muted);display:flex;align-items:center;gap:7px;margin-top:3px;} :is(#page-portfolio,#page-brokers) .brk-acct-h-meta .mask{color:var(--pf-dim);} :is(#page-portfolio,#page-brokers) .brk-acct-h-act{margin-left:auto;} :is(#page-portfolio,#page-brokers) .brk-pos-r{display:grid;grid-template-columns:2.3fr 1fr 1.2fr 0.8fr;gap:10px;align-items:center;padding:11px 18px;border-top:1px solid var(--pf-hair);} :is(#page-portfolio,#page-brokers) .brk-pos-r:first-of-type{border-top:none;} :is(#page-portfolio,#page-brokers) .brk-pos-as{display:flex;align-items:center;gap:11px;min-width:0;} :is(#page-portfolio,#page-brokers) .brk-pos-sym{font-weight:600;font-size:13.5px;} :is(#page-portfolio,#page-brokers) .brk-pos-mt{font-size:11px;color:var(--pf-muted);margin-top:1px;} :is(#page-portfolio,#page-brokers) .brk-pcell{font-family:'JetBrains Mono','SF Mono',monospace;font-size:13px;justify-self:end;text-align:right;} :is(#page-portfolio,#page-brokers) .brk-pcell .sub{font-size:10.5px;} :is(#page-portfolio,#page-brokers) .brk-pnl.up{color:var(--pf-up);} :is(#page-portfolio,#page-brokers) .brk-pnl.dn{color:var(--pf-dn);} :is(#page-portfolio,#page-brokers) .brk-pnl.na{color:var(--pf-dim);} :is(#page-portfolio,#page-brokers) .brk-slot{background:var(--pf-trench);border:1px dashed var(--pf-border);border-radius:16px;padding:18px 20px;color:var(--pf-muted);font-size:12.5px;} @media (max-width:780px){:is(#page-portfolio,#page-brokers) .brk-hero{grid-template-columns:1fr;}} @media (max-width:560px){:is(#page-portfolio,#page-brokers) .brk-ch-r{grid-template-columns:2fr 1fr;} :is(#page-portfolio,#page-brokers) .brk-ch-r .brk-share{display:none;}} /* ── S3: broker picker (dark modal, LIGHT tiles like Blossom; colored SnapTrade logos as-is) ─── */ .brk-pick-ov{position:fixed;inset:0;background:rgba(5,8,12,.86);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:16px} .brk-pick{position:relative;background:#161F2B;border:1px solid rgba(255,255,255,.09);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.5);width:100%;max-width:760px;max-height:85vh;display:flex;flex-direction:column;padding:16px 16px calc(14px + env(safe-area-inset-bottom,0));overscroll-behavior:contain;animation:brkPickUp .22s ease} @keyframes brkPickUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){.brk-pick{animation:none}} .brk-pick-x{position:absolute;top:12px;right:14px;width:30px;height:30px;border:none;border-radius:50%;background:#0E141C;color:#97A1B3;font-size:14px;cursor:pointer;line-height:1} .brk-pick-h{font-size:16px;font-weight:700;color:#EAF0F6;letter-spacing:-.2px;padding-right:34px} .brk-pick-sub{font-size:12px;color:#97A1B3;margin:3px 0 10px;line-height:1.4} .brk-pick-search{width:100%;box-sizing:border-box;background:#0E141C;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px 12px;color:#EAF0F6;font-size:13px;margin-bottom:6px} .brk-pick-search:focus{outline:none;border-color:rgba(91,141,255,.45)} .brk-pick-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;margin-top:2px} .brk-pick-sec{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#67768A;margin:10px 2px 5px} .brk-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px} /* DARK tiles — our logos are white monochrome PNGs (transparent bg), read on dark (grid/sizes unchanged) */ .brk-pick-tile{position:relative;aspect-ratio:1;background:#1A2533;border:1px solid rgba(255,255,255,.06);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 4px;cursor:pointer;transition:all .18s ease} .brk-pick-tile:hover{border-color:#5B8DFF;background:#1F2B3A;transform:translateY(-2px) scale(1.03);box-shadow:0 6px 18px rgba(91,141,255,.18)} .brk-pick-tile.busy{opacity:.55;pointer-events:none} /* Uniform landscape logo box: our mono PNGs are WIDE wordmarks (~4.4:1), colored are square icons. Full-width box → wordmarks use the whole tile width instead of a tiny strip; icons fill the height. */ /* overflow:visible so the scaled wordmarks show fully (spill ~2px << grid gap) — never clipped */ .brk-pick-logo-wrap{width:100%;height:40px;padding:0 4px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:visible} /* Optical balance: square colored icons are height-bound → cap max-height so they don't dominate; wide wordmark PNGs are width-bound → a height cap doesn't shrink them, so give them full height + scale. */ .brk-pick-logo{max-width:100%;max-height:29px;object-fit:contain;opacity:1} /* colored square icons — capped smaller */ .brk-pick-logo.mono{max-height:40px;transform:scale(1.24)} /* our wide PNGs — full height + bigger scale (overflow:visible → no clip) */ .brk-pick-ini{width:34px;height:34px;border-radius:8px;background:#2a3a4f;color:#cfe0ff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px} .brk-pick-nm{font-size:10px;color:#EAF0F6;text-align:center;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .brk-pick-badge{position:absolute;top:5px;right:6px;font-size:8px;color:#F7B955;border:1px solid rgba(247,185,85,.3);border-radius:4px;padding:1px 4px} .brk-pick-none{color:#97A1B3;font-size:12px;padding:10px 2px} .brk-pick-ro{font-size:10.5px;color:#8A99AC;text-align:center;margin-top:12px} /* Change 3: skeleton placeholders (pulsing) instead of a bare "Loading…" — consistent with Trade E1.0 */ @keyframes brkSkPulse{0%,100%{opacity:.45}50%{opacity:.9}} .brk-pick-sk-lbl{height:9px;width:88px;background:#2a3646;border-radius:4px;text-transform:none;animation:brkSkPulse 1.3s ease-in-out infinite} .brk-pick-tile.brk-pick-sk{cursor:default;pointer-events:none;background:#1E2836;border-color:rgba(255,255,255,.05);animation:brkSkPulse 1.3s ease-in-out infinite} /* (4а) спиннер «Открываем портал…» после клика по брокеру (пикер вне :is(#page-portfolio,#page-brokers)) */ .brk-pick-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:52px 0;color:#8A97A8;font-size:13px} .brk-pick-spin{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(255,255,255,.12);border-top-color:#4A7BF0;animation:brkPickSpin .7s linear infinite} @keyframes brkPickSpin{to{transform:rotate(360deg)}} /* ── SB-7b: portfolio AI (overview) — вставка между hero и merged. Только --pf-* токены. ── */ :is(#page-portfolio,#page-brokers) .brk-ai-slot{min-height:150px;margin-bottom:24px} :is(#page-portfolio,#page-brokers) .brk-ai{margin-bottom:24px} :is(#page-portfolio,#page-brokers) .brk-ai-head{display:flex;align-items:center;gap:11px;margin-bottom:14px} :is(#page-portfolio,#page-brokers) .brk-ai-led{width:11px;height:11px;border-radius:50%;flex:none} :is(#page-portfolio,#page-brokers) .brk-ai-label{font-size:21px;font-weight:800;letter-spacing:-.02em} :is(#page-portfolio,#page-brokers) .brk-ai-conf{margin-left:auto;font-size:12px;color:var(--pf-muted)} :is(#page-portfolio,#page-brokers) .brk-ai-conf b{color:var(--pf-text)} :is(#page-portfolio,#page-brokers) .brk-ai-confbar{height:8px;border-radius:5px;background:var(--pf-reef);overflow:hidden;margin-bottom:18px} :is(#page-portfolio,#page-brokers) .brk-ai-confbar i{display:block;height:100%;border-radius:5px} /* A5-P3: подпись — плитки=число позиций, полоса=доля по стоимости (разные величины) */ :is(#page-portfolio,#page-brokers) .brk-ai-note{font-size:11px;color:var(--pf-muted);margin:-4px 0 14px;text-align:center;letter-spacing:.01em} /* A5-P3: дисклеймер под секцией портфельных новостей */ :is(#page-portfolio,#page-brokers) .brk-news-disc{font-size:11px;color:var(--pf-dim);padding:10px 16px 4px;text-align:center} :is(#page-portfolio,#page-brokers) .brk-ai-minis{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:18px} :is(#page-portfolio,#page-brokers) .brk-ai-mini{background:var(--pf-reef);border-radius:10px;padding:12px;text-align:center} :is(#page-portfolio,#page-brokers) .brk-ai-mini .n{font-size:20px;font-weight:800;line-height:1} :is(#page-portfolio,#page-brokers) .brk-ai-mini .l{font-size:11px;color:var(--pf-muted);margin-top:4px} :is(#page-portfolio,#page-brokers) .brk-ai-dist{display:flex;height:14px;border-radius:100px;overflow:hidden;gap:2px;margin-bottom:10px} :is(#page-portfolio,#page-brokers) .brk-ai-dist span{display:block} :is(#page-portfolio,#page-brokers) .brk-ai-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--pf-muted);margin-bottom:20px} :is(#page-portfolio,#page-brokers) .brk-ai-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px} :is(#page-portfolio,#page-brokers) .brk-ai-legend b{color:var(--pf-text)} :is(#page-portfolio,#page-brokers) .brk-ai-sub{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--pf-muted);margin:8px 0 11px} :is(#page-portfolio,#page-brokers) .brk-ai-drv{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--pf-dim);margin-bottom:7px} :is(#page-portfolio,#page-brokers) .brk-ai-drv .a{font-weight:800;flex:none} :is(#page-portfolio,#page-brokers) .brk-ai-drv b{color:var(--pf-text)} :is(#page-portfolio,#page-brokers) .brk-ai-mtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px} :is(#page-portfolio,#page-brokers) .brk-ai-mtile{background:var(--pf-reef);border-radius:10px;padding:12px 13px} :is(#page-portfolio,#page-brokers) .brk-ai-mtile .l{font-size:11px;color:var(--pf-muted);margin-bottom:6px} :is(#page-portfolio,#page-brokers) .brk-ai-mtile .v{font-size:17px;font-weight:700} /* SB-7b #1: секция «Макро-фон · общий для портфеля» (эталон скрин 1) — 6 плиток из regime (FRED) */ :is(#page-portfolio,#page-brokers) .brk-macro{margin-bottom:var(--gap,12px)} :is(#page-portfolio,#page-brokers) .brk-macro-grid{grid-template-columns:repeat(6,1fr)} :is(#page-portfolio,#page-brokers) .brk-mt-note{font-size:9.5px;font-weight:600;margin-left:6px;color:var(--pf-muted)} :is(#page-portfolio,#page-brokers) .brk-mt-up{color:var(--pf-up)} :is(#page-portfolio,#page-brokers) .brk-mt-dn{color:var(--pf-dn)} :is(#page-portfolio,#page-brokers) .brk-mt-am{color:var(--pf-amber)} :is(#page-portfolio,#page-brokers) .brk-macro-attr{font-size:9.5px;color:var(--pf-muted);margin-top:11px;line-height:1.4} @media(max-width:900px){:is(#page-portfolio,#page-brokers) .brk-macro-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){:is(#page-portfolio,#page-brokers) .brk-macro-grid{grid-template-columns:repeat(2,1fr)}} :is(#page-portfolio,#page-brokers) .brk-ai-news .brk-ai-ni{padding:9px 0;border-top:1px solid var(--pf-border)} :is(#page-portfolio,#page-brokers) .brk-ai-news .brk-ai-ni:first-child{border-top:none} :is(#page-portfolio,#page-brokers) .brk-ai-ni .t{font-size:12.5px;line-height:1.4} :is(#page-portfolio,#page-brokers) .brk-ai-ni .s{font-size:10.5px;color:var(--pf-muted);margin-top:3px} :is(#page-portfolio,#page-brokers) .brk-ai-foot{font-size:10.5px;color:var(--pf-muted);border-top:1px solid var(--pf-border);margin-top:14px;padding-top:12px} /* ── SB-7b commit3: bias-бейдж + даты отчётов + кликабельная строка ── */ :is(#page-portfolio,#page-brokers) .brk-clk{cursor:pointer} :is(#page-portfolio,#page-brokers) .brk-clk:hover{background:var(--pf-reef)} :is(#page-portfolio,#page-brokers) .brk-bias{display:inline-block;font-size:9.5px;font-weight:700;border-radius:5px;padding:1px 6px;margin-left:7px;vertical-align:middle} :is(#page-portfolio,#page-brokers) .brk-bias-up{color:var(--pf-up);background:rgba(61,220,151,.12)} :is(#page-portfolio,#page-brokers) .brk-bias-neu{color:var(--pf-muted);background:rgba(255,255,255,.06)} :is(#page-portfolio,#page-brokers) .brk-bias-dn{color:var(--pf-dn);background:rgba(248,113,113,.12)} :is(#page-portfolio,#page-brokers) .brk-rdate{font-size:10px;color:var(--pf-muted);margin-top:3px} :is(#page-portfolio,#page-brokers) .brk-rdate:empty{display:none} /* ── SB-7b commit4: деталь акции ВНУТРИ Brokers (макет v-brk-detail). .brk-sd — обёртка под-вида; несёт --sd-* токены, чтобы переиспользованные блоки stocks.css (скоуп :is(#page-stocks,.brk-sd)) рисовались 1:1 как в Stocks. ── */ #page-brokers .brk-sd{--sd-bg:#070B10;--sd-surface:#0E141B;--sd-elevated:#152030;--sd-raise:#1A2738;--sd-txt:#EAF0F8;--sd-txt2:#8B97A8;--sd-txt3:#7C899B;--sd-line:#1B2736;--sd-line2:#243244;--sd-blue-rgb:91,141,255;--sd-amber-rgb:247,185,85} #page-brokers .brk-sd-blocks{display:flex;flex-direction:column;gap:16px;color:var(--sd-txt);font-size:14px} /* все AI-блоки full-width → колонка, грид не нужен */ #page-brokers .brk-sdh{border-color:rgba(91,141,255,.22);margin-bottom:16px} /* макет :349 */ #page-brokers .brk-sdh-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap} #page-brokers .brk-sdh-left{display:flex;align-items:center;gap:14px} /* макет :351 */ #page-brokers .brk-sdh-ic{width:46px;height:46px;border-radius:12px;background:var(--pf-reef);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--pf-blue);flex-shrink:0} /* макет :353 */ #page-brokers .brk-sdh-t{display:flex;align-items:center;gap:9px} /* макет :355 */ #page-brokers .brk-sdh-sym{font-size:22px;font-weight:700} #page-brokers .brk-sdh-t .brk-bias{font-size:11.5px;padding:3px 10px;margin-left:0} /* hero-чип крупнее строчного */ #page-brokers .brk-sdh-sub{font-size:12.5px;color:var(--pf-dim)} /* макет :356 */ #page-brokers .brk-sdh-right{text-align:right} #page-brokers .brk-sdh-right .pf-eyebrow{justify-content:flex-end;margin-bottom:4px} /* макет :360 */ #page-brokers .brk-sdh-pos{font-size:22px;font-weight:700} /* макет :361 */ #page-brokers .brk-sdh-pnl{font-size:13px;margin-top:2px} /* макет :362 */ #page-brokers .brk-sdh-pnl.up{color:var(--pf-up)} #page-brokers .brk-sdh-pnl.dn{color:var(--pf-dn)} #page-brokers .brk-sdh-strip{margin-top:14px;padding-top:12px;border-top:1px solid var(--pf-border);display:flex;gap:28px;font-size:12.5px;color:var(--pf-muted);flex-wrap:wrap} /* макет :365 */ #page-brokers .brk-sdh-strip b{color:var(--pf-text);font-weight:600} #page-brokers .brk-sd-note{margin-bottom:14px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--pf-dim)} /* макет :372 */ #page-brokers .brk-sd-note-i{color:var(--pf-blue);font-size:13px} /* SB-7b A2: таблица All stocks (эталон скрин 2) — Акция/Стоимость/P&L/Доля/AI-вывод/Кв.отчёт/Налог.отчёт */ :is(#page-portfolio,#page-brokers) .brk-tbl-h,:is(#page-portfolio,#page-brokers) .brk-tbl-r{display:grid;grid-template-columns:1.4fr .85fr 84px .75fr .6fr .9fr 1fr 1fr 22px;gap:10px;align-items:center;padding:11px 14px} :is(#page-portfolio,#page-brokers) .brk-trend{display:flex;align-items:center} :is(#page-portfolio,#page-brokers) .brk-trend svg{display:block;width:78px;height:26px} :is(#page-portfolio,#page-brokers) .brk-tbl-h{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--pf-muted);border-bottom:1px solid var(--pf-border)} :is(#page-portfolio,#page-brokers) .brk-tbl-h .r,:is(#page-portfolio,#page-brokers) .brk-tbl-r .r{text-align:right} :is(#page-portfolio,#page-brokers) .brk-tbl-r{border-bottom:1px solid var(--pf-border);font-size:13px} :is(#page-portfolio,#page-brokers) .brk-tbl-r:last-child{border-bottom:none} :is(#page-portfolio,#page-brokers) .brk-tbl-r.brk-clk{cursor:pointer} :is(#page-portfolio,#page-brokers) .brk-tbl-r.brk-clk:hover{background:var(--pf-reef)} :is(#page-portfolio,#page-brokers) .brk-tbl-as{display:flex;flex-direction:column;min-width:0} :is(#page-portfolio,#page-brokers) .brk-tbl-sym{font-weight:700} :is(#page-portfolio,#page-brokers) .brk-tbl-nm{font-size:11px;color:var(--pf-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :is(#page-portfolio,#page-brokers) .brk-pnl-na{font-size:11px;color:var(--pf-dim)} :is(#page-portfolio,#page-brokers) .brk-dcell{display:flex;flex-direction:column;gap:2px} :is(#page-portfolio,#page-brokers) .brk-d{font-size:11.5px} :is(#page-portfolio,#page-brokers) .brk-rel{font-size:9.5px} :is(#page-portfolio,#page-brokers) .brk-rel-soon{color:var(--pf-amber)} :is(#page-portfolio,#page-brokers) .brk-rel-past{color:var(--pf-muted)} :is(#page-portfolio,#page-brokers) .brk-chev{color:var(--pf-blue);font-size:16px} @media(max-width:820px){:is(#page-portfolio,#page-brokers) .brk-tbl-h,:is(#page-portfolio,#page-brokers) .brk-tbl-r{grid-template-columns:1.4fr .9fr 84px .8fr .7fr;gap:8px} :is(#page-portfolio,#page-brokers) .brk-tbl-h span:nth-child(n+6),:is(#page-portfolio,#page-brokers) .brk-tbl-r>span:nth-child(n+6){display:none}}