/* =========================================================== ALGOXPERTS Portfolio — shared design system One token set + one component library for all 3 pages. Each page sets --brand via a `data-bot` attribute on . =========================================================== */ :root{ color-scheme: light; /* neutrals */ --page:#f9f9f7; --surface:#fcfcfb; --surface-2:#f2f1ec; --ink:#0b0b0b; --ink-soft:#52514e; --ink-muted:#898781; --line:#e1e0d9; --line-strong:#c3c2b7; --shadow:rgba(11,11,11,.08); /* status (fixed meaning everywhere: good = profit, bad = loss) */ --good:#0e7a34; --good-wash:rgba(14,122,52,.09); --bad:#dc2626; --bad-wash:rgba(220,38,38,.09); /* per-bot brand accent - pick one, applied via [data-bot] below */ --violet:#7c3aed; --violet-wash:rgba(124,58,237,.10); --teal:#0f766e; --teal-wash:rgba(15,118,110,.10); --brand: var(--violet); --brand-wash: var(--violet-wash); /* categorical symbol colors (fixed hue order, validated adjacent-pair CVD) */ --series-blue:#2a78d6; --series-orange:#eb6834; --series-aqua:#1baf7a; --series-yellow:#eda100; --series-magenta:#e87ba4; --series-green:#008300; --series-violet:#4a3aa7; --series-red:#e34948; --font-display:"Space Grotesk","IBM Plex Sans",system-ui,sans-serif; --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* spacing / radius scale - every card-like thing uses these, nothing bespoke */ --radius:10px; --radius-sm:8px; --radius-pill:100px; --card-pad:18px 20px 20px; --tile-pad:16px 16px 14px; --gap:16px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --page:#0d0d0d; --surface:#1a1a19; --surface-2:#212120; --ink:#ffffff; --ink-soft:#c3c2b7; --ink-muted:#8f8d86; --line:#2c2c2a; --line-strong:#3c3c39; --shadow:rgba(0,0,0,.5); --good:#4ade80; --good-wash:rgba(74,222,128,.14); --bad:#f87171; --bad-wash:rgba(248,113,113,.14); --violet:#a78bfa; --violet-wash:rgba(167,139,250,.16); --teal:#2dd4bf; --teal-wash:rgba(45,212,191,.16); --brand: var(--violet); --brand-wash: var(--violet-wash); --series-blue:#3987e5; --series-orange:#d95926; --series-aqua:#199e70; --series-yellow:#c98500; --series-magenta:#d55181; --series-green:#008300; --series-violet:#9085e9; --series-red:#e66767; } } :root[data-theme="dark"]{ color-scheme: dark; --page:#0d0d0d; --surface:#1a1a19; --surface-2:#212120; --ink:#ffffff; --ink-soft:#c3c2b7; --ink-muted:#8f8d86; --line:#2c2c2a; --line-strong:#3c3c39; --shadow:rgba(0,0,0,.5); --good:#4ade80; --good-wash:rgba(74,222,128,.14); --bad:#f87171; --bad-wash:rgba(248,113,113,.14); --violet:#a78bfa; --violet-wash:rgba(167,139,250,.16); --teal:#2dd4bf; --teal-wash:rgba(45,212,191,.16); --brand: var(--violet); --brand-wash: var(--violet-wash); --series-blue:#3987e5; --series-orange:#d95926; --series-aqua:#199e70; --series-yellow:#c98500; --series-magenta:#d55181; --series-green:#008300; --series-violet:#9085e9; --series-red:#e66767; } /* per-bot brand assignment - set on etc. */ [data-bot="ax-orb"] { --brand: var(--violet); --brand-wash: var(--violet-wash); } [data-bot="ax-daily-pro"] { --brand: var(--teal); --brand-wash: var(--teal-wash); } *{box-sizing:border-box;} html,body{background:var(--page);} body{color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; margin:0;} ::selection{background:var(--brand-wash);} a{color:inherit;} h1,h2,h3{text-wrap:balance; margin:0;} button{font:inherit;} .page{max-width:1180px; margin:0 auto; padding:28px 24px 64px;} /* ---------- Masthead ---------- */ .masthead{margin-bottom:26px;} .masthead-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px;} .eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-muted); margin:0;} .back-link{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-muted); text-decoration:none; display:inline-flex; align-items:center; gap:5px; transition:color .12s ease;} .back-link:hover{color:var(--brand);} .account-name{font-family:var(--font-display); font-weight:600; font-size:clamp(28px,4vw,40px); line-height:1.08; margin:0 0 16px;} .masthead-bottom{margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line-strong);} .masthead-toolbar-row{display:flex; justify-content:flex-start;} .masthead-meta{display:grid; grid-template-columns:repeat(4,auto); gap:22px 30px; margin:0;} .masthead-meta > div{min-width:0;} .masthead-meta dt{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted); margin-bottom:4px;} .masthead-meta dd{margin:0; font-family:var(--font-mono); font-size:13.5px; color:var(--ink); white-space:nowrap;} @media (max-width:920px){.masthead-meta{grid-template-columns:repeat(2,1fr);}} @media (max-width:520px){.masthead-meta{grid-template-columns:1fr;}} /* ---------- Bots table (portfolio overview masthead) ---------- */ .bots-panel{max-width:100%; overflow-x:auto;} .bots-table{border-collapse:collapse;} .bots-table th{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted); text-align:left; padding:8px 40px 8px 0; font-weight:600; border-bottom:1px solid var(--line); white-space:nowrap;} .bots-table td{font-family:var(--font-mono); font-size:13px; color:var(--ink); padding:10px 40px 10px 0; border-top:1px solid var(--line); white-space:nowrap;} .bots-table tbody tr:first-child td{border-top:none;} .bots-table .bot-name{display:flex; align-items:center; gap:8px; font-weight:600;} .bots-table .bot-dot{width:8px; height:8px; border-radius:50%; flex:none;} /* ---------- Toolbar: currency + share, shared shape for every page ---------- */ .toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .toggle-group{display:inline-flex; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-pill); padding:2px; gap:2px;} .toggle-group button{border:none; background:transparent; color:var(--ink-soft); font-family:var(--font-mono); font-size:11.5px; font-weight:600; padding:6px 13px; border-radius:var(--radius-pill); cursor:pointer; transition:background .12s ease, color .12s ease;} .toggle-group button.active{background:var(--ink); color:var(--page);} .toggle-group button:hover:not(.active){background:var(--line);} .share-btn{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--ink); background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-pill); padding:7px 15px; cursor:pointer; transition:background .12s ease, border-color .12s ease, color .12s ease;} .share-btn:hover{background:var(--brand-wash); border-color:var(--brand); color:var(--brand);} /* ---------- Hero stats ---------- */ .hero-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:var(--gap); overflow:hidden;} .hero-item{padding:20px 22px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:6px; min-width:0;} .hero-item:first-child{border-left:none;} .hero-label{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);} .hero-value{font-family:var(--font-display); font-weight:600; font-size:clamp(22px,2.6vw,30px); line-height:1.05; letter-spacing:-.005em; white-space:nowrap;} .hero-value.good{color:var(--good);} .hero-value.bad{color:var(--bad);} @media (max-width:820px){.hero-stats{grid-template-columns:repeat(2,1fr);} .hero-item:nth-child(3){border-left:none;}} @media (max-width:480px){.hero-stats{grid-template-columns:1fr;} .hero-item{border-left:none; border-top:1px solid var(--line);} .hero-item:first-child{border-top:none;}} /* ---------- KPI strip ---------- */ .kpi-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:22px;} .kpi-tile{background:var(--surface); padding:18px 16px 20px; display:flex; flex-direction:column; gap:8px; min-width:0;} .kpi-label{font-size:11px; color:var(--ink-muted); letter-spacing:.02em;} .kpi-value{font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.2vw,27px); letter-spacing:-.005em; display:flex; align-items:baseline; gap:6px; white-space:nowrap;} .kpi-value .unit{font-size:12px; font-weight:500; color:var(--ink-muted);} .kpi-value.good{color:var(--good);} .kpi-value.bad{color:var(--bad);} @media (max-width:980px){.kpi-grid{grid-template-columns:repeat(3,1fr);}} @media (max-width:560px){.kpi-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:420px){.kpi-grid{grid-template-columns:1fr;}} /* ---------- Panels (shared card shell) ---------- */ .panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--card-pad);} .panel-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:4px; flex-wrap:wrap;} .panel h2{font-family:var(--font-body); font-weight:600; font-size:15px;} .panel-sub{font-size:11.5px; color:var(--ink-muted); margin:0 0 12px; font-family:var(--font-mono);} .full-width{margin-bottom:var(--gap);} /* ---------- Charts (shared chrome) ---------- */ .chart-wrap{position:relative;} svg.chart{width:100%; height:auto; display:block; overflow:visible;} .chart-tall{height:clamp(210px, 26vw, 330px);} .chart-short{flex:1; min-height:0; height:auto;} .tick-label{font-family:var(--font-mono); font-size:10.5px; fill:var(--ink-muted);} .grid-line{stroke:var(--line); stroke-width:1;} .baseline{stroke:var(--line-strong); stroke-width:1;} .chart-tooltip{position:absolute; pointer-events:none; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:9px 11px; box-shadow:0 6px 18px var(--shadow); font-size:12px; opacity:0; transform:translateY(2px); transition:opacity .08s ease; z-index:5; white-space:nowrap;} .chart-tooltip.show{opacity:1; transform:translateY(0);} .chart-tooltip .tt-date{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-muted); margin-bottom:5px;} .chart-tooltip .tt-row{display:flex; align-items:center; gap:10px; justify-content:space-between; padding:2px 0;} .chart-tooltip .tt-key{display:flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:11.5px;} .chart-tooltip .tt-key .tt-swatch{width:10px; height:2px; border-radius:1px; flex:none;} .chart-tooltip .tt-val{font-family:var(--font-mono); font-weight:600; font-size:12.5px;} .chart-legend{display:flex; gap:18px; flex-wrap:wrap; margin:2px 0 14px;} .legend-item{display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:12px; color:var(--ink-soft);} .legend-swatch{width:16px; height:2px; border-radius:1px; flex:none;} /* ---------- Breakdown grid (3-pack) ---------- */ .breakdown-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-bottom:var(--gap);} @media (max-width:980px){.breakdown-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:620px){.breakdown-grid{grid-template-columns:1fr;}} .breakdown-grid > .panel{display:flex; flex-direction:column;} .breakdown-grid > .panel > .bw-list{flex:1;} .breakdown-grid > .panel > svg.chart{flex:1; min-height:0; height:auto;} /* ---------- Best/worst list ---------- */ .bw-list{display:flex; flex-direction:column; gap:0;} .bw-section-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); margin:14px 0 6px;} .bw-section-label:first-child{margin-top:0;} .bw-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px dotted var(--line);} .bw-row:last-child{border-bottom:none;} .bw-row .bw-sym{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft);} .bw-row .bw-date{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-muted); display:block;} .bw-row .bw-val{font-family:var(--font-mono); font-weight:600; font-size:12.5px;} /* ---------- Nach Symbol (standalone, full width) ---------- */ .symbol-panel .sym-rows{margin-top:8px;} .sym-row{display:flex; align-items:center; gap:20px; padding:12px 0; border-bottom:1px dotted var(--line);} .sym-row:last-child{border-bottom:none;} .sym-row-id{flex:0 0 130px; display:flex; align-items:center; gap:8px;} .sym-dot{width:8px; height:8px; border-radius:50%; flex:none;} .sym-name{font-family:var(--font-mono); font-size:12.5px; font-weight:600;} .sym-track{position:relative; flex:1; height:14px; background:var(--surface-2); border-radius:4px;} .sym-zero{position:absolute; top:-4px; bottom:-4px; left:50%; width:1px; background:var(--line-strong);} .sym-fill{position:absolute; top:0; bottom:0; border-radius:4px; min-width:3px;} .sym-stats{flex:0 0 260px; text-align:right;} .sym-net{font-weight:600; font-size:13.5px; font-family:var(--font-mono);} .sym-meta{font-size:11px; color:var(--ink-muted); font-family:var(--font-mono); margin-top:2px;} @media (max-width:700px){ .sym-row{flex-direction:column; align-items:stretch; gap:6px;} .sym-row-id{flex:none;} .sym-stats{flex:none; text-align:left;} } /* ---------- Trade table ---------- */ .trades-panel{margin-bottom:20px;} .controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .chip-row{display:flex; gap:6px; flex-wrap:wrap;} .chip{font-family:var(--font-mono); font-size:11.5px; padding:5px 11px; border-radius:var(--radius-pill); border:1px solid var(--line-strong); background:transparent; color:var(--ink-soft); cursor:pointer; transition:background .1s, color .1s, border-color .1s;} .chip:hover{background:var(--surface-2);} .chip.active{background:var(--ink); color:var(--page); border-color:var(--ink);} .search-input{font-family:var(--font-mono); font-size:12px; padding:6px 12px; border-radius:var(--radius-pill); border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); min-width:200px;} .search-input:focus{outline:2px solid var(--brand); outline-offset:1px;} .search-input::placeholder{color:var(--ink-muted);} .trade-count{font-family:var(--font-mono); font-size:11px; color:var(--ink-muted); margin-left:auto;} .table-scroll{margin-top:14px; max-height:520px; overflow:auto; border:1px solid var(--line); border-radius:var(--radius-sm);} .trades-panel table{width:100%; border-collapse:collapse; font-size:12.5px;} .trades-panel thead th{position:sticky; top:0; background:var(--surface-2); text-align:right; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); font-weight:600; padding:9px 12px; cursor:pointer; user-select:none; white-space:nowrap; border-bottom:1px solid var(--line-strong); z-index:1;} .trades-panel thead th:first-child, .trades-panel thead th:nth-child(2), .trades-panel thead th:nth-child(3){text-align:left;} .trades-panel thead th .sort-arrow{opacity:0; margin-left:3px;} .trades-panel thead th.sorted .sort-arrow{opacity:1;} .trades-panel tbody td{padding:8px 12px; text-align:right; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap;} .trades-panel tbody td:first-child, .trades-panel tbody td:nth-child(2), .trades-panel tbody td:nth-child(3){text-align:left;} .trades-panel tbody tr:hover td{background:var(--surface-2);} .trades-panel tbody tr:last-child td{border-bottom:none;} .trades-panel td.net.good{color:var(--good); font-weight:600;} .trades-panel td.net.bad{color:var(--bad); font-weight:600;} .sym-chip{display:inline-flex; align-items:center; gap:6px;} .sym-chip .sym-dot{width:6px; height:6px;} .type-badge{display:inline-block; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; padding:1px 6px; border-radius:4px; font-family:var(--font-mono); font-weight:600;} .type-badge.buy{background:var(--good-wash); color:var(--good);} .type-badge.sell{background:var(--bad-wash); color:var(--bad);} /* ---------- Daily calendar ---------- */ .cal-head{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;} .cal-nav{width:30px; height:28px; padding:0; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink); font-size:16px; line-height:26px; text-align:center; cursor:pointer; flex:none;} .cal-nav:hover{background:var(--brand-wash); border-color:var(--brand); color:var(--brand);} .cal-month-label{font-family:var(--font-display); font-weight:600; font-size:17px; min-width:140px;} .cal-month-total{font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--ink-soft); padding:5px 12px; border-radius:var(--radius-pill); background:var(--surface-2); border:1px solid var(--line-strong);} .cal-month-total.good{color:var(--good); border-color:color-mix(in srgb, var(--good) 35%, transparent); background:var(--good-wash);} .cal-month-total.bad{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 35%, transparent); background:var(--bad-wash);} .cal-last-btn{margin-left:auto; font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--ink); background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-pill); padding:7px 14px; cursor:pointer;} .cal-last-btn:hover{background:var(--brand-wash); border-color:var(--brand); color:var(--brand);} .cal-grid{display:grid; grid-template-columns:repeat(7,1fr) 1.15fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;} .cal-dow{background:var(--surface-2); font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted); padding:7px 10px; font-family:var(--font-mono);} .cal-cell{background:var(--surface); min-height:72px; padding:8px 10px; display:flex; flex-direction:column; gap:3px;} .cal-cell.has-data{cursor:pointer; transition:filter .1s ease;} .cal-cell.has-data:hover{filter:brightness(1.25);} .cal-cell.good-1{background:color-mix(in srgb, var(--good) 10%, var(--surface));} .cal-cell.good-2{background:color-mix(in srgb, var(--good) 20%, var(--surface));} .cal-cell.good-3{background:color-mix(in srgb, var(--good) 34%, var(--surface));} .cal-cell.bad-1{background:color-mix(in srgb, var(--bad) 10%, var(--surface));} .cal-cell.bad-2{background:color-mix(in srgb, var(--bad) 20%, var(--surface));} .cal-cell.bad-3{background:color-mix(in srgb, var(--bad) 34%, var(--surface));} .cal-daynum{font-size:10.5px; color:var(--ink-muted); font-family:var(--font-mono);} .cal-net{font-family:var(--font-body); font-weight:600; font-size:14px; margin-top:2px;} .cal-cell[class*="good-"] .cal-net, .cal-week.good .cal-net{color:var(--good);} .cal-cell[class*="bad-"] .cal-net, .cal-week.bad .cal-net{color:var(--bad);} .cal-trades{font-size:10px; color:var(--ink-soft); font-family:var(--font-mono);} .cal-week{background:var(--surface-2); min-height:72px; padding:8px 10px; display:flex; flex-direction:column; gap:3px;} .cal-week.good{background:var(--good-wash);} .cal-week.bad{background:var(--bad-wash);} .cal-week-label{font-size:9.5px; text-transform:uppercase; color:var(--ink-muted); font-family:var(--font-mono);} .cal-week .cal-net{font-size:13px;} @media (max-width:700px){ .cal-cell, .cal-week{min-height:52px; padding:5px 4px; gap:1px;} .cal-net{font-size:11px;} .cal-daynum{font-size:9px;} .cal-trades{font-size:9px;} .cal-dow{padding:5px 3px; font-size:8.5px;} } @media (max-width:520px){ .cal-week, .cal-dow:last-child{display:none;} .cal-grid{grid-template-columns:repeat(7,1fr);} } /* ---------- Day-detail modal ---------- */ .day-modal{width:min(96vw, 1100px); max-height:82vh; background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; padding:24px 24px 20px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.35); display:flex; flex-direction:column;} .day-modal-head{margin-bottom:16px; padding-right:30px;} .day-modal-date{font-family:var(--font-display); font-weight:600; font-size:20px; margin-bottom:10px;} .day-modal-badges{display:flex; gap:8px; flex-wrap:wrap;} .day-modal-badge{font-family:var(--font-mono); font-size:12px; font-weight:600; padding:6px 12px; border-radius:var(--radius-pill); background:var(--surface-2); border:1px solid var(--line-strong); color:var(--ink);} .day-modal-badge.good{color:var(--good); border-color:color-mix(in srgb, var(--good) 35%, transparent); background:var(--good-wash);} .day-modal-badge.bad{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 35%, transparent); background:var(--bad-wash);} .day-modal-table-scroll{overflow:auto; border:1px solid var(--line); border-radius:var(--radius-sm);} .day-modal-table{width:100%; border-collapse:collapse; font-size:12px;} .day-modal-table th{position:sticky; top:0; background:var(--surface-2); text-align:right; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted); font-weight:600; padding:8px 9px; white-space:nowrap; border-bottom:1px solid var(--line-strong);} .day-modal-table th:first-child, .day-modal-table th:nth-child(2), .day-modal-table th:nth-child(3){text-align:left;} .day-modal-table td{padding:7px 9px; text-align:right; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap;} .day-modal-table td:first-child, .day-modal-table td:nth-child(2), .day-modal-table td:nth-child(3){text-align:left;} .day-modal-table tbody tr:last-child td{border-bottom:none;} .day-modal-table td.net.good{color:var(--good); font-weight:600;} .day-modal-table td.net.bad{color:var(--bad); font-weight:600;} .day-modal-bot{display:inline-flex; align-items:center; font-weight:700; font-size:11px; padding:4px 10px; border-radius:var(--radius-pill); border:1px solid transparent; white-space:nowrap;} /* ---------- Portfolio cards (overview) ---------- */ .portfolio-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); margin-bottom:var(--gap);} @media (max-width:760px){.portfolio-grid{grid-template-columns:1fr;}} .portfolio-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--card-pad); display:flex; flex-direction:column;} .portfolio-card-head{display:flex; align-items:center; gap:9px; margin-bottom:2px;} .portfolio-dot{width:10px; height:10px; border-radius:50%; flex:none;} .portfolio-card-head h3{font-family:var(--font-display); font-weight:600; font-size:19px; flex:1; min-width:0;} .portfolio-badge{font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:var(--radius-pill); background:var(--good-wash); color:var(--good); border:1px solid color-mix(in srgb, var(--good) 35%, transparent); flex:none;} .portfolio-meta{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-muted); margin:2px 0 16px;} .portfolio-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px 10px; margin-bottom:18px;} .portfolio-kpi-label{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); margin-bottom:3px;} .portfolio-kpi-value{font-family:var(--font-mono); font-weight:600; font-size:15px;} .portfolio-kpi-value.good{color:var(--good);} .portfolio-kpi-value.bad{color:var(--bad);} .portfolio-symbols{font-family:var(--font-mono); font-size:11px; color:var(--ink-muted); margin-bottom:16px;} .portfolio-link{margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--ink); text-decoration:none; padding:12px 16px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line-strong); transition:background .12s ease, border-color .12s ease, color .12s ease;} .portfolio-link:hover{background:var(--brand-wash); border-color:var(--brand); color:var(--brand);} .portfolio-link .arrow{transition:transform .12s ease;} .portfolio-link:hover .arrow{transform:translateX(3px);} /* ---------- Share overlay ---------- */ .share-overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50; opacity:0; pointer-events:none; transition:opacity .15s ease;} .share-overlay.open{opacity:1; pointer-events:auto;} .share-card{width:min(92vw, 480px); background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; padding:28px 28px 22px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.35);} .share-card-close{position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink-soft); cursor:pointer; font-size:14px; line-height:1;} .share-card-close:hover{color:var(--ink);} .share-card-eyebrow{font-family:var(--font-mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px;} .share-card-title{font-family:var(--font-display); font-weight:600; font-size:26px; margin-bottom:2px;} .share-card-sub{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-muted); margin-bottom:20px;} .share-card-hero{text-align:center; padding:18px 0 20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:18px;} .share-card-hero-label{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted); margin-bottom:6px;} .share-card-hero-value{font-family:var(--font-display); font-weight:600; font-size:44px; line-height:1;} .share-card-hero-value.good{color:var(--good);} .share-card-hero-value.bad{color:var(--bad);} .share-card-hero-sub{font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); margin-top:6px;} .share-card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px;} .share-card-stat-label{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); margin-bottom:4px;} .share-card-stat-value{font-family:var(--font-mono); font-weight:600; font-size:15px;} .share-card-footer{display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--font-mono); font-size:10px; color:var(--ink-muted); padding-top:14px; border-top:1px solid var(--line);} .share-card-actions{display:flex; gap:10px; margin-top:16px;} .share-card-actions button{flex:1; font-family:var(--font-mono); font-size:12.5px; font-weight:600; padding:10px; border-radius:var(--radius-sm); cursor:pointer; border:1px solid var(--line-strong);} .share-card-actions .primary{background:var(--brand); color:var(--surface); border-color:var(--brand);} .share-card-actions .secondary{background:var(--surface-2); color:var(--ink);} @media (max-width:1180px){.page{padding-left:20px; padding-right:20px;}}