:root { --bg: #f4f6f3; --surface: #ffffff; --card: #ffffff; --surface-soft: #f7f9f7; --ink: #13241d; --muted: #728078; --line: #e3e9e5; --green: #12664f; --green-2: #1f8a6b; --green-soft: #e6f3ed; --red: #b4484b; --red-soft: #f9eaea; --success: var(--green-2); --danger: var(--red); --surface-2: var(--surface-soft); --amber: #b17918; --amber-soft: #fbf2dc; --navy: #163128; --sidebar: #10261f; --brand-accent: #67d2a9; --text: var(--ink); --panel: var(--card); --border: var(--line); --accent: var(--green); --action: var(--green); --chart-grid: #e9eeeb; --shadow: 0 1px 2px rgba(16, 40, 31, 0.04), 0 10px 35px rgba(16, 40, 31, 0.06); --radius: 18px; --motion-fast: 140ms; --motion-medium: 260ms; --motion-slow: 430ms; } .chart-data-loader { position: relative; display: grid; place-items: center; align-content: center; min-height: 390px; overflow: hidden; padding: 36px 24px; border: 1px solid color-mix(in srgb, var(--brand-accent) 22%, var(--line)); border-radius: 24px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--green-soft) 34%, var(--card))); text-align: center; } .chart-data-loader > strong { margin-top: 18px; color: var(--ink); font-size: clamp(19px, 2vw, 28px); letter-spacing: -.5px; } .chart-data-loader > small { max-width: 620px; margin-top: 8px; color: var(--muted); line-height: 1.55; } .chart-loader-orbit { position: relative; width: 64px; height: 64px; } .chart-loader-orbit::before, .chart-loader-orbit::after, .chart-loader-orbit i, .chart-loader-orbit b, .chart-loader-orbit em { position: absolute; border-radius: 50%; content: ""; } .chart-loader-orbit::before { inset: 0; border: 1px solid color-mix(in srgb, var(--brand-accent) 30%, transparent); } .chart-loader-orbit::after { inset: 9px; border: 2px solid transparent; border-top-color: var(--brand-accent); animation: chart-loader-spin 1.1s linear infinite; } .chart-loader-orbit i { inset: 23px; background: var(--brand-accent); box-shadow: 0 0 28px color-mix(in srgb, var(--brand-accent) 65%, transparent); animation: chart-loader-pulse 1.4s ease-in-out infinite; } .chart-loader-orbit b { width: 8px; height: 8px; top: 5px; left: 28px; background: var(--amber); transform-origin: 4px 27px; animation: chart-loader-spin 1.8s linear infinite reverse; } .chart-loader-orbit em { width: 5px; height: 5px; right: 7px; bottom: 15px; background: var(--green-2); } .chart-loader-line { width: min(560px, 88%); height: 92px; margin-top: 26px; overflow: visible; color: var(--brand-accent); } .chart-loader-stroke { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--brand-accent) 42%, transparent)); animation: chart-loader-draw 2.1s cubic-bezier(.45,.05,.35,1) infinite; } .chart-loader-area { opacity: 0; animation: chart-loader-fill 2.1s ease infinite; } @keyframes chart-loader-draw { 0% { stroke-dashoffset: 1; opacity: .25; } 38% { opacity: 1; } 62% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } } @keyframes chart-loader-fill { 0%, 22% { opacity: 0; } 60% { opacity: .85; } 88% { opacity: 0; } 100% { opacity: 0; } } @keyframes chart-loader-spin { to { transform: rotate(360deg); } } @keyframes chart-loader-pulse { 50% { transform: scale(.68); opacity: .55; } } .portfolio-bottom-drawer { margin: 16px 0 0; overflow: clip; border: 1px solid color-mix(in srgb, var(--line) 84%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--card) 96%, transparent); box-shadow: 0 14px 38px rgba(9, 31, 24, .055); } .portfolio-bottom-drawer > summary { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; align-items: center; gap: 18px; min-height: 104px; padding: 18px 22px; cursor: pointer; list-style: none; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--card) 98%, transparent), color-mix(in srgb, var(--green-soft) 22%, var(--card))); } .portfolio-bottom-drawer > summary::-webkit-details-marker, .portfolio-dividend-company > summary::-webkit-details-marker { display: none; } .portfolio-bottom-drawer > summary > span:first-child { display: grid; gap: 4px; } .portfolio-bottom-drawer > summary small { color: var(--green-2); font-size: 12px; font-weight: 900; letter-spacing: .12em; } .portfolio-bottom-drawer > summary strong { color: var(--ink); font-size: clamp(18px, 2vw, 25px); letter-spacing: -.4px; } .portfolio-bottom-drawer > summary em { color: var(--muted); font-size: 12px; font-style: normal; } .portfolio-bottom-drawer > summary > i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-style: normal; transition: transform .22s ease; } .portfolio-bottom-drawer[open] > summary > i { transform: rotate(180deg); } .drawer-kpis { display: flex; align-items: stretch; gap: 8px; } .drawer-kpis b { display: grid; min-width: 112px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--ink); font-size: 15px; } .drawer-kpis b small { margin-top: 3px; color: var(--muted); font-size: 11.5px; letter-spacing: .04em; } .portfolio-bottom-drawer-body { padding: 14px; border-top: 1px solid var(--line); } .portfolio-bottom-drawer-body > .embedded-panel, .portfolio-bottom-drawer-body > .xtb-reconciliation-panel { margin: 0; border: 0; box-shadow: none; } .portfolio-dividend-company { border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent); } .portfolio-dividend-company:last-child { border-bottom: 0; } .portfolio-dividend-company > summary { display: grid; grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(130px, .8fr)) auto; align-items: center; gap: 14px; min-height: 86px; padding: 13px 14px; cursor: pointer; list-style: none; border-radius: 16px; } .portfolio-dividend-company > summary:hover { background: color-mix(in srgb, var(--green-soft) 45%, transparent); } .portfolio-dividend-company > summary > span:not(.dividend-company-identity) { display: grid; gap: 4px; } .portfolio-dividend-company > summary small { color: var(--muted); font-size: 12px; } .portfolio-dividend-company > summary strong { color: var(--ink); } .portfolio-dividend-company > summary > i { color: var(--muted); font-style: normal; transition: transform .2s ease; } .portfolio-dividend-company[open] > summary > i { transform: rotate(180deg); } .dividend-company-identity { display: flex; align-items: center; gap: 12px; min-width: 0; } .dividend-company-identity > span { display: grid; min-width: 0; gap: 3px; } .dividend-company-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portfolio-dividend-company-body { padding: 0 14px 16px 66px; } .dividend-company-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .dividend-company-metrics > span { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg) 44%, var(--card)); } .dividend-company-metrics small { color: var(--muted); font-size: 12px; } .dividend-company-metrics b { color: var(--ink); font-size: 13px; } .portfolio-dividend-company-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .portfolio-dividend-company-actions > small { flex: 1 1 300px; color: var(--muted); line-height: 1.45; } .position-detail-row > td { padding: 0 12px 14px !important; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--green-soft) 18%, var(--card)); } .position-detail-row .position-detail-card { margin: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; animation: portfolio-detail-in .22s ease-out both; } @keyframes portfolio-detail-in { from { opacity: 0; transform: translateY(-7px); } } .premium-realized-panel { overflow: hidden; padding: 0; border: 0; background: linear-gradient(145deg, #0c2f25, #124c3b 58%, #173a30); color: #fff; } .realized-premium-header { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(230px, .7fr) auto; align-items: center; gap: 18px; padding: 22px; } .premium-realized-panel .panel-title h2 { color: #fff; } .premium-realized-panel .panel-title p { color: rgba(255,255,255,.68); } .premium-realized-panel .eyebrow { color: #75ddb5; } .realized-hero-result { display: grid; gap: 3px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.07); } .realized-hero-result small, .realized-hero-result em { color: rgba(255,255,255,.62); font-size: 12px; font-style: normal; } .realized-hero-result strong { color: #fff; font-size: clamp(22px, 2.5vw, 34px); letter-spacing: -.8px; } .premium-realized-panel .realized-grid { margin: 0; padding: 0 22px 18px; } .premium-realized-panel .realized-grid > div { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.055); } .premium-realized-panel .realized-grid span, .premium-realized-panel .realized-grid small, .premium-realized-panel .realized-note { color: rgba(255,255,255,.62); } .premium-realized-panel .realized-grid strong { color: #fff; } .premium-realized-panel .realized-note { margin: 0; padding: 0 22px 20px; } .premium-realized-panel .ghost-button { border-color: rgba(255,255,255,.2); color: #fff; background: rgba(255,255,255,.07); } @media (max-width: 1050px) { .portfolio-dividend-company > summary { grid-template-columns: minmax(240px, 1.2fr) repeat(2, minmax(120px, .7fr)) auto; } .portfolio-dividend-company > summary > span:nth-child(4) { display: none; } .dividend-company-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .realized-premium-header { grid-template-columns: 1fr 1fr; } .realized-premium-header > button { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 720px) { .chart-data-loader { min-height: 300px; padding: 26px 16px; } .portfolio-bottom-drawer > summary { grid-template-columns: 1fr auto; min-height: 90px; padding: 15px; } .portfolio-bottom-drawer > summary .drawer-kpis { grid-column: 1 / -1; width: 100%; overflow-x: auto; } .drawer-kpis b { min-width: 102px; } .portfolio-dividend-company > summary { grid-template-columns: minmax(0, 1fr) auto; } .portfolio-dividend-company > summary > span:not(.dividend-company-identity) { display: none; } .portfolio-dividend-company-body { padding-left: 12px; padding-right: 12px; } .dividend-company-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .realized-premium-header { grid-template-columns: 1fr; } .premium-realized-panel .realized-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portfolio-positions-table { overflow-x: auto; } } :root[data-motion="off"] .chart-loader-orbit::after, :root[data-motion="off"] .chart-loader-orbit i, :root[data-motion="off"] .chart-loader-orbit b, :root[data-motion="off"] .chart-loader-stroke, :root[data-motion="off"] .chart-loader-area, :root[data-motion="off"] .position-detail-row .position-detail-card { animation: none; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .chart-loader-orbit::after, :root:not([data-motion="on"]) .chart-loader-orbit i, :root:not([data-motion="on"]) .chart-loader-orbit b, :root:not([data-motion="on"]) .chart-loader-stroke, :root:not([data-motion="on"]) .chart-loader-area, :root:not([data-motion="on"]) .position-detail-row .position-detail-card { animation: none; } } .ai-lab-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: 22px; align-items: stretch; padding: 30px; margin-bottom: 18px; border: 1px solid rgba(103, 210, 169, 0.24); border-radius: 34px; background: radial-gradient(circle at 12% 10%, rgba(103, 210, 169, 0.28), transparent 28%), radial-gradient(circle at 82% 12%, rgba(126, 87, 255, 0.22), transparent 30%), linear-gradient(135deg, rgba(8, 32, 25, 0.98), rgba(18, 50, 41, 0.92) 48%, rgba(7, 19, 16, 0.98)); color: #f2fbf7; box-shadow: 0 24px 70px rgba(2, 14, 10, 0.28); } .ai-lab-hero::after { content: ""; position: absolute; inset: auto -10% -45% 34%; height: 70%; background: linear-gradient(90deg, transparent, rgba(103, 210, 169, 0.18), transparent); transform: rotate(-8deg); pointer-events: none; } .ai-lab-glow { position: absolute; width: 180px; height: 180px; border-radius: 50%; filter: blur(10px); opacity: 0.42; pointer-events: none; } .ai-lab-glow.one { right: 20%; top: -70px; background: rgba(103, 210, 169, 0.42); } .ai-lab-glow.two { right: -55px; bottom: -65px; background: rgba(126, 87, 255, 0.28); } .ai-lab-copy { position: relative; z-index: 1; } .ai-lab-copy h2 { max-width: 760px; margin: 8px 0 12px; font-size: clamp(31px, 4vw, 58px); line-height: 0.95; letter-spacing: -0.055em; } .ai-lab-copy p { max-width: 720px; margin: 0; color: rgba(242, 251, 247, 0.72); font-size: 16px; line-height: 1.7; } .ai-lab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; } .ai-lab-stats span, .ai-lab-terminal, .ai-mini-metrics span { border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(18px); } .ai-lab-stats span { display: grid; gap: 5px; padding: 15px; border-radius: 20px; } .ai-lab-stats small, .ai-mini-metrics small { color: rgba(242, 251, 247, 0.58); font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .ai-lab-stats b { color: #fff; font-size: 24px; line-height: 1; } .ai-lab-stats em { color: rgba(242, 251, 247, 0.62); font-size: 12px; font-style: normal; } .ai-lab-terminal { position: relative; z-index: 1; display: grid; align-content: center; gap: 10px; min-height: 250px; padding: 22px; border-radius: 28px; font-family: "SFMono-Regular", Consolas, ui-monospace, monospace; } .ai-terminal-dots { display: flex; gap: 7px; margin-bottom: 6px; } .ai-terminal-dots i { width: 10px; height: 10px; border-radius: 50%; background: #67d2a9; box-shadow: 18px 0 #f5bd49, 36px 0 #ff7b8a; } .ai-lab-terminal code { display: block; padding: 10px 12px; border-radius: 14px; background: rgba(2, 14, 10, 0.36); color: rgba(242, 251, 247, 0.8); white-space: normal; } .ai-control-panel, .ai-company-panel, .ai-news-panel { border-radius: 28px; } .ai-control-row { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; gap: 12px; align-items: center; } .ai-lab-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); gap: 18px; margin-top: 18px; } .ai-company-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; } .ai-company-head h2 { margin: 4px 0 8px; font-size: clamp(26px, 3vw, 42px); line-height: 1; letter-spacing: -0.04em; } .ai-company-head p { margin: 0; color: var(--muted); line-height: 1.65; } .ai-company-head > strong { align-self: center; padding: 12px 14px; border-radius: 18px; background: rgba(103, 210, 169, 0.11); font-size: 20px; } .ai-mini-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0; } .ai-mini-metrics span { display: grid; gap: 6px; padding: 14px; border-radius: 18px; color: var(--ink); } .ai-mini-metrics b { font-size: 18px; } .ai-news-stack { display: grid; gap: 12px; } .ai-news-card { position: relative; overflow: hidden; display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 250, 247, 0.82)), radial-gradient(circle at 100% 0%, rgba(103, 210, 169, 0.16), transparent 35%); animation: aiCardIn 0.5s ease both; animation-delay: var(--ai-delay, 0ms); } .ai-news-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } .ai-news-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; } .ai-news-card-head strong { display: block; color: var(--ink); line-height: 1.25; } .ai-news-card-head small, .ai-news-card p, .ai-result-inline span { color: var(--muted); line-height: 1.55; } .ai-news-card p { margin: 0; } .ai-news-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .ai-result-inline { display: grid; gap: 4px; padding: 12px; border-radius: 16px; background: rgba(15, 113, 84, 0.08); border: 1px solid rgba(15, 113, 84, 0.14); } .ai-result-inline.negative { background: rgba(210, 82, 82, 0.08); border-color: rgba(210, 82, 82, 0.16); } .ai-result-inline.neutral { background: rgba(202, 154, 63, 0.09); border-color: rgba(202, 154, 63, 0.16); } @keyframes aiCardIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } } @media (max-width: 1100px) { .ai-lab-hero, .ai-lab-grid { grid-template-columns: 1fr; } .ai-control-row { grid-template-columns: 1fr; } } @media (max-width: 760px) { .ai-lab-hero { padding: 22px; border-radius: 26px; } .ai-lab-stats, .ai-mini-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-company-head { grid-template-columns: auto minmax(0, 1fr); } .ai-company-head > strong { grid-column: 1 / -1; justify-self: start; } } body:not(.home-view) { background: radial-gradient(circle at 28% -12%, color-mix(in srgb, var(--green-soft) 72%, transparent), transparent 30%), radial-gradient(circle at 96% 4%, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 24%), var(--bg); background-attachment: fixed; } .topbar { border-bottom-color: color-mix(in srgb, var(--line) 76%, transparent); background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: 0 10px 30px rgba(10, 35, 27, .025); backdrop-filter: blur(20px) saturate(1.2); } .sidebar { background: radial-gradient(circle at 18% 4%, color-mix(in srgb, var(--brand-accent) 12%, transparent), transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--sidebar) 98%, #000), var(--sidebar)); } .nav-item { position: relative; overflow: hidden; } .nav-item::before { position: absolute; inset: 9px auto 9px 0; width: 3px; border-radius: 999px; background: linear-gradient(180deg, var(--brand-accent), #fff1a8); box-shadow: 0 0 18px color-mix(in srgb, var(--brand-accent) 60%, transparent); content: ""; opacity: 0; transform: scaleY(.35); transition: opacity var(--motion-fast) ease, transform var(--motion-medium) cubic-bezier(.18,.78,.24,1); } .nav-item.active::before { opacity: 1; transform: scaleY(1); } .nav-item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 13%, transparent), transparent 74%), color-mix(in srgb, var(--sidebar) 84%, var(--green-2)); } .page-heading > div:first-child::before { display: block; width: 34px; height: 3px; margin-bottom: 9px; border-radius: 99px; background: linear-gradient(90deg, var(--green-2), var(--brand-accent)); box-shadow: 0 4px 16px color-mix(in srgb, var(--green-2) 28%, transparent); content: ""; } .page-heading h1 { font-size: clamp(28px, 2.65vw, 38px); font-weight: 840; letter-spacing: -1.55px; } .page-heading p { max-width: 820px; line-height: 1.55; } .panel, .stat-card { border-color: color-mix(in srgb, var(--line) 88%, var(--green) 12%); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, #fff), color-mix(in srgb, var(--surface) 96%, var(--green-soft))); box-shadow: 0 1px 2px rgba(11, 35, 27, .035), 0 16px 44px rgba(11, 35, 27, .055); } .stat-card::before { position: absolute; inset: 0 18px auto; height: 2px; border-radius: 0 0 99px 99px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--green-2) 60%, transparent), transparent); content: ""; opacity: .55; transition: opacity var(--motion-fast) ease, transform var(--motion-medium) ease; } .stat-card.positive::before { background: linear-gradient(90deg, transparent, var(--green-2), var(--brand-accent), transparent); } .stat-card.negative::before { background: linear-gradient(90deg, transparent, var(--red), #f2a0a2, transparent); } .stat-card:hover::before { opacity: 1; transform: scaleX(1.08); } .stat-icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-2) 12%, transparent), 0 8px 20px color-mix(in srgb, var(--green-2) 8%, transparent); transition: transform var(--motion-medium) cubic-bezier(.18,.78,.24,1), box-shadow var(--motion-medium) ease; } .stat-card:hover .stat-icon { transform: translateY(-2px) rotate(-4deg) scale(1.06); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-2) 22%, transparent), 0 12px 26px color-mix(in srgb, var(--green-2) 16%, transparent); } .stat-value, .position-detail-grid strong, .portfolio-risk-card strong, .realized-grid strong, .value-strong, [class*="price"], [class*="return"] { font-variant-numeric: tabular-nums lining-nums; } button:focus-visible, a:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-accent) 42%, transparent); outline-offset: 3px; } .primary-button { position: relative; overflow: hidden; isolation: isolate; } .primary-button::after { position: absolute; inset: -80% auto -80% -42%; width: 34%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); content: ""; pointer-events: none; transform: rotate(16deg) translateX(-220%); transition: transform 620ms cubic-bezier(.18,.78,.24,1); } .primary-button:hover::after { transform: rotate(16deg) translateX(620%); } .web-section-nav { top: 82px; z-index: 14; margin: -10px 0 18px; padding: 8px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: 0 16px 38px rgba(12, 35, 27, .07), inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent); backdrop-filter: blur(20px) saturate(1.2); animation: premium-nav-in .42s cubic-bezier(.18,.78,.24,1) both; } .web-section-nav button { min-height: 34px; padding: 7px 13px; border-color: transparent; background: transparent; box-shadow: none; font-size: 11px; } .web-section-nav button:hover { border-color: color-mix(in srgb, var(--green-2) 18%, var(--line)); background: color-mix(in srgb, var(--green-soft) 54%, var(--card)); } .web-section-nav button.active { border-color: color-mix(in srgb, var(--green-2) 64%, var(--brand-accent)); background: linear-gradient(135deg, var(--green), var(--green-2)); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--green-2) 22%, transparent); } .portfolio-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .portfolio-stats-grid .stat-card { min-height: 112px; padding: 16px 18px; } .portfolio-stats-grid .stat-value { margin-top: 9px; font-size: clamp(20px, 2vw, 27px); } .portfolio-stats-grid .stat-foot { margin-top: 6px; } .realized-panel.compact-empty { margin-bottom: 14px; } .realized-empty-compact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; min-height: 78px; padding: 13px 16px; } .realized-empty-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid color-mix(in srgb, var(--green-2) 18%, var(--line)); border-radius: 14px; background: var(--green-soft); color: var(--green); font-size: 20px; font-weight: 900; box-shadow: 0 10px 25px color-mix(in srgb, var(--green-2) 10%, transparent); } .realized-empty-compact .panel-title p { max-width: 720px; line-height: 1.45; } .realized-empty-status { padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--amber) 20%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--amber-soft) 70%, var(--card)); color: var(--amber); font-size: 11px; font-weight: 950; letter-spacing: .07em; white-space: nowrap; } .portfolio-risk-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .portfolio-risk-card { min-height: 112px; transition: transform var(--motion-medium) cubic-bezier(.18,.78,.24,1), border-color var(--motion-fast) ease, box-shadow var(--motion-medium) ease; } .portfolio-risk-card:hover { border-color: color-mix(in srgb, var(--green-2) 30%, var(--line)); box-shadow: 0 16px 34px rgba(11, 35, 27, .075); transform: translateY(-4px); } .portfolio-risk-card::after { position: absolute; right: -26px; bottom: -38px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--green-2) 9%, transparent), transparent 68%); content: ""; pointer-events: none; } .position-detail-card { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 14px 36px rgba(11, 35, 27, .055); } .content.view-enter .portfolio-stats-grid .stat-card, .content.view-enter .portfolio-risk-card, .content.view-enter .realized-panel, .content.view-enter .portfolio-share-studio { animation: premium-panel-in .52s cubic-bezier(.18,.78,.24,1) both; } .content.view-enter .portfolio-stats-grid .stat-card:nth-child(2) { animation-delay: 35ms; } .content.view-enter .portfolio-stats-grid .stat-card:nth-child(3) { animation-delay: 70ms; } .content.view-enter .portfolio-stats-grid .stat-card:nth-child(4) { animation-delay: 105ms; } .content.view-enter .portfolio-stats-grid .stat-card:nth-child(5) { animation-delay: 140ms; } .content.view-enter .portfolio-stats-grid .stat-card:nth-child(6) { animation-delay: 175ms; } .content.view-enter .portfolio-risk-card { animation-delay: calc(var(--risk-i, 0) * 45ms); } @keyframes premium-panel-in { from { opacity: 0; transform: translateY(13px) scale(.987); filter: blur(2px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes premium-nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 980px) { .portfolio-stats-grid, .portfolio-risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .realized-empty-compact { grid-template-columns: auto minmax(0, 1fr) auto; } .realized-empty-status { display: none; } } @media (max-width: 680px) { .web-section-nav { top: 64px; margin: -6px -4px 14px; padding: 6px; border-radius: 15px; } .web-section-nav button { min-height: 32px; padding: 6px 10px; } .portfolio-stats-grid, .portfolio-risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portfolio-risk-panel .panel-header { align-items: stretch; flex-direction: column; } .portfolio-risk-panel .panel-header .ghost-button { width: 100%; } .portfolio-risk-grid .portfolio-risk-card:last-child:nth-child(odd) { grid-column: 1 / -1; } .portfolio-stats-grid .stat-card { min-height: 104px; } .realized-empty-compact { grid-template-columns: auto minmax(0, 1fr); gap: 10px; min-height: 0; padding: 12px; } .realized-empty-compact .ghost-button { grid-column: 1 / -1; width: 100%; } .page-heading > div:first-child::before { margin-bottom: 7px; } .page-heading h1 { font-size: clamp(27px, 9vw, 34px); } } @media (max-width: 350px) { .portfolio-stats-grid, .portfolio-risk-grid { grid-template-columns: 1fr; } } html, body, .app-shell, .main-area, .content { max-width: 100%; } body { overflow-x: hidden; } .main-area, .content, .panel, .company-table, .company-table .table-wrap { min-width: 0; } .global-search { position: relative; z-index: 30; } .global-search-results { position: absolute; top: calc(100% + 12px); left: 0; width: min(620px, calc(100vw - 290px)); max-height: min(620px, calc(100vh - 110px)); overflow: auto; padding: 9px; border: 1px solid color-mix(in srgb, var(--green-2) 20%, var(--line)); border-radius: 22px; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: 0 28px 80px rgba(8, 29, 22, .22), inset 0 1px 0 color-mix(in srgb, #fff 72%, transparent); backdrop-filter: blur(24px) saturate(1.24); animation: search-results-in .22s cubic-bezier(.18,.78,.24,1) both; } .global-search-results[hidden] { display: none; } .global-search-results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px 10px; color: var(--muted); font-size: 11.5px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; } .global-search-results > button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; padding: 11px; border: 1px solid transparent; border-radius: 16px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; } .global-search-results > button:hover, .global-search-results > button.active { border-color: color-mix(in srgb, var(--green-2) 26%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--green-soft) 64%, var(--card)), var(--card)); box-shadow: 0 12px 28px rgba(10, 40, 30, .08); transform: translateX(3px); } .global-search-results .search-logo { width: 42px; height: 42px; border-radius: 13px; } .global-search-result-copy, .global-search-result-quote, .global-search-result-score { display: grid; min-width: 0; gap: 4px; } .global-search-result-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .global-search-result-copy small, .global-search-result-quote small, .global-search-result-score small { color: var(--muted); font-size: 11px; } .global-search-result-copy .flag { width: 15px; height: 10px; } .global-search-result-quote { justify-items: end; font-size: 12px; } .global-search-result-score { min-width: 58px; justify-items: center; padding: 8px; border-radius: 12px; background: var(--green-soft); color: var(--green); } .global-search-result-score.neutral { color: #a16e16; background: var(--amber-soft); } .global-search-result-score.negative { color: var(--red); background: var(--red-soft); } .global-search-result-score b { font-size: 14px; } .global-search-empty { display: grid; gap: 7px; padding: 24px; text-align: center; } .global-search-empty small { color: var(--muted); } .global-search-empty button { justify-self: center; padding: 9px 13px; border: 0; border-radius: 11px; background: var(--green); color: #fff; font-weight: 800; cursor: pointer; } @keyframes search-results-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } } .filters-bar { flex-wrap: wrap; } .filters-bar .local-search { flex: 1 1 330px; } .filters-bar .filter-select, .filters-bar .watch-filter { flex: 0 1 auto; } .company-table .table-wrap { width: 100%; overscroll-behavior-inline: contain; } .company-hero-premium { isolation: isolate; grid-template-columns: minmax(360px, 1.15fr) minmax(300px, .82fr) 150px; align-items: stretch; min-height: 330px; padding: clamp(26px, 3.4vw, 48px); border-color: rgba(143, 229, 196, .18); border-radius: 32px; background: radial-gradient(circle at 84% 12%, rgba(130, 92, 255, .25), transparent 27%), radial-gradient(circle at 8% 90%, rgba(60, 205, 153, .2), transparent 32%), linear-gradient(135deg, #071a15, #103428 58%, #241b48); box-shadow: 0 32px 80px rgba(5, 26, 19, .26), inset 0 1px 0 rgba(255,255,255,.08); } .company-hero-premium::after { width: 420px; height: 420px; background: conic-gradient(from 30deg, rgba(121, 91, 255, .16), rgba(91, 224, 171, .1), transparent, rgba(121, 91, 255, .16)); filter: blur(18px); animation: company-hero-orbit 14s linear infinite; } .company-hero-glow { position: absolute; z-index: -1; width: 220px; height: 220px; border-radius: 50%; filter: blur(10px); opacity: .42; animation: company-hero-float 7s ease-in-out infinite; } .company-hero-glow.one { top: -120px; left: 22%; background: radial-gradient(circle, rgba(86, 224, 165, .36), transparent 68%); } .company-hero-glow.two { right: 12%; bottom: -150px; background: radial-gradient(circle, rgba(124, 91, 255, .4), transparent 68%); animation-delay: -3s; } .company-hero-main { position: relative; z-index: 2; display: grid; align-content: center; min-width: 0; } .company-hero-premium .company-identity { align-items: center; } .company-hero-premium .company-identity > div { min-width: 0; } .company-hero-premium .hero-company-logo { width: 72px; height: 72px; border-radius: 22px; background: rgba(255,255,255,.1); box-shadow: 0 15px 40px rgba(0,0,0,.22); } .company-hero-kicker { display: block; margin-bottom: 6px; color: #72d8b0; font-size: 11.5px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; } .company-hero-premium .company-identity h1 { font-size: clamp(28px, 3vw, 47px); line-height: 1; letter-spacing: -.055em; } .company-hero-premium .company-price { flex-wrap: wrap; margin-top: 28px; } .company-hero-premium .company-price strong { font-size: clamp(35px, 4vw, 58px); letter-spacing: -.055em; } .company-hero-premium .company-price span { padding: 7px 10px; border-radius: 999px; background: rgba(112, 225, 181, .12); font-size: 12px; font-weight: 900; } .company-hero-premium .company-price small { flex: 1 1 100%; color: rgba(255,255,255,.48); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; } .company-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .company-hero-premium .watch-pill { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.78); backdrop-filter: blur(10px); } .company-hero-premium .watch-pill.primary { border-color: transparent; background: #fff; color: #10281f; box-shadow: 0 12px 30px rgba(255,255,255,.12); } .company-hero-session { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 13px; } .company-hero-session .session-hours { flex: 1 1 240px; margin: 0; } .company-hero-market-art { position: relative; z-index: 2; display: grid; align-content: center; min-width: 0; padding: 20px; border: 1px solid rgba(255,255,255,.11); border-radius: 24px; background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(16px); } .company-hero-art-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(255,255,255,.5); font-size: 11.5px; font-weight: 900; letter-spacing: .09em; } .company-hero-spark { width: 100%; height: 112px; margin: 18px 0 12px; overflow: visible; color: #6ee0b2; filter: drop-shadow(0 8px 16px rgba(74, 225, 166, .24)); } .company-hero-spark.negative { color: #ff7d82; } .company-hero-spark polyline { stroke: currentColor; stroke-width: 2.1; } .company-hero-quick { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; } .company-hero-quick span { display: grid; min-width: 0; gap: 5px; padding: 9px; border-radius: 12px; background: rgba(255,255,255,.055); } .company-hero-quick small { color: rgba(255,255,255,.44); font-size: 11px; font-weight: 900; text-transform: uppercase; } .company-hero-quick strong { overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .company-hero-premium .score-gauge { position: relative; z-index: 2; align-self: center; background: conic-gradient(#72dfb5 calc(var(--score) * 1%), rgba(255,255,255,.11) 0); box-shadow: 0 16px 45px rgba(0,0,0,.26), 0 0 0 10px rgba(255,255,255,.025); } .company-hero-premium .score-gauge::before { background: #0d2920; } .content.view-enter.company-premium-view > .company-hero, .content.view-enter.company-premium-view > .data-passport, .content.view-enter.company-premium-view > .company-data-gaps, .content.view-enter.company-premium-view > .analyst-brief, .content.view-enter.company-premium-view > .business-profile-panel, .content.view-enter.company-premium-view > .company-chart-grid, .content.view-enter.company-premium-view > .company-chart-row { animation: company-section-in .62s cubic-bezier(.18,.78,.24,1) both; } .content.view-enter.company-premium-view > .data-passport { animation-delay: 70ms; } .content.view-enter.company-premium-view > .company-data-gaps { animation-delay: 110ms; } .content.view-enter.company-premium-view > .analyst-brief { animation-delay: 150ms; } .content.view-enter.company-premium-view > .business-profile-panel { animation-delay: 190ms; } .content.view-enter.company-premium-view > .company-chart-grid, .content.view-enter.company-premium-view > .company-chart-row { animation-delay: 230ms; } @keyframes company-section-in { from { opacity: 0; transform: translateY(22px) scale(.986); } } @keyframes company-hero-orbit { to { transform: rotate(360deg); } } @keyframes company-hero-float { 50% { transform: translate3d(18px, -12px, 0) scale(1.08); } } .strategy-card { border-top-color: color-mix(in srgb, var(--strategy-accent) 38%, var(--line)); } .strategy-card::before { background: var(--strategy-accent); } .strategy-card.active { border-color: color-mix(in srgb, var(--strategy-accent) 58%, var(--line)); box-shadow: 0 22px 48px color-mix(in srgb, var(--strategy-accent) 14%, transparent); } .strategy-card-actions { display: grid; grid-template-columns: 1fr 1.15fr; gap: 7px; margin-top: auto; } .strategy-card-actions button { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 10px 11px; border: 1px solid transparent; border-radius: 13px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 850; cursor: pointer; } .strategy-card-actions button.secondary { border-color: color-mix(in srgb, var(--strategy-accent) 30%, var(--line)); background: color-mix(in srgb, var(--strategy-accent) 10%, var(--card)); color: var(--ink); } .strategy-workshop-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .65fr) minmax(130px, .25fr); gap: 28px; align-items: center; min-height: 490px; margin: 18px 0; padding: clamp(30px, 5vw, 68px); overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 36px; color: #fff; background: radial-gradient(circle at 84% 8%, color-mix(in srgb, var(--strategy-accent) 48%, transparent), transparent 30%), radial-gradient(circle at 5% 100%, rgba(70, 216, 159, .2), transparent 34%), linear-gradient(140deg, #071a15, #133428 54%, color-mix(in srgb, var(--strategy-accent) 30%, #171a31)); box-shadow: 0 34px 90px rgba(7, 25, 19, .26); scroll-margin-top: 96px; animation: workshop-hero-in .65s cubic-bezier(.18,.78,.24,1) both; } .strategy-workshop-hero::before { position: absolute; inset: -40%; z-index: -1; background: conic-gradient(from 90deg, transparent, color-mix(in srgb, var(--strategy-accent) 14%, transparent), transparent 30%); content: ""; animation: workshop-ambient 18s linear infinite; } .strategy-workshop-switcher { position: absolute; z-index: 4; top: 18px; left: 20px; right: 20px; display: flex; gap: 6px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; } .strategy-workshop-switcher::-webkit-scrollbar { display: none; } .strategy-workshop-switcher button { flex: 0 0 auto; padding: 8px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.58); font-size: 11px; font-weight: 850; cursor: pointer; backdrop-filter: blur(12px); } .strategy-workshop-switcher button.active { border-color: rgba(255,255,255,.72); background: #fff; color: #13271f; } .strategy-workshop-copy { position: relative; z-index: 2; } .strategy-workshop-copy > span { color: color-mix(in srgb, var(--strategy-accent) 35%, #c7ffe8); font-size: 12px; font-weight: 950; letter-spacing: .15em; } .strategy-workshop-copy h2 { margin: 10px 0 14px; color: #fff; font-size: clamp(45px, 6.3vw, 88px); line-height: .91; letter-spacing: -.065em; } .strategy-workshop-copy p { max-width: 780px; color: rgba(255,255,255,.67); font-size: 15px; line-height: 1.72; } .strategy-workshop-copy > div { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; } .strategy-workshop-copy button, .strategy-workshop-copy a { padding: 12px 15px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: rgba(255,255,255,.06); color: #fff; font-size: 12px; font-weight: 850; text-decoration: none; cursor: pointer; } .strategy-workshop-copy button { border-color: #fff; background: #fff; color: #13271f; } .strategy-workshop-orbit { position: relative; width: 270px; height: 270px; justify-self: center; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; animation: workshop-orbit-pulse 6s ease-in-out infinite; } .strategy-workshop-orbit::before,.strategy-workshop-orbit::after { position: absolute; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; content: ""; }.strategy-workshop-orbit::before { inset: 35px; }.strategy-workshop-orbit::after { inset: 72px; } .strategy-workshop-orbit b,.strategy-workshop-orbit i { position: absolute; z-index: 2; display: grid; place-items: center; font-style: normal; text-align: center; } .strategy-workshop-orbit b { inset: 91px; border-radius: 50%; background: #fff; color: #172a22; font-size: 13px; box-shadow: 0 15px 40px rgba(0,0,0,.24); } .strategy-workshop-orbit i { width: 72px; min-height: 52px; padding: 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 15px; background: rgba(8,24,19,.72); color: rgba(255,255,255,.78); font-size: 11px; font-weight: 850; backdrop-filter: blur(10px); animation: workshop-node-float calc(4.2s + var(--orbit-i) * .4s) ease-in-out infinite; } .strategy-workshop-orbit i:nth-child(1){top:-18px;left:99px}.strategy-workshop-orbit i:nth-child(2){top:99px;right:-24px}.strategy-workshop-orbit i:nth-child(3){bottom:-18px;left:99px}.strategy-workshop-orbit i:nth-child(4){top:99px;left:-24px} .strategy-workshop-headline { position: relative; z-index: 2; display: grid; align-content: center; gap: 8px; min-height: 180px; padding-left: 24px; border-left: 1px solid rgba(255,255,255,.12); } .strategy-workshop-headline small,.strategy-workshop-headline span { color: rgba(255,255,255,.48); font-size: 11px; font-weight: 850; text-transform: uppercase; } .strategy-workshop-headline strong { font-size: clamp(30px, 3.4vw, 53px); letter-spacing: -.06em; } .strategy-workshop-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; } .strategy-workshop-stats article { display: grid; gap: 7px; min-height: 130px; align-content: end; padding: 18px; border: 1px solid var(--line); border-radius: 21px; background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--surface-soft) 70%, var(--card))); box-shadow: var(--shadow); animation: strategy-card-in .5s calc(var(--workshop-i) * 65ms) both; } .strategy-workshop-stats span { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; } .strategy-workshop-stats strong { color: var(--ink); font-size: clamp(21px, 2.4vw, 32px); letter-spacing: -.05em; } .strategy-workshop-stats small { color: var(--muted); font-size: 11.5px; } .strategy-workshop-controls { padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); } .strategy-workshop-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 850; } .strategy-workshop-controls > small { max-width: 520px; margin-left: auto; color: var(--muted); line-height: 1.5; } .strategy-workshop-chart { margin-bottom: 16px; overflow: hidden; } .strategy-workshop-chart .full-chart-wrap { min-width: 0; } .strategy-workshop-insights { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(320px,.65fr); gap: 16px; margin-bottom: 16px; } .strategy-workshop-stress > div:not(.panel-header) { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; padding: 13px 18px; border-top: 1px solid var(--line); } .strategy-workshop-stress time,.strategy-workshop-stress small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }.strategy-workshop-stress span { font-size: 12px; }.strategy-workshop-stress b { float: right; } .strategy-workshop-story { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; } .strategy-workshop-story article { min-height: 220px; padding: 20px; border: 1px solid var(--line); border-radius: 21px; background: var(--surface); box-shadow: var(--shadow); } .strategy-workshop-story span { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 38px; border-radius: 13px; background: color-mix(in srgb, #7657ff 12%, var(--surface)); color: #7657ff; font-weight: 950; } .strategy-workshop-story strong { display: block; margin-bottom: 10px; font-size: 14px; }.strategy-workshop-story p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }.strategy-workshop-story .risk { border-color: color-mix(in srgb, var(--red) 24%, var(--line)); }.strategy-workshop-story .risk span { color: var(--red); background: var(--red-soft); } .strategy-workshop-years { margin-bottom: 16px; } .strategy-workshop-source { display: grid; grid-template-columns: minmax(0,1.4fr) auto; gap: 24px; align-items: center; margin-bottom: 20px; padding: clamp(24px,3vw,40px); } .strategy-workshop-source h2 { max-width: 760px; margin: 7px 0 9px; font-size: clamp(25px,3vw,42px); letter-spacing: -.05em; }.strategy-workshop-source p { max-width: 820px; color: var(--muted); line-height: 1.65; }.strategy-workshop-source > div:last-child { display: grid; gap: 8px; }.strategy-workshop-source a,.strategy-workshop-source button { padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--green); font-size: 12px; font-weight: 850; text-decoration: none; cursor: pointer; } .strategy-slide-out-forward { animation: strategy-slide-out-forward .16s ease both; } .strategy-slide-out-back { animation: strategy-slide-out-back .16s ease both; } .strategy-slide-in-forward { animation: strategy-slide-in-forward .34s cubic-bezier(.18,.78,.24,1) both; } .strategy-slide-in-back { animation: strategy-slide-in-back .34s cubic-bezier(.18,.78,.24,1) both; } @keyframes strategy-slide-out-forward { to { opacity: 0; transform: translateX(-34px) scale(.985); } } @keyframes strategy-slide-out-back { to { opacity: 0; transform: translateX(34px) scale(.985); } } @keyframes strategy-slide-in-forward { from { opacity: 0; transform: translateX(44px) scale(.985); } } @keyframes strategy-slide-in-back { from { opacity: 0; transform: translateX(-44px) scale(.985); } } @keyframes workshop-hero-in { from { opacity: 0; transform: translateY(24px) scale(.985); } } @keyframes workshop-ambient { to { transform: rotate(360deg); } } @keyframes workshop-orbit-pulse { 50% { transform: scale(1.035); box-shadow: 0 0 65px color-mix(in srgb, var(--strategy-accent) 22%, transparent); } } @keyframes workshop-node-float { 50% { transform: translateY(-9px); } } @media (min-width: 701px) and (max-width: 1500px) { .company-table table { width: 100%; table-layout: fixed; } .company-table th:nth-child(2), .company-table td:nth-child(2), .company-table th:nth-child(5), .company-table td:nth-child(5), .company-table th:nth-child(6), .company-table td:nth-child(6), .company-table th:nth-child(7), .company-table td:nth-child(7), .company-table th:nth-child(10), .company-table td:nth-child(10) { display: none; } .company-table th:nth-child(1), .company-table td:nth-child(1) { width: 38%; } .company-table th:nth-child(3), .company-table td:nth-child(3) { width: 19%; } .company-table th:nth-child(4), .company-table td:nth-child(4) { width: 12%; } .company-table th:nth-child(8), .company-table td:nth-child(8) { width: 17%; } .company-table th:nth-child(9), .company-table td:nth-child(9) { width: 14%; } .company-table td,.company-table th { padding-right: 10px; padding-left: 10px; } .company-table .company-copy-rich em { display: none; } .company-table .company-copy { min-width: 0; } .company-table .company-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 1180px) { .company-hero-premium { grid-template-columns: minmax(0,1fr) minmax(280px,.72fr); } .company-hero-premium .score-gauge { grid-column: 1 / -1; } .strategy-workshop-hero { grid-template-columns: minmax(0,1fr) minmax(230px,.55fr); } .strategy-workshop-headline { grid-column: 1 / -1; min-height: auto; grid-template-columns: auto auto auto; align-items: center; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.12); border-left: 0; } .strategy-workshop-stats,.strategy-workshop-story { grid-template-columns: repeat(2,minmax(0,1fr)); } .strategy-workshop-insights { grid-template-columns: 1fr; } } @media (max-width: 900px) { .global-search-results { width: min(620px, calc(100vw - 110px)); } .company-hero-premium { grid-template-columns: 1fr; } .company-hero-market-art { min-height: 250px; } .strategy-workshop-hero { grid-template-columns: 1fr; padding-top: 76px; } .strategy-workshop-orbit { order: 3; } .strategy-workshop-headline { order: 4; } } @media (max-width: 680px) { .global-search-results { position: fixed; top: 68px; left: 8px; right: 8px; width: auto; max-height: calc(100vh - 84px); border-radius: 19px; } .global-search-results > button { grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; } .global-search-result-score { display: none; } .global-search-result-quote strong { font-size: 11.5px; } .company-hero-premium { min-height: auto; padding: 22px 17px; border-radius: 25px; } .company-hero-premium .hero-company-logo { width: 58px; height: 58px; border-radius: 18px; } .company-hero-premium .company-price { margin-top: 20px; } .company-hero-actions { display: grid; grid-template-columns: 1fr 1fr; } .company-hero-actions .watch-pill { justify-content: center; } .company-hero-market-art { min-height: 220px; padding: 16px; } .company-hero-quick { grid-template-columns: repeat(2, minmax(0,1fr)); } .company-hero-quick span { grid-template-columns: 1fr auto; align-items: center; } .strategy-card-actions { grid-template-columns: 1fr; } .strategy-workshop-hero { min-height: 690px; margin-right: -4px; margin-left: -4px; padding: 78px 22px 30px; border-radius: 27px; } .strategy-workshop-copy h2 { font-size: clamp(42px,15vw,68px); } .strategy-workshop-copy p { font-size: 13px; } .strategy-workshop-orbit { width: 220px; height: 220px; } .strategy-workshop-orbit b { inset: 75px; } .strategy-workshop-orbit i { width: 62px; min-height: 47px; } .strategy-workshop-orbit i:nth-child(1){top:-16px;left:79px}.strategy-workshop-orbit i:nth-child(2){top:79px;right:-19px}.strategy-workshop-orbit i:nth-child(3){bottom:-16px;left:79px}.strategy-workshop-orbit i:nth-child(4){top:79px;left:-19px} .strategy-workshop-headline { grid-template-columns: 1fr; text-align: center; } .strategy-workshop-stats,.strategy-workshop-story { grid-template-columns: 1fr; } .strategy-workshop-controls > small { margin-left: 0; } .strategy-workshop-chart .full-chart-svg,.strategy-workshop-insights .full-chart-svg { height: 260px; } .strategy-workshop-source { grid-template-columns: 1fr; } .strategy-workshop-years th:nth-child(4),.strategy-workshop-years td:nth-child(4),.strategy-workshop-years th:nth-child(6),.strategy-workshop-years td:nth-child(6) { display: none; } } @media (prefers-reduced-motion: reduce) { .company-hero-premium::after,.company-hero-glow,.strategy-workshop-hero::before,.strategy-workshop-orbit,.strategy-workshop-orbit i { animation: none !important; } .global-search-results,.strategy-slide-out-forward,.strategy-slide-out-back,.strategy-slide-in-forward,.strategy-slide-in-back,.strategy-workshop-hero { animation-duration: .01ms !important; } } .report-always-on-strip { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 12px; margin: 0 0 16px; padding: 15px 18px; border: 1px solid color-mix(in srgb, var(--green-2) 24%, var(--line)); border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--green-soft) 72%, var(--card)), var(--card)); box-shadow: var(--shadow); } .report-always-on-strip > div { display: grid; gap: 3px; min-width: 0; } .report-always-on-strip > div + div { padding-left: 16px; border-left: 1px solid var(--line); } .report-always-on-strip span { color: var(--green-2); font-size: 11.5px; font-weight: 900; letter-spacing: .13em; } .report-always-on-strip strong { color: var(--ink); font-size: 14px; } .report-always-on-strip small { color: var(--muted); line-height: 1.35; } .report-always-live { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 999px; background: var(--green-soft); white-space: nowrap; } .report-always-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--green-2) 12%, transparent); animation: report-live-pulse 1.8s ease-in-out infinite; } .report-assessment { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; margin: 14px 0; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--surface-soft) 70%, var(--card)); } .report-assessment.positive { border-color: color-mix(in srgb, var(--green-2) 34%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--green-soft) 80%, var(--card)), var(--card)); } .report-assessment.negative { border-color: color-mix(in srgb, var(--red) 30%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--red-soft) 80%, var(--card)), var(--card)); } .report-assessment-score { display: grid; place-items: center; min-height: 82px; border-radius: 17px; background: var(--ink); color: #fff; } .report-assessment-score span { font-size: 11px; font-weight: 900; letter-spacing: .11em; opacity: .7; } .report-assessment-score strong { font-size: 31px; line-height: 1; } .report-assessment-score small { font-size: 11.5px; opacity: .66; } .report-assessment > div:last-child { display: grid; gap: 4px; } .report-assessment > div:last-child > span { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .report-assessment > div:last-child > strong { color: var(--ink); font-size: 18px; } .report-assessment p { margin: 0; color: var(--ink); line-height: 1.5; } .report-assessment > div:last-child > small { color: var(--muted); } .report-card-verdict { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 9px 11px; border-radius: 12px; background: var(--surface-soft); font-size: 11px; } .report-card-verdict.positive { background: var(--green-soft); color: var(--green); } .report-card-verdict.negative { background: var(--red-soft); color: var(--red); } .report-card-verdict small { opacity: .72; } @keyframes report-live-pulse { 50% { transform: scale(.72); opacity: .55; } } .bond-premium-hero { position: relative; display: grid; grid-template-columns: 1fr 290px; gap: 28px; align-items: center; min-height: 300px; margin-bottom: 16px; padding: clamp(24px, 4vw, 48px); overflow: hidden; border-radius: 30px; color: #fff; background: radial-gradient(circle at 90% 20%, rgba(255,209,102,.2), transparent 29%), linear-gradient(135deg, #09271f, #10513e 62%, #173d32); box-shadow: 0 24px 60px rgba(7,35,27,.18); } .bond-premium-hero::before { position: absolute; inset: 0; content: ""; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, transparent, #000); } .bond-hero-copy { position: relative; z-index: 1; } .bond-hero-copy .eyebrow { color: #75ddb5; } .bond-hero-copy h2 { max-width: 760px; margin: 8px 0 12px; color: #fff; font-size: clamp(30px, 4.3vw, 58px); line-height: 1.02; letter-spacing: -2px; } .bond-hero-copy p { max-width: 760px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.65; } .bond-hero-copy > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .bond-hero-copy a { padding: 9px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: #fff; text-decoration: none; background: rgba(255,255,255,.07); } .bond-live-orb { position: relative; z-index: 1; display: grid; place-items: center; align-content: center; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.13), rgba(255,255,255,.035) 64%, transparent 65%); box-shadow: inset 0 0 0 18px rgba(255,255,255,.025), 0 0 55px rgba(102,226,177,.15); animation: bond-orb-float 5s ease-in-out infinite; } .bond-live-orb > span { display: flex; align-items: center; gap: 7px; color: #8ce4c1; font-size: 12px; font-weight: 900; letter-spacing: .16em; } .bond-live-orb i { width: 8px; height: 8px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 16px #6ee7b7; } .bond-premium-hero.fallback .bond-live-orb i { background: #f4c866; box-shadow: 0 0 16px #f4c866; } .bond-live-orb strong { margin-top: 8px; font-size: clamp(44px, 6vw, 72px); line-height: .95; letter-spacing: -3px; } .bond-live-orb small { margin-top: 9px; color: rgba(255,255,255,.64); } .bond-live-orb em { margin-top: 7px; color: rgba(255,255,255,.46); font-size: 11.5px; font-style: normal; } .bond-rate-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } .bond-rate-card { display: grid; gap: 8px; min-height: 246px; padding: 17px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--surface-soft) 72%, var(--card))); animation: strategy-card-in .48s calc(var(--bond-delay)) both; } .bond-rate-card > div:first-child { display: flex; justify-content: space-between; align-items: center; } .bond-rate-card > div:first-child span { color: var(--muted); font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; } .bond-rate-card > div:first-child b { padding: 5px 7px; border-radius: 8px; background: var(--green-soft); color: var(--green); font-size: 12px; } .bond-rate-card > strong { margin-top: 8px; color: var(--ink); font-size: 34px; letter-spacing: -1px; } .bond-rate-card > strong small { font-size: 15px; } .bond-rate-card h3 { margin: 3px 0 0; color: var(--ink); font-size: 13px; } .bond-rate-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; } .bond-rate-card > small { margin-top: auto; color: var(--green-2); font-size: 11.5px; line-height: 1.4; } .bond-rate-bar { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-soft); } .bond-rate-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-2), var(--brand-accent)); } .bond-rate-card.inflation .bond-rate-bar i, .bond-rate-card.family .bond-rate-bar i { background: linear-gradient(90deg, #b17918, #f1cc71); } .bond-truth-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); } .bond-truth-strip span { display: grid; gap: 3px; padding: 13px; color: var(--muted); font-size: 12px; background: var(--card); } .bond-truth-strip b { color: var(--ink); font-size: 11px; } @keyframes bond-orb-float { 50% { transform: translateY(-8px) rotate(1deg); } } .strategy-library { margin-bottom: 18px; padding: clamp(20px,3vw,34px); border: 1px solid color-mix(in srgb, #7452e8 25%, var(--line)); border-radius: 30px; background: radial-gradient(circle at 80% 0, color-mix(in srgb, #7452e8 10%, transparent), transparent 28%), linear-gradient(145deg, var(--card), color-mix(in srgb, var(--surface-soft) 70%, var(--card))); box-shadow: var(--shadow); } .strategy-library-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; } .strategy-library-head h2 { max-width: 850px; margin: 5px 0 8px; color: var(--ink); font-size: clamp(27px,3.4vw,46px); line-height: 1.05; letter-spacing: -1.5px; } .strategy-library-head p { max-width: 820px; color: var(--muted); line-height: 1.55; } .strategy-library-head label { display: grid; gap: 6px; min-width: 190px; color: var(--muted); font-size: 12px; font-weight: 800; } .strategy-risk-scale { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 9px; margin: 22px 0 14px; color: var(--muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .strategy-risk-scale i { height: 4px; border-radius: 99px; background: linear-gradient(90deg, #57b88d, #e5b94c, #dd6669); } .strategy-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; } .strategy-card { position: relative; display: grid; gap: 9px; min-height: 360px; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--card) 96%, transparent); box-shadow: 0 12px 32px rgba(14,36,28,.05); animation: strategy-card-in .5s calc(var(--strategy-delay)) cubic-bezier(.18,.78,.24,1) both; transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease; } .strategy-card::before { position: absolute; top: 0; left: 0; right: 0; height: 3px; content: ""; background: #d6a93d; } .strategy-card.low::before { background: #45a67c; }.strategy-card.high::before { background: #d95b70; } .strategy-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, #7452e8 30%, var(--line)); box-shadow: 0 22px 45px rgba(38,24,84,.11); } .strategy-card-top { display: flex; justify-content: space-between; gap: 9px; } .strategy-card-top span { color: #7452e8; font-size: 11.5px; font-weight: 900; letter-spacing: .12em; } .strategy-card-top b { color: var(--muted); font-size: 11.5px; } .strategy-card h3 { margin: 3px 0 0; color: var(--ink); font-size: 21px; letter-spacing: -.4px; } .strategy-card > p { min-height: 40px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; } .strategy-mini-chart { width: 100%; height: 72px; color: #7452e8; overflow: visible; } .strategy-mini-chart polyline { stroke: currentColor; stroke-width: 1.8; } .strategy-mini-empty { display: grid; place-items: center; height: 72px; border-radius: 12px; color: var(--muted); font-size: 12px; background: var(--surface-soft); } .strategy-card-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .strategy-card-metrics span { display: grid; gap: 3px; padding: 9px; border-radius: 12px; background: var(--surface-soft); } .strategy-card-metrics small { color: var(--muted); font-size: 11px; text-transform: uppercase; } .strategy-card-metrics strong { color: var(--ink); font-size: 13px; } .strategy-tags { display: flex; flex-wrap: wrap; gap: 5px; } .strategy-tags span { padding: 4px 7px; border-radius: 99px; background: color-mix(in srgb, #7452e8 9%, var(--card)); color: #6b4fd0; font-size: 11px; font-weight: 800; } .strategy-card > button { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 10px 12px; border: 0; border-radius: 13px; background: var(--ink); color: #fff; font-weight: 800; cursor: pointer; } .strategy-welcome-overlay,.strategy-lesson-overlay { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(4,13,10,.76); backdrop-filter: blur(18px); animation: strategy-overlay-in .25s ease both; } #content:has(.strategy-welcome-overlay), #content:has(.strategy-lesson-overlay) { transform: none !important; will-change: auto !important; } .strategy-welcome-card { position: relative; isolation: isolate; width: min(780px,95vw); min-height: 520px; display: grid; align-content: end; overflow: hidden; padding: clamp(28px,5vw,58px); border: 1px solid rgba(255,255,255,.14); border-radius: 34px; color: #fff; background-color: #0a211b; background-image: radial-gradient(circle at 72% 22%, rgba(125,92,255,.45), transparent 27%), linear-gradient(145deg,#0a211b,#142d27 55%,#30245d); box-shadow: 0 40px 100px rgba(0,0,0,.4); } .strategy-welcome-card h2 { max-width: 650px; margin: 8px 0 10px; color: #fff; font-size: clamp(34px,5vw,61px); line-height: .98; letter-spacing: -2px; } .strategy-welcome-card p { max-width: 580px; color: rgba(255,255,255,.68); line-height: 1.6; } .strategy-welcome-card > div:last-child { display: flex; gap: 10px; margin-top: 20px; } .strategy-welcome-card button { padding: 13px 17px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; color: rgba(255,255,255,.78); background: transparent; font-weight: 800; cursor: pointer; } .strategy-welcome-card button.white { border-color: #fff; color: #11251e; background: #fff; box-shadow: 0 14px 35px rgba(255,255,255,.16); } .strategy-welcome-orbit { position: absolute; top: 36px; right: 45px; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; animation: strategy-orbit-breathe 5s ease-in-out infinite; } .strategy-welcome-orbit b,.strategy-welcome-orbit i { position: absolute; display: grid; place-items: center; border-radius: 50%; font-style: normal; } .strategy-welcome-orbit b { inset: 70px; background: rgba(255,255,255,.13); }.strategy-welcome-orbit i { width: 48px; height: 48px; background: #fff; color: #332766; font-size: 11.5px; font-weight: 900; }.strategy-welcome-orbit i:nth-child(1){top:-24px;left:96px}.strategy-welcome-orbit i:nth-child(2){top:95px;right:-24px}.strategy-welcome-orbit i:nth-child(3){bottom:-24px;left:96px}.strategy-welcome-orbit i:nth-child(4){top:95px;left:-24px} .strategy-lesson-shell { position: relative; isolation: isolate; width: min(980px,96vw); max-height: 92vh; overflow: auto; padding: clamp(24px,4vw,46px); border: 1px solid rgba(255,255,255,.14); border-radius: 30px; color: #fff; background-color: #081d17; background-image: radial-gradient(circle at 90% 10%, rgba(124,91,255,.28), transparent 27%), linear-gradient(145deg,#081d17,#12352a 60%,#211b45); box-shadow: 0 40px 100px rgba(0,0,0,.42); } .strategy-lesson-progress { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-right: 50px; } .strategy-lesson-progress i { height: 4px; border-radius: 99px; background: rgba(255,255,255,.13); }.strategy-lesson-progress i.active { background: #fff; } .strategy-lesson-close { position: absolute; top: 24px; right: 24px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff; background: rgba(255,255,255,.06); font-size: 22px; cursor: pointer; } .strategy-lesson-copy { min-height: 480px; display: grid; align-content: center; gap: 14px; padding: 30px 0 14px; } .strategy-lesson-copy > span { color: #80dcb9; font-size: 12px; font-weight: 900; letter-spacing: .14em; } .strategy-lesson-copy h2 { max-width: 800px; margin: 0; color: #fff; font-size: clamp(34px,5vw,65px); line-height: 1.02; letter-spacing: -2px; } .strategy-lesson-copy > p { max-width: 800px; color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.65; } .strategy-lesson-copy blockquote { max-width: 780px; margin: 10px 0; padding: 20px 22px; border-left: 3px solid #80dcb9; color: #fff; font-size: clamp(18px,2.4vw,27px); line-height: 1.45; background: rgba(255,255,255,.055); } .strategy-allocation-show { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }.strategy-allocation-show i { display: grid; place-items: center; min-width: 150px; min-height: 100px; padding: 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 21px; background: rgba(255,255,255,calc(.035 + var(--slice) * .018)); animation: bond-orb-float calc(4s + var(--slice)*.4s) ease-in-out infinite; }.strategy-allocation-show b { font-style: normal; } .strategy-regime-demo { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.strategy-regime-demo i { display: grid; gap: 9px; min-height: 120px; align-content: end; padding: 17px; border: 1px solid rgba(255,255,255,.12); border-radius: 19px; font-style: normal; font-weight: 900; background: rgba(255,255,255,.045); }.strategy-regime-demo small { color: rgba(255,255,255,.55); font-weight: 400; } .chart-slide .multi-line-chart { color: var(--ink); border-radius: 18px; background: #fff; }.strategy-risk-callout { padding: 13px 15px; border: 1px solid rgba(255,108,116,.3); border-radius: 14px; color: #ffd8da !important; background: rgba(212,63,71,.12); } .strategy-quiz { display: grid; gap: 12px; }.strategy-quiz article { padding: 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background: rgba(255,255,255,.045); }.strategy-quiz article > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 10px; }.strategy-quiz button { padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; color: rgba(255,255,255,.75); background: rgba(0,0,0,.12); cursor: pointer; text-align: left; }.strategy-quiz button.correct { border-color: #6fe0b4; color: #baf4dd; background: rgba(45,166,121,.18); }.strategy-quiz button.wrong { border-color: #ff858a; color: #ffd0d2; background: rgba(200,59,69,.18); }.strategy-quiz article p { color: rgba(255,255,255,.66); font-size: 11px; line-height: 1.5; } .strategy-quiz-result { display: flex; align-items: center; gap: 15px; padding: 14px; border-radius: 16px; background: #fff; color: #10231c; }.strategy-quiz-result > strong { font-size: 33px; }.strategy-quiz-result > div { display: grid; gap: 3px; }.strategy-quiz-result small { color: #6d7973; } .strategy-lesson-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.12); }.strategy-lesson-actions button { padding: 11px 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; color: #fff; background: transparent; font-weight: 800; cursor: pointer; }.strategy-lesson-actions button.primary { color: #11251e; background: #fff; }.strategy-lesson-actions button:disabled { opacity: .3; } @keyframes strategy-card-in { from { opacity: 0; transform: translateY(16px) scale(.98); } } @keyframes strategy-overlay-in { from { opacity: 0; } } @keyframes strategy-orbit-breathe { 50% { transform: scale(1.035); box-shadow: 0 0 55px rgba(126,94,255,.18); } } @media (max-width: 1100px) { .bond-rate-grid { grid-template-columns: repeat(2,1fr); }.strategy-card-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 760px) { .report-always-on-strip,.bond-premium-hero { grid-template-columns: 1fr; }.report-always-on-strip > div + div { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); }.report-always-live { justify-self: start; } .report-assessment { grid-template-columns: 72px 1fr; }.report-assessment-score { min-height: 70px; }.report-assessment-score strong { font-size: 25px; } .bond-premium-hero { padding: 24px; }.bond-live-orb { width: min(250px,72vw); justify-self: center; }.bond-rate-grid,.strategy-card-grid,.bond-truth-strip { grid-template-columns: 1fr; }.bond-rate-card { min-height: 220px; } .strategy-library-head { align-items: stretch; flex-direction: column; }.strategy-risk-scale { grid-template-columns: 1fr; }.strategy-risk-scale i { display: none; }.strategy-welcome-orbit { opacity: .5; transform: scale(.72); transform-origin: top right; }.strategy-welcome-card { min-height: 590px; }.strategy-welcome-card > div:last-child { flex-direction: column; }.strategy-regime-demo,.strategy-quiz article > div { grid-template-columns: 1fr; }.strategy-lesson-copy { min-height: 560px; }.strategy-lesson-shell { padding: 22px; border-radius: 22px; } } @media (prefers-reduced-motion: reduce) { .report-always-live i,.bond-live-orb,.bond-rate-card,.strategy-card,.strategy-welcome-orbit,.strategy-allocation-show i { animation: none !important; } } .gem-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gem-insight-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 18px; margin: 18px 0; } .gem-drawdown-panel, .gem-stress-panel, .gem-year-panel { position: relative; overflow: hidden; } .gem-drawdown-panel::before, .gem-year-panel::before { position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #6d4aff, #a78bfa 48%, transparent 88%); content: ""; } .gem-drawdown-wrap { min-width: 650px; overflow-x: auto; } .gem-inline-legend { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 9px; } .gem-inline-legend span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 850; } .gem-inline-legend i { width: 22px; height: 4px; border-radius: 999px; background: var(--legend); } .gem-stress-list { display: grid; gap: 10px; } .gem-stress-list > article { position: relative; display: grid; gap: 11px; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, #ef5b62 10%, transparent), transparent 42%), var(--surface); transition: transform var(--motion-medium) ease, border-color var(--motion-fast) ease; } .gem-stress-list > article:hover { border-color: color-mix(in srgb, #6d4aff 34%, var(--line)); transform: translateY(-3px); } .gem-stress-list time { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .04em; } .gem-stress-list article > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .gem-stress-list article > div span { display: grid; gap: 3px; padding: 10px; border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); border-radius: 12px; color: var(--muted); font-size: 11.5px; } .gem-stress-list strong { font-size: 17px; } .gem-stress-list p { margin: 0; font-size: 12px; font-weight: 900; } .gem-year-panel { margin-top: 18px; } .gem-year-table th, .gem-year-table td { white-space: nowrap; } .gem-year-table tbody tr { transition: background var(--motion-fast) ease; } .gem-year-table tbody tr:hover { background: color-mix(in srgb, #6d4aff 5%, var(--surface)); } .gem-return-pill { display: inline-flex; min-width: 76px; justify-content: center; padding: 7px 9px; border-radius: 10px; background: color-mix(in srgb, currentColor 8%, var(--surface)); font-size: 11px; font-weight: 900; } .gem-year-table small { color: var(--muted); } @media (max-width: 1180px) { .gem-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gem-insight-grid { grid-template-columns: 1fr; } .gem-stress-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .gem-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gem-insight-grid { gap: 12px; } .gem-drawdown-panel { overflow-x: auto; } .gem-drawdown-wrap { min-width: 720px; } .gem-stress-list { grid-template-columns: 1fr; } } @media (max-width: 390px) { .gem-stats { grid-template-columns: 1fr; } } .closed-positions-ledger { margin-top: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: rgba(255,255,255,.055); } .closed-positions-ledger > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; min-height: 78px; padding: 16px 18px; color: #f5fbf7; cursor: pointer; list-style: none; } .closed-positions-ledger > summary::-webkit-details-marker { display: none; } .closed-positions-ledger > summary span { display: grid; gap: 3px; } .closed-positions-ledger > summary small { color: #7ee2bc; font-size: 12px; font-weight: 900; letter-spacing: .14em; } .closed-positions-ledger > summary strong { font-size: 17px; } .closed-positions-ledger > summary em { color: rgba(238,249,243,.64); font-size: 12px; font-style: normal; font-weight: 600; } .closed-positions-ledger > summary > i { color: #7ee2bc; font-size: 20px; font-style: normal; transition: transform .2s ease; } .closed-positions-ledger[open] > summary > i { transform: rotate(180deg); } .closed-position-list { display: grid; gap: 8px; max-height: 480px; padding: 0 12px 12px; overflow: auto; } .closed-position-row { position: relative; display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(105px, .65fr)) auto; align-items: center; gap: 13px; width: 100%; min-height: 68px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(5,22,16,.28); color: #f4faf6; text-align: left; cursor: pointer; transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, background var(--motion-fast) ease; } .closed-position-row:hover { border-color: rgba(126,226,188,.5); background: rgba(31,128,94,.22); transform: translateY(-2px); } .closed-position-identity { display: flex; align-items: center; gap: 10px; min-width: 0; } .closed-position-identity > span:last-child { display: grid; min-width: 0; } .closed-position-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .closed-position-identity small, .closed-position-row > span > small { color: rgba(238,249,243,.58); font-size: 12px; font-weight: 700; } .closed-position-row > span:not(.closed-position-identity) { display: grid; gap: 3px; } .closed-position-row b { font-size: 13px; } .closed-position-open { color: #7ee2bc; font-size: 12px; font-weight: 900; white-space: nowrap; } .closed-cost-warning { grid-column: 2 / -1; color: #ffd36d; font-size: 12px; font-style: normal; font-weight: 800; } .gem-launch-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; min-height: 190px; margin-bottom: 18px; padding: clamp(24px, 4vw, 42px); overflow: hidden; border: 1px solid color-mix(in srgb, #7557ff 34%, var(--line)); border-radius: 28px; background: radial-gradient(circle at 85% 15%, rgba(117,87,255,.23), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--card) 88%, #7557ff), var(--card)); box-shadow: 0 22px 60px rgba(32,23,76,.12); cursor: pointer; } .gem-launch-card::after { content: ""; position: absolute; inset: auto -8% -55% 34%; height: 190px; background: radial-gradient(ellipse, rgba(58,211,154,.18), transparent 67%); pointer-events: none; } .gem-launch-card h2 { margin: 7px 0 8px; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.035em; } .gem-launch-card p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.65; } .gem-launch-action { display: inline-block; margin-top: 18px; color: color-mix(in srgb, #7557ff 72%, var(--green-2)); font-weight: 900; } .gem-launch-flow { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; } .gem-launch-flow span, .gem-launch-flow strong { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid color-mix(in srgb, #7557ff 40%, var(--line)); border-radius: 22px; background: color-mix(in srgb, var(--card) 86%, #7557ff); box-shadow: 0 12px 28px rgba(55,37,120,.16); font-weight: 950; } .gem-launch-flow strong { border-color: color-mix(in srgb, var(--green-2) 55%, var(--line)); background: color-mix(in srgb, var(--card) 80%, var(--green-soft)); } .gem-launch-flow i, .gem-launch-flow b { color: var(--muted); font-size: 11px; font-style: normal; } .gem-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(270px, .7fr); align-items: center; gap: 30px; min-height: 330px; margin-bottom: 18px; padding: clamp(28px, 5vw, 58px); overflow: hidden; border: 1px solid rgba(135,115,255,.35); border-radius: 32px; background: radial-gradient(circle at 84% 24%, rgba(126,95,255,.43), transparent 27%), radial-gradient(circle at 66% 92%, rgba(55,209,151,.24), transparent 33%), linear-gradient(135deg, #0b1d18 0%, #15172d 54%, #24184b 100%); color: #f7fbf8; box-shadow: 0 26px 78px rgba(21,19,52,.23); } .gem-hero-copy { position: relative; z-index: 2; } .gem-hero .eyebrow { color: #a895ff; } .gem-hero h2 { max-width: 820px; margin: 8px 0 12px; font-size: clamp(34px, 5vw, 64px); line-height: .98; letter-spacing: -.052em; } .gem-hero p { max-width: 800px; margin: 0; color: rgba(241,248,244,.72); font-size: 15px; line-height: 1.72; } .gem-hero-copy > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .gem-hero a { padding: 10px 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: rgba(255,255,255,.07); color: #fff; font-size: 12px; font-weight: 850; text-decoration: none; } .gem-hero a:hover { border-color: rgba(168,149,255,.7); background: rgba(132,104,255,.18); } .gem-orbit { position: relative; width: 250px; height: 250px; margin: auto; animation: gemFloat 5s ease-in-out infinite; } .gem-orbit::before, .gem-orbit::after { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; } .gem-orbit::after { inset: 54px; border-color: rgba(119,232,192,.22); } .gem-orbit b { position: absolute; inset: 78px; z-index: 2; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #795cff, #4c32bf); box-shadow: 0 0 50px rgba(121,92,255,.5); font-size: 24px; } .gem-orbit span { position: absolute; z-index: 3; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid rgba(255,255,255,.22); border-radius: 20px; background: rgba(13,25,26,.86); box-shadow: 0 12px 30px rgba(0,0,0,.25); font-size: 12px; font-weight: 950; } .gem-orbit span:nth-child(1) { top: 0; left: 93px; } .gem-orbit span:nth-child(2) { right: 2px; bottom: 35px; } .gem-orbit span:nth-child(3) { left: 2px; bottom: 35px; } @keyframes gemFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } } .gem-loading-panel { margin-bottom: 18px; } .gem-signal-board { display: grid; grid-template-columns: minmax(240px,.72fr) minmax(360px,1.35fr) minmax(260px,.85fr); gap: 1px; margin-bottom: 18px; overflow: hidden; border: 1px solid color-mix(in srgb, #7557ff 27%, var(--line)); border-radius: 26px; background: var(--line); box-shadow: 0 18px 50px rgba(18,31,26,.09); } .gem-signal-board > div { padding: 23px; background: var(--card); } .gem-current-signal { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg, color-mix(in srgb, var(--card) 74%, #7557ff), var(--card)) !important; } .gem-current-signal > span { color: #7557ff; font-size: 12px; font-weight: 950; letter-spacing: .12em; } .gem-current-signal > small { margin-top: 4px; color: var(--muted); } .gem-current-signal strong { margin-top: 20px; font-size: clamp(26px,3vw,40px); line-height: 1; } .gem-current-signal em { margin-top: 8px; color: var(--green-2); font-style: normal; font-weight: 900; } .gem-signal-board.risk-off .gem-current-signal em { color: #d4a017; } .gem-signal-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .gem-signal-metrics > div { display: grid; align-content: center; gap: 5px; min-height: 118px; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: color-mix(in srgb, var(--surface) 70%, var(--card)); } .gem-signal-metrics small { color: var(--muted); font-weight: 800; } .gem-signal-metrics strong { font-size: 23px; } .gem-signal-metrics span { color: var(--muted); font-size: 12px; } .gem-signal-reason { display: flex; flex-direction: column; justify-content: center; } .gem-signal-reason b { font-size: 17px; } .gem-signal-reason p { margin: 7px 0; color: var(--muted); font-size: 12px; line-height: 1.55; } .gem-signal-reason small { color: #7557ff; font-weight: 850; } .gem-controls { align-items: end; } .gem-controls label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 850; } .gem-controls > small { max-width: 330px; color: var(--muted); line-height: 1.45; } .gem-stats { grid-template-columns: repeat(4,minmax(0,1fr)); } .gem-chart-panel { overflow: hidden; } .gem-comparison-picker { display: flex; gap: 8px; padding: 2px 0 15px; overflow-x: auto; scrollbar-width: thin; } .gem-comparison-picker button { display: flex; align-items: center; gap: 9px; min-width: 190px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; opacity: .68; } .gem-comparison-picker button.active { border-color: color-mix(in srgb, var(--gem-color,#7557ff) 55%, var(--line)); background: color-mix(in srgb, var(--surface) 82%, var(--gem-color,#7557ff)); opacity: 1; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gem-color,#7557ff) 12%, transparent); } .gem-comparison-picker i { width: 10px; height: 34px; border-radius: 999px; background: var(--gem-color); flex: 0 0 auto; } .gem-comparison-picker span { display: grid; gap: 2px; } .gem-comparison-picker b { font-size: 11px; } .gem-comparison-picker small { color: var(--muted); font-size: 11.5px; } .gem-chart-wrap { min-width: 820px; } .gem-chart-panel { overflow-x: auto; } .gem-chart-panel .panel-header, .gem-chart-panel .gem-comparison-picker, .gem-chart-panel .gem-chart-note { min-width: 0; } .gem-chart-note { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #7557ff 7%, var(--surface)); color: var(--muted); font-size: 11px; line-height: 1.55; } .gem-chart-note strong { color: var(--ink); } .gem-education-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 18px 0; } .gem-education-grid article { min-height: 190px; padding: 23px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 13px 35px rgba(15,42,32,.055); } .gem-education-grid article > span { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 22px; border-radius: 12px; background: color-mix(in srgb, #7557ff 12%, var(--surface)); color: #7557ff; font-weight: 950; } .gem-education-grid article.risk > span { background: color-mix(in srgb, #d99d28 13%, var(--surface)); color: #b3780e; } .gem-education-grid strong { font-size: 16px; } .gem-education-grid p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; } .gem-detail-grid { grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); } .gem-results-table td:first-child { min-width: 210px; } .gem-primary-row { background: color-mix(in srgb, #7557ff 7%, var(--card)); } .gem-primary-row td:first-child { box-shadow: inset 4px 0 #7557ff; } .gem-risk-list { display: grid; gap: 9px; } .gem-risk-list span { display: grid; gap: 4px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--muted); font-size: 11px; line-height: 1.45; } .gem-risk-list b { color: var(--ink); font-size: 12px; } .gem-regime-timeline { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 9px; } .gem-regime-timeline article { display: grid; gap: 4px; min-height: 118px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); } .gem-regime-timeline article.risk-on { box-shadow: inset 0 3px var(--green-2); } .gem-regime-timeline article.risk-off { box-shadow: inset 0 3px #d4a017; } .gem-regime-timeline time { color: var(--muted); font-size: 12px; font-weight: 850; } .gem-regime-timeline strong { font-size: 21px; } .gem-regime-timeline small { color: var(--muted); } .gem-regime-timeline span { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.4; } .gem-source-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.7fr); gap: 28px; align-items: center; margin-top: 18px; background: linear-gradient(135deg,color-mix(in srgb,var(--card) 92%,#7557ff),var(--card)); } .gem-source-panel h2 { margin: 6px 0 8px; font-size: clamp(22px,3vw,32px); } .gem-source-panel p { margin: 0; color: var(--muted); line-height: 1.6; } .gem-source-panel > div:last-child { display: grid; gap: 8px; } .gem-source-panel a { padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 850; text-decoration: none; } .gem-source-panel a:hover { border-color: #7557ff; color: #7557ff; } @media (max-width: 1120px) { .gem-signal-board { grid-template-columns: 1fr 1.6fr; } .gem-signal-reason { grid-column: 1 / -1; } .gem-education-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .gem-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } .closed-position-row { grid-template-columns: minmax(200px,1.4fr) repeat(3,minmax(90px,.6fr)); } .closed-position-open { display: none !important; } } @media (max-width: 760px) { .gem-launch-card, .gem-hero, .gem-source-panel { grid-template-columns: 1fr; } .gem-launch-flow { display: none; } .gem-orbit { width: 220px; height: 220px; transform: scale(.88); } .gem-orbit b { inset: 68px; } .gem-orbit span:nth-child(1) { left: 78px; } .gem-signal-board { grid-template-columns: 1fr; } .gem-signal-reason { grid-column: auto; } .gem-signal-metrics { grid-template-columns: 1fr; } .gem-signal-metrics > div { min-height: 88px; } .gem-education-grid, .gem-detail-grid { grid-template-columns: 1fr; } .gem-chart-panel { margin-inline: 0; } .gem-chart-wrap { min-width: 760px; } .closed-position-row { grid-template-columns: 1fr 1fr; gap: 10px; } .closed-position-identity { grid-column: 1 / -1; } .closed-cost-warning { grid-column: 1 / -1; } } @media (max-width: 480px) { .gem-hero { padding: 27px 21px; border-radius: 25px; } .gem-hero h2 { font-size: 37px; } .gem-orbit { display: none; } .gem-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } .gem-education-grid { gap: 9px; } .gem-education-grid article { min-height: 0; padding: 18px; } .gem-education-grid article > span { margin-bottom: 13px; } .closed-positions-ledger > summary { padding: 14px; } .closed-position-list { padding: 0 8px 8px; } } @media (prefers-reduced-motion: reduce) { .gem-orbit { animation: none; } } article.realized-panel.premium-realized-panel { overflow: hidden; padding: 0; border: 0; background: linear-gradient(145deg, #0c2f25, #124c3b 58%, #173a30); color: #fff; } body:not(.home-view) { background-attachment: scroll; } .portfolio-history-more { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--green-soft) 36%, var(--surface)); color: var(--muted); font-size: 12px; } .portfolio-history-more.complete { justify-content: center; } .tx-table tbody tr { content-visibility: auto; contain-intrinsic-size: 58px; } .xtb-reconciliation-panel { position: relative; overflow: hidden; } .xtb-reconciliation-panel::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--green-2), var(--brand-accent)); content: ""; } .xtb-reconciliation-panel.warning::before { background: linear-gradient(180deg, var(--amber), #f3c768); } .xtb-reconciliation-empty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; } .xtb-reconciliation-empty > span { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid color-mix(in srgb, var(--green-2) 28%, var(--line)); border-radius: 15px; background: linear-gradient(135deg, var(--green-soft), var(--surface)); color: var(--green); font-size: 11px; font-weight: 950; letter-spacing: .08em; } .xtb-reconciliation-empty div { display: grid; gap: 4px; } .xtb-reconciliation-empty small { color: var(--muted); line-height: 1.5; } .xtb-reconciliation-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; padding: 0 16px 14px; } .xtb-reconciliation-kpis > span { display: grid; min-width: 0; min-height: 94px; align-content: center; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, var(--green-soft)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 54%, transparent); } .xtb-reconciliation-kpis small, .xtb-reconciliation-kpis em { overflow: hidden; color: var(--muted); font-size: 11.5px; font-style: normal; line-height: 1.25; text-overflow: ellipsis; } .xtb-reconciliation-kpis strong { font-size: clamp(16px, 1.45vw, 21px); font-variant-numeric: tabular-nums; letter-spacing: -.4px; } .xtb-reconciliation-kpis .positive strong { color: var(--green); } .xtb-reconciliation-kpis .negative strong { color: var(--red); } .xtb-reconciliation-table { margin: 0 16px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); } .xtb-reconciliation-head, .xtb-reconciliation-row { display: grid; grid-template-columns: minmax(150px, 1.25fr) minmax(95px, .75fr) minmax(120px, 1fr) minmax(75px, .62fr) minmax(105px, .85fr) minmax(85px, .65fr); align-items: center; gap: 12px; } .xtb-reconciliation-head { padding: 9px 13px; background: color-mix(in srgb, var(--green-soft) 48%, var(--surface)); color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } .xtb-reconciliation-row { min-height: 66px; padding: 9px 13px; border-top: 1px solid var(--line); transition: background var(--motion-fast) ease; } .xtb-reconciliation-row:hover { background: color-mix(in srgb, var(--green-soft) 34%, var(--surface)); } .xtb-reconciliation-row.mismatch { background: color-mix(in srgb, var(--red-soft) 36%, var(--surface)); } .xtb-reconciliation-row > span { display: grid; min-width: 0; gap: 2px; } .xtb-reconciliation-row > span:first-child { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; } .xtb-reconciliation-row > span:first-child small { grid-column: 2; } .xtb-reconciliation-row b { overflow: hidden; font-size: 12px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .xtb-reconciliation-row small { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; } .xtb-reconciliation-row .xtb-position-profit { display: inline-flex; width: fit-content; margin-top: 3px; padding: 3px 7px; border-radius: 999px; font-size: 11.5px; font-style: normal; font-weight: 900; font-variant-numeric: tabular-nums; animation: portfolio-result-breathe 2.8s ease-in-out infinite; } .xtb-position-profit.trend-up { background: color-mix(in srgb, var(--green-soft) 82%, transparent); color: var(--green-2); } .xtb-position-profit.trend-down { background: color-mix(in srgb, var(--red-soft) 82%, transparent); color: var(--red); } .xtb-reconciliation-row > span:last-child { grid-template-columns: auto minmax(0, 1fr); align-items: center; } .reconciliation-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px color-mix(in srgb, var(--amber) 10%, transparent); } .xtb-reconciliation-row.exact .reconciliation-dot { background: var(--green-2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--green-2) 10%, transparent); } .xtb-reconciliation-row.mismatch .reconciliation-dot { background: var(--red); box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 10%, transparent); } .xtb-reconciliation-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; } .portfolio-currency-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; } .portfolio-currency-card { position: relative; isolation: isolate; display: grid; min-width: 0; min-height: 218px; align-content: space-between; gap: 12px; overflow: hidden; padding: 20px; border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); border-radius: 24px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 42%), linear-gradient(150deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--green-soft) 38%, var(--surface))); box-shadow: var(--shadow); } .portfolio-currency-board.combined .portfolio-currency-card.total { grid-column: span 2; } .portfolio-currency-board.split .portfolio-currency-card.pln, .portfolio-currency-board.split .portfolio-currency-card.usd { border-color: color-mix(in srgb, var(--green-2) 28%, var(--line)); transform: translateY(-3px); } .portfolio-currency-card::after { position: absolute; inset: auto -20% -55% 28%; z-index: -1; height: 75%; border-radius: 50%; background: color-mix(in srgb, var(--brand-accent) 13%, transparent); filter: blur(18px); content: ""; } .portfolio-currency-card.total { color: #effcf7; background: radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--brand-accent) 38%, transparent), transparent 42%), linear-gradient(145deg, var(--sidebar), color-mix(in srgb, var(--sidebar) 78%, var(--green-2))); } .portfolio-currency-card > div:first-child { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; } .portfolio-currency-card > div:first-child span { font-size: 11px; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; } .portfolio-currency-card > div:first-child em, .portfolio-currency-card > small, .currency-card-result small { color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.35; } .portfolio-currency-card.total > div:first-child em, .portfolio-currency-card.total > small, .portfolio-currency-card.total .currency-card-result small { color: rgba(239, 252, 247, .66); } .portfolio-currency-card > strong { font-size: clamp(25px, 2.5vw, 39px); font-variant-numeric: tabular-nums; letter-spacing: -.055em; } .currency-card-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: end; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--line) 74%, transparent); } .currency-card-result b { color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; } .currency-card-result span { color: var(--muted); font-size: 11px; font-weight: 850; } .currency-card-result small { grid-column: 1 / -1; } .currency-card-result.trend-up b { color: var(--green-2); } .currency-card-result.trend-down b { color: var(--red); } .portfolio-currency-card.total .currency-card-result b { color: #7df0bd; } .portfolio-currency-card.total .currency-card-result { border-color: rgba(255,255,255,.14); } .forecast-dividend-panel { overflow: hidden; } .forecast-dividend-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; cursor: pointer; list-style: none; background: radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--amber) 18%, transparent), transparent 40%), color-mix(in srgb, var(--surface) 94%, var(--green-soft)); } .forecast-dividend-panel > summary::-webkit-details-marker { display: none; } .forecast-dividend-panel > summary div { display: grid; gap: 4px; } .forecast-dividend-panel > summary strong { color: var(--ink); font-size: clamp(18px, 2vw, 27px); } .forecast-dividend-panel > summary small { color: var(--muted); } .forecast-dividend-total { color: var(--green-2); font-size: clamp(22px, 2.7vw, 38px); font-weight: 950; white-space: nowrap; } .forecast-dividend-body { padding: 4px 20px 20px; } @keyframes portfolio-result-breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent); transform: translateY(0); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 7%, transparent); transform: translateY(-1px); } } @media (max-width: 1100px) { .portfolio-currency-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portfolio-currency-board.combined .portfolio-currency-card.total { grid-column: span 2; } .xtb-reconciliation-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .portfolio-currency-board { grid-template-columns: 1fr; } .portfolio-currency-board.combined .portfolio-currency-card.total { grid-column: auto; } .portfolio-currency-card { min-height: 188px; } .portfolio-currency-board.split .portfolio-currency-card.pln, .portfolio-currency-board.split .portfolio-currency-card.usd { transform: none; } .forecast-dividend-panel > summary { align-items: flex-start; flex-direction: column; } .portfolio-history-more, .xtb-reconciliation-empty { align-items: stretch; flex-direction: column; } .portfolio-history-more { display: flex; } .xtb-reconciliation-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); } .xtb-reconciliation-empty .ghost-button { grid-column: 1 / -1; width: 100%; } .xtb-reconciliation-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 12px; } .xtb-reconciliation-table { display: grid; gap: 9px; margin-inline: 12px; overflow: visible; border: 0; background: transparent; } .xtb-reconciliation-head { display: none; } .xtb-reconciliation-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); } .xtb-reconciliation-row > span:first-child, .xtb-reconciliation-row > span:last-child { grid-column: 1 / -1; } .xtb-reconciliation-actions { display: grid; grid-template-columns: 1fr; padding-inline: 12px; } } [data-theme="ocean"] { --green: #1763d6; --green-2: #2f80ed; --green-soft: #e7eefb; --navy: #0e1f3a; --sidebar: #0e1f3a; --brand-accent: #6aa6f5; } [data-theme="fiolet"] { --green: #6d4bd1; --green-2: #8b5cf6; --green-soft: #efeafe; --navy: #241646; --sidebar: #1e1340; --brand-accent: #b79bf6; } [data-theme="bursztyn"] { --green: #c2410c; --green-2: #ea7317; --green-soft: #fdeede; --navy: #2a1c10; --sidebar: #24180e; --brand-accent: #f6b04e; } :is([data-theme="dark"],[data-theme="cyber"]) { color-scheme: dark; --bg: #070b0d; --surface: #0d1417; --card: #121b1e; --surface-soft: #192429; --ink: #f1f7f4; --muted: #a5b6af; --line: #2c3b40; --green: #58d9aa; --green-2: #35c794; --green-soft: #123b2f; --red: #ff858d; --red-soft: #421f27; --amber: #f2bd61; --amber-soft: #3a2d17; --navy: #07110f; --sidebar: #080d0f; --brand-accent: #78e6bb; --action: #167858; --chart-grid: #2a383d; --shadow: 0 1px 0 rgba(255, 255, 255, 0.025), 0 18px 52px rgba(0, 0, 0, 0.46); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-color: color-mix(in srgb, var(--green) 58%, var(--line)) color-mix(in srgb, var(--surface-soft) 88%, transparent); scrollbar-width: thin; } * { scrollbar-color: color-mix(in srgb, var(--green) 52%, var(--line)) color-mix(in srgb, var(--surface-soft) 86%, transparent); scrollbar-width: thin; } *::-webkit-scrollbar { width: 11px; height: 11px; } *::-webkit-scrollbar-track { border-radius: 999px; background: color-mix(in srgb, var(--surface-soft) 82%, transparent); } *::-webkit-scrollbar-thumb { border: 3px solid color-mix(in srgb, var(--surface-soft) 88%, var(--card)); border-radius: 999px; background: linear-gradient(180deg, var(--green), var(--green-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 24%, transparent); } *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--green-2), var(--brand-accent)); } body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; } button, input, select { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button { color: inherit; } .app-shell { min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 244px; flex-direction: column; padding: 28px 18px 20px; background: var(--sidebar); color: #fff; transition: background 240ms ease; } .brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 30px; color: #fff; font-size: 20px; font-weight: 500; letter-spacing: -0.5px; text-decoration: none; } .brand.account-brand { padding-bottom: 22px; } .brand.account-brand:hover .brand-mark { transform: translateY(-1px); } .brand strong { color: var(--brand-accent); font-weight: 800; } .brand-copy { display: flex; flex-direction: column; line-height: 1.05; } .brand-copy strong { font-size: 19px; } .brand-copy small { color: rgba(255, 255, 255, 0.62); font-size: 12px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; } .brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(132, 227, 190, 0.25); border-radius: 11px; background: rgba(90, 205, 160, 0.1); transition: transform .18s ease, border-color .18s ease, background .18s ease; } .brand-mark svg { width: 24px; fill: none; stroke: #77d9b3; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; } .brand.account-brand .brand-mark { width: 42px; height: 42px; border: none; background: transparent; } .brand.account-brand .brand-copy strong { color: #fff; font-size: 16px; } .brand.account-brand .brand-copy small { max-width: 150px; overflow: hidden; color: var(--brand-accent); text-overflow: ellipsis; white-space: nowrap; } .nav-list { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 3px; scrollbar-color: color-mix(in srgb, var(--brand-accent) 78%, #fff) color-mix(in srgb, var(--sidebar) 82%, #000); scrollbar-width: thin; } .nav-list::-webkit-scrollbar { width: 9px; } .nav-list::-webkit-scrollbar-track { border-radius: 999px; background: color-mix(in srgb, var(--sidebar) 86%, #000); } .nav-list::-webkit-scrollbar-thumb { border: 2px solid color-mix(in srgb, var(--sidebar) 82%, #000); border-radius: 999px; background: linear-gradient(180deg, var(--brand-accent), color-mix(in srgb, var(--green-2) 70%, #fff)); box-shadow: 0 0 18px color-mix(in srgb, var(--brand-accent) 22%, transparent); } .nav-list::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #fff, var(--brand-accent)); } .nav-item { display: flex; width: 100%; align-items: center; gap: 13px; padding: 12px 14px; border: 0; border-radius: 12px; background: transparent; color: #aabcb5; cursor: pointer; text-align: left; transition: 160ms ease; } .nav-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; } .nav-item.active { background: #1e4336; color: #fff; box-shadow: inset 0 0 0 1px rgba(143, 229, 196, 0.08); } .nav-item svg, .icon-button svg, .global-search svg { width: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; } .nav-item:first-child svg { fill: currentColor; stroke: none; } .nav-item span:nth-child(2) { flex: 1; } .nav-count { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 20px; background: rgba(118, 218, 180, 0.13); color: #83dbb9; font-size: 11px; font-weight: 750; } .sidebar-bottom { margin-top: auto; } .demo-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 4px 16px; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: rgba(255, 255, 255, 0.025); } .demo-note.cloud { border-color: rgba(103, 210, 169, 0.24); background: radial-gradient(circle at 15% 15%, rgba(103, 210, 169, 0.16), transparent 46%), rgba(255, 255, 255, 0.045); } .demo-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #e3b454; box-shadow: 0 0 0 4px rgba(227, 180, 84, 0.12); } .demo-dot.cloud { background: #67d2a9; box-shadow: 0 0 0 4px rgba(103, 210, 169, 0.14); } .demo-note strong, .demo-note small { display: block; } .demo-note strong { margin-bottom: 4px; color: #dbe7e2; font-size: 11px; } .demo-note small { color: #82968e; font-size: 11.5px; line-height: 1.4; } .profile-button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 12px 9px 4px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); background: transparent; color: #7e928a; cursor: pointer; text-align: left; } .avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #2b5c4b; color: #dff8ee; font-size: 11px; font-weight: 800; } .profile-copy { min-width: 0; flex: 1; } .profile-copy strong, .profile-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-copy strong { color: #dae6e1; font-size: 11px; } .profile-copy small { margin-top: 2px; color: #72877f; font-size: 11.5px; } .main-area { min-height: 100vh; margin-left: 244px; } body.home-view { background: radial-gradient(circle at 12% 0%, rgba(103, 210, 169, 0.18), transparent 28%), radial-gradient(circle at 90% 10%, rgba(31, 138, 107, 0.14), transparent 30%), var(--bg); } body.home-view .sidebar, body.home-view .topbar { display: none; } body.home-view .main-area { margin-left: 0; } body.home-view .content { width: 100%; max-width: none; padding: 0; } body.home-view .view-loader { top: 24px; left: 50%; } .topbar { position: sticky; top: 0; z-index: 15; display: flex; height: 72px; align-items: center; gap: 20px; padding: 0 30px; border-bottom: 1px solid var(--line); background: var(--bg); backdrop-filter: blur(14px); } .mobile-menu { display: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); } .mobile-menu span { display: block; width: 16px; height: 1.5px; margin: 4px auto; background: var(--ink); } .global-search { display: flex; width: min(420px, 40vw); align-items: center; gap: 9px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; color: #829088; transition: 160ms ease; } .global-search:focus-within { border-color: #d5ded9; background: var(--card); box-shadow: 0 0 0 3px rgba(25, 122, 92, 0.06); } .global-search input { width: 100%; padding: 10px 0; border: 0; outline: 0; background: transparent; color: var(--ink); } .global-search input::placeholder { color: var(--muted); } kbd { padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: #87938c; font-family: inherit; font-size: 11px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03); } .topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .feedback-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--green) 22%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--green-soft) 54%, var(--card)); color: var(--green); font-size: 11px; font-weight: 850; text-decoration: none; transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, background var(--motion-fast) ease; } .feedback-chip:hover { border-color: color-mix(in srgb, var(--green) 44%, var(--line)); background: var(--green-soft); transform: translateY(-1px); } .feedback-chip span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 999px; background: var(--green); color: #fff; font-size: 12px; line-height: 1; } .market-state { display: flex; align-items: center; gap: 9px; margin-right: 6px; padding: 5px 7px; border: 0; border-radius: 9px; background: transparent; color: #6e7d75; cursor: pointer; text-align: left; transition: background 140ms ease; } .market-state:hover { background: var(--surface-soft); } .market-state strong, .market-state small { display: block; } .market-state strong { color: var(--ink); font-size: 12px; font-weight: 750; } .market-state small { margin-top: 2px; color: var(--muted); font-size: 11px; } .market-state i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #28a37a; box-shadow: 0 0 0 4px rgba(40, 163, 122, 0.11); } .market-state.closed i { background: #c55456; box-shadow: 0 0 0 4px rgba(197, 84, 86, 0.11); } .market-state-select { position: relative; min-width: 260px; padding-right: 88px; cursor: default; } .market-state-select select { position: absolute; top: 50%; right: 6px; width: 74px; height: 30px; transform: translateY(-50%); border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--green); font-size: 12px; font-weight: 850; outline: 0; } .icon-button { position: relative; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: #53635b; cursor: pointer; } .notification-dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border: 1.5px solid #fff; border-radius: 50%; background: #c45452; } .primary-button, .secondary-button, .ghost-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 11px; cursor: pointer; font-weight: 700; transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease; } .primary-button { border: 1px solid #125a47; background: var(--green); color: #fff; box-shadow: 0 6px 14px rgba(18, 102, 79, 0.16); } .primary-button:hover { transform: translateY(-1px); background: #0d5a45; box-shadow: 0 8px 18px rgba(18, 102, 79, 0.2); } .secondary-button, .ghost-button { border: 1px solid var(--line); background: var(--card); color: var(--ink); } .ghost-button { min-height: 34px; padding: 0 12px; background: transparent; font-size: 12px; } .content { position: relative; width: min(1500px, 100%); margin: 0 auto; padding: 31px 30px 50px; transform-origin: 50% 16px; transition: opacity var(--motion-medium) ease, transform var(--motion-medium) ease, filter var(--motion-medium) ease; will-change: opacity, transform; } .content.view-leave { opacity: 0.42; transform: translateY(10px) scale(0.997); filter: blur(1px); } .content.view-enter { animation: content-enter var(--motion-slow) cubic-bezier(0.18, 0.78, 0.24, 1) both; } @keyframes content-enter { from { opacity: 0; transform: translateY(15px) scale(0.992); } 60% { opacity: 1; } to { opacity: 1; transform: translateY(0) scale(1); } } .view-loader { position: fixed; z-index: 65; top: 104px; left: calc(244px + (100vw - 244px) / 2); pointer-events: none; opacity: 0; transform: translate(-50%, -12px) scale(0.98); transition: opacity var(--motion-medium) ease, transform var(--motion-medium) ease; } .view-loader.show { opacity: 1; transform: translate(-50%, 0) scale(1); } .loader-card { display: flex; align-items: center; gap: 12px; min-width: 260px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 18px 45px rgba(12, 41, 29, 0.18); backdrop-filter: blur(14px); } .loader-card strong, .loader-card small { display: block; } .loader-card strong { font-size: 12px; } .loader-card small { margin-top: 2px; color: var(--muted); font-size: 12px; } .loader-ring { width: 22px; height: 22px; border: 3px solid var(--green-soft); border-top-color: var(--green-2); border-radius: 50%; animation: loader-spin 0.72s linear infinite; } @keyframes loader-spin { to { transform: rotate(360deg); } } .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; } .page-heading h1 { margin: 0; font-size: clamp(25px, 2.3vw, 32px); font-weight: 750; letter-spacing: -1.2px; } .page-heading p { margin: 7px 0 0; color: var(--muted); font-size: 13px; } .data-stamp { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase; } .data-stamp span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .data-stamp strong, .data-stamp small { display: block; } .data-stamp small { margin-top: 2px; color: inherit; font-size: 11px; font-weight: 750; opacity: 0.72; text-transform: none; } .data-stamp.live { border-color: rgba(31, 138, 107, 0.28); background: var(--green-soft); color: var(--green); } .data-stamp.delayed { border-color: rgba(47, 128, 237, 0.22); background: #eaf2ff; color: #2765b5; } .data-stamp.proxy, .data-stamp.mixed { border-color: rgba(177, 121, 24, 0.24); background: var(--amber-soft); color: var(--amber); } .data-stamp.demo, .data-stamp.missing { border-color: var(--line); background: var(--surface-soft); color: var(--muted); } .quality-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11.5px; font-weight: 850; line-height: 1; vertical-align: middle; } .quality-badge i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; } .quality-badge strong { font-size: 11.5px; letter-spacing: 0.25px; text-transform: uppercase; } .quality-badge small { overflow: hidden; max-width: 190px; color: inherit; font-size: 11px; font-weight: 700; opacity: 0.72; text-overflow: ellipsis; white-space: nowrap; } .quality-badge.live { border-color: rgba(31, 138, 107, 0.28); background: var(--green-soft); color: var(--green); } .quality-badge.delayed { border-color: rgba(47, 128, 237, 0.24); background: #eaf2ff; color: #2765b5; } .quality-badge.proxy, .quality-badge.mixed { border-color: rgba(177, 121, 24, 0.26); background: var(--amber-soft); color: var(--amber); } .quality-badge.demo, .quality-badge.missing { border-color: var(--line); background: var(--surface-soft); color: var(--muted); } :is([data-theme="dark"],[data-theme="cyber"]) .data-stamp.delayed, :is([data-theme="dark"],[data-theme="cyber"]) .quality-badge.delayed { border-color: rgba(106, 166, 245, 0.28); background: #16243a; color: #8ab4ff; } :is([data-theme="dark"],[data-theme="cyber"]) .source-mini.delayed { color: #8ab4ff; } .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; } .stat-card, .panel { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); } .stat-card { position: relative; min-height: 136px; overflow: hidden; padding: 20px; border-radius: var(--radius); } .stat-card::after { position: absolute; right: -25px; bottom: -38px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(39, 135, 105, 0.06), rgba(39, 135, 105, 0)); content: ""; } .stat-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 680; } .stat-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: var(--green-soft); color: var(--green); font-size: 14px; } .stat-value { display: block; margin-top: 13px; font-size: clamp(21px, 2vw, 28px); font-weight: 770; letter-spacing: -1px; } .stat-foot { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: var(--muted); font-size: 12px; } .trend-up, .trend-down { font-weight: 750; } .trend-up { color: var(--green-2); } .trend-down { color: var(--red); } .landing-page { position: relative; display: grid; gap: 18px; overflow: hidden; min-height: 100vh; padding: 18px clamp(16px, 3vw, 46px) 44px; } .public-nav { position: sticky; top: 14px; z-index: 30; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; width: min(1320px, 100%); margin: 0 auto; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 22px; background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: 0 18px 42px rgba(12, 35, 27, 0.1); backdrop-filter: blur(18px); } .public-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; } .public-brand .brand-mark { width: 40px; height: 40px; background: var(--green-soft); } .public-brand .brand-mark svg { stroke: var(--green-2); } .public-brand strong, .public-brand small { display: block; line-height: 1.08; } .public-brand strong { color: var(--green); font-size: 18px; letter-spacing: -0.4px; } .public-brand small { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.2px; text-transform: uppercase; } .public-nav-links { display: flex; justify-content: center; gap: 8px; } .public-nav-links a { padding: 9px 11px; border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 800; text-decoration: none; } .public-nav-links a:hover { background: var(--surface-soft); color: var(--green); } .public-nav-actions { display: flex; align-items: center; gap: 8px; } .landing-ticker { position: relative; contain: layout paint; overflow: hidden; isolation: isolate; width: min(1320px, 100%); margin: -2px 0 4px; justify-self: center; border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); border-radius: 999px; background: linear-gradient(135deg, rgba(18, 102, 79, 0.08), rgba(255, 255, 255, 0.74)); box-shadow: var(--shadow); } .landing-ticker::before, .landing-ticker::after { position: absolute; top: 0; bottom: 0; z-index: 2; width: 80px; pointer-events: none; content: ""; } .landing-ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } .landing-ticker::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); } .landing-ticker-track { display: flex; width: max-content; min-width: max-content; transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform; animation: landing-ticker-run 52s linear infinite; } .landing-ticker:hover .landing-ticker-track { animation-play-state: paused; } .landing-ticker-group { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; padding: 10px; } .landing-ticker-item { display: inline-flex; min-width: max-content; align-items: center; gap: 9px; padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: 0 8px 18px rgba(15, 35, 27, 0.06); } .landing-ticker-item span:not(.ticker-mark):not(.index-logo) { display: grid; gap: 1px; } .landing-ticker-item strong { font-size: 11px; } .landing-ticker-item small { color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; } .landing-ticker-item > b { font-size: 12px; } .landing-ticker-item em { color: var(--green-2); font-size: 11px; font-style: normal; font-weight: 800; } .landing-ticker-item.down em { color: var(--red); } .landing-logo { width: 28px; height: 28px; border-radius: 9px; } .landing-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr); gap: 24px; width: min(1320px, 100%); justify-self: center; overflow: hidden; min-height: 520px; padding: clamp(28px, 4vw, 54px); border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); border-radius: 32px; background: radial-gradient(circle at 18% 12%, rgba(103, 210, 169, 0.23), transparent 30%), radial-gradient(circle at 86% 18%, rgba(31, 138, 107, 0.24), transparent 28%), linear-gradient(135deg, color-mix(in srgb, var(--navy) 96%, #000 4%), #0f2d24 54%, color-mix(in srgb, var(--green) 60%, #06110d 40%)); color: #fff; box-shadow: 0 28px 70px rgba(12, 35, 27, 0.22); } .landing-hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(110deg, rgba(0, 0, 0, 0.9), transparent 75%); content: ""; } .landing-hero::after { position: absolute; inset: auto -15% -44% 35%; height: 58%; border-radius: 50%; background: radial-gradient(circle, rgba(103, 210, 169, 0.42), transparent 62%); filter: blur(18px); opacity: 0.72; content: ""; animation: landing-glow 7s ease-in-out infinite alternate; } .landing-hero-copy, .landing-visual { position: relative; z-index: 1; } .landing-hero-copy { display: flex; flex-direction: column; justify-content: center; } .landing-eyebrow { display: inline-flex; width: fit-content; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgba(164, 255, 219, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: rgba(236, 255, 247, 0.88); font-size: 11px; font-weight: 800; letter-spacing: 0.45px; text-transform: uppercase; backdrop-filter: blur(16px); } .landing-eyebrow i { width: 9px; height: 9px; border-radius: 50%; background: #67d2a9; box-shadow: 0 0 0 0 rgba(103, 210, 169, 0.7); animation: landing-dot-pulse 1.6s ease-out infinite; } .landing-hero h1 { max-width: 760px; margin: 22px 0 14px; font-size: clamp(38px, 5.8vw, 76px); line-height: 0.96; letter-spacing: -3.4px; } .landing-hero p { max-width: 650px; margin: 0; color: rgba(236, 255, 247, 0.76); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7; } .landing-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; } .landing-primary { min-height: 48px; padding-inline: 22px; background: #67d2a9; color: #0d241c; box-shadow: 0 16px 34px rgba(103, 210, 169, 0.28); } .landing-secondary { min-height: 48px; padding-inline: 18px; border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.1); color: #fff; } .landing-link { color: #9af0ca; font-size: 12px; font-weight: 800; text-decoration: none; } .landing-link:hover { text-decoration: underline; } .landing-trust-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; } .landing-trust-row span { padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.055); color: rgba(236, 255, 247, 0.72); font-size: 11px; font-weight: 750; } .landing-visual { min-height: 450px; } .landing-orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: 0.78; animation: landing-float 7s ease-in-out infinite; } .landing-orb.one { top: 28px; right: 48px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(103, 210, 169, 0.72), transparent 64%); } .landing-orb.two { right: 230px; bottom: 26px; width: 90px; height: 90px; background: radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 66%); animation-delay: -2.4s; } .landing-glass-card { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 24px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.075)); box-shadow: 0 24px 55px rgba(0, 0, 0, 0.24); backdrop-filter: blur(22px); } .landing-glass-card.main { position: absolute; inset: 64px 10px auto 28px; padding: 18px; animation: landing-card-rise 5.8s ease-in-out infinite alternate; } .landing-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .landing-card-head span { color: rgba(236, 255, 247, 0.65); font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; } .landing-card-head strong { color: #67d2a9; font-size: 28px; } .landing-wave { height: 210px; overflow: hidden; border-radius: 17px; background: rgba(5, 21, 15, 0.2); } .landing-wave .chart-svg { width: 100%; height: 185px; margin-top: 14px; } .landing-wave .chart-grid-line { stroke: rgba(255, 255, 255, 0.1); } .landing-wave .chart-line-area { fill: rgba(103, 210, 169, 0.16); } .landing-wave .chart-line { stroke: #67d2a9; filter: drop-shadow(0 0 12px rgba(103, 210, 169, 0.45)); } .landing-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; } .landing-mini-grid span { display: grid; gap: 2px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.09); } .landing-mini-grid b { color: #fff; font-size: 22px; } .landing-mini-grid small { color: rgba(236, 255, 247, 0.62); font-size: 12px; font-weight: 800; text-transform: uppercase; } .landing-glass-card.floating { position: absolute; z-index: 2; padding: 14px; } .landing-glass-card.floating.score { right: 0; bottom: 54px; width: min(260px, 54%); animation: landing-float 6.8s ease-in-out infinite; } .landing-glass-card.floating.score > small { display: block; margin-bottom: 9px; color: rgba(236, 255, 247, 0.68); font-size: 12px; font-weight: 850; letter-spacing: 0.35px; text-transform: uppercase; } .landing-glass-card.floating.score > div { display: flex; align-items: center; gap: 9px; padding: 8px 0; cursor: pointer; } .landing-glass-card.floating.score > div + div { border-top: 1px solid rgba(255, 255, 255, 0.12); } .landing-glass-card.floating.score strong { color: #fff; } .landing-glass-card.floating.score small { color: rgba(236, 255, 247, 0.58); } .landing-glass-card.floating.status { top: 18px; right: 70px; width: min(310px, 72%); animation: landing-float 7.4s ease-in-out infinite reverse; } .landing-status-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 0; } .landing-status-card + .landing-status-card { border-top: 1px solid rgba(255, 255, 255, 0.12); } .landing-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(180, 72, 75, 0.16); } .landing-status-dot.open { background: #67d2a9; box-shadow: 0 0 0 5px rgba(103, 210, 169, 0.18); } .landing-status-card strong { display: block; color: #fff; font-size: 12px; } .landing-status-card small { color: rgba(236, 255, 247, 0.62); font-size: 12px; } .landing-status-card em { color: #9af0ca; font-size: 11.5px; font-style: normal; font-weight: 850; text-transform: uppercase; } .landing-test-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; width: min(1320px, 100%); justify-self: center; padding: 22px; border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line)); border-radius: 24px; background: linear-gradient(120deg, color-mix(in srgb, var(--amber-soft) 74%, var(--card)), var(--card)), radial-gradient(circle at 10% 10%, rgba(177, 121, 24, 0.2), transparent 34%); box-shadow: var(--shadow); } .landing-test-banner span { display: inline-flex; margin-bottom: 7px; padding: 5px 8px; border-radius: 999px; background: var(--amber); color: #fff; font-size: 12px; font-weight: 850; letter-spacing: 0.35px; } .landing-test-banner h2 { margin: 0; font-size: 18px; letter-spacing: -0.35px; } .landing-test-banner p { max-width: 860px; margin: 6px 0 0; color: var(--muted); line-height: 1.55; } .landing-section { display: grid; gap: 16px; width: min(1320px, 100%); justify-self: center; } .landing-split { grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); } .landing-audience { padding: 8px 0; } .landing-audience-grid, .landing-data-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .landing-audience-grid article, .landing-data-tile { position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); } .landing-audience-grid article::after, .landing-data-tile::after { position: absolute; inset: auto -45px -58px auto; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--green) 14%, transparent), transparent 68%); content: ""; } .landing-audience-grid span { color: var(--green); font-size: 11px; font-weight: 900; } .landing-audience-grid strong { display: block; margin-top: 10px; font-size: 18px; letter-spacing: -0.45px; } .landing-audience-grid p, .landing-data-tile p { position: relative; z-index: 1; margin: 8px 0 0; color: var(--muted); line-height: 1.55; } .landing-data-section { padding: 8px 0; } .landing-data-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .landing-data-tile > div { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; } .landing-data-tile strong { font-size: 14px; } .landing-product-preview { position: relative; grid-template-columns: minmax(0, 0.88fr) minmax(520px, 1.12fr); align-items: center; overflow: hidden; padding: clamp(22px, 3vw, 38px); border: 1px solid color-mix(in srgb, var(--green) 34%, rgba(255, 255, 255, 0.08)); border-radius: 32px; background: radial-gradient(circle at 12% 12%, rgba(103, 210, 169, 0.24), transparent 30%), radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.13), transparent 26%), linear-gradient(135deg, color-mix(in srgb, var(--navy) 94%, #000 6%), #123328 58%, #0a1d17); color: #fff; box-shadow: 0 28px 70px rgba(12, 35, 27, 0.24); } .landing-product-preview::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.052) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.052) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.85), transparent 82%); content: ""; } .landing-product-preview::after { position: absolute; right: -110px; bottom: -150px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(103, 210, 169, 0.34), transparent 68%); filter: blur(7px); content: ""; animation: landing-glow 7s ease-in-out infinite alternate; } .landing-preview-copy, .landing-terminal-preview { position: relative; z-index: 1; } .landing-preview-copy h2 { max-width: 680px; margin: 9px 0 12px; color: #fff; font-size: clamp(28px, 4vw, 52px); line-height: 1.02; letter-spacing: -2.15px; } .landing-preview-copy > p { max-width: 610px; margin: 0; color: rgba(236, 255, 247, 0.72); line-height: 1.7; } .landing-preview-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .landing-preview-actions .ghost-button { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.08); color: #fff; } .landing-workflow-list { display: grid; gap: 10px; margin-top: 24px; } .landing-workflow-list article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 13px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(16px); } .landing-workflow-list article > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 13px; background: rgba(103, 210, 169, 0.16); color: #9af0ca; font-size: 11px; font-weight: 900; } .landing-workflow-list strong { display: block; color: #fff; font-size: 14px; } .landing-workflow-list p { margin: 4px 0 0; color: rgba(236, 255, 247, 0.62); line-height: 1.5; } .landing-terminal-preview { padding: 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 26px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.065)); box-shadow: 0 28px 65px rgba(0, 0, 0, 0.28); backdrop-filter: blur(22px); transform: rotate(1deg); } .landing-terminal-top { display: flex; align-items: center; gap: 10px; padding: 4px 4px 13px; color: rgba(236, 255, 247, 0.72); } .landing-terminal-top > span { display: flex; gap: 5px; } .landing-terminal-top i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.32); } .landing-terminal-top i:nth-child(1) { background: #ff6f70; } .landing-terminal-top i:nth-child(2) { background: #ffc95d; } .landing-terminal-top i:nth-child(3) { background: #67d2a9; } .landing-terminal-top strong { color: #fff; font-size: 12px; } .landing-terminal-top small { margin-left: auto; font-size: 12px; font-weight: 800; text-transform: uppercase; } .landing-terminal-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(230px, 0.85fr); gap: 12px; } .landing-terminal-card { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 19px; background: rgba(5, 21, 15, 0.26); } .landing-terminal-chart { display: grid; min-height: 332px; padding: 16px; } .landing-terminal-chart > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .landing-terminal-chart small, .landing-terminal-watch > small, .landing-terminal-feed > small { color: rgba(236, 255, 247, 0.62); font-size: 12px; font-weight: 850; letter-spacing: 0.35px; text-transform: uppercase; } .landing-terminal-chart strong { color: #67d2a9; font-size: 28px; } .landing-terminal-chart .chart-svg { width: 100%; height: 235px; align-self: end; } .landing-terminal-chart .chart-grid-line { stroke: rgba(255, 255, 255, 0.1); } .landing-terminal-chart .chart-line-area { fill: rgba(103, 210, 169, 0.18); } .landing-terminal-chart .chart-line { stroke: #67d2a9; } .landing-terminal-status { display: grid; gap: 1px; background: rgba(255, 255, 255, 0.1); } .landing-terminal-status div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 9px; align-items: center; padding: 12px; background: rgba(5, 21, 15, 0.34); } .landing-terminal-status span { grid-row: span 2; width: 9px; height: 9px; border-radius: 50%; background: #d96b6d; box-shadow: 0 0 0 5px rgba(217, 107, 109, 0.12); } .landing-terminal-status span.open { background: #67d2a9; box-shadow: 0 0 0 5px rgba(103, 210, 169, 0.14); } .landing-terminal-status strong { color: #fff; font-size: 12px; } .landing-terminal-status small { color: rgba(236, 255, 247, 0.56); font-size: 12px; } .landing-terminal-watch { display: grid; gap: 1px; background: rgba(255, 255, 255, 0.1); } .landing-terminal-watch > small, .landing-terminal-feed > small { padding: 12px 12px 4px; background: rgba(5, 21, 15, 0.34); } .landing-terminal-watch > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 12px; background: rgba(5, 21, 15, 0.34); cursor: pointer; } .landing-terminal-watch strong, .landing-terminal-watch small { display: block; } .landing-terminal-watch strong { color: #fff; font-size: 12px; } .landing-terminal-watch small { color: rgba(236, 255, 247, 0.52); font-size: 11.5px; } .landing-move { padding: 5px 7px; border-radius: 999px; background: rgba(103, 210, 169, 0.12); color: #9af0ca; font-size: 12px; font-weight: 900; } .landing-move.down { background: rgba(217, 107, 109, 0.12); color: #ffaaaa; } .landing-terminal-feed { grid-column: 1 / -1; display: grid; gap: 1px; background: rgba(255, 255, 255, 0.1); } .landing-terminal-feed div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; padding: 10px 12px; background: rgba(5, 21, 15, 0.34); } .landing-terminal-feed b { color: #9af0ca; font-size: 12px; } .landing-terminal-feed span { overflow: hidden; color: rgba(236, 255, 247, 0.68); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .landing-trust-center, .landing-roadmap { position: relative; overflow: hidden; padding: clamp(18px, 2.6vw, 28px); border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 28px; background: radial-gradient(circle at 8% 6%, color-mix(in srgb, var(--green-2) 18%, transparent), transparent 30%), linear-gradient(135deg, var(--card), color-mix(in srgb, var(--green-soft) 32%, var(--surface-soft))); box-shadow: var(--shadow); } .landing-trust-center::after, .landing-roadmap::after { position: absolute; right: -120px; bottom: -130px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--green) 14%, transparent), transparent 68%); content: ""; pointer-events: none; } .landing-trust-center > *, .landing-roadmap > * { position: relative; z-index: 1; } .landing-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .landing-trust-card { display: grid; gap: 10px; min-height: 185px; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: 0 14px 32px rgba(15, 35, 27, 0.06); transition: transform var(--motion-medium) ease, border-color var(--motion-medium) ease; } .landing-trust-card:hover { border-color: color-mix(in srgb, var(--green) 34%, var(--line)); transform: translateY(-3px); } .landing-trust-card span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 14px; background: var(--green); color: #fff; font-size: 18px; font-weight: 900; } .landing-trust-card strong, .landing-roadmap-card strong, .landing-faq-item strong, .landing-feedback-strip strong { color: var(--ink); } .landing-trust-card p, .landing-faq-item p, .landing-roadmap-card li, .landing-feedback-strip small { margin: 0; color: var(--muted); line-height: 1.55; } .landing-faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .landing-faq-item { padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.62); } .landing-faq-item strong { display: block; margin-bottom: 8px; font-size: 14px; } .landing-faq-item a { color: var(--green); font-weight: 850; text-decoration: none; } .landing-faq-item a:hover { text-decoration: underline; } .landing-roadmap { background: radial-gradient(circle at 90% 0%, rgba(103, 210, 169, 0.22), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--navy) 96%, #000 4%), #123328); color: #fff; } .landing-roadmap .landing-section-head h2 { color: #fff; } .landing-roadmap .landing-section-head p { color: rgba(236, 255, 247, 0.68); } .landing-roadmap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .landing-roadmap-card { padding: 18px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; background: rgba(255, 255, 255, 0.085); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.14); backdrop-filter: blur(18px); } .landing-roadmap-card > span { display: inline-flex; margin-bottom: 13px; padding: 6px 9px; border-radius: 999px; background: rgba(103, 210, 169, 0.13); color: #9af0ca; font-size: 12px; font-weight: 900; letter-spacing: 0.35px; text-transform: uppercase; } .landing-roadmap-card strong { display: block; color: #fff; font-size: 18px; letter-spacing: -0.35px; } .landing-roadmap-card ul { display: grid; gap: 9px; margin: 15px 0 0; padding: 0; list-style: none; } .landing-roadmap-card li { position: relative; padding-left: 18px; color: rgba(236, 255, 247, 0.72); } .landing-roadmap-card li::before { position: absolute; top: 0.65em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #67d2a9; box-shadow: 0 0 0 4px rgba(103, 210, 169, 0.12); content: ""; transform: translateY(-50%); } .landing-feedback-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 20px; background: rgba(255, 255, 255, 0.08); } .landing-feedback-strip strong, .landing-feedback-strip small { display: block; } .landing-feedback-strip strong { color: #fff; } .landing-feedback-strip small { margin-top: 4px; color: rgba(236, 255, 247, 0.66); } .landing-hot-list, .landing-news-stack { display: grid; gap: 8px; padding: 14px; } .landing-hot-row { display: grid; grid-template-columns: 24px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); cursor: pointer; transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, background var(--motion-fast) ease; } .landing-hot-row:hover { border-color: color-mix(in srgb, var(--green) 36%, var(--line)); background: color-mix(in srgb, var(--green-soft) 38%, var(--card)); transform: translateY(-2px); } .landing-hot-row > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 9px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 850; } .landing-hot-row strong, .landing-hot-row b { font-size: 12px; } .landing-hot-row small { color: var(--muted); font-size: 12px; } .landing-news-item { display: grid; gap: 6px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); cursor: pointer; transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; } .landing-news-item:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 35, 27, 0.08); } .landing-news-item .badge { width: fit-content; } .landing-news-item strong { font-size: 13px; line-height: 1.35; } .landing-news-item small { color: var(--muted); font-size: 12px; } .landing-section-head { max-width: 760px; } .landing-section-head h2 { margin: 6px 0 8px; font-size: clamp(24px, 3vw, 38px); letter-spacing: -1.25px; } .landing-section-head p { margin: 0; color: var(--muted); line-height: 1.65; } .landing-apps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } .app-download-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; } .app-os-badge { padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; background: var(--green-soft); color: var(--green); border: 1px solid color-mix(in srgb, var(--green-2) 30%, transparent); } .app-download-card h3 { margin: 2px 0 0; font-size: 18px; letter-spacing: -0.4px; } .app-download-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; } .app-download-card .primary-button, .app-download-card .ghost-button { margin-top: 4px; text-decoration: none; } .app-download-card small { color: var(--muted); font-size: 11px; } @media (max-width: 760px) { .landing-apps-grid { grid-template-columns: 1fr; } .app-download-card .primary-button, .app-download-card .ghost-button { width: 100%; justify-content: center; text-align: center; } } .install-guide-modal { width: min(560px, 100%); } .install-guide-section { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); } .install-guide-section h3 { margin: 0 0 12px; font-size: 17px; } .install-steps { margin: 0; padding: 0; list-style: none; counter-reset: krok; display: grid; gap: 12px; } .install-steps li { position: relative; padding-left: 44px; counter-increment: krok; font-size: 15px; line-height: 1.45; } .install-steps li::before { content: counter(krok); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--green-2); color: #fff; font-weight: 800; font-size: 15px; } .install-steps li small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.5; } .install-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 4px; border-radius: 7px; border: 1px solid var(--line); background: var(--card); color: var(--green-2); vertical-align: middle; } .install-ico svg { width: 16px; height: 16px; } .install-apk-btn { display: flex; justify-content: center; width: 100%; margin-bottom: 14px; min-height: 48px; text-decoration: none; } .ah-anim { animation: ah-in 0.55s cubic-bezier(0.18, 0.8, 0.26, 1) both; animation-delay: calc(var(--d, 0) * 95ms); } @keyframes ah-in { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .ah-greet { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; } .ah-greet strong { font-size: 22px; letter-spacing: -0.5px; } .ah-greet small { color: var(--muted); font-size: 12px; text-transform: capitalize; } .ah-value-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border-radius: 22px; border: 1px solid #28493d; background: linear-gradient(125deg, #102b22, #173a2f); color: #fff; box-shadow: 0 16px 40px rgba(16, 43, 34, 0.22); } .ah-value-card > span { color: #9eb3ab; font-size: 12px; font-weight: 600; } .ah-value-card > strong { font-size: clamp(30px, 8vw, 40px); letter-spacing: -1px; line-height: 1.05; font-variant-numeric: tabular-nums; } .ah-value-card > p { margin: 4px 0 2px; color: #b7cbc2; font-size: 13px; line-height: 1.5; } .ah-value-card .primary-button { align-self: flex-start; margin-top: 4px; } .ah-value-meta { display: flex; gap: 14px; margin-top: 2px; } .ah-value-meta b { font-size: 13px; font-weight: 700; } .ah-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); animation: ah-orb 7s ease-in-out infinite; } .ah-orb.one { right: -50px; top: -60px; width: 170px; height: 170px; background: radial-gradient(circle, rgba(103, 210, 169, 0.22), transparent 70%); } .ah-orb.two { right: 40px; bottom: -80px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(244, 208, 111, 0.14), transparent 70%); animation-delay: 2.2s; } @keyframes ah-orb { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(1.07); } } .ah-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; } .ah-tile { display: grid; justify-items: center; gap: 6px; padding: 16px 6px 13px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease; } .ah-tile:active { transform: scale(0.94); } .ah-tile span { font-size: 26px; line-height: 1; } .ah-tile small { font-size: 12px; font-weight: 650; color: var(--ink); } .ah-panel { margin-top: 14px; } .ah-movers { display: grid; gap: 4px; } .ah-mover { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 12px; cursor: pointer; transition: background 140ms ease, transform 140ms ease; } .ah-mover:active { transform: scale(0.985); background: var(--surface-soft); } .ah-mover-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ah-mover-copy strong { font-size: 14px; } .ah-mover-copy small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ah-mover > b { font-size: 14px; font-variant-numeric: tabular-nums; } .ah-news { display: grid; gap: 12px; } .ah-news-item { display: grid; gap: 3px; } .ah-news-item a, .ah-news-item span { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; } .ah-news-item small { color: var(--muted); font-size: 11px; } .app-tabbar { position: fixed; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 320; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 22px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 34px rgba(10, 28, 21, 0.22); } .app-tabbar button { display: grid; justify-items: center; gap: 3px; padding: 8px 2px 7px; border: 0; border-radius: 16px; background: transparent; color: var(--muted); cursor: pointer; transition: background 160ms ease, color 160ms ease, transform 120ms ease; } .app-tabbar button:active { transform: scale(0.92); } .app-tabbar button i { display: grid; } .app-tabbar button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .app-tabbar button small { font-size: 12px; font-weight: 700; } .app-tabbar button.active { color: var(--green-2); background: var(--green-soft); animation: ah-tab-pop 260ms cubic-bezier(0.2, 0.9, 0.3, 1.4); } @keyframes ah-tab-pop { 0% { transform: scale(0.9); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } } .ah-update { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--green-2) 38%, var(--line)); background: var(--green-soft); } .ah-update > div:first-child { flex: 1 1 180px; display: grid; gap: 2px; } .ah-update strong { font-size: 14px; } .ah-update small { color: var(--muted); font-size: 12px; line-height: 1.45; } .ah-update-actions { display: flex; align-items: center; gap: 10px; } .ah-update-actions .primary-button { text-decoration: none; min-height: 40px; padding: 9px 18px; } .ah-ptr { position: fixed; top: -54px; left: 50%; z-index: 340; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--card); box-shadow: 0 8px 24px rgba(10, 28, 21, 0.22); transform: translate(-50%, 0); opacity: 0; transition: opacity 120ms ease; pointer-events: none; } .ah-ptr.show { opacity: 1; transform: translate(-50%, var(--pull, 0px)); } .ah-ptr svg { width: 24px; height: 24px; transform: rotate(-90deg); } .ah-ptr-tor { fill: none; stroke: color-mix(in srgb, var(--line) 90%, transparent); stroke-width: 3; } .ah-ptr-luk { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 87.96; stroke-dashoffset: calc(87.96 - 87.96 * var(--postep, 0)); transition: stroke-dashoffset 90ms linear, stroke 160ms ease; } .ah-ptr.ready .ah-ptr-luk { stroke: var(--green-2); } .ah-ptr.spin svg { animation: ah-ptr-spin .8s linear infinite; } .ah-ptr.spin .ah-ptr-luk { stroke: var(--green-2); stroke-dasharray: 22 66; stroke-dashoffset: 0; transition: none; } @keyframes ah-ptr-spin { to { transform: rotate(270deg); } } @media (prefers-reduced-motion: reduce) { .ah-ptr.spin svg { animation-duration: 2s; } } .app-section-nav { position: sticky; top: 62px; z-index: 90; display: flex; gap: 8px; margin: -6px -4px 12px; padding: 8px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: linear-gradient(var(--bg) 78%, transparent); } .app-section-nav::-webkit-scrollbar { display: none; } .app-section-nav button { flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 12px; font-weight: 650; cursor: pointer; box-shadow: var(--shadow); transition: background 150ms ease, color 150ms ease, transform 120ms ease; } .app-section-nav button:active { transform: scale(0.93); } .app-section-nav button.active { background: var(--green-2); border-color: var(--green-2); color: #fff; } body.app-mode .content.view-fresh > * { animation: ah-in 0.45s cubic-bezier(0.18, 0.8, 0.26, 1) both; } body.app-mode .content.view-fresh > *:nth-child(1) { animation-delay: 0ms; } body.app-mode .content.view-fresh > *:nth-child(2) { animation-delay: 60ms; } body.app-mode .content.view-fresh > *:nth-child(3) { animation-delay: 120ms; } body.app-mode .content.view-fresh > *:nth-child(4) { animation-delay: 180ms; } body.app-mode .content.view-fresh > *:nth-child(5) { animation-delay: 240ms; } body.app-mode .content.view-fresh > *:nth-child(6) { animation-delay: 300ms; } body.app-mode .content.view-fresh > *:nth-child(n+7) { animation-delay: 360ms; } body.app-mode button, body.app-mode a, body.app-mode [role="button"] { -webkit-tap-highlight-color: transparent; } body.app-mode .panel:active { transform: none; } body.app-mode .primary-button:active, body.app-mode .secondary-button:active, body.app-mode .ghost-button:active, body.app-mode .text-button:active, body.app-mode .stat-card:active, body.app-mode tr[data-company]:active, body.app-mode .signal-row:active, body.app-mode .news-card:active { transform: scale(0.97); transition: transform 110ms ease; } body.app-mode .content { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } body.app-mode .guided-tour-card { bottom: calc(84px + env(safe-area-inset-bottom)); } body.app-mode .toast { bottom: calc(84px + env(safe-area-inset-bottom)); } .landing-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .landing-feature-card { position: relative; overflow: hidden; min-height: 210px; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); transition: transform var(--motion-medium) ease, border-color var(--motion-medium) ease; } .landing-feature-card::after { position: absolute; inset: auto -35px -50px auto; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--green) 18%, transparent), transparent 68%); content: ""; } .landing-feature-card:hover { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); transform: translateY(-4px); } .landing-feature-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: var(--green-soft); font-size: 21px; } .landing-feature-card h3 { margin: 15px 0 8px; font-size: 16px; } .landing-feature-card p { min-height: 62px; margin: 0 0 14px; color: var(--muted); line-height: 1.55; } .landing-flow { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(135deg, var(--card), var(--surface-soft)); box-shadow: var(--shadow); } .landing-flow::before { position: absolute; top: 50%; right: 12%; left: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--green-2), transparent); content: ""; transform: translateY(-50%); animation: landing-scan 2.8s ease-in-out infinite; } .landing-flow-step { position: relative; z-index: 1; display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--card) 88%, transparent); } .landing-flow-step span { color: var(--green); font-size: 11px; font-weight: 900; } .landing-flow-step strong { font-size: 16px; } .landing-flow-step small { color: var(--muted); line-height: 1.4; } .landing-disclaimer { width: min(1320px, 100%); justify-self: center; margin: 2px 0 0; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); font-size: 11px; line-height: 1.55; } .landing-footer { display: flex; width: min(1320px, 100%); align-items: center; justify-self: center; justify-content: space-between; gap: 18px; padding: 22px 0 4px; border-top: 1px solid var(--line); } .landing-footer strong, .landing-footer small { display: block; } .landing-footer small { margin-top: 3px; color: var(--muted); font-size: 11px; } .landing-footer > div:last-child { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; } .landing-footer a { color: var(--muted); font-size: 12px; font-weight: 800; text-decoration: none; } .landing-footer a:hover { color: var(--green); } .onboarding-panel { position: relative; display: grid; gap: 16px; overflow: hidden; margin: -8px 0 18px; padding: 22px; border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line)); border-radius: 26px; background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--green-2) 22%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--green-soft) 44%, var(--card))); box-shadow: 0 22px 55px rgba(12, 35, 27, 0.11); } .onboarding-glow { position: absolute; right: -70px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--green) 22%, transparent), transparent 68%); pointer-events: none; animation: landing-glow 8s ease-in-out infinite alternate; } .onboarding-head, .onboarding-actions { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .onboarding-head h2 { margin: 6px 0; font-size: clamp(23px, 3vw, 38px); letter-spacing: -1.2px; } .onboarding-head p { max-width: 820px; margin: 0; color: var(--muted); line-height: 1.6; } .onboarding-progress { display: grid; width: 108px; height: 108px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: radial-gradient(circle at center, var(--card) 0 58%, transparent 60%), conic-gradient(var(--green-2) var(--value), var(--line) 0); box-shadow: inset 0 0 0 1px var(--line), 0 14px 28px rgba(15, 35, 27, 0.08); } .onboarding-progress strong, .onboarding-progress small { grid-area: 1 / 1; } .onboarding-progress strong { margin-top: -10px; font-size: 26px; } .onboarding-progress small { margin-top: 34px; color: var(--muted); font-size: 12px; font-weight: 800; } .onboarding-market-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; } .onboarding-market-row button { min-height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 850; } .onboarding-market-row button.active, .onboarding-market-row button:hover { border-color: color-mix(in srgb, var(--green) 34%, var(--line)); background: var(--green); color: #fff; } .onboarding-step-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .onboarding-step-grid article { display: flex; align-items: flex-start; gap: 10px; min-height: 98px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--card) 88%, transparent); } .onboarding-step-grid article > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 900; } .onboarding-step-grid article.done > span { background: var(--green); color: #fff; } .onboarding-step-grid strong, .onboarding-step-grid small { display: block; } .onboarding-step-grid strong { font-size: 13px; } .onboarding-step-grid small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; } .onboarding-actions { justify-content: flex-start; flex-wrap: wrap; } .personal-command-panel, .private-empty-portfolio { position: relative; overflow: hidden; margin: 0 0 18px; padding: 20px; border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line)); border-radius: 24px; background: radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--green-2) 18%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--green-soft) 34%, var(--card))); box-shadow: 0 18px 44px rgba(12, 35, 27, 0.08); } .personal-command-head, .private-empty-portfolio { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .personal-command-head h2, .private-empty-copy h2 { margin: 6px 0; font-size: clamp(22px, 3vw, 34px); letter-spacing: -1px; } .personal-command-head p, .private-empty-copy p { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.55; } .personal-command-head p strong { display: inline-flex; align-items: center; gap: 5px; margin: 3px 4px 0 0; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 12px; } .personal-command-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 15px; } .personal-command-card { display: grid; gap: 10px; min-height: 142px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.72); } .personal-command-card > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 13px; background: var(--green-soft); color: var(--green); font-size: 16px; font-weight: 900; } .personal-command-card strong, .personal-command-card small { display: block; } .personal-command-card strong { color: var(--ink); font-size: 13px; } .personal-command-card small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; } .personal-command-card .text-button { align-self: end; justify-self: start; } .dashboard-watch-panel { margin: 0 0 18px; padding: 18px; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 24px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--green-2) 14%, transparent), transparent 34%), color-mix(in srgb, var(--card) 94%, var(--green-soft)); box-shadow: 0 16px 38px rgba(12, 35, 27, 0.07); } .dashboard-watch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .dashboard-watch-head h2 { margin: 5px 0; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.7px; } .dashboard-watch-head p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.5; } .dashboard-watch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .dashboard-watch-card { display: grid; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.76); } .dashboard-watch-main, .dashboard-watch-price, .dashboard-watch-meta, .dashboard-watch-actions { display: flex; align-items: center; gap: 10px; } .dashboard-watch-main { min-width: 0; } .dashboard-watch-main > div { min-width: 0; } .dashboard-watch-main strong, .dashboard-watch-main small { display: block; } .dashboard-watch-main strong { color: var(--ink); font-size: 13px; } .dashboard-watch-main small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .dashboard-watch-price { justify-content: space-between; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--green-soft) 46%, var(--card)); } .dashboard-watch-price strong { color: var(--ink); font-size: 18px; } .dashboard-watch-price span { font-size: 12px; font-weight: 900; } .dashboard-watch-meta { flex-wrap: wrap; gap: 7px; } .dashboard-watch-meta > span:not(.quality-badge) { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 12px; font-weight: 800; } .dashboard-watch-meta b { color: var(--green); } .dashboard-watch-actions { flex-wrap: wrap; justify-content: space-between; gap: 8px; } .private-empty-portfolio { align-items: stretch; } .private-empty-copy { flex: 1 1 58%; } .private-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .private-empty-ideas { display: grid; min-width: min(320px, 100%); gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.74); } .private-empty-ideas > strong { color: var(--ink); font-size: 12px; } .private-empty-ideas button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: inherit; cursor: pointer; text-align: left; } .private-empty-ideas button:hover { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); box-shadow: 0 10px 24px rgba(12, 35, 27, 0.08); } .private-empty-ideas span { min-width: 0; } .private-empty-ideas b, .private-empty-ideas small { display: block; } .private-empty-ideas b { color: var(--ink); font-size: 12px; } .private-empty-ideas small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .portfolio-empty-mini { display: grid; min-height: 208px; place-items: center; padding: 24px; border: 1px dashed color-mix(in srgb, var(--green) 25%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--green-soft) 34%, var(--card)); text-align: center; } .portfolio-empty-mini strong, .portfolio-empty-mini small { display: block; } .portfolio-empty-mini strong { color: var(--ink); font-size: 15px; } .portfolio-empty-mini small { margin-top: 6px; color: var(--muted); font-size: 11px; } .realized-panel { margin: 0 0 18px; border-color: color-mix(in srgb, var(--green) 18%, var(--line)); background: radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--amber) 13%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--green-soft) 28%, var(--card))); } .realized-panel.empty .portfolio-empty-mini { min-height: 120px; } .realized-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .realized-grid div { padding: 12px; border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--card) 86%, transparent); } .realized-grid span, .realized-grid small { display: block; } .realized-grid span { color: var(--muted); font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .realized-grid strong { display: block; margin-top: 4px; color: var(--ink); font-size: 16px; font-weight: 950; } .realized-grid small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; } .realized-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; } .portfolio-risk-panel { margin: 0 0 18px; border-color: color-mix(in srgb, var(--green) 18%, var(--line)); } .portfolio-risk-panel.empty .portfolio-empty-mini { min-height: 120px; } .portfolio-risk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .portfolio-risk-card { position: relative; overflow: hidden; min-height: 132px; padding: 13px; border: 1px solid color-mix(in srgb, var(--green) 14%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--card) 88%, transparent); } .portfolio-risk-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--green); content: ""; } .portfolio-risk-card.warn::before { background: #d6922f; } .portfolio-risk-card.danger::before { background: var(--red); } .portfolio-risk-card.info::before { background: #4383c2; } .portfolio-risk-card span, .portfolio-risk-card strong, .portfolio-risk-card small { display: block; } .portfolio-risk-card span { color: var(--muted); font-size: 11.5px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; } .portfolio-risk-card strong { margin-top: 8px; color: var(--ink); font-size: 22px; font-weight: 950; } .portfolio-risk-card small { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.42; } .position-panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; } .position-panel-actions .filter-select { min-width: 190px; } .table-row-clickable.active-row { background: color-mix(in srgb, var(--green-soft) 52%, var(--card)); box-shadow: inset 3px 0 0 var(--green); } .position-detail-card { margin-top: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--green) 16%, var(--line)); border-radius: 18px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--amber) 10%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--green-soft) 34%, var(--card)), var(--card)); } .position-detail-head { display: flex; align-items: center; gap: 12px; } .position-detail-head > div { flex: 1; min-width: 0; } .position-detail-head strong, .position-detail-head small { display: block; } .position-detail-head small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; } .position-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 12px; } .position-detail-grid div { padding: 10px; border: 1px solid color-mix(in srgb, var(--green) 10%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--card) 86%, transparent); } .position-detail-grid span, .position-detail-grid strong, .position-detail-grid small { display: block; } .position-detail-grid span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .position-detail-grid strong { margin-top: 4px; color: var(--ink); font-size: 14px; font-weight: 950; } .position-detail-grid small { margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.35; } .position-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 12px; font-weight: 800; } .public-share-panel, .community-hero, .public-profile-hero { display: grid; gap: 18px; margin: 0 0 18px; padding: 20px; border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line)); border-radius: 24px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--amber) 16%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--green-soft) 32%, var(--card))); box-shadow: 0 18px 44px rgba(12, 35, 27, 0.08); } .public-share-panel { grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1fr); } .my-profile-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.44fr); gap: 18px; margin: 0 0 18px; padding: 22px; border: 1px solid color-mix(in srgb, var(--green) 22%, var(--line)); border-radius: 26px; background: radial-gradient(circle at 95% 8%, color-mix(in srgb, var(--amber) 18%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--green-soft) 40%, var(--card)), var(--card)); box-shadow: 0 20px 48px rgba(12, 35, 27, 0.09); } .my-profile-identity { display: flex; align-items: center; gap: 18px; min-width: 0; } .my-profile-identity h2 { margin: 5px 0 6px; font-size: clamp(26px, 3.2vw, 42px); letter-spacing: -1.2px; } .my-profile-identity p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.58; } .my-profile-side { display: grid; align-content: center; gap: 12px; min-width: 0; padding: 16px; border: 1px solid color-mix(in srgb, var(--green) 14%, var(--line)); border-radius: 22px; background: rgba(255, 255, 255, 0.72); } .my-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; } .my-profile-card { padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 12px 28px rgba(12, 35, 27, 0.06); } .my-profile-card h3 { margin: 7px 0 8px; color: var(--ink); font-size: 18px; letter-spacing: -0.3px; } .my-profile-card p { margin: 0; color: var(--muted); line-height: 1.55; } .my-profile-side button:disabled, .public-share-actions button:disabled { opacity: .55; cursor: not-allowed; } .public-share-panel.locked { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .public-share-copy h2, .community-hero h2, .public-profile-hero h2 { margin: 6px 0; font-size: clamp(22px, 3vw, 34px); letter-spacing: -1px; } .public-share-copy p, .community-hero p, .public-profile-hero p { margin: 0; color: var(--muted); line-height: 1.55; } .public-share-stats, .community-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .community-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .public-share-stats span, .community-stats span { padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.76); } .public-share-stats strong, .public-share-stats small, .community-stats b, .community-stats small { display: block; } .public-share-stats strong, .community-stats b { color: var(--ink); font-size: 14px; } .public-share-stats small, .community-stats small { margin-top: 3px; color: var(--muted); font-size: 11.5px; text-transform: uppercase; } .public-share-preview, .community-tags, .public-profile-tags, .public-profile-actions, .community-social-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .public-share-preview span, .community-tags span, .public-profile-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 12px; font-weight: 850; } .public-share-preview b, .community-tags b { color: var(--green); } .community-social-mini { margin-top: 0; } .community-social-mini span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--green-soft) 72%, var(--card)); color: var(--green); font-size: 12px; font-weight: 900; } .community-social-mini span.warning { background: color-mix(in srgb, var(--amber-soft) 78%, var(--card)); color: #9a6b08; } .community-rank-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--green) 14%, var(--line)); border-radius: 20px; background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 32%), color-mix(in srgb, var(--card) 86%, var(--green-soft)); box-shadow: 0 14px 34px rgba(12, 35, 27, 0.06); } .community-rank-toolbar strong, .community-rank-toolbar small { display: block; } .community-rank-toolbar strong { color: var(--ink); font-size: 13px; font-weight: 950; } .community-rank-toolbar small { margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 750; } .community-rank-toolbar > div:last-child { display: inline-flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; } .community-rank-toolbar button { padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--green) 14%, var(--line)); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 950; } .community-rank-toolbar button.active, .community-rank-toolbar button:hover { border-color: var(--green); background: var(--green); color: #fff; } .admin-security-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .admin-security-grid article { padding: 13px; border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--card) 88%, var(--green-soft)); } .admin-security-grid article.positive { border-color: color-mix(in srgb, var(--green) 24%, var(--line)); } .admin-security-grid article.warning { border-color: color-mix(in srgb, var(--amber) 34%, var(--line)); background: color-mix(in srgb, var(--amber-soft) 48%, var(--card)); } .admin-security-grid article.neutral { background: color-mix(in srgb, var(--surface-soft) 72%, var(--card)); } .admin-security-grid strong, .admin-security-grid p { display: block; } .admin-security-grid strong { color: var(--ink); font-size: 12px; font-weight: 950; } .admin-security-grid p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; } @media (max-width: 980px) { .admin-security-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .admin-security-grid { display: grid; grid-template-columns: 1fr; } .community-rank-toolbar { align-items: stretch; flex-direction: column; } .community-rank-toolbar > div:last-child { justify-content: flex-start; } } .public-social-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 120px)); gap: 8px; margin-top: 14px; } .public-social-strip span { padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.74); } .public-social-strip strong, .public-social-strip small { display: block; } .public-social-strip strong { color: var(--ink); font-size: 18px; } .public-social-strip small { margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 850; text-transform: uppercase; } .public-profile-actions { margin-top: 12px; } .public-profile-actions button:disabled { opacity: .55; cursor: not-allowed; } .public-share-form { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, 0.78); } .public-toggle { justify-content: flex-start; font-weight: 900; } .public-avatar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; } .public-avatar-option { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--muted); font-size: 12px; font-weight: 850; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .public-avatar-option:hover, .public-avatar-option.selected { border-color: color-mix(in srgb, var(--green) 44%, var(--line)); box-shadow: 0 10px 22px rgba(12, 35, 27, 0.08); transform: translateY(-1px); } .public-avatar-option input { position: absolute; opacity: 0; pointer-events: none; } .public-avatar-option span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .public-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 15px; background: radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.74), transparent 38%), linear-gradient(135deg, var(--green-soft), color-mix(in srgb, var(--card) 72%, var(--green-soft))); color: var(--green); font-size: 18px; font-weight: 950; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px rgba(12, 35, 27, 0.08); } .public-avatar.down { border-color: color-mix(in srgb, var(--red) 18%, var(--line)); background: radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.74), transparent 38%), linear-gradient(135deg, color-mix(in srgb, var(--red) 13%, var(--card)), var(--card)); color: var(--red); } .public-avatar.cash { border-color: color-mix(in srgb, var(--amber) 34%, var(--line)); background: radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.74), transparent 38%), linear-gradient(135deg, var(--amber-soft), var(--card)); color: #9a6b08; } .public-avatar.crypto { border-color: color-mix(in srgb, #f7931a 36%, var(--line)); background: radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.78), transparent 38%), linear-gradient(135deg, rgba(247, 147, 26, 0.20), color-mix(in srgb, var(--card) 82%, #627eea 18%)); color: #9a5a02; } .public-avatar.neutral { color: var(--ink); } .public-avatar.small { width: 32px; height: 32px; border-radius: 12px; font-size: 14px; } .public-avatar.large { width: 84px; height: 84px; border-radius: 26px; font-size: 34px; } .public-avatar.card { width: 46px; height: 46px; } .public-avatar.brand-profile { width: 42px; height: 42px; border-radius: 15px; font-size: 18px; } .public-privacy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .public-privacy-grid label { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 64px; padding: 11px; border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 18px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-accent) 8%, transparent), transparent 34%), rgba(255, 255, 255, 0.74); color: var(--ink); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background var(--motion-fast) ease; } .public-privacy-grid label:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(12, 35, 27, 0.10); } .public-privacy-grid label.active { border-color: color-mix(in srgb, var(--amber) 38%, var(--line)); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--amber) 13%, transparent), transparent 34%), color-mix(in srgb, var(--amber-soft) 54%, rgba(255, 255, 255, 0.80)); } .public-privacy-grid label.active.danger { border-color: color-mix(in srgb, var(--red) 34%, var(--line)); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--red) 10%, transparent), transparent 34%), color-mix(in srgb, rgba(190, 60, 60, 0.10) 64%, rgba(255, 255, 255, 0.82)); } .public-privacy-grid input { width: 18px; height: 18px; accent-color: var(--green); } .public-privacy-grid b, .public-privacy-grid small { display: block; } .public-privacy-grid b { color: var(--ink); font-size: 11px; font-weight: 950; } .public-privacy-grid small { margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 900; text-transform: uppercase; } .public-share-actions, .community-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; } .community-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .community-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .community-card, .community-empty, .loading-card { padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 12px 28px rgba(12, 35, 27, 0.06); } .community-card { display: grid; gap: 12px; } .community-card-head { display: flex; align-items: center; } .community-card-head { gap: 10px; } .community-card strong, .community-card small { display: block; } .community-card strong { color: var(--ink); } .community-card small, .community-card p { color: var(--muted); } .community-card p { min-height: 48px; margin: 0; font-size: 12px; line-height: 1.5; } .community-tags.big span { padding: 9px 12px; font-size: 12px; } .community-empty, .loading-card { grid-column: 1 / -1; text-align: center; } .community-empty strong { display: block; color: var(--ink); font-size: 18px; } .community-empty p, .loading-card { color: var(--muted); } .public-profile-hero { grid-template-columns: auto minmax(0, 1fr) auto; } .public-about-panel { margin-bottom: 18px; } .public-bio { display: grid; gap: 10px; max-width: 980px; color: var(--ink); font-size: 14px; line-height: 1.72; } .public-bio p { margin: 0; } .public-comments-panel { margin-bottom: 18px; } .public-comment-form { display: grid; gap: 10px; margin-bottom: 14px; } .public-comment-form textarea { min-height: 92px; resize: vertical; } .public-comment-form > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .public-comment-list { display: grid; gap: 10px; } .public-comment-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--card) 82%, var(--green-soft)); } .public-comment-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .public-comment-head strong, .public-comment-head .text-button { color: var(--ink); font-size: 12px; font-weight: 950; } .public-comment-head small { color: var(--muted); font-size: 12px; } .public-comment-card p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; } .my-profile-hero, .public-profile-hero, .public-share-panel, .community-hero { position: relative; overflow: hidden; isolation: isolate; } .my-profile-hero::before, .public-profile-hero::before, .public-share-panel::before, .community-hero::before { position: absolute; inset: -1px; z-index: -2; background: radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--brand-accent) 30%, transparent), transparent 31%), radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--amber) 18%, transparent), transparent 30%), radial-gradient(circle at 88% 100%, color-mix(in srgb, var(--green) 18%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--green-soft) 54%, var(--card))); content: ""; } .my-profile-hero::after, .public-profile-hero::after, .public-share-panel::after, .community-hero::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(255, 255, 255, 0.58), transparent 26%, transparent 76%, rgba(255, 255, 255, 0.24)), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 13px); content: ""; opacity: .78; pointer-events: none; } .my-profile-cover { position: absolute; inset: auto 18px 18px auto; z-index: -1; width: min(360px, 42vw); height: 180px; border-radius: 999px; background: radial-gradient(circle at 38% 38%, rgba(255, 255, 255, 0.42), transparent 30%), conic-gradient(from 120deg, color-mix(in srgb, var(--green) 24%, transparent), color-mix(in srgb, var(--brand-accent) 36%, transparent), color-mix(in srgb, var(--amber) 20%, transparent), color-mix(in srgb, var(--green) 24%, transparent)); filter: blur(4px); opacity: .64; transform: rotate(-8deg); animation: profileAura 11s linear infinite; } .my-profile-identity, .my-profile-side, .public-profile-hero > *, .public-share-copy, .public-share-form, .community-hero > * { position: relative; z-index: 1; } .my-profile-identity .public-avatar.large, .public-profile-hero > .public-avatar.large { width: 106px; height: 106px; border-radius: 34px; border-color: rgba(255, 255, 255, 0.72); font-size: 42px; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.34), 0 28px 70px rgba(18, 102, 79, 0.22); transform: rotate(-2deg); } .my-profile-identity h2, .public-profile-hero h2, .community-hero h2 { font-weight: 960; line-height: .98; text-wrap: balance; } .profile-privacy-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; } .profile-privacy-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; cursor: default; border: 1px solid color-mix(in srgb, var(--green) 14%, var(--line)); border-radius: 999px; background: rgba(255, 255, 255, 0.62); color: var(--ink); font: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background var(--motion-fast) ease; } button.profile-privacy-pill { cursor: pointer; } button.profile-privacy-pill:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(12, 35, 27, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72); } .profile-privacy-pill b, .profile-privacy-pill small { display: block; } .profile-privacy-pill b { font-size: 11.5px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; } .profile-privacy-pill small { color: var(--muted); font-size: 11.5px; font-weight: 850; } .profile-privacy-pill.safe { border-color: color-mix(in srgb, var(--green) 22%, var(--line)); background: color-mix(in srgb, var(--green-soft) 70%, rgba(255, 255, 255, 0.72)); } .profile-privacy-pill.warn { border-color: color-mix(in srgb, var(--amber) 28%, var(--line)); background: color-mix(in srgb, var(--amber-soft) 60%, rgba(255, 255, 255, 0.72)); } .profile-privacy-pill.danger { border-color: color-mix(in srgb, var(--red) 28%, var(--line)); background: color-mix(in srgb, rgba(190, 60, 60, 0.11) 70%, rgba(255, 255, 255, 0.74)); } .profile-completion-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 20px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 34%), rgba(255, 255, 255, 0.78); box-shadow: 0 16px 36px rgba(18, 102, 79, 0.08); } .profile-completion-ring { display: grid; width: 66px; height: 66px; place-items: center; border-radius: 50%; background: radial-gradient(circle, var(--card) 0 56%, transparent 58%), conic-gradient(var(--green-2) calc(var(--profile-completion) * 1%), color-mix(in srgb, var(--line) 80%, transparent) 0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 28px rgba(18, 102, 79, 0.1); } .profile-completion-ring strong { color: var(--green); font-size: 16px; font-weight: 950; letter-spacing: -0.5px; } .profile-completion-card b, .profile-completion-card small { display: block; } .profile-completion-card b { margin-top: 3px; color: var(--ink); font-size: 13px; font-weight: 950; } .profile-completion-card small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; } .public-social-strip span, .public-share-stats span, .community-stats span { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--green) 12%, var(--line)); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-accent) 11%, transparent), transparent 34%), rgba(255, 255, 255, 0.78); transition: transform var(--motion-medium) ease, border-color var(--motion-medium) ease, box-shadow var(--motion-medium) ease; } .public-social-strip span:hover, .public-share-stats span:hover, .community-stats span:hover { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); box-shadow: 0 16px 34px rgba(18, 102, 79, 0.1); transform: translateY(-2px); } .my-profile-card, .community-card, .public-comment-card, .public-share-form { border-color: color-mix(in srgb, var(--green) 12%, var(--line)); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 32%), linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--surface-soft) 72%, transparent)); transition: transform var(--motion-medium) ease, border-color var(--motion-medium) ease, box-shadow var(--motion-medium) ease; } .my-profile-card:hover, .community-card:hover, .public-comment-card:hover, .public-share-form:hover { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); box-shadow: 0 24px 58px rgba(18, 102, 79, 0.12); transform: translateY(-3px); } .community-card { overflow: hidden; animation: profileCardRise var(--motion-slow) cubic-bezier(0.18, 0.78, 0.24, 1) both; } .community-card::before { height: 6px; margin: -18px -18px 4px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg, var(--green), var(--brand-accent), var(--amber)); content: ""; } .community-card .secondary-button { justify-content: center; margin-top: 4px; } .public-about-panel, .public-comments-panel { overflow: hidden; border-color: color-mix(in srgb, var(--green) 11%, var(--line)); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-accent) 8%, transparent), transparent 34%), var(--card); } .public-bio { padding: 18px; border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--green-soft) 48%, var(--card)), color-mix(in srgb, var(--card) 94%, transparent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74); } .public-avatar { position: relative; overflow: hidden; } .public-avatar::after { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 42%); content: ""; pointer-events: none; } .public-share-panel { grid-template-columns: minmax(300px, 0.72fr) minmax(460px, 1fr); align-items: start; } .public-share-copy { display: grid; align-content: start; min-height: 0; } .public-share-form { gap: 15px; padding: 18px; border-radius: 28px; } .profile-editor-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 0.78fr); gap: 14px; align-items: stretch; } .avatar-picker { position: relative; min-width: 0; } .avatar-picker summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; min-height: 112px; padding: 14px; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 24px; background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 34%), rgba(255, 255, 255, 0.78); cursor: pointer; list-style: none; box-shadow: 0 14px 34px rgba(18, 102, 79, 0.07); transition: transform var(--motion-medium) ease, border-color var(--motion-medium) ease, box-shadow var(--motion-medium) ease; } .avatar-picker summary::-webkit-details-marker { display: none; } .avatar-picker summary:hover { border-color: color-mix(in srgb, var(--green) 30%, var(--line)); box-shadow: 0 22px 50px rgba(18, 102, 79, 0.12); transform: translateY(-2px); } .avatar-picker summary strong, .avatar-picker summary small { display: block; } .avatar-picker summary strong { color: var(--ink); font-size: 16px; font-weight: 950; } .avatar-picker summary small { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.4; } .avatar-picker .public-avatar-grid { position: absolute; z-index: 15; right: 0; left: 0; display: grid; max-height: min(420px, 58vh); overflow-y: auto; margin-top: 9px; padding: 10px; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 22px; background: color-mix(in srgb, var(--card) 96%, transparent); box-shadow: 0 28px 74px rgba(12, 35, 27, 0.18); backdrop-filter: blur(14px); transform-origin: top; animation: profilePickerIn var(--motion-medium) cubic-bezier(0.18, 0.78, 0.24, 1) both; } .profile-editor-status { display: grid; gap: 10px; min-width: 0; } .profile-completion-card.compact { min-height: 72px; padding: 10px; } .profile-completion-card.compact .profile-completion-ring { width: 52px; height: 52px; } .profile-completion-card.compact .profile-completion-ring strong { font-size: 13px; } .profile-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .profile-field { display: grid; gap: 7px; } .profile-field.full { grid-column: 1 / -1; } .profile-field > span { color: color-mix(in srgb, var(--ink) 58%, var(--muted)); font-size: 12px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; } .profile-field input, .profile-field textarea, .forum-compose-card textarea { width: 100%; border: 1px solid color-mix(in srgb, var(--green) 13%, var(--line)); border-radius: 17px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--brand-accent) 7%, transparent), transparent 34%), color-mix(in srgb, var(--card) 96%, transparent); color: var(--ink); outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74); transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease; } .profile-field input { min-height: 46px; padding: 0 14px; } .profile-field textarea, .forum-compose-card textarea { min-height: 124px; padding: 13px 14px; resize: vertical; line-height: 1.5; } .profile-field input:focus, .profile-field textarea:focus, .forum-compose-card textarea:focus { border-color: color-mix(in srgb, var(--green) 44%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-soft) 76%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.78); transform: translateY(-1px); } .public-privacy-grid label { border-color: color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 18px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-accent) 9%, transparent), transparent 34%), rgba(255, 255, 255, 0.74); } .community-switcher { display: inline-flex; gap: 6px; margin: 0 0 14px; padding: 5px; border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--card) 82%, var(--green-soft)); box-shadow: var(--shadow); } .community-switcher button { padding: 9px 13px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 950; } .community-switcher button.active { background: var(--green); color: #fff; box-shadow: 0 12px 28px rgba(18, 102, 79, 0.2); } .forum-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr); gap: 18px; overflow: hidden; margin: 0 0 18px; padding: 24px; border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line)); border-radius: 28px; background: radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--brand-accent) 24%, transparent), transparent 30%), radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--amber) 18%, transparent), transparent 28%), linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--green-soft) 56%, var(--card))); box-shadow: 0 22px 58px rgba(12, 35, 27, 0.1); } .forum-hero h2 { max-width: 780px; margin: 7px 0 10px; color: var(--ink); font-size: clamp(30px, 4vw, 58px); font-weight: 960; letter-spacing: -2.2px; line-height: .96; text-wrap: balance; } .forum-hero p { max-width: 760px; margin: 0; color: color-mix(in srgb, var(--ink) 62%, var(--muted)); font-size: 13px; line-height: 1.65; } .forum-hero-stats { display: grid; gap: 9px; align-content: center; } .forum-hero-stats span { padding: 13px; border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 18px; background: rgba(255, 255, 255, .72); } .forum-hero-stats strong, .forum-hero-stats small { display: block; } .forum-hero-stats strong { color: var(--green); font-size: 24px; font-weight: 950; } .forum-hero-stats small { color: var(--muted); font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .forum-layout { display: grid; grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr); gap: 16px; align-items: start; } .forum-compose-card, .forum-post-card, .forum-feed { border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 24px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-accent) 9%, transparent), transparent 34%), var(--card); box-shadow: var(--shadow); } .forum-compose-card { position: sticky; top: 92px; display: grid; gap: 14px; padding: 16px; } .forum-compose-author, .forum-post-card header { display: flex; align-items: center; gap: 10px; } .forum-compose-author strong, .forum-compose-author small, .forum-post-card header strong, .forum-post-card header small { display: block; } .forum-compose-author small, .forum-post-card header small { margin-top: 2px; color: var(--muted); font-size: 12px; } .forum-compose-card form { display: grid; gap: 10px; } .forum-feed { display: grid; gap: 12px; padding: 14px; } .forum-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .forum-toolbar-actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } .forum-ticker-filter { display: flex; flex-wrap: wrap; gap: 7px; } .forum-ticker-filter button, .forum-post-card .community-tags button, .forum-ticker-link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--green) 13%, var(--line)); border-radius: 999px; background: var(--card); color: var(--green); cursor: pointer; font-size: 12px; font-weight: 950; } .forum-ticker-filter button.active, .forum-post-card .community-tags button:hover, .forum-ticker-link:hover { border-color: var(--green); background: var(--green); color: #fff; } .forum-active-filter { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--amber-soft) 58%, var(--card)); } .forum-post-list { display: grid; gap: 12px; } .forum-post-card { display: grid; gap: 12px; padding: 15px; transition: transform var(--motion-medium) ease, border-color var(--motion-medium) ease, box-shadow var(--motion-medium) ease; } .forum-post-card:hover { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); box-shadow: 0 22px 52px rgba(18, 102, 79, 0.1); transform: translateY(-2px); } .forum-post-card p { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.62; } .forum-post-card footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .forum-like { padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--red) 18%, var(--line)); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 950; } .forum-like.active { background: var(--red-soft); color: var(--red); } .forum-actions { display: inline-flex; align-items: center; gap: 7px; } .forum-report, .danger-lite { border-color: color-mix(in srgb, var(--red) 18%, var(--line)) !important; color: color-mix(in srgb, var(--red) 72%, var(--muted)) !important; } .forum-report { padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--red) 14%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--red-soft) 28%, var(--card)); cursor: pointer; font-size: 12px; font-weight: 950; } .forum-report:hover, .danger-lite:hover { background: color-mix(in srgb, var(--red-soft) 72%, var(--card)) !important; transform: translateY(-1px); } .community-leaderboard { position: relative; overflow: hidden; margin: 0 0 16px; padding: 18px; border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line)); border-radius: 28px; background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand-accent) 20%, transparent), transparent 30%), radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--amber) 18%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--green-soft) 58%, var(--card))); box-shadow: 0 24px 64px rgba(12, 35, 27, 0.11); } .community-leaderboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .community-card { position: relative; } .community-card.leader-card { border-color: color-mix(in srgb, var(--green) 24%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--green-soft) 54%, var(--card))); } .community-rank-badge { position: absolute; top: 13px; right: 13px; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 32px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--amber-soft) 72%, var(--card)); color: color-mix(in srgb, var(--green) 72%, var(--ink)); box-shadow: 0 14px 32px rgba(151, 104, 26, 0.12); font-size: 12px; font-weight: 950; } .news-original-title, .news-modal-original { color: var(--muted); font-size: 11px; line-height: 1.45; } .news-original-title { display: block; margin: -3px 0 4px; } .news-modal-original { margin: -4px 0 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--green) 10%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--green-soft) 42%, var(--card)); } .manual-ai-card { display: grid; gap: 10px; margin: 12px 0; padding: 15px; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 20px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-accent) 14%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--green-soft) 46%, var(--card))); box-shadow: 0 16px 38px rgba(12, 35, 27, 0.08); } .manual-ai-card.positive { border-color: color-mix(in srgb, var(--green) 34%, var(--line)); } .manual-ai-card.negative { border-color: color-mix(in srgb, var(--red) 30%, var(--line)); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--red-soft) 36%, transparent), transparent 34%), var(--card); } .manual-ai-card.empty { border-style: dashed; } .manual-ai-head { display: grid; gap: 3px; } .manual-ai-head span { color: var(--green); font-size: 12px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; } .manual-ai-head strong { color: var(--ink); font-size: 16px; line-height: 1.2; } .manual-ai-head em, .manual-ai-card small { color: var(--muted); font-size: 11px; font-style: normal; line-height: 1.45; } .manual-ai-card p { margin: 0; color: var(--ink); line-height: 1.58; } .manual-ai-card ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; } .manual-ai-state { display: block; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--surface-soft) 82%, var(--card)); } .manual-ai-state.positive { color: color-mix(in srgb, var(--green) 82%, var(--ink)); } .manual-ai-state.negative { border-color: color-mix(in srgb, var(--red) 20%, var(--line)); background: color-mix(in srgb, var(--red-soft) 44%, var(--card)); color: color-mix(in srgb, var(--red) 82%, var(--ink)); } .manual-ai-error { color: var(--red) !important; font-weight: 850; } @media (max-width: 980px) { .community-leaderboard-grid { grid-template-columns: 1fr; } } @keyframes profilePickerIn { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes profileAura { from { transform: rotate(-8deg); } to { transform: rotate(352deg); } } .community-empty.compact { padding: 14px; } .watchlist-starter-panel { display: grid; grid-template-columns: minmax(260px, 0.62fr) minmax(320px, 1fr); gap: 16px; margin: 0 0 18px; padding: 20px; border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--line)); border-radius: 24px; background: radial-gradient(circle at 0 0, rgba(209, 167, 75, 0.16), transparent 36%), linear-gradient(135deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--amber-soft) 30%, var(--card))); box-shadow: 0 18px 44px rgba(47, 36, 12, 0.07); } .watchlist-starter-copy h2 { margin: 6px 0; font-size: clamp(22px, 3vw, 34px); letter-spacing: -1px; } .watchlist-starter-copy p { max-width: 640px; margin: 0; color: var(--muted); line-height: 1.55; } .watchlist-starter-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .watchlist-suggestion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .watchlist-suggestion-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 96px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.74); } .watchlist-suggestion-card > div { min-width: 0; } .watchlist-suggestion-card strong, .watchlist-suggestion-card small { display: block; } .watchlist-suggestion-card strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .watchlist-suggestion-card small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; } .watchlist-suggestion-card .text-button { grid-column: 2 / -1; justify-self: start; } .panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .user-onboarding-backdrop { position: fixed; inset: 0; z-index: 145; display: grid; place-items: center; padding: clamp(14px, 3vw, 34px); background: radial-gradient(circle at 14% 8%, rgba(103, 210, 169, 0.18), transparent 30%), radial-gradient(circle at 90% 4%, rgba(22, 102, 79, 0.18), transparent 28%), rgba(8, 23, 18, 0.62); backdrop-filter: blur(10px); } .user-onboarding-modal { position: relative; width: min(1020px, 100%); max-height: calc(100dvh - 44px); overflow-y: auto; padding: clamp(20px, 3vw, 34px); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 30px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 244, 0.96)), var(--card); box-shadow: 0 34px 90px rgba(4, 22, 15, 0.34); animation: onboarding-modal-in 220ms ease both; } .user-onboarding-orb { position: absolute; border-radius: 999px; pointer-events: none; filter: blur(2px); } .user-onboarding-orb.one { top: -70px; right: 8%; width: 180px; height: 180px; background: radial-gradient(circle, rgba(103, 210, 169, 0.26), transparent 68%); } .user-onboarding-orb.two { bottom: -90px; left: 4%; width: 230px; height: 230px; background: radial-gradient(circle, rgba(18, 102, 79, 0.18), transparent 70%); } .user-onboarding-header, .user-onboarding-section, .user-onboarding-summary, .user-onboarding-actions { position: relative; z-index: 1; } .user-onboarding-header { max-width: 820px; margin-bottom: 22px; } .user-onboarding-header h2 { margin: 8px 0 10px; font-size: clamp(27px, 4vw, 46px); line-height: 1.02; letter-spacing: -1.6px; } .user-onboarding-header p, .user-onboarding-section small, .user-onboarding-summary small { color: var(--muted); line-height: 1.55; } .user-onboarding-section { display: grid; gap: 12px; margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255, 255, 255, 0.64); } .user-onboarding-section.compact { grid-template-columns: minmax(210px, 0.65fr) minmax(280px, 1fr); align-items: center; } .user-onboarding-section strong, .user-onboarding-section small { display: block; } .user-onboarding-section > div > strong { color: var(--ink); font-size: 15px; } .user-onboarding-section > div > small { margin-top: 4px; font-size: 11px; } .user-onboarding-choice-grid { display: grid; gap: 10px; } .user-onboarding-choice-grid.markets { grid-template-columns: repeat(3, minmax(0, 1fr)); } .user-onboarding-choice-grid.goals { grid-template-columns: repeat(3, minmax(0, 1fr)); } .user-onboarding-choice-grid button, .user-onboarding-pill-row button { display: flex; align-items: flex-start; gap: 10px; min-height: 82px; padding: 13px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); cursor: pointer; text-align: left; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; } .user-onboarding-choice-grid button:hover, .user-onboarding-pill-row button:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--green) 30%, var(--line)); box-shadow: 0 14px 28px rgba(12, 35, 27, 0.08); } .user-onboarding-choice-grid button.active, .user-onboarding-pill-row button.active { border-color: color-mix(in srgb, var(--green) 42%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--green-soft) 78%, var(--card)), var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 18%, transparent), 0 14px 30px rgba(12, 35, 27, 0.09); } .user-onboarding-choice-grid button b { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: var(--green-soft); color: var(--green); font-size: 15px; } .user-onboarding-choice-grid button span, .user-onboarding-pill-row button span { display: block; } .user-onboarding-choice-grid button strong, .user-onboarding-pill-row button strong { font-size: 13px; } .user-onboarding-choice-grid button small, .user-onboarding-pill-row button small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; } .user-onboarding-pill-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .user-onboarding-pill-row button { min-height: 70px; } .user-onboarding-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 16px; padding: 13px 15px; border: 1px solid rgba(18, 102, 79, 0.16); border-radius: 18px; background: linear-gradient(90deg, rgba(230, 243, 237, 0.86), rgba(255, 255, 255, 0.72)); } .user-onboarding-summary span { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .user-onboarding-summary strong { color: var(--green); font-size: 14px; } .user-onboarding-summary small { flex-basis: 100%; font-size: 11px; } .user-onboarding-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .guided-tour-focus { position: relative; z-index: 24; outline: 3px solid color-mix(in srgb, var(--amber) 76%, #fff); outline-offset: 6px; border-radius: 20px; box-shadow: 0 0 0 10px color-mix(in srgb, var(--amber) 16%, transparent), 0 18px 48px rgba(12, 35, 27, 0.18); } .guided-tour-card { position: fixed; right: 22px; bottom: 22px; z-index: 260; width: min(430px, calc(100vw - 28px)); padding: 18px; border: 1px solid color-mix(in srgb, var(--green) 26%, var(--line)); border-radius: 24px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--amber) 20%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--green-soft) 36%, var(--card))); box-shadow: 0 24px 70px rgba(5, 22, 16, 0.24); } .guided-tour-top, .guided-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .guided-tour-top .icon-button { width: 34px; height: 34px; } .guided-tour-card h3 { margin: 8px 0 6px; color: var(--ink); font-size: 22px; letter-spacing: -0.5px; } .guided-tour-card p { margin: 0; color: var(--muted); line-height: 1.55; } .guided-tour-card > small { display: block; margin-top: 10px; color: var(--muted); font-size: 11px; } .guided-tour-card > small b { color: var(--green); } .guided-tour-actions { flex-wrap: wrap; justify-content: flex-start; margin-top: 14px; } .guided-tour-actions .text-button { margin-left: auto; } .guided-tour-marker { position: fixed; z-index: 255; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 999px; background: var(--amber); color: #163128; box-shadow: 0 12px 28px rgba(47, 36, 12, 0.24); animation: guided-tour-bounce 900ms ease-in-out infinite alternate; pointer-events: none; } .guided-tour-marker span { display: block; font-size: 22px; font-weight: 900; } .guided-tour-marker.left span { transform: rotate(180deg); } .guided-tour-marker.down span { transform: rotate(90deg); } .guided-tour-marker.up span { transform: rotate(-90deg); } @keyframes guided-tour-bounce { from { transform: translate3d(-3px, 0, 0) scale(0.96); } to { transform: translate3d(3px, 0, 0) scale(1.05); } } @keyframes onboarding-modal-in { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 860px) { .personal-command-head, .dashboard-watch-head, .private-empty-portfolio { flex-direction: column; } .personal-command-grid, .dashboard-watch-grid { grid-template-columns: 1fr; } .private-empty-ideas { width: 100%; } .watchlist-starter-panel, .watchlist-suggestion-grid, .public-share-panel, .profile-editor-head, .profile-editor-grid, .forum-hero, .forum-layout, .my-profile-hero, .my-profile-grid, .community-hero, .public-profile-hero, .public-privacy-grid, .community-grid { grid-template-columns: 1fr; } .public-share-panel.locked, .my-profile-hero, .public-profile-hero { align-items: stretch; } .my-profile-identity { align-items: flex-start; flex-direction: column; } .my-profile-identity .public-avatar.large, .public-profile-hero > .public-avatar.large { width: 78px; height: 78px; border-radius: 24px; font-size: 30px; transform: none; } .profile-completion-card { grid-template-columns: 1fr; } .profile-privacy-pills { gap: 6px; } .forum-compose-card { position: static; } .forum-hero h2 { font-size: clamp(28px, 10vw, 42px); } .public-share-stats, .community-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-social-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .public-comment-form > div, .public-comment-head { align-items: flex-start; flex-direction: column; } .public-avatar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-avatar.large { width: 72px; height: 72px; border-radius: 22px; font-size: 28px; } .user-onboarding-choice-grid.markets, .user-onboarding-choice-grid.goals, .user-onboarding-pill-row, .user-onboarding-section.compact { grid-template-columns: 1fr; } .user-onboarding-modal { border-radius: 24px; padding-bottom: 0; } .user-onboarding-actions { position: sticky; bottom: 0; margin: 0 calc(-1 * clamp(20px, 3vw, 34px)); padding: 12px clamp(20px, 3vw, 34px) calc(12px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); } .user-onboarding-actions .primary-button, .user-onboarding-actions .secondary-button, .user-onboarding-actions .ghost-button { width: 100%; justify-content: center; } .guided-tour-card { right: 12px; bottom: 12px; left: 12px; width: auto; padding: 16px; border-radius: 20px; } .guided-tour-actions .primary-button, .guided-tour-actions .ghost-button { flex: 1 1 auto; justify-content: center; } .guided-tour-actions .text-button { width: 100%; margin-left: 0; justify-content: center; } .guided-tour-marker { display: none; } } @keyframes landing-ticker-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes landing-glow { from { transform: translate3d(-4%, 0, 0) scale(0.96); opacity: 0.55; } to { transform: translate3d(4%, -6%, 0) scale(1.08); opacity: 0.9; } } @keyframes landing-dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(103, 210, 169, 0.65); } 72%, 100% { box-shadow: 0 0 0 11px rgba(103, 210, 169, 0); } } @keyframes landing-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -14px, 0); } } @keyframes landing-card-rise { from { transform: translate3d(0, 8px, 0) rotate(-0.25deg); } to { transform: translate3d(0, -8px, 0) rotate(0.25deg); } } @keyframes landing-scan { 0%, 100% { opacity: 0.25; transform: translateY(-50%) scaleX(0.72); } 50% { opacity: 0.88; transform: translateY(-50%) scaleX(1); } } .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 0.85fr); gap: 16px; margin-bottom: 16px; } .dashboard-grid.stock-only { align-items: start; } .panel { overflow: hidden; border-radius: var(--radius); } .panel-header { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); } .panel-header.no-border { border-bottom: 0; } .panel-title h2, .panel-title h3 { margin: 0; font-size: 14px; font-weight: 760; letter-spacing: -0.2px; } .panel-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; } .range-tabs, .view-tabs, .interval-tabs { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); } .chart-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; } .range-tabs button, .view-tabs button, .interval-tabs button { min-width: 34px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 700; } .range-tabs button.active, .view-tabs button.active, .interval-tabs button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(15, 35, 27, 0.08); } .view-tabs button.active { background: var(--green); color: #fff; box-shadow: none; } .chart-wrap { position: relative; height: 255px; padding: 6px 14px 12px; } .chart-summary { display: flex; align-items: baseline; gap: 9px; padding: 4px 6px 0; } .chart-summary strong { font-size: 22px; letter-spacing: -0.7px; } .chart-svg { width: 100%; height: 205px; overflow: visible; } .chart-grid-line { stroke: var(--chart-grid); stroke-dasharray: 3 5; stroke-width: 1; } .chart-baseline { stroke: color-mix(in srgb, var(--green) 30%, transparent); stroke-width: 1.4; stroke-dasharray: 6 7; vector-effect: non-scaling-stroke; } .chart-axis-label { fill: #97a29c; font-size: 11.5px; } .signals-list { padding: 2px 0; } .signal-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 13px 18px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 140ms ease; } .signal-row:last-child { border-bottom: 0; } .signal-row:hover, .table-row-clickable:hover { background: var(--surface-soft); } .ticker-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid color-mix(in srgb, var(--green) 14%, var(--line)); border-radius: 13px; background: radial-gradient(circle at 28% 18%, color-mix(in srgb, var(--brand-accent) 28%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--green-soft) 74%, var(--card)), var(--card)); color: var(--green); font-size: 11.5px; font-weight: 950; letter-spacing: -0.2px; box-shadow: 0 8px 20px rgba(18, 102, 79, 0.08); } .company-copy { min-width: 0; } .company-copy strong, .company-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-copy strong { font-size: 12px; } .company-copy small { margin-top: 4px; color: var(--muted); font-size: 11.5px; } .company-copy-rich { max-width: min(310px, 31vw); } .company-copy-rich em { display: -webkit-box; overflow: hidden; max-width: 100%; margin-top: 7px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--green) 10%, transparent); border-radius: 999px; background: linear-gradient(135deg, color-mix(in srgb, var(--green-soft) 48%, var(--card)), color-mix(in srgb, var(--card) 92%, transparent)); color: color-mix(in srgb, var(--ink) 72%, var(--muted)); font-size: 11.5px; font-style: normal; font-weight: 760; line-height: 1.35; text-overflow: ellipsis; white-space: normal; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, background var(--motion-fast) ease; } .table-row-clickable:hover .company-copy-rich em { border-color: color-mix(in srgb, var(--green) 22%, var(--line)); background: color-mix(in srgb, var(--green-soft) 64%, var(--card)); transform: translateY(-1px); } .score-chip { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 8px; font-size: 12px; font-weight: 800; } .score-chip.positive, .badge.positive { background: var(--green-soft); color: var(--green); } .score-chip.neutral, .badge.neutral { background: var(--amber-soft); color: #94691e; } .score-chip.negative, .badge.negative { background: var(--red-soft); color: var(--red); } .dashboard-lower { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr); gap: 16px; } .table-wrap { overflow-x: auto; } .table-window-info, .load-more-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--green-soft) 24%, var(--card)); } .table-window-info strong, .table-window-info small, .load-more-row small { display: block; } .table-window-info strong { color: var(--ink); font-size: 12px; font-weight: 950; } .table-window-info small, .load-more-row small { margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.35; } .load-more-row { justify-content: center; border-top: 1px solid var(--line); border-bottom: 0; text-align: center; } .load-more-row small { flex-basis: 100%; } table { width: 100%; border-collapse: collapse; white-space: nowrap; } th { padding: 11px 18px; border-bottom: 1px solid var(--line); background: var(--surface-soft); color: #8a968f; font-size: 11.5px; font-weight: 750; letter-spacing: 0.45px; text-align: right; text-transform: uppercase; } th:first-child, td:first-child { text-align: left; } .th-sort { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; } .th-sort span { opacity: .46; font-size: 12px; transform: translateY(-1px); transition: opacity .16s ease, transform .16s ease, color .16s ease; } .th-sort:hover, .th-sort.active { color: var(--green); } .th-sort:hover span, .th-sort.active span { opacity: 1; transform: translateY(-1px) scale(1.06); } td { padding: 13px 18px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 11px; text-align: right; } tbody tr:last-child td { border-bottom: 0; } .table-company { display: flex; align-items: center; gap: 10px; text-align: left; } .table-company .ticker-mark { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; } .table-company .watch-star { flex-shrink: 0; } .company-copy strong .name-flag { display: inline-flex; margin-right: 6px; vertical-align: -1px; } .company-copy strong .name-flag .flag { width: 17px; height: 11.9px; } .value-strong { color: var(--ink); font-weight: 750; } .dividend-list, .news-list { padding: 2px 18px; } .dividend-item, .news-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--line); } .dividend-item:last-child, .news-item:last-child { border-bottom: 0; } .rich-news-item { align-items: start; } .rich-news-item .company-copy strong, .rich-news-item .company-copy small { overflow: visible; white-space: normal; } .rich-news-item .company-copy p { display: -webkit-box; overflow: hidden; margin: 5px 0 0; color: color-mix(in srgb, var(--muted) 88%, var(--ink)); font-size: 11.5px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .date-tile { display: grid; width: 38px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--ink); font-size: 13px; font-weight: 800; } .date-tile small { margin-top: -9px; color: var(--muted); font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; } .dividend-copy strong, .dividend-copy small { display: block; } .dividend-copy strong { font-size: 11px; } .dividend-copy small { margin-top: 4px; color: var(--muted); font-size: 11.5px; } .dividend-amount { color: var(--green); font-size: 11px; font-weight: 800; } .filters-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .local-search { display: flex; min-width: 260px; flex: 1; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); } .local-search input { width: 100%; padding: 11px 0; border: 0; outline: 0; background: transparent; } .filter-select { min-width: 145px; padding: 11px 34px 11px 12px; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: var(--card); color: var(--muted); } .company-table .ticker-mark { width: 36px; height: 36px; } .company-table td { padding-top: 12px; padding-bottom: 12px; } .catalog-radar-panel { display: grid; gap: 11px; margin-bottom: 16px; padding: 13px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 12% 10%, rgba(46, 156, 118, 0.12), transparent 28%), linear-gradient(135deg, var(--card), var(--surface-soft)); box-shadow: var(--shadow); } .catalog-radar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .catalog-radar-head h2 { margin: 2px 0 4px; font-size: 16px; } .catalog-radar-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; } .catalog-market-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } .catalog-market-chips button { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 800; } .catalog-market-chips button.active, .catalog-market-chips button:hover { border-color: #a9d6c5; background: var(--green-soft); color: var(--green); } .catalog-market-chips strong { color: inherit; font-size: 11px; } .catalog-market-shortcuts { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--green-2) 12%, transparent), transparent 34%), var(--card); box-shadow: var(--shadow); } .catalog-market-shortcuts strong, .catalog-market-shortcuts small { display: block; } .catalog-market-shortcuts strong { font-size: 13px; } .catalog-market-shortcuts small { margin-top: 2px; color: var(--muted); font-size: 12px; } .catalog-market-chips.compact { justify-content: flex-end; } .catalog-market-chips.compact button { min-height: 36px; padding: 7px 12px; box-shadow: 0 10px 26px rgba(17, 34, 28, .05); } .catalog-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; } .catalog-stat-grid article { min-width: 0; padding: 10px; border: 1px solid rgba(154, 174, 165, 0.28); border-radius: 14px; background: rgba(255, 255, 255, 0.62); } .catalog-stat-grid article.data-fresh { border-color: rgba(46, 156, 118, 0.28); background: rgba(232, 247, 240, 0.78); } .catalog-stat-grid article.data-proxy { border-color: rgba(199, 148, 58, 0.24); background: rgba(255, 247, 225, 0.74); } .catalog-stat-grid article.data-demo { border-color: rgba(203, 88, 83, 0.22); background: rgba(255, 240, 238, 0.68); } .catalog-stat-grid span, .catalog-stat-grid strong, .catalog-stat-grid small { display: block; } .catalog-stat-grid span { color: var(--muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; } .catalog-stat-grid strong { margin-top: 3px; color: var(--green); font-size: 18px; font-weight: 900; } .catalog-stat-grid small { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .catalog-hot-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; } .catalog-hot-strip > div:first-child strong, .catalog-hot-strip > div:first-child small { display: block; } .catalog-hot-strip > div:first-child strong { font-size: 12px; } .catalog-hot-strip > div:first-child small { margin-top: 2px; color: var(--muted); font-size: 11.5px; } .catalog-hot-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } .catalog-hot-list button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; box-shadow: 0 8px 20px rgba(17, 34, 28, 0.04); } .catalog-hot-list button:hover { border-color: #a9d6c5; transform: translateY(-1px); } .catalog-hot-list button > span:first-child { display: inline-grid; width: 18px; height: 18px; place-items: center; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 11.5px; font-weight: 900; } .catalog-hot-list strong { font-size: 12px; } .catalog-hot-list small { color: var(--muted); font-size: 11px; } .catalog-quality-panel { display: grid; gap: 12px; margin-bottom: 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--green) 14%, var(--line)); border-radius: 20px; background: radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--card) 86%, var(--green-soft)), var(--card)); box-shadow: var(--shadow); } .catalog-quality-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .catalog-quality-head h2 { margin: 2px 0 5px; font-size: 16px; } .catalog-quality-head p { max-width: 680px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; } .catalog-quality-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } .catalog-quality-actions button { border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, var(--surface-soft)); color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 900; padding: 7px 10px; transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast); } .catalog-quality-actions button:hover, .catalog-quality-actions button.active { border-color: color-mix(in srgb, var(--green) 34%, var(--line)); background: var(--green-soft); color: var(--green); transform: translateY(-1px); } .catalog-quality-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } .catalog-quality-grid article { min-width: 0; padding: 11px; border: 1px solid rgba(154, 174, 165, 0.28); border-radius: 15px; background: rgba(255, 255, 255, 0.68); } .catalog-quality-grid article.positive { border-color: rgba(46, 156, 118, 0.27); background: rgba(232, 247, 240, 0.74); } .catalog-quality-grid article.negative { border-color: rgba(203, 88, 83, 0.24); background: rgba(255, 240, 238, 0.70); } .catalog-quality-grid span, .catalog-quality-grid strong, .catalog-quality-grid small { display: block; } .catalog-quality-grid span { color: var(--muted); font-size: 11.5px; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; } .catalog-quality-grid strong { margin-top: 4px; color: var(--green); font-size: 20px; font-weight: 950; letter-spacing: -0.5px; } .catalog-quality-grid small { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .catalog-gap-board { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 1px; } .catalog-gap-board > div:first-child strong, .catalog-gap-board > div:first-child small { display: block; } .catalog-gap-board > div:first-child strong { font-size: 12px; } .catalog-gap-board > div:first-child small { margin-top: 2px; color: var(--muted); font-size: 11.5px; } .catalog-gap-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } .catalog-gap-list button { display: inline-flex; max-width: 260px; align-items: center; gap: 7px; padding: 5px 9px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; box-shadow: 0 10px 24px rgba(17, 34, 28, 0.05); text-align: left; } .catalog-gap-list button:hover { border-color: color-mix(in srgb, var(--red) 30%, var(--line)); background: color-mix(in srgb, var(--red-soft) 38%, var(--card)); transform: translateY(-1px); } .catalog-gap-list span:not(.ticker-mark), .catalog-gap-list strong, .catalog-gap-list small { display: block; min-width: 0; } .catalog-gap-list strong { font-size: 12px; } .catalog-gap-list small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .catalog-groups-panel { display: grid; gap: 11px; margin-bottom: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); } .catalog-groups-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .catalog-groups-head h2 { margin: 2px 0 4px; font-size: 15px; } .catalog-groups-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; } .catalog-group-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .catalog-group-card { position: relative; display: grid; min-height: 82px; align-content: start; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--green) 9%, transparent), transparent 46%), var(--surface-soft); color: var(--ink); cursor: pointer; text-align: left; transition: border-color 150ms ease, transform 150ms ease, background 150ms ease, box-shadow 150ms ease; } .catalog-group-card:hover, .catalog-group-card.active { border-color: color-mix(in srgb, var(--green) 36%, var(--line)); background: color-mix(in srgb, var(--green-soft) 54%, var(--card)); box-shadow: 0 14px 30px rgba(19, 80, 58, 0.08); transform: translateY(-1px); } .catalog-group-card > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 12px; background: var(--card); color: var(--green); font-size: 12px; font-weight: 950; box-shadow: inset 0 0 0 1px var(--line); } .catalog-group-card strong, .catalog-group-card small, .catalog-group-card em { display: block; } .catalog-group-card strong { margin-top: 4px; font-size: 11px; } .catalog-group-card small { color: var(--muted); font-size: 11px; line-height: 1.35; } .catalog-group-card em { position: absolute; top: 10px; right: 10px; min-width: 24px; padding: 3px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 11.5px; font-style: normal; font-weight: 900; text-align: center; } .ticker-mark.tiny { width: 22px; height: 22px; border-radius: 8px; font-size: 11px; } .index-overview-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; } .index-overview-strip article { padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; box-shadow: var(--shadow); transition: 160ms ease; } .index-overview-strip article:hover, .index-overview-strip article.active { border-color: #b8d8cb; background: #eff8f4; transform: translateY(-1px); } .index-overview-strip strong, .index-overview-strip span, .index-overview-strip small { display: block; } .index-overview-strip strong { font-size: 13px; } .index-overview-strip span { margin-top: 6px; color: var(--green); font-size: 16px; font-weight: 850; } .index-overview-strip small { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.4; } .index-overview-strip.compact { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); } .index-overview-strip.grouped { display: block; padding: 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); } .index-overview-strip.grouped.collapsed { padding: 12px 14px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 32%), var(--card); } .index-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; } .index-overview-strip.grouped.collapsed .index-strip-head { margin-bottom: 0; } .index-strip-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .index-strip-head strong, .index-strip-head small { display: block; } .index-strip-head strong { font-size: 12px; letter-spacing: 0.02em; } .index-strip-head small { margin-top: 2px; color: var(--muted); font-size: 11.5px; } .compact-toggle { min-height: 30px; padding: 7px 10px; border-radius: 999px; font-size: 12px; } .compact-toggle.active { border-color: var(--green-2); background: var(--green-soft); color: var(--green); } .index-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .index-market-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); } .index-market-card.active { border-color: #a9d6c5; background: var(--surface-soft); } .index-market-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; } .index-market-card-head strong, .index-market-card-head small { display: block; } .index-market-card-head strong { font-size: 12px; } .index-market-card-head small { margin-top: 2px; color: var(--muted); font-size: 11.5px; } .market-mini-logo, .index-logo { position: relative; display: inline-grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: -0.3px; } .market-mini-logo { background: var(--surface-soft); font-size: 17px; } .index-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; background: var(--card); } .index-logo b { z-index: 1; } .index-picker { width: 100%; min-width: 0; } .index-preview-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; } .index-preview-pill { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 8px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); } .index-preview-pill .index-logo { width: 24px; height: 24px; border-radius: 8px; } .index-preview-pill strong, .index-preview-pill small { display: block; } .index-preview-pill strong { max-width: 88px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .index-preview-pill small { color: var(--muted); font-size: 11px; } .index-pill-list { display: flex; flex-wrap: wrap; gap: 7px; } .index-pill { display: inline-flex; min-height: 38px; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; box-shadow: 0 6px 18px rgba(17, 34, 28, 0.04); transition: 160ms ease; } .index-pill:hover, .index-pill.active { border-color: #a9d6c5; background: #eff8f4; transform: translateY(-1px); } .index-pill strong, .index-pill span, .index-pill small { display: inline; } .index-pill strong { font-size: 11px; } .index-pill span { color: var(--green); font-size: 11px; font-weight: 850; } .index-pill small { color: var(--muted); font-size: 11px; text-transform: uppercase; } .index-chip-list { display: flex; max-width: 188px; flex-wrap: wrap; gap: 4px; } .index-chip-list span { padding: 3px 6px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 800; } .index-chip-list span.index-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 3px; } .index-chip-list span.index-chip.muted { padding: 3px 6px; opacity: 0.85; } .index-chip-logo { width: 14px; height: 14px; flex: 0 0 auto; border-radius: 4px; object-fit: contain; background: var(--card); } .index-chip-list span.market-chip { background: #e7eef9; color: #2f5aa8; letter-spacing: 0.4px; } .live-dot { position: relative; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green-2); vertical-align: middle; } .live-dot::after { position: absolute; inset: -3px; border-radius: 50%; background: rgba(31, 138, 107, 0.45); content: ""; animation: live-pulse 1.8s infinite; pointer-events: none; } .source-mini { display: inline-block; max-width: 160px; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 750; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; } .source-mini.live { color: var(--green); } .source-mini.delayed { color: #2765b5; } .source-mini.proxy, .source-mini.mixed { color: var(--amber); } @keyframes live-pulse { 0% { transform: scale(.35); opacity: .6; } 70% { transform: scale(1.75); opacity: 0; } 100% { transform: scale(1.75); opacity: 0; } } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 800; } .badge::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; } .score-bar { display: inline-flex; width: 70px; height: 5px; overflow: hidden; border-radius: 6px; background: #e8eeea; vertical-align: middle; } .score-bar i { display: block; height: 100%; border-radius: inherit; background: var(--green-2); } .score-bar i.neutral { background: #c79234; } .score-bar i.negative { background: #c15c5d; } .company-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; margin-bottom: 16px; padding: 24px; border: 1px solid #28493d; border-radius: 20px; overflow: hidden; background: linear-gradient(125deg, #102b22, #173a2f); color: #fff; box-shadow: 0 18px 45px rgba(16, 43, 34, 0.14); } .company-hero::after { position: absolute; right: -70px; bottom: -110px; width: 310px; height: 310px; border-radius: 50%; background: radial-gradient(circle, rgba(79, 185, 145, 0.16), rgba(79, 185, 145, 0)); content: ""; } .back-button { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 19px; padding: 0; border: 0; background: transparent; color: #8fa69d; cursor: pointer; font-size: 11px; } .company-identity { display: flex; align-items: center; gap: 16px; } .company-identity .ticker-mark { width: 54px; height: 54px; border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.08); color: #a7eed2; font-size: 12px; } .company-identity h1 { margin: 0; font-size: 25px; letter-spacing: -0.8px; } .company-identity p { margin: 5px 0 0; color: #9eb3ab; font-size: 11px; } .company-price { display: flex; align-items: baseline; gap: 9px; margin-top: 23px; } .company-price strong { font-size: 28px; letter-spacing: -1px; } .data-passport { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: -4px 0 16px; } .data-passport article { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); } .data-passport strong, .data-passport small { display: block; } .data-passport > article > strong { margin-top: 10px; font-size: 12px; } .data-passport > article > small { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.45; } .company-data-gaps { display: grid; gap: 12px; margin: -2px 0 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--amber) 26%, var(--line)); border-radius: 20px; background: radial-gradient(circle at 0 0, rgba(214, 151, 55, 0.12), transparent 32%), var(--surface); box-shadow: var(--shadow); } .company-data-gaps.positive { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); } .company-data-gaps.negative { border-color: color-mix(in srgb, var(--red) 24%, var(--line)); } .company-data-gaps-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .company-data-gaps-head h2 { margin: 4px 0 4px; color: var(--ink); font-size: 18px; letter-spacing: -0.04em; } .company-data-gaps-head p { max-width: 820px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; } .data-gap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .data-gap-grid article { min-width: 0; padding: 12px; border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 16px; background: rgba(255, 255, 255, 0.72); } .data-gap-grid article.positive { border-left-color: var(--green); } .data-gap-grid article.negative { border-left-color: var(--red); } .data-gap-grid article > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px; align-items: center; } .data-gap-grid strong, .data-gap-grid em, .data-gap-grid p, .data-gap-grid small { display: block; } .data-gap-grid strong { color: var(--ink); font-size: 12px; } .data-gap-grid em { grid-column: 2; color: var(--muted); font-size: 11px; font-style: normal; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .data-gap-grid p { margin: 10px 0 4px; color: var(--ink); font-size: 12px; line-height: 1.45; } .data-gap-grid small { color: var(--muted); font-size: 11.5px; line-height: 1.4; } .analyst-brief { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(230px, 0.72fr) minmax(220px, 0.78fr) minmax(220px, 0.78fr); gap: 12px; margin-bottom: 16px; } .analyst-brief > article { min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); } .analyst-verdict-card { position: relative; overflow: hidden; padding: 20px; background: var(--surface); background: linear-gradient(135deg, color-mix(in srgb, var(--green-soft) 55%, var(--surface)), var(--surface)); } .analyst-verdict-card::after { position: absolute; right: -48px; bottom: -80px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--green-2) 24%, transparent), transparent 68%); content: ""; } .analyst-brief.negative .analyst-verdict-card::after { background: radial-gradient(circle, rgba(180, 72, 75, 0.18), transparent 68%); } .analyst-brief.neutral .analyst-verdict-card::after { background: radial-gradient(circle, rgba(177, 121, 24, 0.2), transparent 68%); } .analyst-verdict-card h2 { position: relative; z-index: 1; margin: 8px 0 9px; font-size: clamp(24px, 2vw, 34px); line-height: 1.02; letter-spacing: -1.2px; } .analyst-verdict-card p { position: relative; z-index: 1; max-width: 540px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; } .analyst-pill-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .analyst-pill { padding: 7px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11.5px; font-weight: 850; text-transform: uppercase; } .analyst-pill.positive { background: var(--green-soft); color: var(--green); } .analyst-pill.neutral { background: var(--amber-soft); color: var(--amber); } .analyst-pill.negative { background: var(--red-soft); color: var(--red); } .analyst-score-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 15px; padding: 16px; } .analyst-ring { position: relative; display: grid; width: 104px; height: 104px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(var(--green-2) calc(var(--value) * 1%), #e8eeea 0); text-align: center; } .analyst-brief.negative .analyst-ring { background: conic-gradient(var(--red) calc(var(--value) * 1%), #f0dddf 0); } .analyst-brief.neutral .analyst-ring { background: conic-gradient(var(--amber) calc(var(--value) * 1%), #f2e7cf 0); } .analyst-ring::before { position: absolute; inset: 12px; border-radius: 50%; background: var(--surface); content: ""; } .analyst-ring strong, .analyst-ring small { position: relative; display: block; } .analyst-ring strong { font-size: 21px; letter-spacing: -0.7px; } .analyst-ring small { max-width: 66px; color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.25; text-transform: uppercase; } .analyst-mini-grid { display: grid; gap: 8px; } .analyst-mini-grid div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .analyst-mini-grid div:last-child { padding-bottom: 0; border-bottom: 0; } .analyst-mini-grid span { color: var(--muted); font-size: 11.5px; font-weight: 750; } .analyst-mini-grid strong { font-size: 11px; text-align: right; } .analyst-list-card { padding: 16px; } .analyst-list-card h3, .analyst-actions-card h3 { margin: 0 0 12px; font-size: 12px; } .analyst-list-card ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .analyst-list-card li { position: relative; padding-left: 16px; color: var(--muted); font-size: 12px; line-height: 1.5; } .analyst-list-card li::before { position: absolute; top: 0.55em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--green-2); content: ""; } .analyst-brief.negative .analyst-list-card:nth-of-type(4) li::before, .analyst-list-card:nth-of-type(4) li::before { background: var(--amber); } .analyst-actions-card { grid-column: 1 / -1; padding: 16px; } .analyst-actions-card div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .analyst-actions-card span { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); color: var(--muted); font-size: 12px; line-height: 1.45; } .analyst-actions-card b { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font-size: 11.5px; } :is([data-theme="dark"],[data-theme="cyber"]) .analyst-ring { background: conic-gradient(var(--green-2) calc(var(--value) * 1%), var(--line) 0); } :is([data-theme="dark"],[data-theme="cyber"]) .analyst-brief.negative .analyst-ring { background: conic-gradient(var(--red) calc(var(--value) * 1%), var(--line) 0); } :is([data-theme="dark"],[data-theme="cyber"]) .analyst-brief.neutral .analyst-ring { background: conic-gradient(var(--amber) calc(var(--value) * 1%), var(--line) 0); } .business-profile-panel { overflow: hidden; margin-bottom: 16px; } .business-profile-layout { display: grid; grid-template-columns: minmax(0, 1.28fr) repeat(2, minmax(220px, 0.86fr)); gap: 12px; padding: 16px; } .business-profile-lead, .business-profile-fact, .business-profile-list { position: relative; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--green) 13%, var(--line)); border-radius: 22px; background: radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--brand-accent) 13%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--surface-soft) 88%, transparent)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 18px 42px rgba(18, 102, 79, 0.07); animation: profileCardRise var(--motion-slow) cubic-bezier(0.18, 0.78, 0.24, 1) both; transition: transform var(--motion-medium) ease, border-color var(--motion-medium) ease, box-shadow var(--motion-medium) ease; } .business-profile-layout > article:nth-child(2) { animation-delay: 45ms; } .business-profile-layout > article:nth-child(3) { animation-delay: 90ms; } .business-profile-layout > article:nth-child(4) { animation-delay: 135ms; } .business-profile-layout > article:nth-child(5) { animation-delay: 180ms; } .business-profile-layout > article:nth-child(6) { animation-delay: 225ms; } .business-profile-lead:hover, .business-profile-fact:hover, .business-profile-list:hover { border-color: color-mix(in srgb, var(--green) 27%, var(--line)); box-shadow: 0 24px 58px rgba(18, 102, 79, 0.12); transform: translateY(-2px); } .business-profile-lead { display: grid; grid-row: span 2; grid-template-columns: auto minmax(0, 1fr); gap: 15px; padding: 22px; background: radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 28%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--green) 14%, transparent), transparent 32%), linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--green-soft) 62%, var(--card))); } .business-profile-lead::after { position: absolute; right: -70px; bottom: -95px; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--green) 16%, transparent), transparent 68%); content: ""; } .business-profile-logo { position: relative; z-index: 1; } .business-profile-logo .ticker-mark { width: 58px; height: 58px; border-radius: 19px; box-shadow: 0 18px 42px rgba(18, 102, 79, 0.14); } .business-profile-lead > div:last-child { position: relative; z-index: 1; } .business-profile-lead h3 { margin: 4px 0 10px; color: var(--ink); font-size: clamp(23px, 2.3vw, 34px); font-weight: 950; letter-spacing: -1.25px; line-height: 1; text-wrap: balance; } .business-profile-lead p { margin: 0; max-width: 62ch; color: color-mix(in srgb, var(--ink) 70%, var(--muted)); font-size: 13px; font-weight: 560; line-height: 1.7; } .business-profile-fact { padding: 17px; } .business-profile-fact span, .business-profile-list span { display: block; color: color-mix(in srgb, var(--green) 82%, var(--ink)); font-size: 11.5px; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; } .business-profile-fact strong { display: block; margin-top: 11px; color: var(--ink); font-size: 13px; font-weight: 900; line-height: 1.5; } .business-profile-list { padding: 17px; } .business-profile-list ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; } .business-profile-list li { position: relative; padding-left: 20px; color: color-mix(in srgb, var(--ink) 64%, var(--muted)); font-size: 11px; font-weight: 560; line-height: 1.5; } .business-profile-list li::before { position: absolute; top: 0.64em; left: 0; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #fff 0 21%, transparent 24%), linear-gradient(135deg, var(--green-2), var(--brand-accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-soft) 70%, transparent); content: ""; transform: translateY(-50%); } .business-profile-list.risk li::before { background: var(--amber); } .business-profile-note { margin: 0; padding: 14px 18px; border-top: 1px solid color-mix(in srgb, var(--green) 11%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--green-soft) 58%, var(--card)), color-mix(in srgb, var(--card) 92%, transparent)); color: color-mix(in srgb, var(--ink) 62%, var(--muted)); font-size: 12px; font-weight: 650; line-height: 1.55; } @keyframes profileCardRise { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .score-gauge { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 132px; height: 132px; align-self: center; border-radius: 50%; background: conic-gradient(#62d2a7 calc(var(--score) * 1%), rgba(255, 255, 255, 0.1) 0); } .score-gauge::before { position: absolute; width: 108px; height: 108px; border-radius: 50%; background: #16372c; content: ""; } .score-gauge div { position: relative; text-align: center; } .score-gauge strong, .score-gauge small { display: block; } .score-gauge strong { font-size: 31px; letter-spacing: -1px; } .score-gauge small { margin-top: 2px; color: #9fb7ae; font-size: 11.5px; text-transform: uppercase; } .score-subnote { position: absolute; right: -12px; bottom: -18px; width: 156px; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(13, 34, 27, 0.92); color: #b7cbc2; font-size: 11px; font-weight: 750; line-height: 1.25; text-align: center; } .company-detail-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr); gap: 16px; } .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-bottom: 1px solid var(--line); background: var(--line); } .metric { padding: 17px; background: var(--card); } .metric span, .metric strong, .metric small { display: block; } .metric span { color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; } .metric strong { margin-top: 8px; font-size: 17px; } .metric small { margin-top: 4px; color: #98a39d; font-size: 11px; } .crypto-metric { position: relative; } .crypto-metric::before { content: ""; position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 999px; background: #b8c9c1; } .crypto-metric.flow-watch::before { background: linear-gradient(135deg, var(--red) 0 48%, var(--green-2) 52% 100%); } .crypto-metric-note { margin: 0; padding: 13px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #f6fbf8, #fff); color: #56665f; font-size: 12px; line-height: 1.55; } .crypto-metric-note strong { color: var(--green); } .factor-list { padding: 15px 20px 20px; } .factor-item { display: grid; grid-template-columns: 92px 1fr 32px; align-items: center; gap: 12px; margin: 12px 0; font-size: 12px; } .factor-track { height: 7px; overflow: hidden; border-radius: 10px; background: var(--surface-soft); } .factor-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2b9b76, #65c4a0); } .factor-item strong { text-align: right; } .score-explainer { margin: 0 20px 20px; padding: 15px; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 18px; background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--green) 12%, transparent), transparent 34%), var(--surface-soft); } .score-explainer-head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .score-explainer p { margin: 0; color: color-mix(in srgb, var(--ink) 74%, var(--muted)); font-size: 12px; line-height: 1.55; } .score-explainer p strong { color: var(--ink); } .score-band-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .score-band-grid div { padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); } .score-band-grid span, .score-band-grid strong, .score-band-grid small { display: block; } .score-band-grid span { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: 0.4px; text-transform: uppercase; } .score-band-grid strong { margin-top: 5px; color: var(--green); font-size: 11px; } .score-band-grid small { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.45; } .score-audit-panel { display: grid; gap: 12px; margin: 0 20px 20px; padding: 15px; border: 1px solid color-mix(in srgb, var(--amber) 26%, var(--line)); border-radius: 18px; background: radial-gradient(circle at 88% 0%, rgba(214, 151, 55, 0.14), transparent 30%), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 247, 0.88)); } .score-audit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .score-audit-head h3 { margin: 4px 0 5px; color: var(--ink); font-size: 16px; letter-spacing: -0.03em; } .score-audit-head p { max-width: 760px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; } .score-formula-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .score-formula-strip article { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); } .score-formula-strip article.positive { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); } .score-formula-strip article.negative { border-color: color-mix(in srgb, var(--red) 28%, var(--line)); } .score-formula-strip span, .score-formula-strip strong, .score-formula-strip small { display: block; } .score-formula-strip span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .score-formula-strip strong { margin-top: 5px; color: var(--ink); font-size: 14px; } .score-formula-strip small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; } .score-audit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .score-audit-grid article { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.72); } .score-audit-grid article > div:first-child { display: flex; justify-content: space-between; gap: 8px; } .score-audit-grid strong, .score-audit-grid span, .score-audit-grid small { display: block; } .score-audit-grid strong { color: var(--ink); font-size: 11px; } .score-audit-grid span { color: var(--muted); font-size: 11.5px; text-align: right; white-space: nowrap; } .score-audit-grid small { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.35; } .score-audit-track { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); } .score-audit-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--green-2)); } .score-adjustment-list { display: grid; gap: 7px; } .score-adjustment-list article { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 11px; border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 14px; background: var(--card); } .score-adjustment-list article.positive { border-left-color: var(--green); } .score-adjustment-list article.negative { border-left-color: var(--red); } .score-adjustment-list > article > span { color: var(--green); font-size: 11px; font-weight: 950; } .score-adjustment-list article.negative > span { color: var(--red); } .score-adjustment-list strong, .score-adjustment-list small { display: block; } .score-adjustment-list strong { color: var(--ink); font-size: 11px; } .score-adjustment-list small { margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.4; } .reason-list { padding: 7px 20px 18px; } .reason-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); color: #516159; font-size: 12px; line-height: 1.5; } .reason-item:last-child { border-bottom: 0; } .reason-icon { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 900; } .reason-icon.warn { background: var(--amber-soft); color: var(--amber); } .decision-card { display: grid; gap: 18px; padding: 20px; } .decision-main span, .decision-main strong, .decision-main p { display: block; } .decision-main span { color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; } .decision-main strong { margin-top: 7px; font-size: 27px; letter-spacing: -0.9px; } .decision-main p { margin: 10px 0 0; color: #607067; font-size: 11px; line-height: 1.55; } .decision-meter { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 118px; height: 118px; border-radius: 50%; background: conic-gradient(var(--green-2) calc(var(--confidence) * 1%), #e8eeea 0); } .decision-card.negative .decision-meter { background: conic-gradient(var(--red) calc(var(--confidence) * 1%), #f0dddf 0); } .decision-card.neutral .decision-meter { background: conic-gradient(var(--amber) calc(var(--confidence) * 1%), #f2e7cf 0); } .decision-meter::before { position: absolute; inset: 14px; border-radius: 50%; background: var(--card); content: ""; } .decision-meter strong, .decision-meter small { position: relative; display: block; text-align: center; } .decision-meter strong { font-size: 22px; letter-spacing: -0.6px; } .decision-meter small { margin-top: 3px; color: var(--muted); font-size: 11.5px; } .scenario-list { display: grid; gap: 9px; } .scenario-list div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 12px; background: var(--surface-soft); } .scenario-list span { color: var(--muted); font-size: 11.5px; font-weight: 750; text-transform: uppercase; } .scenario-list strong { font-size: 12px; } .financial-results { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr); align-items: stretch; } .financial-bars-wrap { display: grid; grid-template-rows: auto 1fr auto; min-height: 255px; } .financial-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 0; } .financial-chart-head span, .financial-chart-head strong, .financial-chart-head small { display: block; } .financial-chart-head span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .financial-chart-head strong { margin-top: 3px; font-size: 13px; } .financial-chart-head small { margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.35; } .compact-tabs { flex-shrink: 0; } .compact-tabs button { min-width: 68px; } .financial-trend-note { margin: 0 16px 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); } .financial-trend-note span, .financial-trend-note strong, .financial-trend-note small { display: block; } .financial-trend-note span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .financial-trend-note strong { margin-top: 4px; font-size: 12px; } .financial-trend-note small { margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.35; } .report-source-strip { display: grid; grid-template-columns: 0.7fr 1fr 1.25fr; gap: 10px; padding: 0 20px 16px; } .report-source-strip div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); } .report-source-strip span, .report-source-strip strong, .report-source-strip small { display: block; } .report-source-strip span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: 0.25px; text-transform: uppercase; } .report-source-strip strong { margin-top: 5px; color: var(--green); font-size: 11px; overflow-wrap: anywhere; } .report-source-strip small { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.4; } .financial-data-passport { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 20px 16px; } .financial-data-passport article { min-width: 0; padding: 12px; border: 1px solid var(--line); border-left: 4px solid rgba(19, 111, 86, 0.18); border-radius: 15px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 250, 247, 0.86)); } .financial-data-passport article.positive { border-left-color: var(--green); } .financial-data-passport article.neutral { border-left-color: var(--amber); } .financial-data-passport article.negative { border-left-color: var(--red); } .financial-data-passport span, .financial-data-passport strong, .financial-data-passport small { display: block; } .financial-data-passport span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .financial-data-passport strong { margin-top: 5px; color: var(--ink); font-size: 12px; overflow-wrap: anywhere; } .financial-data-passport small { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.45; } .report-quality-panel { margin: 0 20px 16px; padding: 14px; border: 1px solid rgba(19, 111, 86, 0.16); border-radius: 18px; background: radial-gradient(circle at 4% 0%, rgba(101, 199, 162, 0.16), transparent 26%), linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,250,247,0.9)); } .report-quality-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .report-quality-head span, .report-quality-head strong, .report-quality-head small { display: block; } .report-quality-head > div > span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .report-quality-head strong { margin-top: 4px; color: var(--ink); font-size: 15px; letter-spacing: -0.2px; } .report-quality-head small { max-width: 720px; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; } .report-quality-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .report-quality-grid article { min-width: 0; padding: 12px; border: 1px solid var(--line); border-left: 4px solid #cbd7d1; border-radius: 15px; background: var(--card); } .report-quality-grid article.positive { border-left-color: var(--green); } .report-quality-grid article.neutral { border-left-color: var(--amber); } .report-quality-grid article.negative { border-left-color: var(--red); } .report-quality-grid span, .report-quality-grid strong, .report-quality-grid small { display: block; } .report-quality-grid span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .report-quality-grid strong { margin-top: 5px; font-size: 12px; overflow-wrap: anywhere; } .report-quality-grid small { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.4; } .report-sanity-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .report-sanity-head, .report-sanity-list article { padding: 12px; border: 1px solid var(--line); border-left: 4px solid rgba(18, 102, 79, 0.16); border-radius: 14px; background: var(--card); } .report-sanity-head, .report-sanity-list article.positive { border-left-color: var(--green); } .report-sanity-list article.neutral { border-left-color: var(--amber); } .report-sanity-list article.negative { border-left-color: var(--red); } .report-sanity-head span, .report-sanity-list article span, .report-sanity-head strong, .report-sanity-list article strong, .report-sanity-head small, .report-sanity-list article small { display: block; } .report-sanity-head span, .report-sanity-list article span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .report-sanity-head strong, .report-sanity-list article strong { margin-top: 5px; color: var(--green); font-size: 12px; overflow-wrap: anywhere; } .report-sanity-list article.neutral strong { color: var(--amber); } .report-sanity-list article.negative strong { color: var(--red); } .report-sanity-head small, .report-sanity-list article small { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.45; } .report-compare-panel { margin: 0 20px 16px; padding: 14px; border: 1px solid rgba(19, 111, 86, 0.16); border-left: 5px solid var(--green); border-radius: 18px; background: radial-gradient(circle at 92% 4%, rgba(255, 190, 88, 0.14), transparent 30%), linear-gradient(180deg, rgba(255,255,255,0.97), rgba(250,248,242,0.9)); } .report-compare-panel.neutral, .report-compare-panel.empty { border-left-color: var(--amber); } .report-compare-panel.negative { border-left-color: var(--red); } .report-compare-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .report-compare-head span, .report-compare-head strong, .report-compare-head small { display: block; } .report-compare-head > div > span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .report-compare-head strong { margin-top: 4px; color: var(--ink); font-size: 15px; letter-spacing: -0.2px; } .report-compare-head small { max-width: 780px; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; } .report-compare-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .report-compare-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .report-compare-grid article { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-left: 4px solid #cbd7d1; border-radius: 15px; background: var(--card); } .report-compare-grid article.positive { border-left-color: var(--green); } .report-compare-grid article.neutral { border-left-color: var(--amber); } .report-compare-grid article.negative { border-left-color: var(--red); } .report-compare-grid span, .report-compare-grid strong, .report-compare-grid small { display: block; } .report-compare-grid span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .report-compare-grid strong { margin-top: 3px; color: var(--ink); font-size: 12px; overflow-wrap: anywhere; } .report-compare-grid small { margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.35; } .report-compare-grid article.positive > div:last-child strong { color: var(--green); } .report-compare-grid article.negative > div:last-child strong { color: var(--red); } .report-compare-grid article.neutral > div:last-child strong { color: var(--amber); } .expectation-prefill-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 20px 14px; padding: 12px 14px; border: 1px solid rgba(255, 190, 88, 0.34); border-left: 5px solid var(--amber); border-radius: 16px; background: radial-gradient(circle at 92% 8%, rgba(255, 190, 88, 0.16), transparent 30%), rgba(255, 251, 242, 0.86); } .expectation-prefill-banner span, .expectation-prefill-banner strong, .expectation-prefill-banner small { display: block; } .expectation-prefill-banner span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .expectation-prefill-banner strong { margin-top: 3px; color: var(--ink); font-size: 13px; } .expectation-prefill-banner small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; } .expectation-import-preview { margin: 0 20px 16px; padding: 14px; border: 1px solid rgba(19, 111, 86, 0.18); border-left: 5px solid var(--green); border-radius: 18px; background: radial-gradient(circle at 94% 0%, rgba(101, 199, 162, 0.14), transparent 32%), linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,248,0.94)); } .expectation-import-preview.warning { border-left-color: var(--amber); } .expectation-import-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .expectation-import-preview-head span, .expectation-import-preview-head strong, .expectation-import-preview-head small { display: block; } .expectation-import-preview-head span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .expectation-import-preview-head strong { margin-top: 4px; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; } .expectation-import-preview-head small, .expectation-import-more { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; } .expectation-import-actions { display: flex; flex: 0 0 auto; gap: 8px; } .expectation-import-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 12px 0; } .expectation-import-stats article { padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.78); } .expectation-import-stats strong, .expectation-import-stats small { display: block; } .expectation-import-stats strong { color: var(--green-dark); font-size: 20px; } .expectation-import-stats small { color: var(--muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; } .expectation-worklist { margin: 0 20px 16px; padding: 14px; border: 1px solid rgba(19, 111, 86, 0.16); border-radius: 18px; background: radial-gradient(circle at 8% 4%, rgba(101, 199, 162, 0.14), transparent 30%), linear-gradient(180deg, rgba(255,255,255,0.97), rgba(246,250,248,0.92)); } .expectation-worklist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .expectation-worklist-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; min-width: 190px; } .expectation-worklist-actions .ghost-button { padding: 10px 12px; white-space: nowrap; } .expectation-worklist-actions .ghost-button:disabled { opacity: .52; cursor: not-allowed; } .expectation-worklist-groups { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 12px; } .expectation-worklist-groups span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid rgba(19, 111, 86, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.72); color: var(--muted); font-size: 11.5px; font-weight: 800; } .expectation-worklist-groups strong { color: var(--green-dark); font-size: 11.5px; } .expectation-worklist-head span, .expectation-worklist-head strong, .expectation-worklist-head small { display: block; } .expectation-worklist-title > span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .expectation-worklist-head strong { margin-top: 4px; color: var(--ink); font-size: 15px; } .expectation-worklist-head small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; } .expectation-worklist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .expectation-worklist-grid article { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 15px; background: var(--card); } .expectation-worklist-grid article.complete { border-left-color: var(--green); } .expectation-worklist-company { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 9px; } .expectation-worklist-company strong, .expectation-worklist-company small { display: block; overflow-wrap: anywhere; } .expectation-worklist-company strong { color: var(--ink); font-size: 12px; } .expectation-worklist-company small, .expectation-worklist-grid p { color: var(--muted); font-size: 11.5px; line-height: 1.4; } .expectation-worklist-grid p { margin: 0; } .expectation-worklist-grid .ghost-button { justify-self: start; } .success-dot { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 12px; background: var(--green-soft); color: var(--green); font-weight: 900; } .report-truth-panel { margin: 0 20px 16px; padding: 14px; border: 1px solid rgba(19, 111, 86, 0.16); border-left: 5px solid var(--green); border-radius: 18px; background: radial-gradient(circle at 92% 4%, rgba(27, 116, 90, 0.12), transparent 28%), linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,248,0.92)); } .report-truth-panel.neutral { border-left-color: var(--amber); } .report-truth-panel.negative { border-left-color: var(--red); } .report-truth-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .report-truth-main span, .report-truth-main strong, .report-truth-main p { display: block; } .report-truth-main span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .report-truth-main strong { margin-top: 5px; color: var(--ink); font-size: 15px; } .report-truth-main p { max-width: 760px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .report-truth-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .report-truth-grid article { min-width: 0; padding: 12px; border: 1px solid var(--line); border-left: 4px solid #cbd7d1; border-radius: 15px; background: var(--card); } .report-truth-grid article.positive { border-left-color: var(--green); } .report-truth-grid article.neutral { border-left-color: var(--amber); } .report-truth-grid article.negative { border-left-color: var(--red); } .report-truth-grid span, .report-truth-grid strong, .report-truth-grid small { display: block; } .report-truth-grid span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .report-truth-grid strong { margin-top: 5px; font-size: 12px; } .report-truth-grid small { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.4; } .report-score-impact { display: grid; gap: 4px; margin-top: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--green) 14%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--surface-soft) 82%, var(--card)); } .report-score-impact.neutral { border-color: color-mix(in srgb, var(--amber) 28%, var(--line)); background: color-mix(in srgb, var(--amber-soft) 42%, var(--card)); } .report-score-impact.negative { border-color: color-mix(in srgb, var(--red) 24%, var(--line)); background: color-mix(in srgb, var(--red-soft) 42%, var(--card)); } .report-score-impact span { color: var(--muted); font-size: 11.5px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; } .report-score-impact strong { color: var(--ink); font-size: 13px; font-weight: 950; } .report-score-impact small { color: var(--muted); font-size: 11px; line-height: 1.45; } .compact-table table th, .compact-table table td { padding: 11px 14px; } .event-list { padding: 8px 20px 18px; } .report-countdown { display: grid; gap: 14px; margin: 18px 20px 12px; padding: 16px; border: 1px solid #cbe6da; border-radius: 16px; background: linear-gradient(135deg, #effaf5, #ffffff); } .report-countdown.expired { border-color: #ead6b8; background: linear-gradient(135deg, #fff8eb, #ffffff); } .report-countdown.pending { border-color: #d8dcc6; background: linear-gradient(135deg, #fbfaf1, #ffffff); } .report-countdown.pending .countdown-grid span, .mini-countdown.pending span { border: 1px dashed #d8dcc6; background: #fffdf5; } .report-countdown > div:first-child span, .report-countdown > div:first-child strong, .report-countdown > div:first-child small { display: block; } .report-countdown > div:first-child span { color: var(--green); font-size: 11.5px; font-weight: 850; letter-spacing: 0.4px; text-transform: uppercase; } .report-countdown > div:first-child strong { margin-top: 6px; font-size: 16px; letter-spacing: -0.3px; } .report-countdown > div:first-child small { margin-top: 5px; color: var(--muted); font-size: 11.5px; } .countdown-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .countdown-grid span { display: grid; min-height: 62px; place-items: center; border: 1px solid #dfe9e4; border-radius: 13px; background: var(--card); } .countdown-grid strong, .countdown-grid small { display: block; } .countdown-grid strong { font-size: 20px; letter-spacing: -0.6px; } .countdown-grid small { margin-top: -6px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; } .report-countdown p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; } .report-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; } .report-actions .ghost-button { flex: 1 1 130px; justify-content: center; } .report-data-panel { margin-bottom: 16px; } .report-automation-panel { display: grid; gap: 15px; margin-bottom: 16px; padding: 18px; border: 1px solid rgba(19, 111, 86, 0.16); border-radius: 24px; background: radial-gradient(circle at top left, rgba(88, 230, 181, 0.18), transparent 32%), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 247, 0.92)); box-shadow: var(--shadow); overflow: hidden; } .report-automation-copy { max-width: 980px; } .report-automation-copy span { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .report-automation-copy h2 { margin: 7px 0; color: var(--text); font-size: clamp(19px, 2vw, 28px); letter-spacing: -.04em; } .report-automation-copy p { max-width: 920px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; } .report-automation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .automation-step { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.84); } .automation-step > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; } .automation-step span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 12px; background: rgba(19, 111, 86, 0.1); color: var(--green); font-size: 12px; font-weight: 950; } .automation-step strong, .automation-step em { min-width: 0; } .automation-step strong { color: var(--text); font-size: 13px; } .automation-step em { grid-column: 2; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } .automation-step p { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; } .automation-step.positive span { background: rgba(27, 158, 112, 0.12); color: #13825b; } .automation-step.negative span { background: rgba(211, 71, 71, 0.12); color: var(--red); } .automation-step.negative em { color: var(--red); } .report-automation-footer { display: flex; flex-wrap: wrap; gap: 8px; } .report-automation-footer span { display: inline-flex; padding: 8px 10px; border: 1px solid rgba(19, 111, 86, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: var(--green); font-size: 11px; font-weight: 850; } .report-robot-panel { margin-bottom: 16px; overflow: hidden; } .report-robot-grid { display: grid; grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1fr); gap: 12px; padding: 0 20px 14px; } .report-robot-hero, .report-robot-stat-grid article, .report-robot-controls, .report-robot-stages article, .report-robot-tables article { border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); } .report-robot-hero { display: grid; align-content: space-between; min-height: 190px; padding: 18px; background: radial-gradient(circle at 88% 12%, rgba(103, 210, 169, 0.25), transparent 42%), linear-gradient(145deg, #102c25, #0c241e); color: #fff; } .report-robot-hero span, .report-robot-hero p, .report-robot-hero small { color: rgba(218, 240, 231, 0.78); } .report-robot-hero span, .report-robot-controls label span, .report-robot-stat-grid span { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .report-robot-hero strong { display: block; margin: 10px 0 8px; color: #fff; font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: -.06em; } .report-robot-hero p, .report-robot-hero small { margin: 0; font-size: 11px; line-height: 1.55; } .report-robot-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .report-robot-stat-grid article { display: grid; align-content: center; min-height: 88px; padding: 13px; } .report-robot-stat-grid span, .report-robot-stat-grid small { color: var(--muted); } .report-robot-stat-grid strong { margin: 5px 0 2px; color: var(--green); font-size: 28px; line-height: 1; } .report-robot-stat-grid article.negative strong { color: var(--red); } .report-robot-stat-grid small { font-size: 12px; line-height: 1.4; } .report-robot-controls { display: grid; grid-template-columns: minmax(220px, 340px) auto auto minmax(220px, 1fr); gap: 10px; align-items: end; margin: 0 20px 14px; padding: 14px; } .report-robot-controls label span { display: block; margin-bottom: 5px; color: var(--muted); } .report-robot-controls input { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-size: 12px; } .report-robot-controls small { color: var(--muted); font-size: 11px; line-height: 1.45; } .report-robot-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 20px 14px; } .report-robot-stages article { padding: 13px; border-left: 4px solid rgba(18, 102, 79, 0.18); } .report-robot-stages article.positive { border-left-color: var(--green); } .report-robot-stages article.neutral { border-left-color: var(--amber); } .report-robot-stages article.negative { border-left-color: var(--red); } .report-robot-stages article > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 8px; align-items: center; } .report-robot-stages span { display: inline-grid; min-width: 36px; height: 28px; place-items: center; padding: 0 7px; border-radius: 999px; background: rgba(18, 102, 79, 0.1); color: var(--green); font-size: 11.5px; font-weight: 950; text-transform: uppercase; } .report-robot-stages strong { color: var(--ink); font-size: 12px; } .report-robot-stages em { grid-column: 2; color: var(--muted); font-size: 11.5px; font-style: normal; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } .report-robot-stages p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .report-robot-alerts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px; } .report-robot-alerts span { padding: 8px 10px; border: 1px solid rgba(211, 71, 71, 0.22); border-radius: 999px; background: rgba(211, 71, 71, 0.08); color: var(--red); font-size: 11px; font-weight: 800; } .report-robot-tables { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: 12px; padding: 0 20px 20px; } .report-robot-tables article { min-width: 0; padding: 14px; } .report-robot-tables article > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .report-robot-tables strong, .report-robot-tables small { display: block; } .report-robot-tables strong { color: var(--ink); font-size: 13px; } .report-robot-tables small { color: var(--muted); font-size: 12px; } .report-robot-calendar-list { display: grid; gap: 9px; } .report-robot-calendar-list div { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); } .report-robot-calendar-list span { color: var(--green); font-size: 12px; font-weight: 950; } .report-data-cockpit { display: grid; grid-template-columns: minmax(250px, 0.42fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; } .report-data-hero { display: grid; min-height: 260px; align-content: space-between; padding: 22px; border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line)); border-radius: 22px; background: radial-gradient(circle at 80% 5%, color-mix(in srgb, var(--green) 16%, transparent), transparent 42%), linear-gradient(145deg, #123128, #0f2a23); color: #fff; } .report-data-hero span, .report-data-hero p, .report-data-meter small { color: #a8c5ba; } .report-data-hero span { font-size: 12px; font-weight: 900; letter-spacing: 0.35px; text-transform: uppercase; } .report-data-hero h2 { margin: 10px 0 8px; font-size: 42px; line-height: 1; } .report-data-hero p { margin: 0; font-size: 11px; line-height: 1.55; } .report-data-meter { display: grid; width: 108px; height: 108px; place-items: center; border-radius: 28px; background: radial-gradient(circle at center, #123128 0 54%, transparent 55%), conic-gradient(#5bcca0 var(--value), rgba(255, 255, 255, 0.16) 0); } .report-data-meter strong, .report-data-meter small { grid-area: 1 / 1; display: block; } .report-data-meter strong { margin-top: -8px; font-size: 24px; } .report-data-meter small { margin-top: 42px; font-size: 11px; font-weight: 900; text-transform: uppercase; } .report-parser-panel { min-width: 0; } .report-parser-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 20px 20px; } .report-parser-grid article { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); } .report-parser-grid article > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; } .report-parser-grid strong, .report-parser-grid small, .report-parser-grid p { display: block; } .report-parser-grid strong { font-size: 12px; } .report-parser-grid small { color: var(--muted); font-size: 11.5px; line-height: 1.4; } .report-parser-grid p { margin: 11px 0 6px; color: var(--green); font-size: 12px; font-weight: 850; line-height: 1.45; } .report-v2-panel { margin-bottom: 16px; } .report-v2-grid { display: grid; grid-template-columns: 0.8fr 0.9fr 1.35fr; gap: 12px; padding: 0 20px 18px; } .report-v2-hero, .report-v2-import, .report-v2-form, .report-v2-recent { border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); } .report-v2-hero { display: grid; align-content: space-between; min-height: 250px; padding: 18px; background: radial-gradient(circle at 90% 8%, rgba(103, 210, 169, 0.24), transparent 42%), linear-gradient(145deg, #123128, #0f2a23); color: #fff; } .report-v2-hero span, .report-v2-hero small, .report-v2-hero p { color: #b7d1c7; } .report-v2-hero span, .report-v2-form h3, .report-v2-import h3 { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .report-v2-hero strong { display: block; margin: 12px 0 6px; font-size: 48px; line-height: 1; } .report-v2-hero p, .report-v2-import p, .report-v2-hero small { margin: 0; font-size: 11px; line-height: 1.55; } .report-v2-import, .report-v2-form { padding: 16px; } .report-v2-import h3, .report-v2-form h3 { color: var(--green); } .report-v2-import p { margin: 10px 0 14px; color: var(--muted); } .report-v2-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 13px 0; } .report-v2-form-grid label span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11.5px; font-weight: 850; text-transform: uppercase; } .report-v2-form-grid input, .report-v2-form-grid select, .report-v2-form-grid textarea { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: 12px; } .report-v2-form-grid textarea { min-height: 120px; padding: 10px; resize: vertical; line-height: 1.45; } .report-v2-parser { grid-column: span 2; } .report-v2-form-grid .checkbox-row { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.45; } .report-v2-form-grid .checkbox-row input { width: auto; min-height: auto; margin-top: 2px; } .file-drop { display: grid; gap: 6px; padding: 18px; border: 1px dashed rgba(18, 102, 79, 0.28); border-radius: 16px; background: rgba(255, 255, 255, 0.62); cursor: pointer; } .file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .file-drop span { color: var(--green); font-size: 13px; font-weight: 900; } .file-drop small { color: var(--muted); font-size: 12px; line-height: 1.45; } .report-v2-recent { margin: 0 20px 20px; padding: 15px; } .report-v2-recent > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .report-v2-recent strong, .report-v2-recent small { display: block; } .report-v2-recent small { color: var(--muted); font-size: 12px; } .report-v2-table-wrap { overflow-x: auto; } .report-v2-table-wrap table { min-width: 780px; } .report-queue-panel { margin-bottom: 16px; } .report-queue-overview { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: 12px; padding: 0 20px 14px; } .report-queue-overview article, .report-queue-form, .report-queue-item { border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); } .report-queue-overview article { padding: 17px; } .report-queue-overview article span { color: var(--muted); font-size: 11.5px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .report-queue-overview article strong { display: block; margin: 8px 0 4px; color: var(--green); font-size: 40px; line-height: 1; } .report-queue-overview article p, .report-queue-overview article small { display: block; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; } .report-queue-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .report-queue-pill { display: grid; align-content: center; min-height: 78px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; } .report-queue-pill strong { color: var(--green); font-size: 24px; line-height: 1; } .report-queue-pill.approved strong { color: var(--green); } .report-queue-pill.error strong { color: var(--red); } .report-queue-pill.review strong { color: var(--amber); } .report-queue-form { margin: 0 20px 14px; padding: 16px; } .report-queue-list { display: grid; gap: 10px; padding: 0 20px 20px; } .report-queue-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px; border-left: 5px solid rgba(18, 102, 79, 0.16); } .report-queue-item.review { border-left-color: var(--amber); } .report-queue-item.approved { border-left-color: var(--green); } .report-queue-item.error { border-left-color: var(--red); } .report-queue-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .report-queue-main > div { min-width: 0; } .report-queue-main strong, .report-queue-main small, .report-queue-main p, .report-queue-main em { display: block; } .report-queue-main strong { color: var(--ink); font-size: 14px; } .report-queue-main small, .report-queue-main p, .report-queue-main em { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; } .report-queue-main em { color: var(--green); font-style: normal; font-weight: 800; } .report-queue-error { color: var(--red) !important; } .report-queue-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .report-expectations-panel { margin-bottom: 16px; } .report-expectations-grid { display: grid; grid-template-columns: 0.78fr 0.95fr 1.28fr; gap: 12px; padding: 0 20px 18px; } .report-expectations-hero { display: grid; align-content: space-between; min-height: 246px; padding: 18px; border: 1px solid rgba(115, 86, 31, 0.18); border-radius: 18px; background: radial-gradient(circle at 85% 8%, rgba(255, 190, 88, 0.28), transparent 42%), linear-gradient(145deg, #2f2514, #113026); color: #fff; } .report-expectations-hero span, .report-expectations-hero small, .report-expectations-hero p { color: rgba(247, 238, 212, 0.78); } .report-expectations-hero span { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .report-expectations-hero strong { display: block; margin: 12px 0 6px; font-size: 46px; line-height: 1; } .report-expectations-hero p, .report-expectations-hero small { margin: 0; font-size: 11px; line-height: 1.55; } .report-expectation-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) 150px minmax(280px, 1fr); gap: 12px; align-items: stretch; margin: 0 20px 18px; padding: 14px; border: 1px solid var(--line); border-left: 5px solid #cbd7d1; border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(245,250,247,0.9)); } .report-expectation-panel.positive { border-left-color: var(--green); } .report-expectation-panel.neutral { border-left-color: var(--amber); } .report-expectation-panel.negative { border-left-color: var(--red); } .report-expectation-main span, .report-expectation-main strong, .report-expectation-main p { display: block; } .report-expectation-main > span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .report-expectation-main strong { margin-top: 5px; font-size: 17px; letter-spacing: -0.4px; } .report-expectation-main p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; } .report-expectation-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .report-expectation-flags span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: 0; text-transform: none; } .report-expectation-score { display: grid; place-items: center; padding: 14px; border: 1px solid rgba(19, 111, 86, 0.18); border-radius: 16px; background: radial-gradient(circle at 50% 10%, rgba(101, 199, 162, 0.26), transparent 48%), var(--card); text-align: center; } .report-expectation-score strong { color: var(--green); font-size: 30px; letter-spacing: -1px; } .report-expectation-score small { color: var(--muted); font-size: 11.5px; font-weight: 850; text-transform: uppercase; } .report-expectation-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .report-expectation-reasons article { min-width: 0; padding: 10px; border: 1px solid var(--line); border-left: 4px solid #cbd7d1; border-radius: 13px; background: var(--card); } .report-expectation-reasons article.positive { border-left-color: var(--green); } .report-expectation-reasons article.negative { border-left-color: var(--red); } .report-expectation-reasons span, .report-expectation-reasons strong, .report-expectation-reasons small { display: block; } .report-expectation-reasons span { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; } .report-expectation-reasons strong { margin-top: 4px; font-size: 12px; } .report-expectation-reasons small { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.35; } .report-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); } .report-metric { min-height: 112px; padding: 17px; background: var(--card); } .report-metric span, .report-metric strong, .report-metric small { display: block; } .report-metric span { color: var(--muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; } .report-metric strong { margin-top: 9px; font-size: 17px; letter-spacing: -0.4px; } .report-metric small { margin-top: 6px; color: var(--muted); font-size: 11.5px; line-height: 1.35; } .report-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 20px 6px; } .report-why-grid > div { padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid #cbd7d1; border-radius: 14px; background: var(--surface-soft); } .report-why-grid > div.beat { border-left-color: var(--green-2, #1f8a6b); } .report-why-grid > div.miss { border-left-color: var(--red, #bd5558); } .report-why-grid span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: 0.45px; text-transform: uppercase; } .report-why-grid p { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.5; } @media (max-width: 700px) { .report-why-grid { grid-template-columns: 1fr; } } .report-reading-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 20px 18px; } .report-reading-grid article { padding: 14px; border: 1px solid var(--line); border-left: 4px solid #cbd7d1; border-radius: 17px; background: var(--card); } .report-reading-grid article.positive { border-left-color: var(--green); } .report-reading-grid article.neutral { border-left-color: var(--amber); } .report-reading-grid article.negative { border-left-color: var(--red); } .report-reading-grid span, .report-reading-grid strong { display: block; } .report-reading-grid span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: 0.45px; text-transform: uppercase; } .report-reading-grid strong { margin-top: 6px; color: var(--ink); font-size: 13px; } .report-reading-grid p { margin: 8px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; } .report-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid var(--line); background: var(--line); } .report-highlights div { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 16px; background: var(--surface-soft); } .report-highlights span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 900; } .report-highlights p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .model-weights { padding: 8px 20px 16px; } .model-note { display: grid; gap: 5px; margin: 0 20px 20px; padding: 13px; border-radius: 13px; background: var(--surface-soft); } .model-note strong { font-size: 11px; } .model-note span { color: var(--muted); font-size: 11.5px; line-height: 1.45; } .model-signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; } .model-signal-list { display: grid; gap: 1px; background: var(--line); } .model-signal-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 13px 16px; background: var(--card); cursor: pointer; transition: background 150ms ease; } .model-signal-item:hover { background: var(--surface-soft); } .model-signal-item strong, .model-signal-item small { display: block; } .model-signal-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } .model-signal-item small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; } .risk-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); } .risk-card { display: grid; gap: 13px; padding: 17px; background: var(--card); cursor: pointer; } .risk-card > div:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; } .risk-card > div:first-child strong, .risk-card > div:first-child small { display: block; } .risk-card > div:first-child strong { font-size: 12px; } .risk-card > div:first-child small { margin-top: 4px; color: var(--muted); font-size: 11.5px; } .risk-score { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface-soft); } .risk-score strong { font-size: 24px; letter-spacing: -0.8px; } .risk-score span { color: var(--muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; } .risk-card.negative .risk-score { background: var(--red-soft); color: var(--red); } .risk-card.neutral .risk-score { background: var(--amber-soft); color: var(--amber); } .risk-card.positive .risk-score { background: var(--green-soft); color: var(--green); } .risk-card p { margin: 0; color: #596860; font-size: 12px; line-height: 1.5; } .reports-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: 16px; margin-bottom: 16px; } .report-coverage-panel { margin-bottom: 16px; } .report-coverage-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .report-coverage-stats article { padding: 16px 18px; background: var(--card); } .report-coverage-stats strong, .report-coverage-stats span, .report-coverage-stats small { display: block; } .report-coverage-stats strong { color: var(--green); font-size: 22px; letter-spacing: -0.7px; } .report-coverage-stats span { margin-top: 4px; font-size: 12px; font-weight: 850; text-transform: uppercase; } .report-coverage-stats small { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; } .report-coverage-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 20px; } .report-coverage-list article { padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); } .report-coverage-list article.pending { border-color: #d8dcc6; background: #fffdf5; } .report-coverage-list article.estimated { border-color: #d9e3dd; } .report-coverage-list article > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; margin-bottom: 10px; } .report-coverage-list strong, .report-coverage-list small, .report-coverage-list p { display: block; } .report-coverage-list p { margin: 10px 0 6px; font-size: 11px; font-weight: 850; } .report-coverage-list small { color: var(--muted); font-size: 11px; line-height: 1.45; } .report-truth-coverage { margin-bottom: 16px; overflow: hidden; } .report-truth-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 20px 16px; } .report-truth-summary article { min-width: 0; padding: 14px; border: 1px solid rgba(19, 111, 86, 0.14); border-radius: 18px; background: radial-gradient(circle at 100% 0%, rgba(27, 116, 90, 0.12), transparent 32%), var(--surface-soft); } .report-truth-summary strong, .report-truth-summary span, .report-truth-summary small { display: block; } .report-truth-summary strong { color: var(--green); font-size: 24px; letter-spacing: -0.7px; } .report-truth-summary span { margin-top: 4px; color: var(--ink); font-size: 12px; font-weight: 850; } .report-truth-summary small { margin-top: 6px; color: var(--muted); font-size: 11.5px; line-height: 1.45; } .report-truth-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 20px 18px; } .report-truth-list article { min-width: 0; padding: 13px; border: 1px solid var(--line); border-left: 4px solid #cbd7d1; border-radius: 17px; background: var(--card); } .report-truth-list article.positive { border-left-color: var(--green); } .report-truth-list article.neutral { border-left-color: var(--amber); } .report-truth-list article.negative { border-left-color: var(--red); } .report-truth-list article > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; } .report-truth-list strong, .report-truth-list small, .report-truth-list p { display: block; } .report-truth-list strong { color: var(--ink); font-size: 12px; } .report-truth-list p { margin: 10px 0 6px; color: var(--ink); font-size: 12px; line-height: 1.45; } .report-truth-list small { color: var(--muted); font-size: 11.5px; line-height: 1.4; } .report-reliability-matrix, .report-ops-panel, .report-company-status-panel, .ai-safety-panel, .next-steps-panel { margin-bottom: 16px; } .report-reliability-grid, .report-ops-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 20px 18px; } .report-reliability-grid article, .report-ops-grid article { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); } .report-reliability-grid article.positive { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); } .report-reliability-grid article.neutral { border-color: color-mix(in srgb, var(--amber) 28%, var(--line)); } .report-reliability-grid article.negative { border-color: color-mix(in srgb, var(--red) 24%, var(--line)); } .report-reliability-grid article.warning { border-color: #d9d0a9; background: #fffdf5; } .report-reliability-grid strong, .report-reliability-grid small, .report-ops-grid strong, .report-ops-grid small { display: block; } .report-reliability-grid strong, .report-ops-grid strong { color: var(--ink); font-size: 13px; font-weight: 950; } .report-reliability-grid small, .report-ops-grid small { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.45; } .report-mini-tickers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .report-mini-tickers button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; font-size: 11.5px; font-weight: 900; } .report-mini-tickers em { align-self: center; color: var(--muted); font-size: 11.5px; font-style: normal; font-weight: 900; } .report-ops-grid article { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; } .report-ops-grid article span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 950; } .report-status-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 0 20px 14px; } .report-status-controls > div { display: grid; gap: 2px; } .report-status-controls strong { color: var(--ink); font-size: 18px; font-weight: 950; } .report-status-controls small { color: var(--muted); font-size: 12px; } .report-status-controls .filter-select { min-width: min(320px, 100%); } .report-status-table-wrap { overflow-x: auto; padding: 0 20px 18px; } .report-status-table { width: 100%; min-width: 1080px; border-collapse: separate; border-spacing: 0 8px; } .report-status-table th { padding: 0 13px 5px; color: var(--muted); font-size: 11.5px; font-weight: 950; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; } .report-status-table td { padding: 13px; border-top: 1px solid color-mix(in srgb, var(--green) 10%, var(--line)); border-bottom: 1px solid color-mix(in srgb, var(--green) 10%, var(--line)); background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--surface-soft) 88%, transparent)), var(--card); color: var(--ink); font-size: 11px; line-height: 1.45; vertical-align: top; transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; } .report-status-table tr:hover td { border-color: color-mix(in srgb, var(--green) 22%, var(--line)); box-shadow: 0 14px 34px rgba(18, 102, 79, 0.08); transform: translateY(-1px); } .report-status-table td:first-child { border-left: 1px solid color-mix(in srgb, var(--green) 10%, var(--line)); border-radius: 17px 0 0 17px; } .report-status-table td:last-child { border-right: 1px solid color-mix(in srgb, var(--green) 10%, var(--line)); border-radius: 0 17px 17px 0; } .report-status-table td > strong, .report-status-table td > small { display: block; } .report-status-table td > small, .report-status-table .company-copy small { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.4; } .ai-safety-grid, .next-steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 20px 18px; } .ai-safety-grid article, .next-steps-grid article { position: relative; overflow: hidden; min-width: 0; padding: 15px; border: 1px solid color-mix(in srgb, var(--green) 14%, var(--line)); border-radius: 20px; background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--surface-soft) 88%, transparent)); box-shadow: var(--shadow); transition: transform var(--motion-medium) ease, border-color var(--motion-medium) ease, box-shadow var(--motion-medium) ease; } .ai-safety-grid article:hover, .next-steps-grid article:hover { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); box-shadow: 0 20px 50px rgba(18, 102, 79, 0.11); transform: translateY(-2px); } .ai-safety-grid article span, .next-steps-grid article span { display: inline-grid; min-width: 30px; height: 30px; place-items: center; padding: 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--green-soft) 78%, var(--card)); color: var(--green); font-size: 11.5px; font-weight: 950; letter-spacing: 0.05em; text-transform: uppercase; } .ai-safety-grid article strong, .next-steps-grid article strong, .ai-safety-grid article small, .next-steps-grid article small { position: relative; z-index: 1; display: block; } .ai-safety-grid article strong, .next-steps-grid article strong { margin-top: 12px; color: var(--ink); font-size: 13px; font-weight: 950; } .ai-safety-grid article small, .next-steps-grid article small { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; } .report-main-card .report-countdown { margin-top: 4px; } .report-countdown.large .countdown-grid strong { font-size: 26px; } .integration-list { padding: 8px 20px 18px; } .integration-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); } .integration-row:last-child { border-bottom: 0; } .integration-row > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 850; } .integration-row.done > span { background: var(--green-soft); color: var(--green); } .integration-row strong, .integration-row small { display: block; } .integration-row strong { font-size: 12px; } .integration-row small { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.45; } .report-card-list { display: grid; gap: 12px; padding: 20px; } .report-card { padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); cursor: pointer; transition: 160ms ease; } .report-card:hover { border-color: #c8ded4; background: var(--card); box-shadow: var(--shadow); } .report-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; } .report-card-head strong, .report-card-head small { display: block; } .report-card-head strong { font-size: 12px; } .report-card-head small { margin-top: 4px; color: var(--muted); font-size: 11.5px; } .mini-countdown { display: grid; grid-template-columns: repeat(3, 64px) minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 13px; } .mini-countdown span { display: grid; min-height: 46px; place-items: center; border-radius: 11px; background: var(--card); } .mini-countdown b, .mini-countdown small { display: block; } .mini-countdown b { font-size: 15px; } .mini-countdown small { margin-top: -5px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; } .mini-countdown em { color: var(--muted); font-size: 11.5px; font-style: normal; line-height: 1.4; } .report-card-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 13px; } .report-card-metrics span { padding: 10px; border-radius: 11px; background: var(--card); } .report-card-metrics b, .report-card-metrics small { display: block; } .report-card-metrics b { font-size: 11px; } .report-card-metrics small { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; } .report-card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #e2e9e5; } .report-card-source { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 9px; border-radius: 13px; background: var(--surface-soft); } .report-card-source small { min-width: 0; color: var(--muted); font-size: 11px; line-height: 1.35; } .news-timeline { display: grid; gap: 1px; background: var(--line); } .news-timeline-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; padding: 17px; background: var(--card); cursor: pointer; transition: background 150ms ease; } .news-timeline-item:hover { background: var(--surface-soft); } .news-line-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; } .news-timeline-item h3 { margin: 8px 0 6px; font-size: 13px; line-height: 1.35; } .news-timeline-item p { margin: 0; color: #5b6961; font-size: 12px; line-height: 1.5; } .news-timeline-item small { display: block; margin-top: 8px; color: var(--muted); font-size: 11.5px; } .impact-chip { padding: 4px 7px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); } .impact-chip.positive { background: var(--green-soft); color: var(--green); } .impact-chip.negative { background: var(--red-soft); color: var(--red); } .next-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); } .next-steps-grid div { padding: 18px; background: var(--card); } .next-steps-grid strong, .next-steps-grid small { display: block; } .next-steps-grid strong { font-size: 12px; } .next-steps-grid small { margin-top: 7px; color: var(--muted); font-size: 11.5px; line-height: 1.45; } .event-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); } .event-row:last-child { border-bottom: 0; } .event-date { display: grid; height: 34px; place-items: center; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 850; } .event-row strong, .event-row small { display: block; } .event-row strong { font-size: 12px; } .event-row small { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.45; } .allocation-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 28px; padding: 24px; } .allocation-grid > .donut { flex: 0 0 auto; } .allocation-grid > .legend-list { flex: 1 1 210px; min-width: 0; } .donut { position: relative; width: 190px; height: 190px; margin: auto; border-radius: 50%; background: conic-gradient(#1b745a 0 23%, #4ca987 23% 40%, #8bcbb3 40% 54%, #d1a74b 54% 75%, #7a8f86 75% 91%, #bdc9c3 91% 100%); } .donut::after { position: absolute; inset: 32px; border-radius: 50%; background: var(--card); content: ""; } .donut-center { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; } .donut-center strong, .donut-center small { display: block; } .donut-center strong { font-size: 22px; } .donut-center small { margin-top: 4px; color: var(--muted); font-size: 11.5px; } .legend-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px 18px; } .legend-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; min-width: 0; font-size: 12px; } .legend-item > span:nth-child(2) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .legend-item > strong { white-space: nowrap; } .legend-color { width: 8px; height: 8px; border-radius: 3px; } .legend-item span:nth-child(2) { color: #57675f; } .legend-item strong { font-size: 11px; } .sector-exposure { padding: 0 24px 22px; } .sector-exposure h3 { margin: 0 0 13px; color: var(--muted); font-size: 12px; } .progress-row { display: grid; gap: 8px; margin: 13px 0; } .progress-row div { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; } .progress-row strong { font-size: 12px; } .progress-track { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); } .progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--green-2); } .progress-track i.neutral { background: var(--amber); } .progress-track i.negative { background: var(--red); } .data-message { margin-bottom: 16px; padding: 13px 16px; border: 1px solid #cde8dc; border-radius: 14px; background: #effaf5; color: var(--green); font-size: 11px; font-weight: 750; } .data-foundation-panel { position: relative; overflow: hidden; margin-bottom: 16px; } .data-foundation-panel::before { position: absolute; top: -120px; right: 0; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--green) 16%, transparent), transparent 68%); pointer-events: none; content: ""; } .data-foundation-panel > * { position: relative; z-index: 1; } .data-foundation-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; } .ghost-button:disabled { cursor: wait; opacity: 0.62; } .data-foundation-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; margin: 20px; padding: 18px; border: 1px solid color-mix(in srgb, var(--green) 22%, var(--line)); border-radius: 22px; background: radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--green) 14%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--surface-soft) 90%, transparent), var(--card)); } .foundation-score { display: grid; width: 112px; height: 112px; place-items: center; border-radius: 28px; background: radial-gradient(circle at center, var(--card) 0 52%, transparent 54%), conic-gradient(var(--green-2) var(--score-angle, 252deg), #e5eee8 0); box-shadow: inset 0 0 0 1px var(--line), 0 16px 32px rgba(15, 35, 27, 0.08); } .foundation-score.positive { --score-angle: 302deg; } .foundation-score.neutral { --score-angle: 223deg; } .foundation-score.negative { --score-angle: 137deg; } .foundation-score strong, .foundation-score span, .foundation-score small { grid-area: 1 / 1; } .foundation-score strong { margin-top: -18px; color: var(--green); font-size: 34px; line-height: 1; } .foundation-score span { margin: 9px 0 0 44px; color: var(--muted); font-size: 12px; font-weight: 850; } .foundation-score small { margin-top: 52px; color: var(--muted); font-size: 11.5px; font-weight: 850; text-align: center; text-transform: uppercase; } .foundation-score.neutral strong { color: var(--amber); } .foundation-score.negative strong { color: var(--red); } .data-foundation-hero h3 { margin: 2px 0 8px; font-size: 20px; letter-spacing: -0.55px; } .data-foundation-hero p { max-width: 920px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; } .data-foundation-hero small { display: inline-flex; margin-top: 10px; color: var(--green); font-size: 12px; font-weight: 850; } .data-refresh-error { margin: 0 20px 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--red) 26%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--red) 8%, var(--card)); color: var(--red); font-size: 11px; font-weight: 800; } .data-foundation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 20px 20px; } .data-foundation-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 12px 24px rgba(15, 35, 27, 0.04); } .data-foundation-card.live { border-color: color-mix(in srgb, var(--green) 34%, var(--line)); } .data-foundation-card.delayed, .data-foundation-card.mixed, .data-foundation-card.proxy { border-color: color-mix(in srgb, var(--amber) 28%, var(--line)); } .data-foundation-card.demo, .data-foundation-card.missing { border-color: color-mix(in srgb, var(--red) 16%, var(--line)); } .data-foundation-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; } .foundation-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 14px; background: var(--green); color: #fff; font-size: 12px; font-weight: 950; letter-spacing: -0.25px; } .data-foundation-card-head strong, .data-foundation-card-head small { display: block; } .data-foundation-card-head strong { font-size: 13px; overflow-wrap: anywhere; } .data-foundation-card-head small { margin-top: 3px; color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; } .data-foundation-card > p { min-height: 48px; margin: 13px 0; color: var(--muted); font-size: 12px; line-height: 1.55; } .data-foundation-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .data-foundation-meta span { min-width: 0; padding: 9px; border-radius: 12px; background: var(--surface-soft); } .data-foundation-meta small, .data-foundation-meta b { display: block; } .data-foundation-meta small { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: 0.25px; text-transform: uppercase; } .data-foundation-meta b { margin-top: 3px; color: var(--green); font-size: 11px; overflow-wrap: anywhere; } .data-foundation-cadence { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 800; } .data-contract-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 20px 20px; } .data-contract-strip div { padding: 13px; border: 1px dashed color-mix(in srgb, var(--green) 28%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--surface-soft) 78%, transparent); } .data-contract-strip strong, .data-contract-strip small { display: block; } .data-contract-strip strong { color: var(--green); font-size: 11px; } .data-contract-strip small { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.45; } .feed-health-panel { margin-bottom: 16px; } .feed-health-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .feed-health-summary article { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.72), transparent 42%), var(--surface-soft); } .feed-health-summary article.positive { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); background-color: color-mix(in srgb, var(--green) 7%, var(--surface-soft)); } .feed-health-summary article.neutral { border-color: color-mix(in srgb, var(--amber) 28%, var(--line)); background-color: color-mix(in srgb, var(--amber) 8%, var(--surface-soft)); } .feed-health-summary article.negative { border-color: color-mix(in srgb, var(--red) 22%, var(--line)); background-color: color-mix(in srgb, var(--red) 6%, var(--surface-soft)); } .feed-health-summary strong, .feed-health-summary span, .feed-health-summary small { display: block; } .feed-health-summary strong { color: var(--green); font-size: 26px; line-height: 1; } .feed-health-summary span { margin-top: 6px; font-size: 11px; font-weight: 900; } .feed-health-summary small { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.45; } .feed-health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .feed-health-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--surface-soft) 82%, transparent)); box-shadow: 0 12px 24px rgba(15, 35, 27, 0.04); } .feed-health-card.live, .feed-health-card.delayed { border-left: 4px solid var(--green); } .feed-health-card.proxy, .feed-health-card.mixed { border-left: 4px solid var(--amber); } .feed-health-card.demo, .feed-health-card.missing { border-left: 4px solid var(--red); } .feed-health-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; } .feed-health-head > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 13px; background: var(--green); color: #fff; font-size: 12px; font-weight: 950; } .feed-health-head strong, .feed-health-head small { display: block; overflow-wrap: anywhere; } .feed-health-head strong { font-size: 12px; } .feed-health-head small { margin-top: 3px; color: var(--muted); font-size: 11.5px; } .feed-health-card > p { min-height: 35px; margin: 13px 0; color: var(--green); font-size: 12px; font-weight: 850; line-height: 1.45; } .feed-health-impact, .feed-health-next { padding: 10px; border-radius: 13px; background: rgba(255, 255, 255, 0.55); } .feed-health-next { margin-top: 8px; background: color-mix(in srgb, var(--green) 7%, var(--surface-soft)); } .feed-health-impact strong, .feed-health-impact small, .feed-health-next strong, .feed-health-next small { display: block; } .feed-health-impact strong, .feed-health-next strong { color: var(--muted); font-size: 11px; font-weight: 950; letter-spacing: 0.25px; text-transform: uppercase; } .feed-health-impact small, .feed-health-next small { margin-top: 4px; color: var(--text); font-size: 11.5px; line-height: 1.45; } .api-preflight-panel { margin-bottom: 16px; } .api-preflight-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .api-preflight-summary article { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); } .api-preflight-summary article.positive { border-color: color-mix(in srgb, var(--green) 30%, var(--line)); background: color-mix(in srgb, var(--green) 8%, var(--surface-soft)); } .api-preflight-summary article.neutral { border-color: color-mix(in srgb, var(--amber) 30%, var(--line)); background: color-mix(in srgb, var(--amber) 9%, var(--surface-soft)); } .api-preflight-summary article.negative { border-color: color-mix(in srgb, var(--red) 24%, var(--line)); background: color-mix(in srgb, var(--red) 7%, var(--surface-soft)); } .api-preflight-summary strong, .api-preflight-summary span, .api-preflight-summary small { display: block; } .api-preflight-summary strong { color: var(--green); font-size: 25px; line-height: 1; } .api-preflight-summary span { margin-top: 6px; font-size: 11px; font-weight: 900; } .api-preflight-summary small { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.45; } .api-preflight-grid { display: grid; gap: 8px; } .api-preflight-row { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(220px, 0.9fr) 82px; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 15px; background: var(--card); } .api-preflight-row.positive { border-left-color: var(--green); } .api-preflight-row.negative { border-left-color: var(--red); } .api-preflight-row > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 9px; align-items: center; } .api-dot { grid-row: span 2; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 18%, transparent); } .api-preflight-row.positive .api-dot { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent); } .api-preflight-row.negative .api-dot { background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 16%, transparent); } .api-preflight-row strong, .api-preflight-row b, .api-preflight-row small, .api-preflight-row em { display: block; } .api-preflight-row strong, .api-preflight-row b { font-size: 11px; } .api-preflight-row small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .api-preflight-row em { color: var(--muted); font-size: 11.5px; font-style: normal; font-weight: 850; text-align: right; } .source-audit-panel { margin-bottom: 16px; } .source-audit-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .source-audit-summary article { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); } .source-audit-summary article.positive { border-color: rgba(46, 156, 118, 0.28); background: rgba(232, 247, 240, 0.78); } .source-audit-summary article.neutral { border-color: rgba(199, 148, 58, 0.24); background: rgba(255, 247, 225, 0.74); } .source-audit-summary article.negative { border-color: rgba(203, 88, 83, 0.22); background: rgba(255, 240, 238, 0.68); } .source-audit-summary strong, .source-audit-summary span, .source-audit-summary small { display: block; } .source-audit-summary strong { color: var(--green); font-size: 24px; font-weight: 900; } .source-audit-summary span { margin-top: 2px; font-size: 11px; font-weight: 850; } .source-audit-summary small { overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .source-audit-grid { display: grid; gap: 8px; } .source-audit-row { display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(112px, 0.6fr)); gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); } .source-audit-row.live, .source-audit-row.delayed { border-left: 4px solid var(--green); } .source-audit-row.proxy, .source-audit-row.mixed { border-left: 4px solid #c7943a; } .source-audit-row.demo, .source-audit-row.missing { border-left: 4px solid #cb5853; } .source-audit-row > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; } .source-audit-row .quality-badge { grid-row: span 2; width: fit-content; } .source-audit-row strong, .source-audit-row b, .source-audit-row small { display: block; } .source-audit-row strong { font-size: 11px; } .source-audit-row b { font-size: 11px; } .source-audit-row small { overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .source-blocker-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .source-blocker-list article { padding: 13px; border: 1px dashed rgba(154, 174, 165, 0.55); border-radius: 16px; background: rgba(255, 255, 255, 0.48); } .source-blocker-list span, .source-blocker-list strong { display: block; } .source-blocker-list span { color: var(--amber); font-size: 11.5px; font-weight: 900; text-transform: uppercase; } .source-blocker-list strong { margin-top: 4px; font-size: 12px; } .source-blocker-list p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .data-quality-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .data-quality-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); } .data-quality-card > div { display: grid; gap: 10px; } .data-quality-card strong { font-size: 13px; } .data-quality-card p { margin: 11px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .data-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 20px; } .upload-card, .action-card { display: grid; gap: 7px; min-height: 126px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: inherit; cursor: pointer; text-align: left; transition: 160ms ease; } .upload-card:hover, .action-card:hover { border-color: #bcd7cc; transform: translateY(-1px); box-shadow: var(--shadow); } .upload-card input { display: none; } .upload-card span, .action-card span { color: var(--green-2); font-size: 11.5px; font-weight: 850; letter-spacing: 0.4px; text-transform: uppercase; } .upload-card strong, .action-card strong { font-size: 14px; } .upload-card small, .action-card small { color: var(--muted); font-size: 12px; line-height: 1.45; } .action-card.danger span { color: var(--red); } .csv-example { margin: 0 20px 20px; padding: 14px; border-radius: 14px; background: var(--surface-soft); } .csv-example strong, .csv-example code { display: block; } .csv-example strong { margin-bottom: 8px; font-size: 11px; } .csv-example code { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.65; } .csv-example code + code { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e1e8e3; } .source-grid { display: grid; gap: 12px; padding: 20px; } .source-card { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); } .source-card div { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .source-card strong, .source-card span, .source-card p, .source-card small { display: block; } .source-card strong { font-size: 12px; } .source-card span { padding: 4px 7px; border-radius: 999px; background: var(--card); color: var(--muted); font-size: 11px; font-weight: 800; } .source-card p { margin: 8px 0 5px; color: var(--green); font-size: 12px; font-weight: 750; } .source-card small { color: var(--muted); font-size: 11.5px; line-height: 1.45; } .source-link { display: inline-flex; width: fit-content; margin-top: 10px; color: var(--green); font-size: 12px; font-weight: 850; text-decoration: none; } .source-link:hover { color: var(--green-2); text-decoration: underline; } .source-link.compact { margin-top: 0; font-size: 11.5px; letter-spacing: 0.2px; text-transform: uppercase; } .source-link.inline { margin-top: 0; font-size: inherit; font-weight: 800; } .legal-rule-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 20px; } .legal-rule-list div { min-height: 132px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); } .legal-rule-list span { display: grid; width: 30px; height: 30px; margin-bottom: 12px; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; font-weight: 850; } .legal-rule-list p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; } .hosting-note { margin: 0 20px 20px; padding: 14px; border: 1px solid #d9e8df; border-radius: 14px; background: var(--surface-soft); color: var(--muted); font-size: 11px; line-height: 1.55; } .hosting-note strong, .hosting-note span, .hosting-note small { display: block; } .hosting-note strong { color: var(--green); } .hosting-note span { font-weight: 850; } .hosting-note small { margin-top: 6px; color: var(--muted); } .readiness-list { padding: 8px 20px 18px; } .todo-list { padding: 8px 20px 18px; } .todo-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .todo-item:last-child { border-bottom: 0; } .todo-item > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 850; } .todo-item.done > span { background: var(--green-soft); color: var(--green); } .todo-item strong, .todo-item small { display: block; } .todo-item strong { font-size: 12px; } .todo-item small { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.45; } .transaction-type { display: inline-block; min-width: 60px; padding: 5px 8px; border-radius: 7px; background: var(--green-soft); color: var(--green); font-size: 11.5px; font-weight: 800; text-align: center; } .transaction-type.sell { background: var(--red-soft); color: var(--red); } .transaction-type.dividend { background: var(--amber-soft); color: #94691e; } .tx-price-mode { display: inline-flex; align-items: center; margin-left: 4px; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--green-soft) 58%, var(--card)); color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; } .tx-price-mode.manual { background: color-mix(in srgb, var(--amber-soft) 76%, var(--card)); color: #94691e; } .tx-toolbar { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; margin: 12px 0 14px; padding: 12px; border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--green-soft) 30%, var(--card)); } .tx-filters { display: flex; flex-wrap: wrap; gap: 8px; } .tx-filters .filter-select { min-width: 150px; } .tx-summary-mini { display: grid; grid-template-columns: repeat(4, minmax(82px, 1fr)); gap: 8px; min-width: min(520px, 100%); } .tx-summary-mini span { display: block; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--green) 10%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--card) 82%, transparent); } .tx-summary-mini b, .tx-summary-mini small { display: block; } .tx-summary-mini b { color: var(--green); font-size: 12px; font-weight: 950; } .tx-summary-mini small { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; } .tx-summary-mini span.selected { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--green-soft) 72%, var(--card)), var(--card)); } .tx-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: min(460px, 100%); } .tx-bulk-bar.import-bulk { margin: 0 0 14px; padding: 10px; border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--green-soft) 22%, var(--card)); } .import-batch-strip { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; padding: 12px; border: 1px solid color-mix(in srgb, var(--purple) 18%, var(--line)); border-radius: 18px; background: radial-gradient(circle at top left, color-mix(in srgb, var(--purple) 13%, transparent), transparent 42%), linear-gradient(135deg, color-mix(in srgb, var(--card) 92%, var(--purple-soft)), var(--card)); box-shadow: var(--shadow-soft); } .import-batch-head, .import-batch-row, .import-after-tags, .import-position-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .import-batch-head { padding-bottom: 2px; } .import-batch-row { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--card) 86%, var(--green-soft)); } .import-batch-row strong, .import-position-row strong { color: var(--ink); font-weight: 950; } .import-batch-row small, .import-position-row small, .import-after-tags { color: var(--muted); font-size: 11px; font-weight: 800; } .import-batch-row > span { display: grid; justify-items: end; color: var(--green); font-weight: 950; white-space: nowrap; } .broker-import-doctor { display: grid; gap: 12px; margin: 0 0 16px; padding: 16px; border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line)); border-radius: 22px; background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--green) 16%, transparent), transparent 44%), linear-gradient(135deg, color-mix(in srgb, var(--card) 90%, var(--green-soft)), var(--card)); } .broker-import-doctor h3 { margin: 3px 0 6px; font-size: clamp(18px, 2vw, 26px); letter-spacing: -.04em; } .broker-import-doctor p { max-width: 820px; margin: 0; color: var(--muted); line-height: 1.55; } .import-position-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; } .import-position-row { padding: 10px; border: 1px solid color-mix(in srgb, var(--line) 85%, var(--green)); border-radius: 14px; background: color-mix(in srgb, var(--card) 90%, #fff); } .import-position-row > span { display: inline-flex; align-items: center; min-width: 0; gap: 8px; } .import-position-row small { display: block; } .import-position-row b { color: var(--green); white-space: nowrap; } .import-after-tags { justify-content: flex-start; flex-wrap: wrap; padding-top: 4px; } .import-after-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 999px; background: color-mix(in srgb, var(--green-soft) 60%, var(--card)); color: var(--green); } .tx-import-selected { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border-radius: 999px; background: color-mix(in srgb, var(--card) 82%, var(--green-soft)); color: var(--green); font-size: 11px; font-weight: 900; } .compact-toggle.danger { border-color: color-mix(in srgb, var(--red) 24%, var(--line)); color: var(--red); background: color-mix(in srgb, var(--red-soft) 48%, var(--card)); } .compact-toggle:disabled { cursor: not-allowed; opacity: .52; } .tx-row-select { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; vertical-align: middle; } .tx-row-select input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .tx-row-select span { width: 18px; height: 18px; border: 1px solid color-mix(in srgb, var(--green) 26%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--card) 90%, var(--green-soft)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); } .tx-row-select input:checked + span { border-color: var(--green); background: linear-gradient(135deg, var(--green), var(--green-2)); box-shadow: 0 8px 18px rgba(18,102,79,.18); } .tx-row-select input:checked + span::after { content: ""; position: absolute; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(4px, 5px) rotate(-45deg); } .tx-actions { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } @media (max-width: 860px) { .tx-toolbar { flex-direction: column; } .tx-summary-mini { grid-template-columns: 1fr 1fr; min-width: 0; } .import-batch-row { align-items: flex-start; flex-direction: column; } .import-batch-row > span { justify-items: start; } .realized-grid { grid-template-columns: 1fr 1fr; } .portfolio-risk-grid { grid-template-columns: 1fr 1fr; } .position-detail-grid { grid-template-columns: 1fr 1fr; } .position-panel-actions { justify-content: flex-start; } } @media (max-width: 560px) { .portfolio-risk-grid, .realized-grid, .position-detail-grid { grid-template-columns: 1fr; } } .text-button { padding: 0; border: 0; background: transparent; color: var(--green); cursor: pointer; font-size: 12px; font-weight: 800; } .text-button.danger { color: var(--red); } .dividend-hero { position: relative; overflow: hidden; padding: 26px; border: 1px solid #294a3e; border-radius: 20px; background: #123128; color: #fff; } .dividend-hero::after { position: absolute; right: -80px; top: -110px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 204, 160, 0.18), transparent 67%); content: ""; } .dividend-hero p { margin: 0; color: #a4b9b1; font-size: 11px; } .dividend-hero h2 { margin: 10px 0 5px; font-size: 35px; letter-spacing: -1.5px; } .dividend-control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; } .dividend-control-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 12px 24px rgba(15, 35, 27, 0.04); } .dividend-control-card > div { display: flex; align-items: center; gap: 9px; } .dividend-control-card strong, .dividend-control-card p { display: block; } .dividend-control-card strong { font-size: 12px; } .dividend-control-card p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .dividend-agenda-section { margin-top: 18px; padding: clamp(18px, 2.4vw, 28px); overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: radial-gradient(circle at 90% -20%, color-mix(in srgb, var(--green) 14%, transparent), transparent 36%), var(--card); box-shadow: var(--shadow); } .section-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .section-heading-row h2 { margin: 5px 0 6px; color: var(--ink); font-size: clamp(23px, 3vw, 36px); letter-spacing: -.045em; } .section-heading-row p { max-width: 720px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; } .dividend-agenda-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .dividend-agenda-card { position: relative; min-width: 0; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, color-mix(in srgb, var(--card) 94%, var(--green) 6%), var(--card)); box-shadow: 0 16px 38px rgba(13, 38, 30, .07); } .dividend-agenda-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--green); content: ""; } .dividend-agenda-card.quality-estimate::before { background: var(--gold); } .dividend-agenda-card.quality-external::before { background: #2f80ed; } .dividend-agenda-card > header, .dividend-agenda-company, .dividend-agenda-card > footer { display: flex; align-items: center; } .dividend-agenda-card > header { justify-content: space-between; gap: 12px; } .dividend-agenda-company { min-width: 0; gap: 11px; } .dividend-agenda-company > span { display: grid; min-width: 0; gap: 2px; } .dividend-agenda-company strong { overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .dividend-agenda-company small, .dividend-agenda-card > footer, .dividend-agenda-card > p { color: var(--muted); } .dividend-agenda-amount { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 17px 0; } .dividend-agenda-amount > span { display: grid; gap: 5px; min-width: 0; padding: 11px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 15px; background: color-mix(in srgb, var(--surface) 75%, transparent); } .dividend-agenda-amount small { color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .dividend-agenda-amount strong { overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .dividend-lifecycle { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 15px; } .dividend-lifecycle::before { position: absolute; top: 19px; right: 16.66%; left: 16.66%; height: 2px; background: var(--line); content: ""; } .dividend-lifecycle-node { position: relative; z-index: 1; display: grid; justify-items: center; min-width: 0; gap: 3px; text-align: center; } .dividend-lifecycle-node i { width: 10px; height: 10px; margin-bottom: 6px; border: 2px solid var(--card); border-radius: 999px; background: var(--line-strong, var(--line)); box-shadow: 0 0 0 2px var(--line); } .dividend-lifecycle-node.past i { background: var(--green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 28%, transparent); } .dividend-lifecycle-node.active i { background: var(--gold); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 16%, transparent); animation: dividendPulse 2.4s ease-in-out infinite; } .dividend-lifecycle-node.tbd i { background: var(--muted); } .dividend-lifecycle-node small { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; } .dividend-lifecycle-node strong { overflow: hidden; max-width: 100%; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .dividend-lifecycle-node em { color: var(--muted); font-size: 11px; font-style: normal; } .dividend-agenda-card > footer { justify-content: space-between; gap: 12px; margin-top: 17px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.45; } .dividend-agenda-card > footer span { min-width: 0; } .dividend-agenda-card > footer b { color: var(--ink); } .dividend-agenda-card > p { margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; } .dividend-ledger-panel { margin-top: 16px; overflow: hidden; } .dividend-ledger-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; } .dividend-ledger-panel > summary::-webkit-details-marker { display: none; } .dividend-ledger-panel > summary span { display: grid; gap: 3px; } .dividend-ledger-panel > summary strong { color: var(--ink); font-size: 14px; } .dividend-ledger-panel > summary small { color: var(--muted); font-size: 12px; } .dividend-ledger-panel > summary b { padding: 8px 11px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 12px; } .dividend-ledger-panel[open] > summary b::before { content: "Zwiń · "; } @keyframes dividendPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } } .mini-source-icon { display: inline-grid; min-width: 34px; height: 28px; place-items: center; padding: 0 8px; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 11.5px; font-weight: 950; } .hero-stats { display: flex; gap: 32px; margin-top: 24px; } .hero-stat strong, .hero-stat small { display: block; } .hero-stat strong { font-size: 16px; } .hero-stat small { margin-top: 5px; color: #8ea69d; font-size: 11.5px; } .bar-chart { display: flex; height: 245px; align-items: flex-end; justify-content: space-around; gap: 13px; padding: 28px 22px 20px; } .bar-column { display: flex; height: 100%; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; } .bar-column strong { color: var(--muted); font-size: 11.5px; } .bar { width: min(42px, 72%); min-height: 4px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #43a981, #17684f); } .bar-column small { color: #8f9a94; font-size: 11px; } .alert-list { padding: 0 20px; } .alert-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--line); } .alert-row:last-child { border-bottom: 0; } .alert-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: var(--green-soft); color: var(--green); font-size: 15px; } .alert-copy strong, .alert-copy small { display: block; } .alert-copy strong { font-size: 11px; } .alert-copy small { margin-top: 5px; color: var(--muted); font-size: 11.5px; } .toggle { position: relative; width: 38px; height: 22px; border: 0; border-radius: 20px; background: #ccd6d0; cursor: pointer; transition: background 160ms ease; } .toggle::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); content: ""; transition: transform 160ms ease; } .toggle.on { background: var(--green-2); } .toggle.on::after { transform: translateX(16px); } .alert-focus-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); } .alert-focus-card.positive { border-color: #c6e4d8; background: #effaf5; } .alert-focus-card.negative { border-color: #efd0d2; background: #fff3f3; } .alert-focus-card > div strong, .alert-focus-card > div p, .alert-focus-card > div small { display: block; } .alert-focus-card > div strong { font-size: 14px; } .alert-focus-card > div p { margin: 8px 0 6px; color: var(--muted); font-size: 11px; line-height: 1.45; } .alert-focus-card > div small { color: var(--muted); font-size: 11.5px; line-height: 1.45; } .alert-focus-card .ghost-button { grid-column: 2; width: max-content; } .alert-event-list { display: grid; gap: 1px; background: var(--line); } .alert-event { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 14px; padding: 16px 18px; background: var(--card); cursor: pointer; transition: background 150ms ease; } .alert-event:hover { background: var(--surface-soft); } .alert-event.high { box-shadow: inset 4px 0 0 var(--red); } .alert-event.medium { box-shadow: inset 4px 0 0 var(--amber); } .alert-event.low { box-shadow: inset 4px 0 0 var(--green-2); } .alert-event-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; } .alert-event-main strong, .alert-event-main p, .alert-event-main small { display: block; } .alert-event-main strong { font-size: 12px; } .alert-event-main p { margin: 6px 0 5px; color: var(--muted); font-size: 12px; line-height: 1.45; } .alert-event-main small { color: var(--muted); font-size: 11.5px; line-height: 1.45; } .alert-event-side { display: grid; align-content: center; justify-items: end; gap: 8px; } .priority-chip { padding: 5px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; } .priority-chip.high { background: var(--red-soft); color: var(--red); } .priority-chip.medium { background: var(--amber-soft); color: var(--amber); } .priority-chip.low { background: var(--green-soft); color: var(--green); } .alert-event-side small { color: var(--muted); font-size: 11px; text-align: right; } .modal-backdrop { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 20px; background: rgba(9, 25, 19, 0.48); opacity: 0; visibility: hidden; backdrop-filter: blur(5px); transition: 180ms ease; } .modal-backdrop.open { opacity: 1; visibility: visible; } .modal { width: min(520px, 100%); max-height: calc(100vh - 30px); overflow-y: auto; padding: 25px; border-radius: 20px; background: var(--card); box-shadow: 0 30px 80px rgba(8, 31, 22, 0.25); transform: translateY(12px) scale(0.98); transition: 180ms ease; } .modal-backdrop.open .modal { transform: translateY(0) scale(1); } .modal.wide-modal { width: min(780px, 100%); } .broker-import-merge-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 0 0 18px; padding: 14px; border: 1px solid color-mix(in srgb, var(--green-2) 22%, var(--line)); border-radius: 20px; background: linear-gradient(145deg, color-mix(in srgb, var(--green-soft) 42%, var(--card)), var(--card)); } .broker-import-merge-summary article { display: grid; gap: 3px; min-width: 0; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--card) 86%, transparent); } .broker-import-merge-summary article span, .broker-import-merge-summary article small { color: var(--muted); font-size: 12px; } .broker-import-merge-summary article span { font-weight: 850; letter-spacing: .45px; text-transform: uppercase; } .broker-import-merge-summary article strong { color: var(--ink); font-size: 21px; font-variant-numeric: tabular-nums; } .broker-import-merge-summary article.positive strong { color: var(--green-2); } .broker-import-merge-summary > p { grid-column: 1 / -1; margin: 3px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.55; } .broker-import-merge-summary > p strong { color: var(--ink); } .broker-import-all-current { margin: 0 0 18px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--green-2) 22%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--green-soft) 40%, var(--card)); color: var(--green-2); font-size: 12px; font-weight: 800; } @media (max-width: 680px) { .broker-import-merge-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 11px; } } .broker-import-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 18px; } .broker-import-card { display: flex; flex-direction: column; gap: 5px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--line) 78%, var(--green-soft)); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--green-soft) 18%, var(--card))), var(--card); box-shadow: 0 12px 28px rgba(16, 40, 31, 0.06); } .broker-import-card span { color: var(--muted); font-size: 12px; font-weight: 850; letter-spacing: .55px; text-transform: uppercase; } .broker-import-card strong { color: var(--ink); font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.35px; } .broker-import-card small { color: var(--muted); font-size: 11px; } .broker-import-card.positive strong { color: var(--green-2); } .broker-import-card.negative strong { color: var(--red); } .broker-import-card.accent { border-color: color-mix(in srgb, var(--amber) 24%, var(--line)); background: linear-gradient(145deg, var(--amber-soft), color-mix(in srgb, var(--card) 80%, var(--amber-soft))); } .broker-import-losses, .broker-import-warning { margin: 0 0 16px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--red) 22%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--red-soft) 64%, var(--card)); color: var(--ink); } .broker-import-losses strong { display: block; margin-bottom: 8px; color: var(--red); font-size: 12px; letter-spacing: .45px; text-transform: uppercase; } .broker-import-losses ul { display: grid; gap: 7px; margin: 0; padding-left: 18px; } .broker-import-losses li { font-size: 12px; } .broker-import-losses small { display: block; color: var(--muted); margin-top: 2px; } .import-textarea { width: 100%; min-height: 190px; margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--card) 90%, transparent), color-mix(in srgb, var(--green-soft) 18%, var(--card))), var(--card); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58); font: 800 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; resize: vertical; } .import-textarea:focus { border-color: color-mix(in srgb, var(--green) 42%, var(--line)); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-soft) 64%, transparent), inset 0 1px 0 rgba(255, 255, 255, .72); } .check-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--green-soft) 18%, var(--card)); color: var(--text); font-weight: 850; } .modal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; } .eyebrow { color: var(--green-2); font-size: 11.5px; font-weight: 850; letter-spacing: 0.8px; } .modal-header h2 { margin: 6px 0 0; font-size: 22px; letter-spacing: -0.6px; } .close-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--muted); cursor: pointer; font-size: 22px; line-height: 1; } body.news-modal-open { overflow: hidden; } .news-modal-backdrop { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: clamp(14px, 3vw, 34px); background: radial-gradient(circle at 20% 12%, rgba(94, 234, 212, 0.18), transparent 30%), radial-gradient(circle at 88% 4%, rgba(39, 174, 96, 0.18), transparent 26%), rgba(8, 23, 18, 0.68); opacity: 0; visibility: hidden; backdrop-filter: blur(10px); transition: opacity 180ms ease, visibility 180ms ease; } .news-modal-backdrop.open { opacity: 1; visibility: visible; } .news-modal { position: relative; width: min(980px, 100%); max-height: calc(100vh - 44px); overflow-y: auto; scrollbar-gutter: stable; padding: clamp(20px, 3vw, 34px); border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 28px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(243, 249, 245, 0.96)), var(--card); box-shadow: 0 34px 90px rgba(3, 20, 13, 0.34); transform: translateY(16px) scale(0.985); transition: transform 180ms ease; } .news-modal::before { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(255, 255, 255, 0.74), transparent 22%, transparent 78%, rgba(103, 210, 169, 0.12)), radial-gradient(circle at 12% 0%, rgba(103, 210, 169, 0.18), transparent 30%); content: ""; pointer-events: none; } .news-modal-backdrop.open .news-modal { animation: newsModalPop 260ms cubic-bezier(0.16, 0.78, 0.24, 1) both; transform: translateY(0) scale(1); } .news-modal-header { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .news-modal-header h2 { max-width: 720px; margin: 7px 0 0; font-size: clamp(22px, 3vw, 34px); line-height: 1.08; letter-spacing: -1px; } .news-modal-controls { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .compact-icon { width: 36px; height: 36px; justify-content: center; padding: 0; border-radius: 11px; font-size: 17px; } .news-modal-counter { position: relative; z-index: 1; display: inline-flex; margin: 16px 0 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: var(--muted); font-size: 12px; font-weight: 850; letter-spacing: 0.08em; } .news-modal-content { position: relative; z-index: 1; margin-top: 20px; } .news-modal-content h3 { max-width: 860px; margin: 14px 0 18px; color: var(--ink); font-size: clamp(21px, 3vw, 36px); font-weight: 950; line-height: 1.12; letter-spacing: -1.1px; text-wrap: balance; } .news-modal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .news-modal-meta > span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.76); color: var(--muted); font-size: 12px; font-weight: 750; } .news-modal-meta .badge, .news-modal-meta .impact-chip { border: 0; } .news-modal-company { display: flex; align-items: center; gap: 13px; margin: 0 0 18px; padding: 13px; border: 1px solid color-mix(in srgb, var(--green) 13%, var(--line)); border-radius: 20px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-accent) 12%, transparent), transparent 32%), rgba(255, 255, 255, 0.76); box-shadow: 0 14px 38px rgba(18, 102, 79, 0.08); } .news-modal-company strong { display: block; color: var(--ink); font-size: 13px; } .news-modal-company small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; } .news-modal-brief-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; } .news-modal-mini-card { min-height: 112px; padding: 14px; border: 1px solid color-mix(in srgb, var(--green) 11%, var(--line)); border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(239, 248, 244, 0.68)); box-shadow: 0 12px 30px rgba(18, 102, 79, 0.06); transition: transform var(--motion-medium) ease, border-color var(--motion-medium) ease, box-shadow var(--motion-medium) ease; } .news-modal-mini-card:hover { border-color: color-mix(in srgb, var(--green) 25%, var(--line)); box-shadow: 0 18px 44px rgba(18, 102, 79, 0.1); transform: translateY(-2px); } .news-modal-mini-card > span { display: block; color: var(--muted); font-size: 11.5px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .news-modal-mini-card strong { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: var(--ink); font-size: 16px; line-height: 1.25; } .news-modal-mini-card b { font-size: 17px; line-height: 1; } .news-modal-mini-card small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.45; } .news-modal-section { margin-top: 13px; padding: 16px 17px; border: 1px solid color-mix(in srgb, var(--green) 10%, var(--line)); border-radius: 22px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 12px 32px rgba(18, 102, 79, 0.055); transition: transform var(--motion-medium) ease, border-color var(--motion-medium) ease, box-shadow var(--motion-medium) ease; } .news-modal-section:hover { border-color: color-mix(in srgb, var(--green) 23%, var(--line)); box-shadow: 0 18px 44px rgba(18, 102, 79, 0.09); transform: translateY(-1px); } .news-modal-section.source { border-color: rgba(7, 111, 83, 0.22); background: linear-gradient(180deg, rgba(225, 248, 240, 0.86), rgba(255, 255, 255, 0.72)); } .news-modal-section.context { background: linear-gradient(180deg, rgba(255, 248, 230, 0.88), rgba(255, 255, 255, 0.74)); } .news-modal-section.reading { border-color: color-mix(in srgb, var(--brand-accent) 28%, var(--line)); background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--brand-accent) 13%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--green-soft) 64%, rgba(255, 255, 255, 0.88)), rgba(255, 255, 255, 0.76)); } .news-modal-section.verdict { border-color: rgba(29, 111, 84, 0.22); background: linear-gradient(180deg, rgba(232, 249, 241, 0.94), rgba(255, 255, 255, 0.74)); } .news-modal-section.legal { background: rgba(246, 249, 247, 0.86); } .news-modal-section > span { display: block; margin-bottom: 8px; color: var(--green); font-size: 11.5px; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; } .news-modal-section p { max-width: 78ch; margin: 0; color: var(--ink); font-size: 14px; line-height: 1.65; } .news-modal-section p + p { margin-top: 10px; color: var(--muted); } .news-modal-section small { display: block; margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.5; } .news-modal-section ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: var(--ink); font-size: 13px; line-height: 1.55; } .news-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } @keyframes newsModalPop { from { opacity: 0; transform: translateY(18px) scale(0.975); } to { opacity: 1; transform: translateY(0) scale(1); } } .segmented-control { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 20px; padding: 4px; border-radius: 11px; background: #eff3f0; } .segmented-control input { position: absolute; opacity: 0; } .segmented-control span { display: block; padding: 9px; border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 750; text-align: center; } .segmented-control input:checked + span { background: var(--card); color: var(--green); box-shadow: 0 2px 7px rgba(18, 45, 34, 0.08); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field { display: block; } .field > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: #64736b; font-size: 12px; font-weight: 700; } .field-note { display: block; margin-top: 6px; color: var(--muted); font-size: 11.5px; line-height: 1.35; } .field-mini-button { padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--green-soft) 58%, var(--card)); color: var(--green); cursor: pointer; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; } .field-mini-button:hover { border-color: color-mix(in srgb, var(--green) 44%, var(--line)); transform: translateY(-1px); } .transaction-manual-price { justify-content: flex-start; margin-top: -4px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--green) 20%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--green-soft) 28%, transparent); color: var(--muted); font-size: 12px; font-weight: 800; } .full-width { grid-column: 1 / -1; } .field input, .field select { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #dce4df; border-radius: 9px; outline: 0; background: var(--card); color: var(--ink); } .field input:focus, .field select:focus { border-color: #68ab91; box-shadow: 0 0 0 3px rgba(45, 148, 110, 0.08); } .input-suffix { position: relative; } .input-suffix input { padding-right: 48px; } .input-suffix span { position: absolute; top: 50%; right: 11px; color: var(--muted); font-size: 11.5px; font-weight: 700; transform: translateY(-50%); } .form-hint { margin: 15px 0 0; color: var(--muted); font-size: 11.5px; } .transaction-preview { margin-top: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--green-soft) 42%, var(--card)), var(--card)); } .transaction-preview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .transaction-preview-grid div { padding: 9px; border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--card) 84%, transparent); } .transaction-preview-grid span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .transaction-preview-grid strong { color: var(--green); font-size: 13px; font-weight: 950; } .transaction-preview-note { margin: 9px 0 0; color: var(--muted); font-size: 12px; font-weight: 750; line-height: 1.4; } .transaction-preview.has-warning { border-color: color-mix(in srgb, #d6922f 42%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--amber-soft) 62%, var(--card)), var(--card)); } .transaction-preview.has-warning .transaction-preview-note { color: #94691e; } .transaction-preview.is-sell .transaction-preview-grid strong { color: #0d6d55; } @media (max-width: 720px) { .transaction-preview-grid { grid-template-columns: 1fr 1fr; } } .form-hint.error { color: var(--red); font-size: 12px; font-weight: 600; } .form-hint.warning { color: var(--red); font-size: 11px; font-weight: 850; } .demo-portfolio-note { margin: 0 0 16px; padding: 12px 14px; border: 1px solid rgba(209, 167, 75, 0.35); border-radius: 16px; background: rgba(209, 167, 75, 0.11); color: var(--text); font-size: 12px; font-weight: 600; } .watch-star { border: 0; background: none; cursor: pointer; margin-right: 4px; padding: 2px; font-size: 16px; line-height: 1; color: #cdd6d0; transition: color 120ms ease, transform 120ms ease; } .watch-star:hover { color: var(--amber); transform: scale(1.18); } .watch-star.on { color: var(--amber); } .watch-filter { display: inline-flex; align-items: center; gap: 6px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--muted); font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color 120ms ease, background 120ms ease, color 120ms ease; } .watch-filter:hover { border-color: var(--amber); color: var(--amber); } .watch-filter.active { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); } .catalog-count-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; } .catalog-count-strip article { padding: 14px; border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 18px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--brand-accent) 12%, transparent), transparent 34%), var(--card); box-shadow: var(--shadow); } .catalog-count-strip span, .catalog-count-strip strong, .catalog-count-strip small { display: block; } .catalog-count-strip span { color: var(--muted); font-size: 11.5px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; } .catalog-count-strip strong { margin-top: 5px; color: var(--green); font-size: 23px; letter-spacing: -0.8px; } .catalog-count-strip small { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.35; } .catalog-heavy-panels { display: grid; gap: 14px; content-visibility: auto; contain-intrinsic-size: 720px; } .company-table { content-visibility: auto; contain-intrinsic-size: 900px; } .catalog-heavy-placeholder { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 16px 18px; border: 1px dashed color-mix(in srgb, var(--green) 24%, var(--line)); border-radius: 22px; background: linear-gradient(90deg, color-mix(in srgb, var(--green-soft) 52%, var(--card)), var(--card)), var(--card); color: var(--muted); box-shadow: 0 12px 30px rgba(12, 35, 27, 0.055); } .catalog-heavy-placeholder strong, .catalog-heavy-placeholder small { display: block; } .catalog-heavy-placeholder strong { color: var(--ink); font-weight: 950; } .catalog-heavy-placeholder small { margin-top: 3px; max-width: 760px; line-height: 1.5; } .catalog-heavy-placeholder > span { flex: 0 0 auto; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--card) 82%, var(--green-soft)); color: var(--green); font-size: 11px; font-weight: 950; } .watch-pill { align-self: flex-start; margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-weight: 600; cursor: pointer; transition: border-color 120ms ease, background 120ms ease, color 120ms ease; } .watch-pill:hover { border-color: var(--amber); color: var(--amber); } .watch-pill.on { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); } .session-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; } .session-badge i { width: 8px; height: 8px; border-radius: 50%; } .session-badge.open { background: var(--green-soft); color: var(--green); } .session-badge.open i { background: var(--green-2); } .session-badge.closed { background: var(--red-soft); color: var(--red); } .session-badge.closed i { background: var(--red); } .content.is-crypto .stock-only { display: none; } .fng-gauge { padding: 6px 4px 2px; } .fng-track { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #b4484b 0%, #d1a74b 50%, #1f8a6b 100%); } .fng-marker { position: absolute; top: 50%; width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: var(--shadow); } .fng-value { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; } .fng-value strong { font-size: 34px; font-weight: 800; line-height: 1; } .fng-value small { font-size: 13px; font-weight: 700; color: var(--muted); } .fng-scale { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .report-legend { margin: 0 0 14px; color: var(--muted); font-size: 11px; line-height: 1.5; } .surprise-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; cursor: help; } .surprise-tag.beat { background: var(--green-soft); color: var(--green); } .surprise-tag.miss { background: var(--red-soft); color: var(--red); } .surprise-tag[data-tip] { position: relative; cursor: pointer; } .report-metric { position: relative; } .report-metric.beat { box-shadow: inset 3px 0 0 var(--green-2); } .report-metric.miss { box-shadow: inset 3px 0 0 var(--red); } .report-metric .surprise-tag { margin: 4px 0 2px; } .crypto-education { margin-top: 16px; } .crypto-flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 20px; } .crypto-flow-card { min-height: 138px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); } .crypto-flow-card strong, .crypto-flow-card p { display: block; } .crypto-flow-card strong { margin-bottom: 9px; font-size: 13px; } .crypto-flow-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; } .crypto-flow-card.positive { border-color: #cfe8dd; background: linear-gradient(145deg, #f2fbf7, #fff); } .crypto-flow-card.positive strong { color: var(--green); } .crypto-flow-card.danger { border-color: #efd3d4; background: linear-gradient(145deg, #fff5f5, #fff); } .crypto-flow-card.danger strong { color: var(--red); } .crypto-flow-card.warning { border-color: #eadcb6; background: linear-gradient(145deg, #fff9eb, #fff); } .crypto-flow-card.warning strong { color: #9b7324; } .crypto-cheat-table { padding: 0 20px 20px; } .crypto-cheat-table table { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; } .crypto-news-panel { margin-top: 16px; } .crypto-sentiment-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--line); } .crypto-sentiment-strip div { padding: 16px 18px; background: var(--card); } .crypto-sentiment-strip strong, .crypto-sentiment-strip small { display: block; } .crypto-sentiment-strip strong { color: var(--ink); font-size: 22px; letter-spacing: -0.6px; } .crypto-sentiment-strip small { margin-top: 4px; color: var(--muted); font-size: 11.5px; font-weight: 750; text-transform: uppercase; } .crypto-source-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 18px 20px 6px; } .crypto-source-card { display: flex; min-height: 126px; flex-direction: column; gap: 7px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, #fff, #f8fbfa); color: inherit; text-decoration: none; transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; } .crypto-source-card:hover { border-color: #c8ded5; box-shadow: var(--shadow-soft); transform: translateY(-2px); } .crypto-source-card strong { color: var(--green); font-size: 13px; } .crypto-source-card span { color: var(--ink); font-size: 12px; font-weight: 800; text-transform: uppercase; } .crypto-source-card small { color: var(--muted); font-size: 11.5px; line-height: 1.45; } .crypto-news-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 20px 18px; } .crypto-news-item { min-height: 190px; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: inset 3px 0 0 #d7dedb; } .crypto-news-item.positive { box-shadow: inset 3px 0 0 var(--green-2); } .crypto-news-item.negative { box-shadow: inset 3px 0 0 var(--red); } .crypto-news-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--green-2); font-size: 11px; font-weight: 850; letter-spacing: 0.4px; text-transform: uppercase; } .crypto-news-head small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; } .crypto-news-item h3 { margin: 13px 0 8px; font-size: 13px; line-height: 1.42; } .crypto-news-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; } .metric-help { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 5px; color: #aab6af; cursor: help; vertical-align: middle; transition: color 120ms ease, transform 120ms ease; } .metric-help svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } .metric-help:hover, .metric-help:focus { color: var(--green-2); transform: scale(1.12); outline: none; } .evra-tip { position: fixed; z-index: 200; max-width: 280px; padding: 10px 12px; background: var(--ink); color: #fff; border-radius: 10px; font-size: 12px; font-weight: 500; line-height: 1.5; text-align: left; box-shadow: 0 10px 30px rgba(16, 40, 31, 0.3); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 120ms ease, transform 120ms ease; } .evra-tip.show { opacity: 1; transform: translateY(0); } .table-row-clickable, .news-item, .event-row, .signal-row, .model-signal-item, .news-timeline-item, .report-card, .risk-card, .alert-event { transition: background 140ms ease, box-shadow 140ms ease; } .table-row-clickable:hover, .news-item:hover, .event-row:hover, .signal-row:hover, .model-signal-item:hover, .news-timeline-item:hover, .report-card:hover, .risk-card:hover, .alert-event:hover { background: var(--green-soft); cursor: pointer; } .session-hours { flex-basis: 100%; margin: 8px 0 0; color: var(--muted); font-size: 11px; font-weight: 600; } .session-hours.warn { color: var(--amber); } .brand-tagline { margin: -18px 0 18px; padding: 0 10px; color: rgba(255, 255, 255, 0.5); font-size: 12px; font-style: italic; font-weight: 600; line-height: 1.4; letter-spacing: 0.2px; } .brand-mark { transition: transform 220ms ease, box-shadow 220ms ease; } .brand-mark svg path { stroke-dasharray: 46; stroke-dashoffset: 46; animation: brand-draw 1.5s ease 0.2s forwards; } @keyframes brand-draw { to { stroke-dashoffset: 0; } } .brand:hover .brand-mark { transform: rotate(-5deg) scale(1.08); box-shadow: 0 0 18px rgba(90, 205, 160, 0.4); } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .brand-mark svg path { animation: none; stroke-dashoffset: 0; } } .stat-card, .panel { transition: transform 160ms ease, box-shadow 160ms ease; } .stat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(16, 40, 31, 0.1); } .nav-item { transition: background 140ms ease, color 140ms ease; } .primary-button, .secondary-button, .ghost-button { transition: transform 120ms ease, filter 120ms ease, background 120ms ease, border-color 120ms ease; } .primary-button:hover { transform: translateY(-1px); filter: brightness(1.05); } .theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 6px; } .theme-swatch { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; text-align: left; transition: border-color 140ms ease, transform 140ms ease; } .theme-swatch:hover { transform: translateY(-2px); } .theme-swatch.active { border-color: var(--green-2); } .theme-swatch .swatch-dots { display: flex; gap: 4px; } .theme-swatch .swatch-dots i { width: 16px; height: 16px; border-radius: 50%; display: block; } .theme-swatch strong { font-size: 13px; } .theme-swatch small { display: block; color: var(--muted); font-size: 11px; } .motion-preview { display: flex; align-items: center; gap: 8px; max-width: 360px; margin-top: 14px; } .motion-preview span { display: block; height: 8px; flex: 1; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--brand-accent)); opacity: 0.58; transform-origin: left center; animation: motion-preview-pulse 1.25s ease-in-out infinite; } .motion-preview span:nth-child(2) { animation-delay: 120ms; } .motion-preview span:nth-child(3) { animation-delay: 240ms; } @keyframes motion-preview-pulse { 0%, 100% { opacity: 0.42; transform: scaleX(0.72); } 50% { opacity: 1; transform: scaleX(1); } } .tax-hero { display: grid; grid-template-columns: minmax(200px, 0.9fr) 1.6fr; gap: 20px; align-items: center; padding: 22px 24px; margin-bottom: 16px; border-radius: var(--radius); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--green-2) 12%, var(--card)) 0%, var(--card) 55%); border: 1px solid var(--line); box-shadow: var(--shadow); } .tax-hero-main { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); padding-right: 20px; } .tax-hero-label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.01em; } .tax-hero-value { font-size: clamp(30px, 6vw, 44px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .tax-hero-value.is-due { color: var(--amber); } .tax-hero-value.is-clear { color: var(--green-2); } .tax-hero-sub { font-size: 11px; color: var(--muted); } .tax-hero-breakdown { display: flex; flex-direction: column; gap: 14px; } .tax-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-soft); border: 1px solid var(--line); } .tax-bar-seg { height: 100%; transition: width var(--motion-medium) ease; } .tax-bar-seg.seg-gains { background: var(--green-2); } .tax-bar-seg.seg-div { background: var(--amber); } .tax-bar-empty { flex: 1; } .tax-hero-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tax-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); } .tax-legend-item strong { margin-left: auto; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; } .tax-legend-txt { flex-shrink: 1; min-width: 0; } .tax-legend-item .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .dot-gains { background: var(--green-2); } .dot-div { background: var(--amber); } .tax-panel { margin-top: 16px; } .tax-result-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 4px 0 16px; } .tax-pill { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--surface-soft); border: 1px solid var(--line); border-left: 3px solid var(--line); } .tax-pill span { font-size: 11px; color: var(--muted); } .tax-pill strong { font-size: 17px; font-variant-numeric: tabular-nums; } .tax-pill.up { border-left-color: var(--green-2); } .tax-pill.up strong { color: var(--green-2); } .tax-pill.down { border-left-color: var(--red); } .tax-pill.down strong { color: var(--red); } .tax-pill.accent { border-left-color: var(--amber); background: var(--amber-soft); } .tax-pill.accent strong { color: var(--amber); } .tax-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; padding: 7px 12px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--line); } .tax-toggle input { width: 16px; height: 16px; accent-color: var(--green-2); } .tax-div-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 4px; } .tax-div-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 14px; background: var(--surface-soft); border: 1px solid var(--line); } .tax-div-card.accent { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); } .tax-div-flag { position: absolute; top: 12px; right: 14px; font-size: 16px; line-height: 1; opacity: 0.85; } .tax-div-label { font-size: 11px; color: var(--muted); padding-right: 22px; } .tax-div-card strong { font-size: 18px; font-variant-numeric: tabular-nums; } .tax-div-card.accent strong { color: var(--amber); } .tax-div-card small { font-size: 12px; color: var(--muted); } .tax-empty { display: flex; align-items: flex-start; gap: 12px; padding: 18px; border-radius: 14px; background: var(--surface-soft); border: 1px dashed var(--line); font-size: 22px; } .tax-empty div { font-size: initial; } .tax-empty strong { display: block; font-size: 14px; margin-bottom: 2px; } .tax-empty p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; } .tax-note { color: var(--amber); font-size: 12px; } .tax-disclaimer { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--amber-soft); color: var(--amber); font-size: 11px; line-height: 1.5; } .bench-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 12px; } .bench-add-row .filter-select { min-width: 220px; } .bench-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .bench-empty { color: var(--muted); font-size: 11px; } .bench-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12px; font-weight: 600; } .bench-chip button { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-size: 13px; cursor: pointer; } .bench-chip button:hover { background: var(--red-soft); color: var(--red); } .bench-controls { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 12px; } .bond-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; } .bond-add-row .input-suffix { max-width: 160px; } .bond-news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .bond-news-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: pointer; } .bond-news-item:last-child { border-bottom: 0; } .bond-news-item a, .bond-news-item > strong { color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; line-height: 1.4; } .bond-news-item:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .bond-news-item a:hover { color: var(--brand-accent, var(--accent)); text-decoration: underline; } .bond-news-meta { color: var(--muted); font-size: 11px; } .analyst-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .analyst-grid > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); } .analyst-grid span { color: var(--muted); font-size: 11px; font-weight: 600; } .analyst-grid strong { color: var(--ink); font-size: 17px; font-weight: 750; } @media (max-width: 700px) { .analyst-grid { grid-template-columns: repeat(2, 1fr); } } .portfolio-chart-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 12px; } .view-tabs.subtle-tabs { margin-right: auto; background: rgba(255, 255, 255, 0.58); } .view-tabs.subtle-tabs button.active { background: color-mix(in srgb, var(--green-soft) 72%, var(--card)); color: var(--green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 18%, transparent); } .rolling-chips { display: flex; flex-wrap: wrap; gap: 8px; } .rolling-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700; } .rolling-chip strong { font-size: 12px; } .portfolio-chart-explain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; } .portfolio-chart-explain span { padding: 12px 13px; border: 1px solid color-mix(in srgb, var(--green) 14%, var(--line)); border-radius: 15px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 34%), color-mix(in srgb, var(--surface-soft) 86%, var(--card)); } .portfolio-chart-explain b, .portfolio-chart-explain small { display: block; } .portfolio-chart-explain b { font-size: 18px; font-weight: 950; } .portfolio-chart-explain small { margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.35; text-transform: uppercase; } .bench-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; cursor: pointer; } .bench-check input { width: 15px; height: 15px; accent-color: var(--green-2); } .bench-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 6px; } .bench-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ink); } .bench-chart-wrap { width: 100%; overflow: hidden; } .bench-chart-svg { width: 100%; height: auto; display: block; } .portfolio-benchmark-panel { overflow: hidden; border-color: color-mix(in srgb, var(--green) 18%, var(--line)); background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--brand-accent) 14%, transparent), transparent 30%), linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, transparent), color-mix(in srgb, var(--green-soft) 22%, var(--card))); } .portfolio-return-wrap { overflow-x: auto; scrollbar-color: color-mix(in srgb, var(--green) 62%, var(--brand-accent)) color-mix(in srgb, var(--green-soft) 55%, transparent); scrollbar-width: thin; padding: 8px 2px 2px; border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .42)), var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 18px 44px rgba(12, 35, 27, .08); } .portfolio-return-wrap::-webkit-scrollbar { height: 10px; } .portfolio-return-wrap::-webkit-scrollbar-track { border-radius: 999px; background: color-mix(in srgb, var(--green-soft) 50%, transparent); } .portfolio-return-wrap::-webkit-scrollbar-thumb { border: 2px solid color-mix(in srgb, var(--green-soft) 60%, var(--card)); border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--brand-accent)); } .portfolio-return-chart { min-width: 980px; } .return-grid-line { stroke: color-mix(in srgb, var(--line) 82%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; } .return-grid-line.vertical { stroke: color-mix(in srgb, var(--line) 68%, transparent); } .return-axis-label, .chart-x-label, .return-axis-title { fill: color-mix(in srgb, var(--muted) 92%, var(--ink)); font-size: 12px; font-weight: 750; } .return-axis-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .return-baseline { stroke: color-mix(in srgb, var(--green) 30%, transparent); stroke-width: 1.5; stroke-dasharray: 6 7; vector-effect: non-scaling-stroke; } .return-baseline-label { fill: var(--green); font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; } .portfolio-return-line { filter: drop-shadow(0 3px 5px rgba(12, 35, 27, .14)); vector-effect: non-scaling-stroke; } .return-end-label text { fill: #fff; font-size: 11px; font-weight: 950; } .portfolio-runner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 12px; } .portfolio-runner-card { position: relative; overflow: hidden; padding: 13px; border: 1px solid color-mix(in srgb, var(--runner-color) 22%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--card) 88%, transparent); } .portfolio-runner-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--runner-color); content: ""; } .portfolio-runner-card.primary { background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--runner-color) 18%, transparent), transparent 42%), color-mix(in srgb, var(--green-soft) 48%, var(--card)); } .portfolio-runner-card span, .portfolio-runner-card strong, .portfolio-runner-card small { display: block; } .portfolio-runner-card span { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; } .portfolio-runner-card strong { margin-top: 5px; font-size: 24px; font-weight: 950; } .portfolio-runner-card small { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 700; } .bench-whatif { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; } .bench-whatif-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); } .bench-whatif-card.own { border-color: var(--green-2); background: var(--green-soft); } .bench-whatif-card span { color: var(--muted); font-size: 11px; font-weight: 600; } .bench-whatif-card strong { font-size: 22px; } .bench-whatif-card small { color: var(--muted); font-size: 11px; } .portfolio-share-studio { position: relative; display: grid; grid-template-columns: minmax(280px, .88fr) minmax(420px, 1.12fr); gap: clamp(18px, 3vw, 34px); overflow: hidden; margin: 0 0 18px; padding: clamp(20px, 3vw, 34px); border: 1px solid color-mix(in srgb, var(--brand-accent) 32%, rgba(255, 255, 255, .15)); border-radius: 30px; background: radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--brand-accent) 34%, transparent), transparent 30%), radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--green-2) 28%, transparent), transparent 28%), linear-gradient(135deg, color-mix(in srgb, var(--navy) 94%, #000), #0d231c 56%, color-mix(in srgb, var(--green) 52%, #06120e)); color: #fff; box-shadow: 0 30px 80px rgba(6, 24, 18, .24); isolation: isolate; } .portfolio-share-studio.negative { background: radial-gradient(circle at 14% 10%, rgba(227, 110, 113, .26), transparent 30%), radial-gradient(circle at 88% 16%, rgba(214, 146, 47, .22), transparent 28%), linear-gradient(135deg, #291516, #201b12 56%, #341b1d); } .share-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(4px); opacity: .55; pointer-events: none; animation: share-orb-float 8s ease-in-out infinite alternate; } .share-orb.one { right: -70px; bottom: -90px; width: 250px; height: 250px; background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 34%, transparent), transparent 70%); } .share-orb.two { top: -80px; left: 38%; width: 180px; height: 180px; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%); animation-delay: -2.4s; } .portfolio-share-copy, .portfolio-share-card { position: relative; z-index: 1; } .portfolio-share-copy h2 { max-width: 680px; margin: 8px 0 10px; font-size: clamp(28px, 4vw, 52px); letter-spacing: -1.7px; line-height: .98; } .portfolio-share-copy h2 strong { color: var(--brand-accent); white-space: nowrap; } .portfolio-share-copy p { max-width: 620px; margin: 0; color: rgba(255, 255, 255, .76); font-size: 14px; line-height: 1.6; } .portfolio-share-studio.compact { grid-template-columns: minmax(280px, .78fr) minmax(390px, 1.22fr); gap: 14px; padding: 14px 16px; border-radius: 24px; } .portfolio-share-studio.compact .portfolio-share-copy h2 { margin: 3px 0 5px; font-size: clamp(23px, 2.25vw, 32px); line-height: 1; } .portfolio-share-studio.compact .pulse-trust-note { margin: 5px 0 7px; padding: 5px 8px; border-radius: 14px; } .portfolio-share-studio.compact .share-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 7px 0 9px; } .portfolio-share-studio.compact .share-kpi-grid span { min-width: 0; padding: 6px 8px; border-radius: 13px; } .portfolio-share-studio.compact .share-kpi-grid b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .portfolio-share-studio.compact .portfolio-share-actions { gap: 7px; } .portfolio-share-studio.compact .portfolio-share-actions button { min-height: 34px; padding: 6px 11px; } .portfolio-share-studio.compact .portfolio-share-card { align-self: stretch; padding: 10px 12px; border-radius: 20px; } .portfolio-share-studio.compact .share-sparkline { height: 92px; margin: 1px 0 0; } .portfolio-share-studio.compact .share-card-bottom span { padding: 5px 8px; } .portfolio-share-studio.compact .share-card-bottom b { font-size: 13px; } .portfolio-share-studio.compact .portfolio-share-card[data-portfolio-pulse-card]::after { right: 12px; bottom: 8px; font-size: 11px; content: "rozwiń"; } .pulse-trust-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; max-width: 680px; margin: 12px 0; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11); backdrop-filter: blur(14px); } .pulse-trust-note b { padding: 6px 9px; border-radius: 999px; background: rgba(103, 210, 169, .15); color: var(--brand-accent); font-size: 12px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .pulse-trust-note.warning b { background: rgba(244, 199, 106, .16); color: #ffd27a; } .pulse-trust-note span { color: rgba(255, 255, 255, .70); font-size: 11px; font-weight: 750; line-height: 1.45; } .pulse-trust-note.theater { max-width: 520px; } .pulse-story-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px; } .pulse-story-cards span { min-height: 84px; padding: 12px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 18px; background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .055)), rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } .pulse-story-cards small, .pulse-story-cards em { display: block; color: rgba(255, 255, 255, .58); font-size: 11.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } .pulse-story-cards b { display: block; margin: 6px 0 5px; color: #fff; font-size: 18px; font-weight: 950; letter-spacing: -.35px; } .pulse-story-cards em { color: rgba(255, 255, 255, .68); font-style: normal; letter-spacing: .03em; text-transform: none; } .pulse-story-cards b.positive, .pulse-story-cards b.trend-up, .pulse-story-cards b[class*="up"] { color: var(--brand-accent); } .pulse-story-cards b.negative, .pulse-story-cards b.trend-down, .pulse-story-cards b[class*="down"] { color: #ffaaa9; } .pulse-story-cards b.warning { color: #ffd27a; } .pulse-benchmark-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 9px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px; background: rgba(255, 255, 255, .075); backdrop-filter: blur(12px); } .pulse-benchmark-strip span, .pulse-benchmark-strip small { color: rgba(255, 255, 255, .58); font-size: 12px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } .pulse-benchmark-strip b { padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--bench, var(--brand-accent)) 52%, rgba(255,255,255,.14)); border-radius: 999px; background: color-mix(in srgb, var(--bench, var(--brand-accent)) 18%, rgba(255,255,255,.06)); color: #fff; font-size: 11px; font-weight: 950; } .pulse-benchmark-strip.muted { border-radius: 18px; } .share-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; } .share-kpi-grid span, .share-card-bottom span, .share-top-holdings span { border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(12px); } .share-kpi-grid span { padding: 13px; border-radius: 17px; } .share-kpi-grid small, .share-card-bottom small { display: block; color: rgba(255, 255, 255, .62); font-size: 11.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } .share-kpi-grid b { display: block; margin-top: 4px; color: #fff; font-size: 19px; } .portfolio-share-actions { display: flex; flex-wrap: wrap; gap: 10px; } .portfolio-share-actions .ghost-button, .portfolio-share-actions .secondary-button { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .08); color: #fff; } .portfolio-share-actions .ghost-button:hover, .portfolio-share-actions .secondary-button:hover { border-color: rgba(255, 255, 255, .56); background: rgba(255, 255, 255, .14); } .pulse-range-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; color: rgba(255, 255, 255, .78); font-size: 12px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; } .pulse-range-note small { color: rgba(255, 255, 255, .56); font-size: 11.5px; font-weight: 800; letter-spacing: .03em; } .pulse-range-tabs { display: inline-flex; flex-wrap: wrap; gap: 5px; padding: 4px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .08); backdrop-filter: blur(12px); } .pulse-range-tabs button { min-height: 26px; padding: 4px 9px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .72); cursor: pointer; font-size: 11.5px; font-weight: 950; letter-spacing: .04em; } .pulse-range-tabs button.active, .pulse-range-tabs button:hover { background: var(--brand-accent); color: #062219; box-shadow: 0 10px 24px rgba(103, 210, 169, .22); } .portfolio-share-sync-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; margin: 0 0 18px; padding: 22px; border: 1px solid color-mix(in srgb, var(--green-2) 34%, var(--line)); border-radius: 26px; background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--green-2) 18%, transparent), transparent 34%), var(--card); box-shadow: var(--shadow); } .portfolio-share-sync-card.full { min-height: 260px; } .portfolio-share-sync-card h2 { margin: 6px 0 8px; font-size: clamp(24px, 4vw, 42px); letter-spacing: -1.2px; line-height: 1.02; } .portfolio-share-sync-card p { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.55; } .sync-orbit { position: relative; display: grid; width: 64px; height: 64px; place-items: center; border-radius: 999px; background: var(--green-soft); } .sync-orbit span, .sync-orbit i, .sync-orbit b { position: absolute; border-radius: 999px; } .sync-orbit span { inset: 11px; border: 2px solid color-mix(in srgb, var(--green) 55%, transparent); border-top-color: transparent; animation: spin 1.05s linear infinite; } .sync-orbit i { width: 10px; height: 10px; background: var(--green); box-shadow: 0 0 22px color-mix(in srgb, var(--green-2) 70%, transparent); } .sync-orbit b { inset: 3px; border: 1px solid color-mix(in srgb, var(--green-2) 30%, transparent); animation: pulse-sync-ring 1.8s ease-in-out infinite; } .portfolio-share-card { overflow: hidden; padding: 20px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)), rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 26px 70px rgba(0, 0, 0, .26); backdrop-filter: blur(18px); } .portfolio-share-card[data-portfolio-pulse-card] { cursor: pointer; } .portfolio-share-card[data-portfolio-pulse-card]::after { position: absolute; right: 18px; bottom: 16px; color: rgba(255, 255, 255, .42); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; content: "kliknij kartę"; } .portfolio-share-card[data-portfolio-pulse-card]:hover { transform: translateY(-2px); box-shadow: 0 34px 78px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .18); } .portfolio-pulse-drawer { grid-column: 1 / -1; position: relative; z-index: 1; padding: 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 24px; background: radial-gradient(circle at 0 0, rgba(103, 210, 169, .16), transparent 34%), rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(16px); } .pulse-drawer-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .pulse-drawer-head strong { color: #fff; font-size: 18px; } .pulse-drawer-head small { color: rgba(255, 255, 255, .62); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .pulse-asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; } .pulse-asset-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; overflow: hidden; min-height: 82px; padding: 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 19px; background: rgba(255, 255, 255, .08); color: #fff; text-align: left; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform var(--motion-medium) ease, background var(--motion-medium) ease, border-color var(--motion-medium) ease; animation: pulse-card-in .52s ease both; animation-delay: var(--pulse-delay, 0ms); } .pulse-asset-card:hover { border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .13); transform: translateY(-2px); } .pulse-ring { position: absolute; inset: -42%; border-radius: 50%; background: radial-gradient(circle, rgba(103, 210, 169, .16), transparent 62%); opacity: .7; transform: scale(.75); animation: pulse-asset-glow 2.8s ease-in-out infinite; pointer-events: none; } .pulse-asset-card .ticker-mark { position: relative; z-index: 1; } .pulse-asset-copy, .pulse-asset-value, .pulse-asset-result { position: relative; z-index: 1; } .pulse-asset-copy b, .pulse-asset-copy small, .pulse-asset-value b, .pulse-asset-value small, .pulse-asset-result b, .pulse-asset-result small { display: block; } .pulse-asset-copy b { color: #fff; font-size: 14px; font-weight: 950; } .pulse-asset-copy small { max-width: 170px; overflow: hidden; color: rgba(255, 255, 255, .62); font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .pulse-asset-value { text-align: right; } .pulse-asset-value b { color: #fff; font-size: 14px; font-weight: 950; } .pulse-asset-value small, .pulse-asset-result small { color: rgba(255, 255, 255, .58); font-size: 11.5px; font-weight: 800; } .pulse-asset-result { grid-column: 2 / -1; justify-self: start; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); } .pulse-asset-result b { display: inline; margin-right: 6px; font-size: 12px; } .pulse-asset-bar { position: relative; z-index: 1; grid-column: 1 / -1; display: block; overflow: hidden; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .10); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .16); } .pulse-asset-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--asset, var(--brand-accent)), rgba(255, 255, 255, .78)); box-shadow: 0 0 20px color-mix(in srgb, var(--asset, var(--brand-accent)) 46%, transparent); } .share-chart-wrap { position: relative; } body.pulse-theater-open { overflow: hidden; } .portfolio-pulse-theater-backdrop { position: fixed; inset: 0; z-index: 560; display: none; align-items: center; justify-content: center; padding: 18px; background: radial-gradient(circle at 12% 8%, rgba(103, 210, 169, .26), transparent 34%), radial-gradient(circle at 92% 18%, rgba(141, 124, 246, .20), transparent 30%), rgba(3, 12, 9, .78); backdrop-filter: blur(20px); } .portfolio-pulse-theater-backdrop.open { display: flex; } .portfolio-pulse-theater { position: relative; display: grid; grid-template-columns: minmax(320px, .82fr) minmax(460px, 1.18fr); gap: 18px; overflow: auto; width: min(1180px, calc(100vw - 34px)); max-height: calc(100vh - 34px); padding: clamp(20px, 3vw, 34px); border: 1px solid rgba(255, 255, 255, .22); border-radius: 34px; background: radial-gradient(circle at 8% 0, rgba(103, 210, 169, .24), transparent 32%), radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .12), transparent 26%), linear-gradient(135deg, #061711, #0c2c23 58%, #116049); color: #fff; box-shadow: 0 50px 120px rgba(0, 0, 0, .42); scrollbar-color: rgba(103, 210, 169, .8) rgba(255, 255, 255, .08); scrollbar-width: thin; } .portfolio-pulse-theater.negative { background: radial-gradient(circle at 8% 0, rgba(255, 138, 144, .22), transparent 32%), radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .12), transparent 26%), linear-gradient(135deg, #241214, #231d13 58%, #4a1e22); } .portfolio-pulse-theater::-webkit-scrollbar { width: 10px; } .portfolio-pulse-theater::-webkit-scrollbar-thumb { border: 2px solid rgba(255, 255, 255, .08); border-radius: 999px; background: linear-gradient(180deg, var(--brand-accent), var(--green)); } .portfolio-theater-close { position: absolute; top: 18px; right: 18px; z-index: 2; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .11); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; } .portfolio-theater-hero { align-self: stretch; padding: 8px 4px; } .portfolio-theater-hero h2 { margin: 10px 0 12px; font-size: clamp(42px, 6vw, 84px); letter-spacing: -2.4px; line-height: .9; } .portfolio-theater-hero h2 strong, .portfolio-theater-chart-head b.positive { display: block; color: var(--brand-accent); } .portfolio-theater-hero h2 strong { margin-top: 10px; } .portfolio-theater-hero p { max-width: 480px; color: rgba(255, 255, 255, .72); font-size: 15px; line-height: 1.65; } .portfolio-theater-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .portfolio-theater-actions .ghost-button { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .09); color: #fff; } .portfolio-theater-board { display: grid; gap: 14px; } .portfolio-theater-chart { overflow: hidden; min-height: 370px; padding: 18px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 30px; background: rgba(255, 255, 255, .095); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 70px rgba(0, 0, 0, .22); backdrop-filter: blur(18px); } .portfolio-theater-chart .share-sparkline { width: 100%; height: 290px; } .portfolio-theater-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .portfolio-theater-chart-head span { color: rgba(255, 255, 255, .66); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .portfolio-theater-chart-head b { padding: 9px 13px; border-radius: 999px; background: rgba(103, 210, 169, .12); color: var(--brand-accent); font-size: 20px; } .portfolio-theater-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .portfolio-theater-metrics span, .portfolio-theater-strip span { border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } .portfolio-theater-metrics span { padding: 13px; border-radius: 18px; } .portfolio-theater-metrics small { display: block; color: rgba(255, 255, 255, .58); font-size: 11.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .portfolio-theater-metrics b { display: block; margin-top: 6px; color: #fff; font-size: 18px; } .portfolio-theater-assets { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .portfolio-theater-asset { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: center; overflow: hidden; min-height: 118px; padding: 14px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 22px; background: rgba(255, 255, 255, .09); color: #fff; text-align: left; cursor: pointer; animation: pulse-card-in .5s ease both; animation-delay: var(--pulse-delay, 0ms); } .portfolio-theater-asset::before { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--asset-color, var(--brand-accent)) 28%, transparent), transparent 62%); opacity: .58; content: ""; animation: pulse-asset-glow 3.1s ease-in-out infinite; } .portfolio-theater-asset > * { position: relative; z-index: 1; } .portfolio-theater-asset strong, .portfolio-theater-asset small, .portfolio-theater-asset b, .portfolio-theater-asset em { display: block; } .portfolio-theater-asset strong { font-size: 16px; font-weight: 950; } .portfolio-theater-asset small { overflow: hidden; max-width: 140px; color: rgba(255, 255, 255, .62); font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .portfolio-theater-asset b { grid-column: 1 / -1; margin-top: 8px; font-size: 22px; font-weight: 950; } .portfolio-theater-asset em { grid-column: 1 / -1; color: var(--brand-accent); font-style: normal; font-weight: 900; } .portfolio-theater-strip { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; } .portfolio-theater-strip span { padding: 9px 13px; border-radius: 999px; color: rgba(255, 255, 255, .74); font-size: 12px; font-weight: 850; } .portfolio-theater-strip b { color: #fff; } .share-card-top, .share-card-bottom, .share-top-holdings { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .share-card-top span { display: block; color: rgba(255, 255, 255, .58); font-size: 12px; font-weight: 950; letter-spacing: .13em; } .share-card-top strong { display: block; margin-top: 4px; color: #fff; font-size: 22px; letter-spacing: -.6px; } .share-card-top > b { padding: 10px 13px; border-radius: 999px; background: rgba(103, 210, 169, .14); color: var(--brand-accent); font-size: 18px; box-shadow: 0 0 30px rgba(103, 210, 169, .18); } .share-card-top > b.negative { background: rgba(227, 110, 113, .16); color: #ffaaa9; } .share-card-source { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 4px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: rgba(255, 255, 255, .07); } .share-card-source span { padding: 5px 8px; border-radius: 999px; background: rgba(103, 210, 169, .15); color: var(--brand-accent); font-size: 11.5px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; } .share-card-source span.warning { background: rgba(244, 199, 106, .16); color: #ffd27a; } .share-card-source small { color: rgba(255, 255, 255, .56); font-size: 11.5px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; } .share-sparkline { display: block; width: 100%; height: auto; margin: 14px 0 10px; color: var(--brand-accent); overflow: visible; } .share-sparkline.negative { color: #ffaaa9; } .share-spark-baseline { stroke: rgba(255, 255, 255, .32); stroke-dasharray: 5 7; stroke-width: 1.3; } .share-spark-area { fill: url(#shareSparkArea); } .share-spark-path { fill: none; filter: url(#shareGlow); stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; stroke-dasharray: 980; stroke-dashoffset: 980; animation: share-line-draw 2.3s ease-out forwards, share-line-pulse 3.6s ease-in-out infinite 2.2s; } .share-spark-dot { fill: #fff; stroke: currentColor; stroke-width: 4; animation: share-dot-pop .72s ease-out .85s both, share-dot-pulse 2.2s ease-in-out infinite 1.7s; } .share-card-bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .share-card-bottom span { padding: 11px; border-radius: 16px; } .share-card-bottom b { display: block; margin-top: 3px; color: #fff; font-size: 15px; } .share-top-holdings { flex-wrap: wrap; justify-content: flex-start; margin-top: 12px; } .share-top-holdings span { display: inline-flex; gap: 6px; padding: 7px 10px; border-radius: 999px; color: rgba(255, 255, 255, .78); font-size: 11px; font-weight: 850; } .share-top-holdings b { color: #fff; } @keyframes share-line-draw { to { stroke-dashoffset: 0; } } @keyframes share-line-pulse { 0%, 100% { filter: url(#shareGlow); opacity: .94; } 50% { opacity: 1; } } @keyframes share-dot-pop { from { opacity: 0; transform: scale(.35); transform-box: fill-box; transform-origin: center; } to { opacity: 1; transform: scale(1); transform-box: fill-box; transform-origin: center; } } @keyframes share-dot-pulse { 0%, 100% { r: 6; opacity: .88; } 50% { r: 8; opacity: 1; } } @keyframes share-orb-float { from { transform: translate3d(-3%, 2%, 0) scale(.96); } to { transform: translate3d(4%, -4%, 0) scale(1.08); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse-sync-ring { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes pulse-card-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pulse-asset-glow { 0%, 100% { opacity: .32; transform: scale(.74); } 50% { opacity: .86; transform: scale(1); } } @media (max-width: 880px) { .portfolio-share-studio { grid-template-columns: 1fr; } .portfolio-share-studio.compact { grid-template-columns: 1fr; gap: 12px; padding: 16px; } .portfolio-share-studio.compact .share-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portfolio-share-studio.compact .share-sparkline { height: 96px; } .portfolio-pulse-theater { grid-template-columns: 1fr; } .portfolio-theater-assets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portfolio-theater-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portfolio-chart-explain { grid-template-columns: 1fr; } } .report-countdown { position: relative; overflow: hidden; } .falling-cards { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .falling-cards span { position: absolute; top: -28px; font-size: 17px; animation: evra-fall 3.4s linear infinite; } .report-countdown > :not(.falling-cards) { position: relative; z-index: 1; } @keyframes evra-fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0; } 12% { opacity: 0.95; } 100% { transform: translateY(260px) rotate(240deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .falling-cards { display: none; } } @keyframes tick-flash-up { 0% { background: rgba(31, 138, 107, 0.22); } 100% { background: transparent; } } @keyframes tick-flash-down { 0% { background: rgba(180, 72, 75, 0.22); } 100% { background: transparent; } } @keyframes tick-slide-up { from { transform: translateY(9px); opacity: 0.35; } to { transform: translateY(0); opacity: 1; } } @keyframes tick-slide-down { from { transform: translateY(-9px); opacity: 0.35; } to { transform: translateY(0); opacity: 1; } } .tick-up { animation: tick-flash-up 1.1s ease; border-radius: 8px; } .tick-down { animation: tick-flash-down 1.1s ease; border-radius: 8px; } .tick-up strong { display: inline-block; animation: tick-slide-up 0.5s ease; color: var(--green-2); } .tick-down strong { display: inline-block; animation: tick-slide-down 0.5s ease; color: var(--red); } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .tick-up, :root:not([data-motion="on"]) .tick-down, :root:not([data-motion="on"]) .tick-up strong, :root:not([data-motion="on"]) .tick-down strong { animation: none; } } :root[data-motion="off"] { scroll-behavior: auto; } :root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } :root[data-motion="off"] .content.view-leave, :root[data-motion="off"] .content.view-enter { opacity: 1; transform: none; filter: none; } :root[data-motion="off"] .view-loader { display: none; } :root[data-motion="off"] .guided-tour-marker { animation: none !important; } .ticker-mark { position: relative; overflow: hidden; } .ticker-mark b, .ticker-mark em { position: relative; z-index: 1; display: block; transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease; } .ticker-mark b { max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ticker-mark em { margin-top: -5px; color: color-mix(in srgb, var(--green) 52%, transparent); font-size: 11px; font-style: normal; font-weight: 950; letter-spacing: .11em; } .ticker-mark.has-logo b, .ticker-mark.has-logo em { opacity: 0; } .ticker-mark.logo-fallback b, .ticker-mark.logo-fallback em { opacity: 1; } .ticker-mark.logo-fallback::before { position: absolute; inset: -35%; background: radial-gradient(circle at 25% 25%, rgba(255,255,255,.68), transparent 28%), conic-gradient(from 140deg, color-mix(in srgb, var(--green) 20%, transparent), color-mix(in srgb, var(--brand-accent) 32%, transparent), color-mix(in srgb, var(--amber) 16%, transparent), color-mix(in srgb, var(--green) 20%, transparent)); content: ""; opacity: .92; animation: markFloat 7s linear infinite; } .ticker-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 3px; background: var(--card); border-radius: inherit; } @keyframes markFloat { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .primary-button:active, .secondary-button:active, .ghost-button:active, .nav-item:active, .watch-pill:active, .watch-filter:active, .theme-swatch:active, .icon-button:active, .market-state:active, .watch-star:active { transform: scale(0.95); } .modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line); } .toast { position: fixed; z-index: 110; right: 24px; bottom: 24px; display: flex; min-width: 290px; align-items: center; gap: 11px; padding: 13px 16px; border: 1px solid #d6e7df; border-radius: 13px; background: var(--card); box-shadow: 0 18px 45px rgba(12, 41, 29, 0.16); opacity: 0; pointer-events: none; transform: translateY(16px); transition: 180ms ease; } .toast.show { opacity: 1; transform: translateY(0); } .toast-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-weight: 900; } .toast strong, .toast small { display: block; } .toast strong { font-size: 11px; } .toast small { margin-top: 3px; color: var(--muted); font-size: 11.5px; } .empty-state { padding: 50px 20px; color: var(--muted); text-align: center; } .empty-state strong { display: block; margin-bottom: 6px; color: var(--ink); } .market-overview { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr); gap: 16px; margin-bottom: 16px; } .market-hero { position: relative; min-height: 235px; overflow: hidden; padding: 28px; border: 1px solid #285345; border-radius: 20px; background: linear-gradient(130deg, #102d24, #174638); color: #fff; box-shadow: 0 18px 45px rgba(16, 43, 34, 0.15); } .market-hero.closed { border-color: #5b3537; background: linear-gradient(130deg, #321f20, #4b292b); } .market-hero::after { position: absolute; right: -90px; bottom: -130px; width: 350px; height: 350px; border-radius: 50%; background: radial-gradient(circle, rgba(90, 211, 164, 0.18), transparent 65%); content: ""; } .market-hero.closed::after { background: radial-gradient(circle, rgba(235, 118, 121, 0.14), transparent 65%); } .live-badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; background: rgba(255, 255, 255, 0.07); color: #c9ddd5; font-size: 11.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #56d3a5; box-shadow: 0 0 0 5px rgba(86, 211, 165, 0.12); } .closed .status-dot, .status-dot.closed { background: #ef777a; box-shadow: 0 0 0 5px rgba(239, 119, 122, 0.12); } .market-hero h2 { position: relative; z-index: 1; margin: 22px 0 4px; font-size: clamp(28px, 3vw, 40px); letter-spacing: -1.6px; } .market-clock { position: relative; z-index: 1; color: #a9c0b7; font-size: 11px; } .market-next { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; margin-top: 25px; color: #dcebe5; font-size: 11px; } .market-next span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, 0.08); } .session-card { padding: 22px; } .session-card h2 { margin: 0; font-size: 15px; } .session-card > p { margin: 6px 0 20px; color: var(--muted); font-size: 12px; } .phase-timeline { display: grid; gap: 8px; } .phase-item { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 11px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); } .phase-item.active { border-color: #bcdccc; background: #edf8f3; } .phase-time { color: var(--ink); font-size: 12px; font-weight: 800; } .phase-copy strong, .phase-copy small { display: block; } .phase-copy strong { font-size: 12px; } .phase-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; } .phase-state { width: 7px; height: 7px; border-radius: 50%; background: #c7d0cb; } .phase-item.active .phase-state { background: var(--green-2); box-shadow: 0 0 0 4px rgba(31, 138, 107, 0.1); } .market-index-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; } .index-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); } .index-card > div { display: flex; min-width: 0; align-items: center; gap: 10px; } .index-card .card-logo { width: 32px; height: 32px; border-radius: 11px; } .index-card strong, .index-card small { display: block; } .index-card strong { font-size: 12px; } .index-card small { margin-top: 4px; color: var(--muted); font-size: 11.5px; } .index-card > span { text-align: right; } .index-card > span strong { font-size: 14px; } .catalog-score-cell { min-width: 138px; } .company-table tbody td, .company-table td[data-catalog-model-cell], .company-table td[data-catalog-potential-cell] { vertical-align: middle; } .company-table td[data-catalog-model-cell] .badge, .company-table td[data-catalog-model-cell] .model-state-pill { margin: 0; line-height: 1; vertical-align: middle; } .company-table td[data-catalog-potential-cell] > span { display: inline-flex; min-height: 28px; align-items: center; line-height: 1; } .score-ready-value { display: inline-flex; align-items: center; gap: 8px; } .score-ready-value > strong { line-height: 1; } .score-state-pill, .model-state-pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 28px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--border) 78%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--panel) 88%, var(--green-soft)); color: var(--muted); font-size: 12px; font-weight: 850; line-height: 1; white-space: nowrap; } .score-state-pill.loading, .model-state-pill.loading { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--green) 18%, var(--border)); } .score-state-pill.loading::after, .model-state-pill.loading::after, .score-mini-skeleton::after { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 20%, color-mix(in srgb, var(--green) 16%, transparent) 48%, transparent 76%); content: ""; transform: translateX(-115%); animation: evra-score-shimmer 1.25s ease-in-out infinite; } .score-state-pill.loading > i, .model-state-pill.loading > i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 13%, transparent); animation: evra-score-pulse 1.1s ease-in-out infinite; } .score-state-pill.unavailable { border-color: color-mix(in srgb, var(--muted) 24%, var(--border)); background: color-mix(in srgb, var(--panel) 92%, var(--muted)); } .score-state-pill.unavailable b { font-size: 16px; line-height: .8; } .catalog-score-cell.score-loading > small, .catalog-score-cell.score-unavailable > small { display: inline-block; margin-top: 5px; color: var(--muted); white-space: nowrap; } .score-potential-pending { color: var(--muted); font-weight: 800; } .score-mini-skeleton { position: relative; display: block; width: 30px; height: 13px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--green) 13%, var(--panel)); } .global-search-result-score.score-search-loading, .global-search-result-score.score-search-unavailable { background: color-mix(in srgb, var(--panel) 88%, var(--green-soft)); color: var(--muted); } .score-unavailable-card { display: grid; place-items: center; gap: 6px; min-height: 132px; padding: 20px; border: 1px dashed color-mix(in srgb, var(--muted) 28%, var(--border)); border-radius: 22px; color: var(--muted); text-align: center; } .score-unavailable-card > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--muted) 10%, var(--panel)); font-size: 24px; } .score-unavailable-card strong { color: var(--text); } .score-unavailable-card small { max-width: 360px; line-height: 1.45; } @keyframes evra-score-shimmer { 55%, 100% { transform: translateX(115%); } } @keyframes evra-score-pulse { 0%, 100% { opacity: .42; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } } :root[data-motion="off"] .score-state-pill.loading::after, :root[data-motion="off"] .model-state-pill.loading::after, :root[data-motion="off"] .score-mini-skeleton::after, :root[data-motion="off"] .score-state-pill.loading > i, :root[data-motion="off"] .model-state-pill.loading > i { animation: none !important; } @media (prefers-reduced-motion: reduce) { .score-state-pill.loading::after, .model-state-pill.loading::after, .score-mini-skeleton::after, .score-state-pill.loading > i, .model-state-pill.loading > i { animation: none !important; } } @media (max-width: 700px) { .company-table tbody tr td.catalog-score-cell.score-loading, .company-table tbody tr td.catalog-score-cell.score-unavailable { background: color-mix(in srgb, var(--panel) 86%, var(--muted)) !important; color: var(--muted) !important; } .catalog-score-cell { min-width: 54px; } .catalog-score-cell .score-state-pill { min-height: 42px; padding: 7px; } .catalog-score-cell .score-state-pill b { font-size: 11.5px; } .catalog-score-cell .score-state-pill span, .catalog-score-cell > small { display: none !important; } } .market-asset-hub { position: relative; margin-bottom: 16px; overflow: hidden; padding: 0; background: radial-gradient(circle at 92% -20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%), var(--card); } .market-asset-hub::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), color-mix(in srgb, var(--accent) 36%, transparent), transparent); content: ""; } .market-asset-hub-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 20px 22px 17px; border-bottom: 1px solid var(--line); } .market-asset-hub-head h2, .market-asset-hub-head p { margin: 0; } .market-asset-hub-head h2 { margin-top: 4px; color: var(--ink); font-size: 18px; letter-spacing: -0.45px; } .market-asset-hub-head p { margin-top: 5px; color: var(--muted); font-size: 12px; } .market-asset-hub-kicker { color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: 1.25px; text-transform: uppercase; } .market-asset-hub-tabs { display: inline-flex; flex: 0 0 auto; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); } .market-asset-hub-tabs button { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .market-asset-hub-tabs button b { display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 10%, transparent); font-size: 11px; } .market-asset-hub-tabs button:hover { color: var(--ink); } .market-asset-hub-tabs button.active { background: var(--card); color: var(--accent); box-shadow: 0 5px 17px rgba(24, 35, 31, 0.09); transform: translateY(-1px); } .market-asset-hub-tabs button.active b { background: color-mix(in srgb, var(--accent) 13%, transparent); } .market-asset-hub-mount { padding: 18px 20px 20px; animation: market-asset-hub-enter 220ms ease both; } .market-asset-hub-index-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .market-asset-hub-index-group { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface-soft) 72%, var(--card)); } .market-asset-hub-index-group > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line); color: var(--ink); } .market-asset-hub-index-group > header span { display: inline-flex; min-width: 0; align-items: center; gap: 7px; } .market-asset-hub-index-group > header strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .market-asset-hub-index-group > header small { flex: 0 0 auto; color: var(--muted); font-size: 11px; } .market-asset-hub-index-group > div { display: grid; } .market-asset-hub-card { display: grid; min-width: 0; min-height: 68px; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background 160ms ease, transform 160ms ease; } .market-asset-hub-card:last-child { border-bottom: 0; } .market-asset-hub-card:hover { background: color-mix(in srgb, var(--accent) 6%, var(--card)); } .market-asset-hub-card:active { transform: scale(0.992); } .market-asset-hub-logo { position: relative; display: grid; width: 38px; height: 38px; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 12px; background: var(--card); color: var(--accent); box-shadow: 0 7px 18px rgba(20, 31, 27, 0.08); } .market-asset-hub-logo img { position: relative; z-index: 2; width: 23px; height: 23px; object-fit: contain; } .market-asset-hub-logo > b { font-size: 12px; font-weight: 900; } .market-asset-hub-logo.index > b { position: absolute; z-index: 1; inset: auto 3px 2px; overflow: hidden; color: var(--muted); font-size: 11px; text-align: center; text-overflow: ellipsis; } .market-asset-hub-logo > small { position: absolute; right: -2px; bottom: -13px; left: -2px; overflow: hidden; white-space: nowrap; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: 0.35px; text-align: center; text-overflow: ellipsis; text-transform: uppercase; } .market-asset-hub-logo.currency { background: linear-gradient(145deg, color-mix(in srgb, #5268ff 16%, var(--card)), var(--card)); color: #5268d7; } .market-asset-hub-logo.metal { background: linear-gradient(145deg, #fff8dc, #e9d28b); color: #765811; } .market-asset-hub-logo.energy { background: linear-gradient(145deg, #242936, #0e121a); color: #7ed3ff; } .market-asset-hub-logo.agriculture { background: linear-gradient(145deg, #f1f8e8, #d9e9b8); color: #51762b; } .market-asset-hub-logo svg { width: 21px; height: 21px; fill: currentColor; stroke: currentColor; stroke-width: 1.7; } .market-asset-hub-copy { display: block; min-width: 0; } .market-asset-hub-copy strong, .market-asset-hub-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .market-asset-hub-copy strong { color: var(--ink); font-size: 12px; } .market-asset-hub-copy small { margin-top: 4px; color: var(--muted); font-size: 11px; } .market-asset-hub-copy .flag { width: 14px; margin-right: 4px; vertical-align: -2px; } .market-asset-hub-quote { display: block; min-width: 74px; text-align: right; } .market-asset-hub-quote strong, .market-asset-hub-quote span { display: block; white-space: nowrap; } .market-asset-hub-quote strong { color: var(--ink); font-size: 12px; } .market-asset-hub-quote span { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 750; } .market-asset-hub-quote.is-loading { display: grid; min-width: 78px; grid-template-columns: 18px auto; align-items: center; gap: 6px; text-align: left; } .market-asset-hub-quote.is-loading span { margin: 0; } .market-asset-hub-loader { position: relative; display: block; width: 18px; height: 18px; border: 2px solid color-mix(in srgb, var(--accent) 16%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: market-asset-hub-spin 760ms linear infinite; } .market-asset-hub-loader::after { position: absolute; inset: 4px; border-radius: inherit; background: color-mix(in srgb, var(--accent) 18%, transparent); content: ""; } .market-asset-hub-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); } .market-asset-hub-summary span { color: var(--ink); font-size: 12px; font-weight: 750; } .market-asset-hub-summary span strong { color: var(--accent); font-size: 14px; } .market-asset-hub-summary > small { flex: 1; color: var(--muted); font-size: 11px; } .market-asset-hub-summary .ghost-button { flex: 0 0 auto; } .market-asset-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .market-asset-hub-grid .market-asset-hub-card { border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-soft) 58%, var(--card)); } @keyframes market-asset-hub-enter { from { opacity: 0.35; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes market-asset-hub-spin { to { transform: rotate(360deg); } } @media (max-width: 1180px) { .market-asset-hub-index-groups, .market-asset-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .market-asset-hub-head { align-items: stretch; flex-direction: column; gap: 13px; padding: 17px 15px 14px; } .market-asset-hub-tabs { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); } .market-asset-hub-tabs button { justify-content: center; padding: 0 6px; font-size: 11.5px; } .market-asset-hub-tabs button b { min-width: 17px; height: 17px; padding: 0 3px; font-size: 11px; } .market-asset-hub-mount { padding: 12px; } .market-asset-hub-index-groups, .market-asset-hub-grid { grid-template-columns: 1fr; } .market-asset-hub-summary { align-items: flex-start; flex-wrap: wrap; } .market-asset-hub-summary > small { flex-basis: calc(100% - 100px); } .market-asset-hub-summary .ghost-button { width: 100%; } .market-asset-hub-card { min-height: 64px; } } @media (prefers-reduced-motion: reduce) { .market-asset-hub-mount, .market-asset-hub-loader { animation: none; } } .market-activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } .activity-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); } .activity-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 12px; background: var(--card); cursor: pointer; transition: background 140ms ease; } .activity-row:hover { background: var(--surface-soft); } .activity-rank { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 999px; background: #edf8f3; color: var(--green); font-size: 11.5px; font-weight: 900; } .ticker-mark.small { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; } .activity-row strong, .activity-row small { display: block; } .activity-row div strong { font-size: 11px; } .activity-row div small { max-width: 220px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .activity-row > span:last-child { text-align: right; } .activity-row > span:last-child strong { font-size: 11px; } .activity-row > span:last-child small { color: var(--muted); font-size: 11px; } .full-chart-wrap { min-height: 0; padding: 4px 14px 6px; } .full-chart-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 4px 3px 8px; } .full-chart-meta strong { font-size: 24px; letter-spacing: -0.8px; } .chart-legend { display: flex; gap: 16px; color: var(--muted); font-size: 11.5px; } .chart-legend b { color: #46564e; font-weight: 750; } .full-chart-svg { display: block; width: 100%; height: 255px; overflow: visible; } .candlestick-svg .candle { shape-rendering: crispEdges; } .candlestick-svg path { pointer-events: none; } .chart-y-label, .chart-x-label { fill: #95a19a; font-size: 11.5px; } .full-chart-svg, .bench-chart-svg { cursor: crosshair; } .chart-cursor { pointer-events: none; } .chart-cursor .cursor-vline { stroke: var(--muted, #95a19a); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.7; vector-effect: non-scaling-stroke; } .chart-cursor .cursor-dot { fill: #fff; stroke: var(--green, #1d7b5e); stroke-width: 2; vector-effect: non-scaling-stroke; } .chart-cursor-tip { position: fixed; z-index: 9999; display: none; flex-direction: column; gap: 2px; max-width: 240px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 11px; font-weight: 600; line-height: 1.45; box-shadow: 0 12px 30px rgba(8, 22, 16, 0.28); pointer-events: none; } .chart-cursor-tip.show { display: flex; } .chart-cursor-tip b { color: var(--ink); font-size: 12px; font-weight: 800; } .chart-cursor-tip span { color: var(--muted); display: flex; align-items: center; gap: 6px; } .chart-cursor-tip span.up { color: var(--green-2, #1f8a6b); } .chart-cursor-tip span.down { color: var(--red, #bd5558); } .chart-cursor-tip i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; } .chart-selection { pointer-events: none; } .chart-selection .selection-rect { fill: rgba(47, 128, 237, 0.16); stroke: rgba(47, 128, 237, 0.5); stroke-width: 1; vector-effect: non-scaling-stroke; } .chart-selection .selection-edge { stroke: rgba(47, 128, 237, 0.85); stroke-width: 1; vector-effect: non-scaling-stroke; } .full-chart-wrap, .bench-chart-wrap { position: relative; } .chart-range-label { position: absolute; top: 6px; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 9px; border: 1px solid rgba(47, 128, 237, 0.45); border-radius: 9px; background: var(--card); box-shadow: 0 6px 16px rgba(8, 22, 16, 0.22); pointer-events: none; white-space: nowrap; } .chart-range-label small { color: var(--muted); font-size: 11.5px; font-weight: 700; } .chart-range-label strong { font-size: 13px; font-weight: 800; } .chart-range-label.up strong { color: var(--green-2, #1f8a6b); } .chart-range-label.down strong { color: var(--red, #bd5558); } .volume-bar { fill: #cfe2da; } .company-chart-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.55fr); gap: 16px; margin-bottom: 16px; } .financial-bars { display: flex; height: 225px; align-items: flex-end; justify-content: space-around; gap: 12px; padding: 18px 16px 14px; } .financial-column { display: flex; height: 100%; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; } .financial-column strong { font-size: 11px; } .financial-bar { width: min(44px, 78%); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #65c7a2, #1c785b); } .financial-bar.profit { background: linear-gradient(180deg, #84b9ff, #2f80ed); } .financial-column small { color: var(--muted); font-size: 11px; } .calendar-source { padding: 13px 18px; border-top: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); font-size: 11.5px; line-height: 1.45; } .calendar-source a { color: var(--green); font-weight: 700; text-decoration: none; } .holiday-name { color: var(--muted); font-size: 11.5px; } .news-panel { margin-top: 16px; } .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); } .news-card { min-height: 155px; padding: 18px; background: var(--card); cursor: pointer; transition: background 140ms ease; } .news-card:hover { background: var(--surface-soft); } .news-expandable { cursor: pointer; } .news-expandable.expanded { background: linear-gradient(180deg, var(--card), var(--surface-soft)); } .news-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .news-source { color: var(--green-2); font-size: 11px; font-weight: 850; letter-spacing: 0.45px; text-transform: uppercase; } .source-flag { display: inline-flex; margin-right: 5px; filter: saturate(1.1); } .news-time { color: var(--muted); font-size: 11px; display: inline-flex; align-items: center; gap: 6px; } .news-ai-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--green-2); background: color-mix(in srgb, var(--green-2) 14%, transparent); border: 1px solid color-mix(in srgb, var(--green-2) 32%, transparent); } .news-ai-summary { position: relative; } .news-card h3 { margin: 15px 0 8px; font-size: 12px; line-height: 1.45; } .news-card p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .news-card.expanded > p, .news-timeline-item.expanded > div > p, .rich-news-item.expanded .company-copy > p { display: block; -webkit-line-clamp: unset; } .news-expanded { display: none; margin-top: 11px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,0.68); } .news-expandable.expanded .news-expanded { display: block; } .news-expanded strong, .news-expanded p { display: block; } .news-expanded strong { color: var(--green); font-size: 11.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .news-expanded p { margin: 5px 0 0; color: var(--ink); font-size: 12px; line-height: 1.5; } .rich-news-item .news-expanded p { display: block; overflow: visible; -webkit-line-clamp: unset; } .news-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; } .news-read-more { color: var(--green); font-size: 11px; font-weight: 850; text-transform: uppercase; } .demo-label { padding: 4px 7px; border-radius: 6px; background: #f4f1e8; color: #987432; font-size: 11px; font-weight: 850; letter-spacing: 0.4px; } @media (max-width: 1180px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-grid, .dashboard-lower, .landing-hero, .landing-split, .landing-product-preview, .company-detail-grid, .analyst-brief, .model-signal-grid, .market-overview, .market-activity-grid, .company-chart-grid, .report-data-cockpit, .report-robot-grid, .report-robot-tables, .report-v2-grid, .report-expectations-grid, .report-queue-overview, .reports-layout { grid-template-columns: 1fr; } .market-index-strip { grid-template-columns: repeat(2, 1fr); } .catalog-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .report-automation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .report-robot-stat-grid, .report-robot-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } .index-overview-strip, .catalog-stat-grid, .catalog-quality-grid, .report-metrics-grid, .risk-map, .crypto-flow-grid, .crypto-source-grid, .crypto-news-list, .business-profile-layout, .data-passport, .data-gap-grid, .data-foundation-grid, .data-contract-strip, .data-quality-grid, .api-preflight-summary, .score-band-grid, .score-formula-strip, .score-audit-grid, .report-reading-grid, .expectation-import-stats, .expectation-worklist-grid, .feed-health-summary, .feed-health-grid, .report-parser-grid, .report-source-strip, .financial-data-passport, .report-quality-grid, .report-compare-grid, .report-sanity-list, .report-truth-grid, .report-truth-summary, .report-truth-list, .report-reliability-grid, .report-ops-grid, .dividend-control-grid, .source-audit-summary, .source-blocker-list { grid-template-columns: repeat(2, 1fr); } .report-expectation-panel { grid-template-columns: 1fr; } .source-audit-row { grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(96px, 0.5fr)); } .index-overview-strip.compact { display: block; } .index-group-grid { grid-template-columns: 1fr; } .catalog-radar-head, .catalog-quality-head, .catalog-gap-board, .catalog-hot-strip { align-items: stretch; flex-direction: column; } .catalog-market-chips, .catalog-quality-actions, .catalog-gap-list, .catalog-hot-list { justify-content: flex-start; } .report-highlights { grid-template-columns: 1fr; } .news-grid { grid-template-columns: repeat(2, 1fr); } .landing-feature-grid { grid-template-columns: repeat(2, 1fr); } .landing-audience-grid, .landing-data-grid, .landing-trust-grid, .landing-faq-list, .landing-roadmap-grid { grid-template-columns: repeat(2, 1fr); } .onboarding-step-grid { grid-template-columns: repeat(2, 1fr); } .landing-visual { min-height: 390px; } .landing-terminal-preview { transform: none; } .next-steps-grid { grid-template-columns: repeat(2, 1fr); } .legal-rule-list { grid-template-columns: repeat(2, 1fr); } .signals-list { display: grid; grid-template-columns: 1fr 1fr; } .financial-results { grid-template-columns: 1fr; } .analyst-actions-card div { grid-template-columns: 1fr; } .signal-row:nth-child(odd) { border-right: 1px solid var(--line); } } @media (max-width: 900px) { .sidebar { width: 78px; padding-right: 12px; padding-left: 12px; } .brand { justify-content: center; padding-right: 0; padding-left: 0; } .brand > span:last-child, .nav-item span:not(.nav-count), .demo-note, .profile-copy, .profile-button > span:last-child { display: none; } .nav-item { justify-content: center; padding-right: 0; padding-left: 0; } .nav-count { position: absolute; margin: -20px 0 0 22px; } .profile-button { justify-content: center; } .main-area { margin-left: 78px; } .view-loader { left: calc(78px + (100vw - 78px) / 2); } .market-state { display: none; } .allocation-grid { grid-template-columns: 1fr; } .landing-hero { min-height: auto; padding: 30px; } .landing-hero h1 { letter-spacing: -2.2px; } .landing-glass-card.main { right: 18px; left: 18px; } .landing-glass-card.floating.status { right: 24px; } .landing-test-banner { grid-template-columns: 1fr; } .onboarding-head { align-items: flex-start; } .public-nav { grid-template-columns: 1fr auto; } .public-nav-links { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; } } @media (max-width: 680px) { .catalog-market-shortcuts, .index-strip-head, .portfolio-share-sync-card { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; } .catalog-market-shortcuts { padding: 11px; } .catalog-market-chips.compact, .index-strip-actions { justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; } .catalog-market-chips.compact button, .index-strip-actions button { flex: 0 0 auto; } .pulse-range-note { align-items: flex-start; flex-direction: column; } .pulse-range-tabs { max-width: 100%; overflow-x: auto; } .news-modal-backdrop { align-items: stretch; padding: 8px; } .news-modal { width: 100%; max-height: calc(100vh - 16px); padding: 18px; border-radius: 22px; } .news-modal-header { flex-direction: column; gap: 12px; } .news-modal-controls { width: 100%; justify-content: space-between; } .news-modal-brief-grid { grid-template-columns: 1fr; } .news-modal-mini-card { min-height: auto; } .news-modal-content h3 { font-size: 22px; } .news-modal-section p { font-size: 13px; } .news-modal-actions { display: grid; grid-template-columns: 1fr; } .report-v2-form-grid { grid-template-columns: 1fr; } .report-v2-grid, .report-robot-grid, .report-robot-tables, .report-expectations-grid, .report-v2-recent { padding-right: 14px; padding-left: 14px; } .report-robot-controls, .report-robot-stages, .report-queue-form, .report-queue-list, .report-queue-overview { margin-right: 14px; margin-left: 14px; padding-right: 0; padding-left: 0; } .report-queue-pills { grid-template-columns: 1fr; } .report-robot-controls, .report-robot-stat-grid, .report-robot-stages { grid-template-columns: 1fr; } .report-robot-controls { padding: 14px; } .report-queue-item, .report-queue-main, .report-queue-actions { align-items: stretch; flex-direction: column; } .report-queue-actions { justify-content: flex-start; } .sidebar { width: 244px; transform: translateX(-100%); transition: transform 180ms ease; } .sidebar.open { transform: translateX(0); } .brand > span:last-child, .nav-item span:not(.nav-count), .demo-note, .profile-copy, .profile-button > span:last-child { display: block; } .nav-item { justify-content: flex-start; padding: 12px 14px; } .nav-count { position: static; margin: 0; } .main-area { margin-left: 0; } .view-loader { top: 76px; left: 50%; } .loader-card { min-width: min(280px, calc(100vw - 28px)); } .topbar { height: 64px; padding: 0 14px; } .mobile-menu { display: block; } .global-search { width: auto; flex: 1; } .global-search kbd, .topbar-actions .icon-button, .feedback-chip, .topbar-actions .primary-button span + span { display: none; } .topbar-actions .primary-button { width: 40px; padding: 0; font-size: 0; } .topbar-actions .primary-button > span { font-size: 18px; } .content { padding: 23px 14px 40px; } .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 18px; } .stats-grid { grid-template-columns: 1fr; } .catalog-groups-head { align-items: stretch; flex-direction: column; } .company-data-gaps-head { align-items: stretch; flex-direction: column; } .score-audit-head { align-items: stretch; flex-direction: column; } .score-adjustment-list article { grid-template-columns: 1fr; } .catalog-group-grid { grid-template-columns: 1fr; } .report-automation-grid { grid-template-columns: 1fr; } .report-automation-panel { padding: 14px; border-radius: 18px; } .market-index-strip, .catalog-stat-grid, .catalog-quality-grid, .landing-feature-grid, .landing-audience-grid, .landing-data-grid, .landing-trust-grid, .landing-faq-list, .landing-roadmap-grid, .landing-terminal-grid, .business-profile-layout, .landing-flow, .onboarding-step-grid, .news-grid, .index-overview-strip, .report-metrics-grid, .risk-map, .crypto-flow-grid, .crypto-source-grid, .crypto-news-list, .data-passport, .data-gap-grid, .data-foundation-grid, .data-contract-strip, .data-quality-grid, .api-preflight-summary, .score-band-grid, .score-formula-strip, .score-audit-grid, .report-reading-grid, .feed-health-summary, .feed-health-grid, .report-parser-grid, .report-source-strip, .financial-data-passport, .report-compare-grid, .report-truth-grid, .report-truth-summary, .report-truth-list, .report-reliability-grid, .report-ops-grid, .ai-safety-grid, .next-steps-grid, .catalog-count-strip, .dividend-control-grid, .source-audit-summary, .source-blocker-list { grid-template-columns: 1fr; } .report-status-table-wrap, .ai-safety-grid, .next-steps-grid { padding-right: 14px; padding-left: 14px; } .source-audit-row { grid-template-columns: 1fr; align-items: stretch; } .api-preflight-row { grid-template-columns: 1fr; align-items: stretch; } .api-preflight-row small { white-space: normal; } .api-preflight-row em { text-align: left; } .source-audit-row > span { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; } .data-foundation-actions, .data-foundation-hero { grid-template-columns: 1fr; justify-content: flex-start; } .data-foundation-actions { align-items: stretch; } .data-foundation-actions .ghost-button { justify-content: center; } .data-foundation-card-head { grid-template-columns: auto minmax(0, 1fr); } .data-foundation-card-head .quality-badge { grid-column: 1 / -1; width: fit-content; } .data-foundation-hero, .data-refresh-error { margin-right: 14px; margin-left: 14px; } .data-foundation-grid, .data-contract-strip { padding-right: 14px; padding-left: 14px; } .business-profile-lead { grid-row: auto; grid-template-columns: 1fr; } .catalog-radar-panel { padding: 11px; border-radius: 16px; } .catalog-market-chips button, .catalog-hot-list button { flex: 1 1 auto; justify-content: center; } .crypto-sentiment-strip { grid-template-columns: repeat(2, 1fr); } .landing-ticker::before, .landing-ticker::after { width: 36px; } .public-nav { position: relative; top: 0; grid-template-columns: 1fr; border-radius: 18px; } .public-nav-actions { display: grid; grid-template-columns: 1fr 1fr; } .public-nav-links { justify-content: flex-start; } .public-brand small { display: none; } .landing-hero { padding: 22px; border-radius: 24px; } .landing-hero h1 { font-size: clamp(34px, 12vw, 52px); letter-spacing: -1.75px; } .landing-cta-row { align-items: stretch; flex-direction: column; } .landing-cta-row .primary-button, .landing-cta-row .ghost-button, .landing-test-banner .primary-button { width: 100%; justify-content: center; } .landing-trust-row { display: grid; grid-template-columns: 1fr; } .landing-visual { min-height: 520px; } .landing-glass-card.main, .landing-glass-card.floating.score, .landing-glass-card.floating.status { position: relative; inset: auto; width: 100%; margin-top: 12px; } .landing-glass-card.main { animation: none; } .landing-wave { height: 170px; } .landing-wave .chart-svg { height: 150px; } .landing-hot-row { grid-template-columns: 24px auto 1fr; } .landing-hot-row > b { grid-column: 3; } .landing-feature-card { min-height: 0; } .landing-product-preview { padding: 20px; border-radius: 24px; } .landing-preview-copy h2 { letter-spacing: -1.45px; } .landing-preview-actions { align-items: stretch; flex-direction: column; } .landing-preview-actions .primary-button, .landing-preview-actions .ghost-button { width: 100%; } .landing-terminal-chart { min-height: 250px; } .landing-terminal-chart .chart-svg { height: 170px; } .landing-terminal-feed div { grid-template-columns: 1fr; } .landing-terminal-feed span { white-space: normal; } .landing-trust-card { min-height: 0; } .landing-feedback-strip { grid-template-columns: 1fr; } .landing-feedback-strip .primary-button { width: 100%; } .landing-footer { align-items: flex-start; flex-direction: column; } .landing-footer > div:last-child { justify-content: flex-start; } .landing-flow::before { display: none; } .onboarding-panel { padding: 17px; } .onboarding-head { flex-direction: column; } .onboarding-progress { width: 92px; height: 92px; } .onboarding-actions { align-items: stretch; flex-direction: column; } .onboarding-actions .primary-button, .onboarding-actions .secondary-button, .onboarding-actions .ghost-button { width: 100%; } .next-steps-grid { grid-template-columns: 1fr; } .legal-rule-list { grid-template-columns: 1fr; } .mini-countdown { grid-template-columns: repeat(3, 1fr); } .mini-countdown em { grid-column: 1 / -1; } .report-card-metrics { grid-template-columns: repeat(2, 1fr); } .alert-event { grid-template-columns: 1fr; } .alert-event-side { justify-items: start; } .alert-focus-card { grid-template-columns: 1fr; } .alert-focus-card .ghost-button { grid-column: auto; } .market-hero { min-height: 220px; padding: 22px; } .session-card { padding: 17px; } .phase-item { grid-template-columns: 66px 1fr auto; } .full-chart-meta { align-items: flex-start; flex-direction: column; } .chart-legend { flex-wrap: wrap; } .full-chart-wrap { overflow-x: hidden; padding: 6px 6px 10px; min-height: auto; } .full-chart-svg { min-width: 0; width: 100%; height: 210px; } .signals-list { display: block; } .signal-row:nth-child(odd) { border-right: 0; } .filters-bar { align-items: stretch; flex-direction: column; } .local-search { min-width: 0; } .company-hero { grid-template-columns: 1fr; padding: 18px 16px; gap: 14px; } .company-identity { flex-wrap: wrap; gap: 10px 12px; } .company-identity h1 { font-size: 22px; } .company-identity > div { flex: 1 1 140px; min-width: 0; } .company-identity .ticker-mark { width: 46px; height: 46px; } .company-hero .session-badge { flex: 0 0 auto; white-space: normal; max-width: 100%; } .company-hero .session-hours { flex: 1 1 100%; margin-top: 2px; } .analyst-verdict-card, .analyst-score-card, .analyst-list-card, .analyst-actions-card { padding: 14px; } .analyst-score-card { grid-template-columns: 1fr; justify-items: start; } .analyst-ring { width: 92px; height: 92px; } .score-gauge { position: static; width: 118px; height: 118px; align-self: center; margin: 2px auto 8px; overflow: visible; } .score-gauge::before { width: 96px; height: 96px; } .score-gauge strong { font-size: 27px; } .score-subnote { display: none; } .metrics-grid { grid-template-columns: 1fr 1fr; } .legend-list { grid-template-columns: 1fr; } .data-actions { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .full-width { grid-column: auto; } .modal-actions { display: grid; grid-template-columns: 1fr 1fr; } } .flag { display: inline-block; width: 18px; height: 12.6px; border-radius: 2px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); flex: 0 0 auto; } .market-chip .flag, .badge .flag { vertical-align: -1px; } .market-mini-logo { overflow: visible; } .market-mini-logo .flag { width: 22px; height: 15.4px; } @media (max-width: 700px) { .financial-chart-head, .report-quality-head, .report-compare-head, .report-compare-actions, .expectation-prefill-banner, .expectation-import-preview-head, .expectation-import-actions, .expectation-worklist-head, .expectation-worklist-actions, .report-truth-main { align-items: stretch; flex-direction: column; } .expectation-worklist-actions { min-width: 0; } .report-quality-grid, .report-compare-grid, .expectation-import-stats, .expectation-worklist-grid, .report-truth-grid, .report-truth-summary, .report-truth-list, .report-reliability-grid, .report-ops-grid, .report-expectation-reasons { grid-template-columns: 1fr; } .company-table th:nth-child(2), .company-table td:nth-child(2), .company-table th:nth-child(5), .company-table td:nth-child(5), .company-table th:nth-child(6), .company-table td:nth-child(6), .company-table th:nth-child(7), .company-table td:nth-child(7), .company-table th:nth-child(9), .company-table td:nth-child(9), .company-table th:nth-child(10), .company-table td:nth-child(10) { display: none; } .company-table td, .company-table th { padding: 11px 8px; font-size: 11px; } .company-table .table-company small { display: none; } .company-table .company-copy strong { font-size: 12px; } .company-table .company-copy-rich em { display: none; } .company-table .source-mini { display: none; } .company-table td:nth-child(3) br { display: none; } .company-table .score-bar { display: none; } .company-table td:nth-child(8) br, .company-table td:nth-child(8) small { display: none; } .company-table .table-company { gap: 6px; } .company-table .ticker-mark { width: 28px; height: 28px; font-size: 11.5px; flex-shrink: 0; } .company-table td, .company-table th { padding: 10px 5px; } .company-table table { width: 100%; table-layout: fixed; } .company-table th:nth-child(1), .company-table td:nth-child(1) { width: 44%; } .company-table th:nth-child(3), .company-table td:nth-child(3) { width: 22%; } .company-table th:nth-child(4), .company-table td:nth-child(4) { width: 16%; } .company-table th:nth-child(8), .company-table td:nth-child(8) { width: 18%; } .company-table .company-copy { min-width: 0; } .company-table .company-copy strong { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; } .company-table .watch-star { flex-shrink: 0; } .company-table td:nth-child(3) { overflow-wrap: anywhere; } .company-table th { white-space: normal; overflow: hidden; font-size: 11.5px; letter-spacing: 0; } .tx-table th:nth-child(4), .tx-table td:nth-child(4), .tx-table th:nth-child(5), .tx-table td:nth-child(5), .tx-table th:nth-child(6), .tx-table td:nth-child(6) { display: none; } .div-table, .div-table thead, .div-table tbody, .div-table tr, .div-table td { display: block; width: 100%; } .div-table thead { display: none; } .div-table tr { margin-bottom: 9px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); } .div-table tr:last-child { margin-bottom: 0; } .div-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0 !important; border: 0 !important; font-size: 12.5px !important; text-align: right; } .div-table td::before { content: attr(data-label); flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 750; text-align: left; } .div-table td[data-label="Spółka"] { justify-content: flex-start; padding-bottom: 9px !important; border-bottom: 1px solid var(--line) !important; margin-bottom: 4px; } .div-table td[data-label="Spółka"]::before { display: none; } .div-table td[data-label="Spółka"] .value-strong { font-size: 14px; font-weight: 850; } .div-table td[data-label="Netto"], .div-table td[data-label="Brutto"] { font-size: 15px !important; font-weight: 860; } .tax-table th:nth-child(2), .tax-table td:nth-child(2), .tax-table th:nth-child(3), .tax-table td:nth-child(3), .tax-table th:nth-child(4), .tax-table td:nth-child(4) { display: none; } .tax-hero { grid-template-columns: 1fr; gap: 16px; padding: 18px; } .tax-hero-main { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 14px; } .tax-hero-legend { grid-template-columns: 1fr; } .bond-offer-table th:nth-child(4), .bond-offer-table td:nth-child(4) { display: none; } .tx-table td, .tx-table th, .div-table td, .div-table th, .tax-table td, .tax-table th, .bond-offer-table td, .bond-offer-table th { padding: 11px 10px; font-size: 11px; } } .auth-scene-backdrop { --auth-accent: 103, 210, 169; --auth-warm: 249, 190, 90; --auth-bg-a: #020806; --auth-bg-b: #071710; --auth-bg-c: #020403; display: block; overflow: hidden; padding: 0; background: radial-gradient(circle at 76% 18%, rgba(var(--auth-accent), 0.2), transparent 28%), radial-gradient(circle at 18% 82%, rgba(var(--auth-warm), 0.11), transparent 30%), linear-gradient(135deg, var(--auth-bg-a), var(--auth-bg-b) 48%, var(--auth-bg-c)); backdrop-filter: none; } :root[data-theme="ocean"] .auth-scene-backdrop { --auth-accent:47,128,237; --auth-warm:106,166,245; --auth-bg-a:#020817; --auth-bg-b:#071b3a; --auth-bg-c:#02040b; } :root[data-theme="fiolet"] .auth-scene-backdrop { --auth-accent:139,92,246; --auth-warm:183,155,246; --auth-bg-a:#090315; --auth-bg-b:#201040; --auth-bg-c:#05020b; } :root[data-theme="bursztyn"] .auth-scene-backdrop { --auth-accent:234,115,23; --auth-warm:246,176,78; --auth-bg-a:#100602; --auth-bg-b:#2a1508; --auth-bg-c:#080301; } :root:is([data-theme="dark"],[data-theme="cyber"]) .auth-scene-backdrop { --auth-accent:60,196,151; --auth-warm:103,210,169; --auth-bg-a:#030705; --auth-bg-b:#0b1712; --auth-bg-c:#010302; } .auth-scene-backdrop::before { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(2, 8, 6, 0.72), rgba(2, 8, 6, 0.16) 38%, rgba(2, 8, 6, 0.82) 100%), linear-gradient(180deg, rgba(2, 8, 6, 0.78), transparent 30%, rgba(2, 8, 6, 0.9)); content: ""; } .auth-market-rain { position: absolute; inset: -8vh -4vw; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 260ms ease; contain: strict; } .auth-market-active .auth-market-rain { opacity: 1; } .auth-market-lane { position: absolute; top: 0; bottom: 0; width: 236px; transform: rotate(var(--lane-tilt, -2deg)); contain: layout paint; } .auth-market-lane.lane-1 { left: 2%; --lane-duration: 25s; --lane-delay: -4s; --lane-tilt: -4deg; } .auth-market-lane.lane-2 { left: 18%; --lane-duration: 31s; --lane-delay: -16s; --lane-tilt: 2deg; } .auth-market-lane.lane-3 { left: 36%; --lane-duration: 28s; --lane-delay: -9s; --lane-tilt: -1deg; } .auth-market-lane.lane-4 { left: 55%; --lane-duration: 34s; --lane-delay: -21s; --lane-tilt: 3deg; } .auth-market-lane.lane-5 { left: 77%; --lane-duration: 29s; --lane-delay: -12s; --lane-tilt: -3deg; } .auth-market-lane.lane-6 { display:none; } .auth-market-track { display: grid; gap: 14px; min-height: 200%; animation: auth-market-rain-fall var(--lane-duration, 30s) linear infinite; animation-delay: var(--lane-delay, 0s); will-change: transform; backface-visibility: hidden; transform: translateZ(0); } .auth-market-tile { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 70px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)), rgba(6, 20, 15, 0.62); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2); color: #f7fff9; opacity: 0.9; transform: translateZ(0); contain: layout paint style; backface-visibility: hidden; } .auth-market-tile.positive { border-color: rgba(80, 221, 152, 0.28); box-shadow: 0 22px 70px rgba(25, 169, 106, 0.14); } .auth-market-tile.negative { border-color: rgba(255, 107, 107, 0.24); box-shadow: 0 22px 70px rgba(226, 87, 76, 0.13); } .auth-market-logo { width: 44px; height: 44px; border-color: rgba(255, 255, 255, 0.2); border-radius: 15px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); flex: 0 0 auto; } .auth-market-logo img { background: #fff; padding: 4px; } .auth-market-logo em { display: none; } .auth-market-copy, .auth-market-price { display: grid; min-width: 0; } .auth-market-copy strong { overflow: hidden; font-size: 15px; font-weight: 950; letter-spacing: 0; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .auth-market-copy small { overflow: hidden; margin-top: 3px; color: rgba(238, 252, 246, 0.66); font-size: 12px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .auth-market-price { justify-items: end; text-align: right; } .auth-market-price b { max-width: 92px; overflow: hidden; color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 950; letter-spacing: 0; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .auth-market-price small { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 4px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #d9e6df; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 950; } .auth-market-price i { display: grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; font-style: normal; } .auth-market-tile.positive .auth-market-price small { background: rgba(70, 221, 151, 0.14); color: #78f0b4; } .auth-market-tile.positive .auth-market-price i { background: rgba(70, 221, 151, 0.17); } .auth-market-tile.negative .auth-market-price small { background: rgba(255, 103, 103, 0.14); color: #ff8f8f; } .auth-market-tile.negative .auth-market-price i { background: rgba(255, 103, 103, 0.16); } .auth-scene-backdrop .auth-modal { position: absolute; top: 50%; right: max(28px, 6vw); z-index: 2; width: min(510px, calc(100vw - 40px)); border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(245, 252, 248, 0.88)), var(--card); box-shadow: 0 34px 100px rgba(0, 0, 0, 0.36); transform: translateY(calc(-50% + 14px)) scale(0.98); backdrop-filter: blur(18px); } .auth-scene-backdrop.open .auth-modal { transform: translateY(-50%) scale(1); } .auth-scene-backdrop .auth-modal .modal-header { padding-bottom: 13px; border-bottom: 1px solid color-mix(in srgb, var(--green) 12%, var(--line)); } .auth-scene-backdrop .auth-modal .modal-header h2 { font-size: 28px; letter-spacing: 0; } .auth-scene-backdrop .auth-modal .eyebrow { color: var(--green); } .auth-profile-mode { display: grid; place-items: center; padding: 20px; background: rgba(9, 25, 19, 0.48); backdrop-filter: blur(5px); } .auth-profile-mode::before, .auth-profile-mode .auth-market-rain { display: none; } .auth-profile-mode .auth-modal { position: relative; top: auto; right: auto; width: min(520px, 100%); transform: translateY(12px) scale(0.98); } .auth-profile-mode.open .auth-modal { transform: translateY(0) scale(1); } .auth-modal [data-auth-body] { margin-top: 4px; } .auth-setup-notice { display: grid; gap: 7px; margin: 0 0 16px; padding: 14px 15px; border: 1px solid rgba(226, 87, 76, 0.18); border-radius: 18px; background: radial-gradient(circle at 10% 0%, rgba(226, 87, 76, 0.12), transparent 34%), linear-gradient(135deg, rgba(255, 246, 239, 0.96), rgba(255, 255, 255, 0.92)); box-shadow: 0 14px 34px rgba(58, 42, 34, 0.08); } .auth-setup-notice strong { color: #b13a31; font-size: 13px; font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; } .auth-setup-notice span { color: var(--ink); font-size: 13px; line-height: 1.5; } .auth-setup-notice small { color: var(--muted); font-size: 11px; line-height: 1.45; } .auth-setup-notice code { padding: 1px 5px; border-radius: 8px; background: rgba(255, 255, 255, 0.72); color: var(--green); font-weight: 800; } .auth-setup-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; } .auth-setup-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 11px; border: 1px solid rgba(15, 111, 86, 0.16); border-radius: 999px; color: var(--green); background: rgba(255, 255, 255, 0.72); font-size: 11px; font-weight: 900; text-decoration: none; } .auth-setup-links a:hover { border-color: rgba(15, 111, 86, 0.32); background: rgba(255, 255, 255, 0.94); transform: translateY(-1px); } .account-danger { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .account-danger > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--red); list-style: none; user-select: none; } .account-danger > summary::-webkit-details-marker { display: none; } .account-danger > summary::before { content: "⚠ "; } .account-danger[open] > summary { margin-bottom: 10px; } .account-danger .field { margin: 8px 0; } .danger-button { width: 100%; min-height: 44px; border: 1px solid var(--red); border-radius: 12px; background: var(--red-soft); color: var(--red); font-weight: 700; font-size: 13px; cursor: pointer; } .danger-button:hover { background: var(--red); color: #fff; } .danger-button:disabled { opacity: 0.6; cursor: default; } .account-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-bottom: 18px; padding: 14px; border: 1px solid rgba(18, 102, 79, 0.18); border-radius: 18px; background: radial-gradient(circle at 0 0, rgba(103, 210, 169, 0.22), transparent 36%), linear-gradient(135deg, rgba(230, 243, 237, 0.9), rgba(255, 255, 255, 0.92)); } .account-avatar { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; background: linear-gradient(145deg, var(--green), var(--green-2)); color: #fff; font-size: 14px; font-weight: 900; letter-spacing: 0.04em; box-shadow: 0 12px 28px rgba(18, 102, 79, 0.2); } .account-card strong, .account-card small { display: block; } .account-card strong { overflow: hidden; color: var(--ink); font-size: 16px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .account-card small { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .account-card em { align-self: start; padding: 6px 9px; border-radius: 999px; background: rgba(18, 102, 79, 0.09); color: var(--green); font-size: 11.5px; font-style: normal; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .auth-switch { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); } .auth-switch a { color: var(--green); font-weight: 600; text-decoration: none; } .auth-switch a:hover { text-decoration: underline; } .auth-code-input { text-align: center; font-size: 26px; font-weight: 700; letter-spacing: 12px; padding-left: 12px; } .auth-modal .form-hint.error { color: #e2574c; } .auth-sync-banner { position: fixed; right: 24px; bottom: 24px; z-index: 220; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 11px; width: min(360px, calc(100vw - 32px)); padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line)); border-radius: 18px; background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 36%), color-mix(in srgb, var(--card) 94%, white); box-shadow: 0 18px 45px rgba(13, 51, 38, 0.18); opacity: 0; pointer-events: none; transform: translateY(16px) scale(0.98); transition: opacity var(--motion-medium) ease, transform var(--motion-medium) ease; } .auth-sync-banner.show { opacity: 1; transform: translateY(0) scale(1); } .auth-sync-banner strong, .auth-sync-banner small { display: block; } .auth-sync-banner strong { color: var(--green); font-size: 13px; font-weight: 950; } .auth-sync-banner small { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.4; } .auth-sync-dot { width: 34px; height: 34px; border-radius: 13px; background: radial-gradient(circle, #fff 0 34%, transparent 36%), conic-gradient(var(--green), var(--brand-accent), color-mix(in srgb, var(--green) 12%, transparent), var(--green)); box-shadow: 0 10px 22px rgba(18, 102, 79, 0.16); animation: auth-orbit-spin 1.05s linear infinite; } .auth-sync-banner.done .auth-sync-dot { animation: none; background: linear-gradient(145deg, var(--green), var(--green-2)); } .auth-sync-banner.done .auth-sync-dot::after { content: "✓"; display: grid; height: 100%; place-items: center; color: white; font-size: 16px; font-weight: 950; } .auth-sync-banner.error { border-color: color-mix(in srgb, var(--red) 28%, var(--line)); } .auth-sync-banner.error strong { color: var(--red); } .auth-sync-banner.error .auth-sync-dot { animation: none; background: var(--red-soft); } .auth-sync-banner.error .auth-sync-dot::after { content: "!"; display: grid; height: 100%; place-items: center; color: var(--red); font-size: 17px; font-weight: 950; } .auth-loading-box { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 13px; margin: 2px 0 0; padding: 13px 14px; border: 1px solid rgba(18, 102, 79, 0.15); border-radius: 18px; background: radial-gradient(circle at 8% 0%, rgba(103, 210, 169, 0.22), transparent 38%), linear-gradient(135deg, rgba(247, 252, 250, 0.98), rgba(255, 255, 255, 0.94)); color: var(--ink); box-shadow: 0 16px 38px rgba(18, 102, 79, 0.09); } .auth-loading-orbit { position: relative; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 16px; background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 46%, transparent 47%), conic-gradient(from 90deg, var(--green), var(--brand-accent), rgba(18, 102, 79, 0.12), var(--green)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 12px 24px rgba(18, 102, 79, 0.16); animation: auth-orbit-spin 1.05s linear infinite; } .auth-loading-orbit::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(145deg, var(--green), var(--green-2)); box-shadow: 0 0 0 6px rgba(18, 102, 79, 0.09); } .auth-loading-orbit span, .auth-loading-orbit i, .auth-loading-orbit b { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent); box-shadow: 0 0 0 5px rgba(103, 210, 169, 0.16); animation: auth-dot-pulse 1.4s ease-in-out infinite; } .auth-loading-orbit span { top: 4px; right: 8px; } .auth-loading-orbit i { right: 3px; bottom: 12px; animation-delay: 0.18s; } .auth-loading-orbit b { left: 7px; bottom: 6px; animation-delay: 0.36s; } .auth-loading-copy { display: grid; gap: 4px; min-width: 0; } .auth-loading-copy strong { color: var(--green); font-size: 13px; font-weight: 950; letter-spacing: -0.01em; } .auth-loading-copy small { color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.45; } .auth-loading-copy small.is-changing { animation: auth-fact-pop 360ms ease both; } .auth-is-busy .field input { opacity: 0.72; } .auth-is-busy .primary-button:disabled { opacity: 0.92; cursor: progress; } @keyframes auth-orbit-spin { to { transform: rotate(360deg); } } @keyframes auth-dot-pulse { 0%, 100% { transform: scale(0.78); opacity: 0.62; } 45% { transform: scale(1.16); opacity: 1; } } @keyframes auth-fact-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes auth-market-rain-fall { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } } :root[data-motion="off"] .auth-loading-orbit, :root[data-motion="off"] .auth-loading-orbit span, :root[data-motion="off"] .auth-loading-orbit i, :root[data-motion="off"] .auth-loading-orbit b, :root[data-motion="off"] .auth-sync-dot, :root[data-motion="off"] .auth-loading-copy small.is-changing, :root[data-motion="off"] .auth-market-track, :root[data-motion="off"] .auth-market-tile { animation: none; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .auth-loading-orbit, :root:not([data-motion="on"]) .auth-loading-orbit span, :root:not([data-motion="on"]) .auth-loading-orbit i, :root:not([data-motion="on"]) .auth-loading-orbit b, :root:not([data-motion="on"]) .auth-sync-dot, :root:not([data-motion="on"]) .auth-loading-copy small.is-changing, :root:not([data-motion="on"]) .auth-market-track, :root:not([data-motion="on"]) .auth-market-tile { animation: none; } } .auth-friends { display: grid; gap: 14px; margin: 16px 0 4px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); } .auth-friends strong { font-size: 14px; } .auth-friends-invite small { display: block; margin-top: 8px; color: var(--muted); } .auth-friend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); } .auth-friend-row:last-child { border-bottom: 0; } .public-portfolio-chart { position: relative; overflow: hidden; padding: 10px 8px 4px; border: 1px solid color-mix(in srgb, var(--green) 13%, var(--line)); border-radius: 22px; background: radial-gradient(circle at 10% 0, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 32%), linear-gradient(180deg, var(--card), color-mix(in srgb, var(--green-soft) 18%, var(--card))); } .public-portfolio-chart svg { width: 100%; height: auto; min-height: 250px; } .private-workspace-gate { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 0.55fr); align-items: center; gap: clamp(22px, 4vw, 58px); min-height: min(560px, calc(100dvh - 220px)); padding: clamp(28px, 5vw, 72px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 30px; background: radial-gradient(circle at 9% 16%, color-mix(in srgb, var(--accent) 19%, transparent), transparent 31%), linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, var(--accent) 4%), var(--card)); box-shadow: 0 28px 80px rgba(7, 30, 23, 0.12); } .private-workspace-gate-glow { position: absolute; z-index: -1; right: -9rem; bottom: -12rem; width: 34rem; height: 34rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 13%, transparent); filter: blur(20px); } .private-workspace-gate-mark { position: relative; width: clamp(92px, 10vw, 138px); aspect-ratio: 1; border-radius: 32%; background: linear-gradient(145deg, #0f3026, #176a52); box-shadow: 0 25px 60px rgba(8, 55, 41, 0.25); } .private-workspace-gate-mark span, .private-workspace-gate-mark i, .private-workspace-gate-mark b { position: absolute; display: block; } .private-workspace-gate-mark span { inset: 25%; border: 4px solid #8fe0b6; border-radius: 50%; } .private-workspace-gate-mark i { top: 21%; left: 46%; width: 8%; height: 29%; border-radius: 999px; background: #f4d06f; } .private-workspace-gate-mark b { left: 39%; bottom: 28%; width: 22%; height: 17%; border: 4px solid #8fe0b6; border-top: 0; border-radius: 0 0 999px 999px; } .private-workspace-gate-copy { max-width: 720px; } .private-workspace-gate-copy h2 { max-width: 640px; margin: 8px 0 14px; font-size: clamp(32px, 4.2vw, 62px); line-height: 0.98; letter-spacing: -0.055em; } .private-workspace-gate-copy p { max-width: 680px; margin: 0; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.7; } .private-workspace-gate-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; } .private-workspace-gate-trust { display: grid; gap: 10px; } .private-workspace-gate-trust span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; padding: 15px; border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter: blur(12px); } .private-workspace-gate-trust b { color: var(--accent); font-size: 12px; letter-spacing: 0.12em; } .private-workspace-gate-trust small { color: var(--text); font-weight: 750; } @media (max-width: 940px) { .private-workspace-gate { grid-template-columns: auto minmax(0, 1fr); } .private-workspace-gate-trust { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 620px) { .private-workspace-gate { grid-template-columns: minmax(0, 1fr); min-height: auto; padding: 24px 18px; border-radius: 24px; } .private-workspace-gate-mark { width: 78px; border-radius: 24px; } .private-workspace-gate-copy h2 { font-size: 34px; } .private-workspace-gate-actions { display: grid; } .private-workspace-gate-actions button { width: 100%; } .private-workspace-gate-trust { grid-column: auto; grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .auth-scene-backdrop { padding: 14px; } .auth-scene-backdrop::before { background: linear-gradient(180deg, rgba(2, 8, 6, 0.54), rgba(2, 8, 6, 0.14) 44%, rgba(2, 8, 6, 0.88)); } .auth-market-rain { inset: -10vh -28vw; } .auth-market-lane { width: 210px; } .auth-market-lane.lane-1 { left: -18%; } .auth-market-lane.lane-2 { left: 22%; } .auth-market-lane.lane-3 { left: 62%; } .auth-market-lane.lane-4, .auth-market-lane.lane-5, .auth-market-lane.lane-6 { display: none; } .auth-market-tile { min-height: 62px; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; padding: 9px 10px; } .auth-market-logo { width: 38px; height: 38px; border-radius: 13px; } .auth-market-copy strong { font-size: 13px; } .auth-market-price b { max-width: 74px; font-size: 11px; } .auth-scene-backdrop .auth-modal { top: auto; right: 14px; bottom: 14px; left: 14px; width: auto; max-height: min(76dvh, calc(100dvh - 28px)); padding: 19px; border-radius: 22px; transform: translateY(18px) scale(0.99); } .auth-scene-backdrop.open .auth-modal { transform: translateY(0) scale(1); } .auth-scene-backdrop .auth-modal .modal-header h2 { font-size: 23px; } .auth-profile-mode .auth-modal { inset: auto; width: min(520px, 100%); } .account-card { grid-template-columns: auto minmax(0, 1fr); } .account-card em { grid-column: 1 / -1; justify-self: start; } } button, a, label, input, select, textarea, [role="button"], [data-nav], [data-company], [data-auth-open], .news-card, .company-row, .metric-help, .watch-star { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .modal { max-height: calc(100vh - 30px); max-height: calc(100dvh - 30px); } body:has(.modal-backdrop.open) { overflow: hidden; } body:has(.modal-backdrop.open) .guided-tour-card, body:has(.modal-backdrop.open) .guided-tour-marker { display: none !important; } @media (max-width: 700px) { .modal-backdrop { padding: 0; place-items: end center; } .modal { width: 100%; max-height: calc(100dvh - 16px); border-radius: 22px 22px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); } .modal-actions { position: sticky; bottom: 0; background: var(--card); padding-top: 10px; } .modal-actions .primary-button, .modal-actions .secondary-button { min-height: 46px; } .toast { right: 12px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); } .guided-tour-card { right: 10px; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; } .forum-layout { grid-template-columns: minmax(0, 1fr); } .forum-hero, .forum-compose-card, .forum-post-card { padding: 14px; } .forum-hero-stats { flex-wrap: wrap; gap: 8px; } .forum-toolbar { flex-wrap: wrap; gap: 8px; } .forum-toolbar-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .community-grid { grid-template-columns: minmax(0, 1fr); } .community-hero { padding: 16px; } .community-hero-actions { flex-wrap: wrap; } .community-stats { flex-wrap: wrap; gap: 8px; } .my-profile-grid { grid-template-columns: minmax(0, 1fr); } .my-profile-hero, .my-profile-card { padding: 16px; } .onboarding-panel { padding: 16px; } .onboarding-market-row, .onboarding-actions { flex-wrap: wrap; gap: 8px; } .onboarding-step-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 700px) { .data-table td, .data-table th { padding-top: 12px; padding-bottom: 12px; } .icon-button, .text-button, .watch-star { min-width: 40px; min-height: 40px; } } .community-discovery-panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 18px; margin: 0 0 18px; padding: 20px; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 28px; background: radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--green) 18%, transparent), transparent 32%), radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--amber) 18%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--green-soft) 48%, var(--card))); box-shadow: 0 24px 70px rgba(13, 62, 49, .10); overflow: hidden; position: relative; } .community-discovery-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.34) 44%, transparent 55%), linear-gradient(180deg, rgba(255,255,255,.22), transparent 52%); transform: translateX(-40%); animation: premiumSweep 8s ease-in-out infinite; } .community-discovery-panel > * { position: relative; z-index: 1; } .community-discovery-copy h2 { margin: 6px 0 8px; max-width: 760px; color: var(--ink); font-size: clamp(25px, 3vw, 42px); line-height: .98; letter-spacing: -1.35px; text-wrap: balance; } .community-discovery-copy p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.62; } .community-discovery-tickers { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; } .community-discovery-tickers button, .community-discovery-tickers span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--green) 16%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--card) 82%, white 18%); color: var(--green-dark); font-weight: 900; box-shadow: 0 10px 26px rgba(12, 62, 49, .08); } .community-discovery-tickers button { cursor: pointer; transition: transform var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast); } .community-discovery-tickers button:hover { border-color: color-mix(in srgb, var(--green) 38%, var(--line)); box-shadow: 0 16px 34px rgba(12, 62, 49, .13); transform: translateY(-2px); } .community-discovery-tickers small { color: var(--muted); font-weight: 800; } .community-discovery-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .community-discovery-metrics span { min-height: 104px; padding: 16px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 24px; background: linear-gradient(160deg, rgba(255,255,255,.68), rgba(255,255,255,.2)), color-mix(in srgb, var(--card) 88%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 16px 34px rgba(13, 62, 49, .08); } .community-discovery-metrics b { display: block; color: var(--ink); font-size: clamp(20px, 2.5vw, 32px); letter-spacing: -1px; } .community-discovery-metrics small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; } .community-card { position: relative; isolation: isolate; } .community-card-shine { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--green) 12%, transparent), transparent 28%), radial-gradient(circle at 92% 20%, color-mix(in srgb, var(--amber) 16%, transparent), transparent 26%); opacity: .85; } .community-card-badges { display: flex; flex-wrap: wrap; gap: 7px; } .community-card-badges span { padding: 6px 9px; border-radius: 999px; font-size: 12px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; } .community-card-badges .quality { background: color-mix(in srgb, var(--green-soft) 82%, white 18%); color: var(--green-dark); } .community-card-badges .watch { background: color-mix(in srgb, var(--amber) 18%, white 82%); color: #8a5f0d; } .community-card-badges .risk { background: color-mix(in srgb, var(--danger) 12%, white 88%); color: #9c1f2c; } .community-allocation-bar { display: flex; height: 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--green-soft) 44%, var(--card)); box-shadow: inset 0 1px 2px rgba(13, 62, 49, .10); } .community-allocation-bar span { flex: var(--w) 1 0; min-width: 5px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); } .community-allocation-bar.empty span { width: 100%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--line) 65%, transparent), color-mix(in srgb, var(--line) 65%, transparent) 8px, transparent 8px, transparent 16px); } .premium-empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr); gap: 18px; align-items: center; text-align: left; background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--green) 18%, transparent), transparent 34%), radial-gradient(circle at 100% 8%, color-mix(in srgb, var(--amber) 20%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--green-soft) 54%, var(--card))); } .premium-empty-copy strong { display: block; max-width: 640px; margin: 6px 0 8px; color: var(--ink); font-size: clamp(24px, 3vw, 40px); line-height: 1; letter-spacing: -1.2px; } .premium-empty-copy p { max-width: 660px; min-height: 0; margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.65; } .premium-empty-preview { display: grid; gap: 10px; } .premium-preview-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px; border: 1px solid color-mix(in srgb, var(--green) 14%, var(--line)); border-radius: 22px; background: rgba(255,255,255,.62); box-shadow: 0 14px 34px rgba(13, 62, 49, .10); animation: profileCardRise var(--motion-slow) cubic-bezier(.18,.78,.24,1) both; animation-delay: var(--d); } .premium-preview-card b, .premium-preview-card small, .premium-preview-card span, .premium-preview-card em { display: block; } .premium-preview-card b { color: var(--ink); } .premium-preview-card small, .premium-preview-card span, .premium-preview-card em { color: var(--muted); font-size: 11px; font-style: normal; } .premium-preview-card em { grid-column: 2 / -1; color: var(--green-dark); font-weight: 900; letter-spacing: .02em; } @keyframes premiumSweep { 0%, 58%, 100% { transform: translateX(-48%); opacity: .35; } 70% { transform: translateX(52%); opacity: .72; } } @media (max-width: 980px) { .community-discovery-panel, .premium-empty { grid-template-columns: 1fr; } .community-discovery-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .community-discovery-panel, .premium-empty { padding: 16px; border-radius: 22px; } .community-discovery-metrics { grid-template-columns: 1fr; } .premium-preview-card { grid-template-columns: auto minmax(0, 1fr); } .premium-preview-card > strong, .premium-preview-card > span, .premium-preview-card em { grid-column: 2 / -1; } } @media (max-width: 760px) { .pulse-trust-note, .pulse-story-cards, .pulse-benchmark-strip, .share-card-source { border-radius: 18px; } .pulse-trust-note { grid-template-columns: 1fr; } .pulse-story-cards { grid-template-columns: minmax(0, 1fr); } .pulse-benchmark-strip { align-items: stretch; border-radius: 20px; } .pulse-benchmark-strip b, .pulse-benchmark-strip span, .pulse-benchmark-strip small { width: 100%; } .share-card-source { align-items: flex-start; flex-direction: column; } .pulse-asset-card { grid-template-columns: auto minmax(0, 1fr); } .pulse-asset-value, .pulse-asset-result, .pulse-asset-bar { grid-column: 1 / -1; justify-self: stretch; text-align: left; } } .topbar { border-bottom-color: color-mix(in srgb, var(--line) 76%, transparent); background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: 0 10px 30px rgba(10, 35, 27, .025); backdrop-filter: blur(20px) saturate(1.2); } .sidebar { background: radial-gradient(circle at 18% 4%, color-mix(in srgb, var(--brand-accent) 12%, transparent), transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--sidebar) 98%, #000), var(--sidebar)); } .nav-item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 13%, transparent), transparent 74%), color-mix(in srgb, var(--sidebar) 84%, var(--green-2)); } .page-heading h1 { font-size: clamp(28px, 2.65vw, 38px); font-weight: 840; letter-spacing: -1.55px; } .panel, .stat-card { border-color: color-mix(in srgb, var(--line) 88%, var(--green) 12%); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, #fff), color-mix(in srgb, var(--surface) 96%, var(--green-soft))); box-shadow: 0 1px 2px rgba(11, 35, 27, .035), 0 16px 44px rgba(11, 35, 27, .055); } .web-section-nav { top: 82px; z-index: 14; margin: -10px 0 18px; padding: 8px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: 0 16px 38px rgba(12, 35, 27, .07), inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent); backdrop-filter: blur(20px) saturate(1.2); } .web-section-nav button { min-height: 34px; padding: 7px 13px; border-color: transparent; background: transparent; box-shadow: none; font-size: 11px; } .web-section-nav button:hover { border-color: color-mix(in srgb, var(--green-2) 18%, var(--line)); background: color-mix(in srgb, var(--green-soft) 54%, var(--card)); } .web-section-nav button.active { border-color: color-mix(in srgb, var(--green-2) 64%, var(--brand-accent)); background: linear-gradient(135deg, var(--green), var(--green-2)); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--green-2) 22%, transparent); } .portfolio-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .portfolio-risk-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .portfolio-risk-card { min-height: 112px; transition: transform var(--motion-medium) cubic-bezier(.18,.78,.24,1), border-color var(--motion-fast) ease, box-shadow var(--motion-medium) ease; } .portfolio-risk-card:hover { border-color: color-mix(in srgb, var(--green-2) 30%, var(--line)); box-shadow: 0 16px 34px rgba(11, 35, 27, .075); transform: translateY(-4px); } @media (max-width: 980px) { .portfolio-stats-grid, .portfolio-risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .web-section-nav { top: 64px; margin: -6px -4px 14px; padding: 6px; border-radius: 15px; } .portfolio-stats-grid, .portfolio-risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portfolio-risk-panel .panel-header { align-items: stretch; flex-direction: column; } .portfolio-risk-panel .panel-header .ghost-button { width: 100%; } .page-heading h1 { font-size: clamp(27px, 9vw, 34px); } } @media (max-width: 350px) { .portfolio-stats-grid, .portfolio-risk-grid { grid-template-columns: 1fr; } } .company-hero.company-hero-premium { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(340px, 1.15fr) minmax(280px, .82fr) 150px; align-items: center; gap: 28px; min-height: 330px; overflow: hidden; padding: 42px 48px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 32px; background: radial-gradient(circle at 79% 19%, rgba(87, 225, 177, .2), transparent 28%), radial-gradient(circle at 8% 94%, rgba(72, 118, 255, .16), transparent 31%), linear-gradient(132deg, #0a2119 0%, #10392c 52%, #0b2b22 100%); box-shadow: 0 28px 75px rgba(5, 32, 23, .22), inset 0 1px 0 rgba(255, 255, 255, .08); } .company-first-paint { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: 226px; padding: clamp(22px, 3vw, 38px); overflow: hidden; border: 1px solid rgba(119, 229, 185, .16); border-radius: 32px; background: radial-gradient(circle at 88% 14%, rgba(112, 225, 181, .18), transparent 30%), linear-gradient(135deg, #0b251d, #102f25 58%, #0b211a); box-shadow: 0 24px 65px rgba(7, 29, 21, .2); color: #fff; } .company-first-paint::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.07) 46%, transparent 62%); transform: translateX(-100%); animation: companyFirstPaintSweep 1.15s ease-in-out infinite; pointer-events: none; } .company-first-paint-identity { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; min-width: 0; } .company-first-paint-identity .hero-company-logo { width: 76px; height: 76px; flex: 0 0 auto; border-radius: 22px; background: rgba(255,255,255,.09); box-shadow: 0 16px 38px rgba(0,0,0,.22); } .company-first-paint-identity > div { min-width: 0; } .company-first-paint-identity span { color: rgba(255,255,255,.55); font-size: 12px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .company-first-paint-identity h1 { margin: 7px 0 9px; overflow: hidden; color: #fff; font-size: clamp(29px, 4vw, 50px); line-height: 1; letter-spacing: -.055em; text-overflow: ellipsis; white-space: nowrap; } .company-first-paint-identity p { margin: 0; color: rgba(255,255,255,.62); font-size: 12px; } .company-first-paint-price { position: relative; z-index: 1; display: grid; justify-items: end; gap: 8px; font-variant-numeric: tabular-nums; } .company-first-paint-price strong { color: #fff; font-size: clamp(34px, 4vw, 56px); line-height: 1; letter-spacing: -.055em; } .company-first-paint-price > span { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; font-weight: 900; } .company-first-paint-price small { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.48); font-size: 12px; } .company-first-paint-price small i { width: 7px; height: 7px; border-radius: 50%; background: #e56a6a; box-shadow: 0 0 0 5px rgba(229,106,106,.09); } .company-first-paint-price small i.open { background: #72dfb5; box-shadow: 0 0 0 5px rgba(114,223,181,.1); } .company-first-paint-progress { position: absolute; z-index: 2; right: clamp(22px, 3vw, 38px); bottom: 24px; left: clamp(22px, 3vw, 38px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; } .company-first-paint-progress::before { content: ""; grid-column: 1; grid-row: 1; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.1); } .company-first-paint-progress i { grid-column: 1; grid-row: 1; width: 38%; height: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent, #72dfb5, #fff); animation: companyFirstPaintProgress 1s ease-in-out infinite; } .company-first-paint-progress span { color: rgba(255,255,255,.48); font-size: 12px; } .company-first-paint-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(190px, .7fr)); gap: 14px; margin-top: 16px; } .company-first-paint-grid article { position: relative; min-height: 170px; overflow: hidden; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shadow); } .company-first-paint-grid article::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, color-mix(in srgb, var(--green-soft) 45%, transparent) 48%, transparent 70%); transform: translateX(-100%); animation: companyFirstPaintSweep 1.15s ease-in-out infinite; } .company-first-paint-grid span, .company-first-paint-grid i, .company-first-paint-grid b { display: block; height: 10px; margin-bottom: 15px; border-radius: 999px; background: color-mix(in srgb, var(--line) 72%, var(--green-soft)); } .company-first-paint-grid span { width: 44%; height: 15px; } .company-first-paint-grid i:nth-of-type(1) { width: 86%; } .company-first-paint-grid i:nth-of-type(2) { width: 63%; } .company-first-paint-grid i:nth-of-type(3) { width: 74%; } .company-first-paint-grid b { width: 92%; height: 44px; margin-top: 28px; } @keyframes companyFirstPaintSweep { to { transform: translateX(100%); } } @keyframes companyFirstPaintProgress { 0% { transform: translateX(-10%); } 50% { transform: translateX(165%); } 100% { transform: translateX(-10%); } } @media (max-width: 900px) { .company-first-paint-grid { grid-template-columns: 1fr 1fr; } .company-first-paint-chart { grid-column: 1 / -1; } } @media (max-width: 620px) { .company-first-paint { grid-template-columns: 1fr; min-height: 275px; padding: 20px 17px 54px; border-radius: 25px; } .company-first-paint-identity .hero-company-logo { width: 58px; height: 58px; border-radius: 18px; } .company-first-paint-identity h1 { font-size: 30px; } .company-first-paint-price { justify-items: start; } .company-first-paint-price strong { font-size: 34px; } .company-first-paint-progress { right: 17px; bottom: 18px; left: 17px; grid-template-columns: 1fr; } .company-first-paint-progress span { display: none; } .company-first-paint-grid { grid-template-columns: 1fr; } .company-first-paint-grid article { min-height: 128px; border-radius: 20px; } .company-first-paint-card:last-child { display: none; } } @media (prefers-reduced-motion: reduce) { .company-first-paint::after, .company-first-paint-grid article::after, .company-first-paint-progress i { animation: none !important; } } .company-hero.company-hero-premium::after { right: -54px; bottom: -78px; width: 270px; height: 270px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; background: transparent; box-shadow: 0 0 0 38px rgba(255,255,255,.018), 0 0 0 82px rgba(255,255,255,.012); opacity: 1; animation: company-hero-orbit 14s linear infinite; } .company-hero.company-hero-premium .company-hero-main { grid-column: 1; grid-row: 1; } .company-hero.company-hero-premium .company-hero-market-art { grid-column: 2; grid-row: 1; } .company-hero.company-hero-premium .score-gauge { grid-column: 3; grid-row: 1; justify-self: center; } .strategy-card::before { background: var(--strategy-accent, #d6a93d); } @media (max-width: 1180px) { .company-hero.company-hero-premium { grid-template-columns: minmax(0, 1fr) minmax(270px, .72fr); } .company-hero.company-hero-premium .company-hero-main { grid-column: 1; grid-row: 1; } .company-hero.company-hero-premium .company-hero-market-art { grid-column: 2; grid-row: 1; } .company-hero.company-hero-premium .score-gauge { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-top: -4px; } } @media (max-width: 900px) { .company-hero.company-hero-premium { grid-template-columns: 1fr; } .company-hero.company-hero-premium .company-hero-main, .company-hero.company-hero-premium .company-hero-market-art, .company-hero.company-hero-premium .score-gauge { grid-column: 1; } .company-hero.company-hero-premium .company-hero-main { grid-row: 1; } .company-hero.company-hero-premium .company-hero-market-art { grid-row: 2; } .company-hero.company-hero-premium .score-gauge { grid-row: 3; } } @media (max-width: 680px) { .company-hero.company-hero-premium { min-height: auto; padding: 22px 17px; border-radius: 25px; } } .stat-card.interactive { position: relative; isolation: isolate; width: 100%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--green-2) 16%, var(--line)); font: inherit; color: inherit; text-align: left; cursor: pointer; appearance: none; transition: transform var(--motion-medium) cubic-bezier(.18,.78,.24,1), border-color var(--motion-fast) ease, box-shadow var(--motion-medium) ease; } .stat-card.interactive::before { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--brand-accent) 15%, transparent), transparent 31%); content: ""; opacity: .72; transition: opacity var(--motion-fast) ease, transform var(--motion-medium) ease; } .stat-card.interactive:hover, .stat-card.interactive:focus-visible { border-color: color-mix(in srgb, var(--green-2) 46%, var(--line)); box-shadow: 0 22px 46px rgba(8, 35, 26, .12); outline: none; transform: translateY(-5px); } .stat-card.interactive:hover::before, .stat-card.interactive:focus-visible::before { opacity: 1; transform: scale(1.12); } .stat-card.interactive .stat-icon { transition: transform var(--motion-medium) cubic-bezier(.18,.78,.24,1), box-shadow var(--motion-medium) ease; } .stat-card.interactive:hover .stat-icon { box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-accent) 26%, transparent); transform: rotate(7deg) scale(1.09); } .stat-open-hint { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; color: var(--green); font-size: 11.5px; font-weight: 900; letter-spacing: .025em; } .stat-open-hint b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 999px; background: var(--green-soft); transition: transform var(--motion-fast) ease; } .stat-card.interactive:hover .stat-open-hint b { transform: translateX(3px); } body.portfolio-insight-open { overflow: hidden; } .portfolio-insight-backdrop { position: fixed; inset: 0; z-index: 575; display: none; align-items: center; justify-content: center; padding: 18px; background: radial-gradient(circle at 10% 8%, rgba(103,210,169,.23), transparent 30%), radial-gradient(circle at 92% 12%, rgba(116,91,255,.19), transparent 31%), rgba(3,12,9,.8); backdrop-filter: blur(22px) saturate(1.12); } .portfolio-insight-backdrop.open { display: flex; animation: portfolio-insight-backdrop-in .24s ease both; } .portfolio-insight-modal { position: relative; overflow: auto; width: min(1120px, calc(100vw - 36px)); max-height: calc(100vh - 36px); border: 1px solid rgba(255,255,255,.17); border-radius: 34px; background: linear-gradient(145deg, #071b15, #0b3025 55%, #113b2f); color: #fff; box-shadow: 0 52px 130px rgba(0,0,0,.48); scrollbar-color: rgba(103,210,169,.8) rgba(255,255,255,.08); scrollbar-width: thin; animation: portfolio-insight-modal-in .5s cubic-bezier(.18,.78,.24,1) both; } .portfolio-insight-modal.negative { background: linear-gradient(145deg, #251315, #30201b 55%, #3d2022); } .portfolio-insight-modal.neutral { background: linear-gradient(145deg, #111d19, #263027 55%, #252820); } .portfolio-insight-close { position: absolute; top: 18px; right: 18px; z-index: 3; display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: 27px; cursor: pointer; backdrop-filter: blur(10px); } .portfolio-insight-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr) 210px; align-items: center; min-height: 310px; overflow: hidden; padding: 44px 52px; border-bottom: 1px solid rgba(255,255,255,.1); background: radial-gradient(circle at 85% 14%, rgba(103,210,169,.19), transparent 31%); } .portfolio-insight-hero::after { position:absolute; inset:-60% -15% auto auto; z-index:-1; width:500px; height:500px; border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 48px rgba(255,255,255,.018),0 0 0 96px rgba(255,255,255,.012); content:""; animation:portfolio-insight-spin 18s linear infinite; } .portfolio-insight-hero .eyebrow { color: #76e3b8; } .portfolio-insight-hero h2 { margin: 11px 0 7px; color:#fff; font-size:clamp(38px,5vw,70px); line-height:.94; letter-spacing:-.065em; } .portfolio-insight-hero p { max-width:650px; margin:0; color:rgba(255,255,255,.62); font-size:14px; } .portfolio-insight-hero > div:first-child > strong { display:block; margin-top:26px; color:#fff; font-size:clamp(30px,4vw,54px); letter-spacing:-.055em; } .portfolio-insight-hero > div:first-child > strong.trend-up { color:#76e3b8; } .portfolio-insight-hero > div:first-child > strong.trend-down { color:#ff9ca0; } .portfolio-insight-hero > div:first-child > small { display:block; margin-top:4px; color:rgba(255,255,255,.5); font-size:11px; } .portfolio-insight-orbit { position:relative; width:174px; height:174px; justify-self:center; border:1px solid rgba(255,255,255,.14); border-radius:50%; animation:portfolio-insight-pulse 5s ease-in-out infinite; } .portfolio-insight-orbit::before,.portfolio-insight-orbit::after { position:absolute; border:1px solid rgba(255,255,255,.1); border-radius:50%; content:""; }.portfolio-insight-orbit::before{inset:27px}.portfolio-insight-orbit::after{inset:54px} .portfolio-insight-orbit b { position:absolute; inset:58px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#123328; font-size:23px; box-shadow:0 16px 38px rgba(0,0,0,.24); } .portfolio-insight-orbit i,.portfolio-insight-orbit em { position:absolute; width:13px; height:13px; border-radius:50%; background:#73e3b6; box-shadow:0 0 22px rgba(115,227,182,.7); }.portfolio-insight-orbit i{top:15px;left:27px}.portfolio-insight-orbit em{right:4px;bottom:47px;background:#9e8aff} .portfolio-insight-body { display:grid; gap:16px; padding:22px; background:color-mix(in srgb, var(--bg) 94%, transparent); color:var(--ink); } .portfolio-insight-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .portfolio-insight-group { overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--card); box-shadow:0 16px 38px rgba(8,35,26,.065); } .portfolio-insight-group-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 18px; border-bottom:1px solid var(--line); background:linear-gradient(135deg,var(--card),color-mix(in srgb,var(--green-soft) 30%,var(--card))); } .portfolio-insight-group-head > div { display:grid; gap:4px; }.portfolio-insight-group-head span { font-size:14px; font-weight:950; }.portfolio-insight-group-head small { color:var(--muted); font-size:11.5px; }.portfolio-insight-group-head > b { display:grid; min-width:31px; height:31px; place-items:center; border-radius:10px; background:var(--green-soft); color:var(--green); } .portfolio-insight-list { padding:7px; } .portfolio-insight-list > button,.portfolio-insight-list > div { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; padding:10px; border:1px solid transparent; border-radius:16px; background:transparent; color:var(--ink); font:inherit; text-align:left; transition:background var(--motion-fast) ease,transform var(--motion-fast) ease,border-color var(--motion-fast) ease; } .portfolio-insight-list > button { cursor:pointer; }.portfolio-insight-list > button:hover { border-color:color-mix(in srgb,var(--green-2) 20%,var(--line)); background:var(--green-soft); transform:translateX(3px); } .insight-rank { display:grid; width:23px; height:23px; place-items:center; border-radius:8px; background:var(--surface-soft); color:var(--muted); font-size:11px; font-weight:900; } .insight-row-copy { display:grid; min-width:0; gap:3px; }.insight-row-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }.insight-row-copy small { overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.insight-row-copy i { display:block; height:4px; overflow:hidden; margin-top:3px; border-radius:999px; background:var(--line); }.insight-row-copy i b { display:block; height:100%; border-radius:inherit; background:var(--green-2); }.insight-row-copy i b.trend-down { background:var(--red); } .insight-row-value { display:grid; justify-items:end; gap:3px; }.insight-row-value strong { font-size:11px; white-space:nowrap; }.insight-row-value small { color:var(--muted); font-size:11px; }.insight-row-value.trend-up strong{color:var(--green)}.insight-row-value.trend-down strong{color:var(--red)} .portfolio-insight-extremes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.portfolio-insight-extremes article { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; padding:16px; border:1px solid var(--line); border-radius:20px; background:var(--card); }.portfolio-insight-extremes article > span { grid-column:1/-1; color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; }.portfolio-insight-extremes article div { display:grid; gap:4px; }.portfolio-insight-extremes article strong{font-size:13px}.portfolio-insight-extremes article small{color:var(--muted);font-size:11.5px} .portfolio-insight-components { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.portfolio-insight-components article { display:grid; align-content:end; min-height:128px; gap:6px; padding:16px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--green-soft) 28%,var(--card))); box-shadow:var(--shadow); }.portfolio-insight-components span { color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; }.portfolio-insight-components strong{font-size:clamp(18px,2.2vw,28px);letter-spacing:-.04em}.portfolio-insight-components small{color:var(--muted);font-size:11.5px}.portfolio-insight-components i{display:block;height:5px;overflow:hidden;margin-top:5px;border-radius:999px;background:var(--line)}.portfolio-insight-components i b{display:block;height:100%;border-radius:inherit;background:var(--green-2)}.portfolio-insight-components i b.trend-down{background:var(--red)} .portfolio-insight-empty { display:grid; place-items:center; min-height:230px; padding:25px; text-align:center; }.portfolio-insight-empty span{display:grid;width:50px;height:50px;place-items:center;border-radius:16px;background:var(--green-soft);color:var(--green);font-size:25px}.portfolio-insight-empty strong{margin-top:12px}.portfolio-insight-empty small{max-width:330px;margin-top:5px;color:var(--muted);line-height:1.5} .portfolio-insight-modal footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 23px; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.55); font-size:11.5px; }.portfolio-insight-modal footer button { flex:0 0 auto; padding:10px 13px; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:rgba(255,255,255,.09); color:#fff; font-weight:850; cursor:pointer; } @keyframes portfolio-insight-backdrop-in { from{opacity:0} } @keyframes portfolio-insight-modal-in { from{opacity:0;transform:translateY(28px) scale(.975)} } @keyframes portfolio-insight-spin { to{transform:rotate(360deg)} } @keyframes portfolio-insight-pulse { 50%{transform:scale(1.04);box-shadow:0 0 55px rgba(103,210,169,.18)} } @media (max-width: 720px) { .content.portfolio-mobile-priority { display:flex; flex-direction:column; } .content.portfolio-mobile-priority > .page-heading { order:-30; } .content.portfolio-mobile-priority > .web-section-nav { order:-29; } .content.portfolio-mobile-priority > .demo-portfolio-note, .content.portfolio-mobile-priority > .portfolio-empty-onboarding { order:-25; } .content.portfolio-mobile-priority > .portfolio-stats-grid { order:-20; } .content.portfolio-mobile-priority > .dashboard-grid { order:-10; } .content.portfolio-mobile-priority > .portfolio-stats-grid { display:flex; width:calc(100% + 28px); margin-right:-14px; margin-left:-14px; padding:4px 14px 14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; } .content.portfolio-mobile-priority > .portfolio-stats-grid::-webkit-scrollbar { display:none; } .content.portfolio-mobile-priority .portfolio-stats-grid .stat-card { flex:0 0 min(78vw,300px); min-height:148px; scroll-snap-align:start; } .filters-bar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:8px; } .filters-bar .local-search { grid-column:1/-1; flex:none; width:100%; height:50px; min-height:50px; } .filters-bar .filter-select,.filters-bar .watch-filter { width:100%; min-width:0; } .filters-bar > button:last-child:nth-child(odd) { grid-column:1/-1; } .catalog-count-strip.hidden,.catalog-heavy-panels { display:none !important; } .company-table .table-wrap { overflow:visible; } .company-table table,.company-table tbody { display:block; width:100%; } .company-table thead { display:none; } .company-table tbody { display:grid; gap:9px; padding:9px; } .company-table tbody tr { display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"company price score" "company change score"; align-items:center; gap:3px 10px; min-height:82px; padding:11px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--green-soft) 19%,var(--card))); box-shadow:0 10px 25px rgba(9,31,24,.05); } .company-table tbody tr td { width:auto !important; padding:0 !important; border:0 !important; } .company-table tbody tr td:nth-child(1) { display:block !important; grid-area:company; } .company-table tbody tr td:nth-child(3) { display:flex !important; grid-area:price; justify-content:flex-end; font-weight:900; } .company-table tbody tr td:nth-child(4) { display:flex !important; grid-area:change; justify-content:flex-end; } .company-table tbody tr td:nth-child(8) { display:flex !important; grid-area:score; align-items:center; justify-content:center; min-width:50px; min-height:50px; padding:8px !important; border-radius:15px !important; background:var(--green-soft); color:var(--green); font-weight:950; } .company-table tbody tr td:nth-child(2),.company-table tbody tr td:nth-child(5),.company-table tbody tr td:nth-child(6),.company-table tbody tr td:nth-child(7),.company-table tbody tr td:nth-child(9),.company-table tbody tr td:nth-child(10) { display:none !important; } .company-table .table-company { align-items:center; }.company-table .ticker-mark { width:38px;height:38px;border-radius:12px }.company-table .company-copy strong{-webkit-line-clamp:1;white-space:nowrap}.company-table .company-copy small{display:block;font-size:11px}.company-table td:nth-child(8) small,.company-table td:nth-child(8) br,.company-table .score-bar{display:none!important} .dashboard-grid { gap:12px; } .dashboard-grid > .panel { min-width:0; } .dashboard-grid > .panel .panel-header { align-items:stretch; flex-direction:column; } .position-panel-actions { flex-wrap:nowrap; justify-content:flex-start; width:100%; overflow-x:auto; padding-bottom:5px; scrollbar-width:none; } .position-panel-actions::-webkit-scrollbar { display:none; } .position-panel-actions > * { flex:0 0 auto; min-width:155px !important; } .portfolio-positions-table { overflow:visible; } .portfolio-positions-table table,.portfolio-positions-table tbody { display:block; width:100%; } .portfolio-positions-table thead { display:none; } .portfolio-positions-table tbody { display:grid; gap:10px; padding:10px; } .portfolio-positions-table tr.table-row-clickable { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:13px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--green-soft) 18%,var(--card))); box-shadow:0 12px 28px rgba(9,31,24,.055); } .portfolio-positions-table tr.table-row-clickable.active-row { border-color:color-mix(in srgb,var(--green-2) 48%,var(--line)); box-shadow:inset 0 3px 0 var(--green),0 14px 30px rgba(9,31,24,.08); } .portfolio-positions-table tr.table-row-clickable td { display:grid; width:auto; padding:9px; border:0; border-radius:13px; background:color-mix(in srgb,var(--surface-soft) 76%,var(--card)); } .portfolio-positions-table tr.table-row-clickable td::before { display:block; margin-bottom:4px; color:var(--muted); font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; } .portfolio-positions-table tr.table-row-clickable td:nth-child(1) { grid-column:1/-1; padding:2px 0 9px; background:transparent; } .portfolio-positions-table tr.table-row-clickable td:nth-child(3)::before{content:"Liczba"}.portfolio-positions-table tr.table-row-clickable td:nth-child(4)::before{content:"Średni koszt"}.portfolio-positions-table tr.table-row-clickable td:nth-child(5)::before{content:"Wartość"}.portfolio-positions-table tr.table-row-clickable td:nth-child(6)::before{content:"Wynik"} .portfolio-positions-table tr.position-detail-row { display:block; margin-top:-10px; } .portfolio-positions-table tr.position-detail-row > td { display:block; width:100%; padding:0 4px 8px !important; border:0; background:transparent; } .portfolio-positions-table .position-detail-card { border-radius:18px; } .portfolio-positions-table .position-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .portfolio-positions-table .position-detail-actions { display:grid; grid-template-columns:1fr; } .portfolio-positions-table .position-detail-actions > * { width:100%; } .company-hero.company-hero-premium { gap:15px; } .company-hero.company-hero-premium .company-hero-market-art { min-height:190px; padding:14px; } .company-hero.company-hero-premium .company-hero-spark { height:86px; margin:12px 0 7px; } .company-chart-grid .chart-controls { align-items:flex-start; flex-direction:column; } .company-chart-grid .range-tabs,.company-chart-grid .view-tabs,.company-chart-grid .interval-tabs { max-width:100%; overflow-x:auto; padding-bottom:3px; } .portfolio-insight-backdrop { align-items:flex-end; padding:0; } .portfolio-insight-modal { width:100%; max-height:calc(100dvh - 12px); border-right:0; border-bottom:0; border-left:0; border-radius:28px 28px 0 0; animation-name:portfolio-insight-sheet-in; } .portfolio-insight-hero { grid-template-columns:minmax(0,1fr) 92px; min-height:245px; padding:34px 20px 25px; } .portfolio-insight-hero h2 { padding-right:24px; font-size:clamp(35px,11vw,52px); } .portfolio-insight-hero > div:first-child > strong { margin-top:19px; font-size:34px; } .portfolio-insight-orbit { width:84px;height:84px }.portfolio-insight-orbit::before{inset:13px}.portfolio-insight-orbit::after{inset:27px}.portfolio-insight-orbit b{inset:29px;font-size:14px}.portfolio-insight-orbit i{top:6px;left:13px;width:8px;height:8px}.portfolio-insight-orbit em{right:1px;bottom:20px;width:8px;height:8px} .portfolio-insight-close { top:12px;right:12px;width:38px;height:38px; } .portfolio-insight-body { padding:12px; } .portfolio-insight-split,.portfolio-insight-extremes { grid-template-columns:1fr; } .portfolio-insight-components { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }.portfolio-insight-components::-webkit-scrollbar{display:none}.portfolio-insight-components article{flex:0 0 72vw;min-height:116px;scroll-snap-align:start} .portfolio-insight-list > button,.portfolio-insight-list > div { grid-template-columns:auto auto minmax(0,1fr); }.insight-row-value{grid-column:3;justify-items:start;padding-left:0}.insight-row-value small{display:none} .portfolio-insight-modal footer { align-items:stretch; flex-direction:column; }.portfolio-insight-modal footer button{width:100%} } @keyframes portfolio-insight-sheet-in { from{opacity:0;transform:translateY(100%)} } :root[data-motion="off"] .portfolio-insight-backdrop, :root[data-motion="off"] .portfolio-insight-modal, :root[data-motion="off"] .portfolio-insight-hero::after, :root[data-motion="off"] .portfolio-insight-orbit { animation:none !important; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .portfolio-insight-backdrop, :root:not([data-motion="on"]) .portfolio-insight-modal, :root:not([data-motion="on"]) .portfolio-insight-hero::after, :root:not([data-motion="on"]) .portfolio-insight-orbit { animation:none !important; } } .legal-page { min-height: 100vh; margin: 0; background: #f4f7f5; color: #14241e; } .legal-document { width: min(900px, calc(100% - 36px)); margin: 0 auto; padding: 54px 0 90px; font-family: Inter, system-ui, sans-serif; } .legal-document h1 { margin: 12px 0 10px; font-size: clamp(34px, 6vw, 62px); line-height: 1.02; letter-spacing: -.045em; } .legal-document .legal-lead { color: #5d7068; font-size: 17px; line-height: 1.7; } .legal-document section { margin-top: 18px; padding: 24px 26px; border: 1px solid #dce7e1; border-radius: 22px; background: #fff; box-shadow: 0 12px 35px rgba(20, 48, 38, .06); } .legal-document h2 { margin: 0 0 8px; font-size: 19px; } .legal-document p { margin: 0; color: #52665e; line-height: 1.72; } .legal-document a { color: #086b50; font-weight: 750; } .legal-back { display: inline-flex; margin-bottom: 26px; text-decoration: none; } .legal-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid #dce7e1; } .legal-links a { display: inline-flex; padding: 10px 14px; border: 1px solid #dce7e1; border-radius: 999px; background: #fff; text-decoration: none; } .auth-privacy-check { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; } .auth-privacy-check input { margin-top: 2px; } .auth-privacy-check a { color: var(--primary); font-weight: 800; } .admin-shell { --admin-night:#0b211a; --admin-mint:#5fe0ad; display:grid; min-width:0; gap:18px; padding-bottom:42px; } .admin-icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .admin-command-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; min-height:210px; padding:34px 38px; overflow:hidden; border:1px solid rgba(139,238,197,.15); border-radius:30px; color:#f5fff9; background:radial-gradient(circle at 76% -10%,rgba(95,224,173,.22),transparent 42%),linear-gradient(135deg,#0b211a 0%,#103127 58%,#0a1c16 100%); box-shadow:0 26px 60px rgba(5,32,24,.18); } .admin-command-hero::after { position:absolute; right:18%; bottom:-100px; width:300px; height:180px; border:1px solid rgba(124,235,190,.12); border-radius:50%; content:""; transform:rotate(-18deg); } .admin-hero-orb { position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; } .admin-hero-orb.one { right:8%; top:-75px; width:180px; height:180px; border:1px solid rgba(116,236,186,.15); box-shadow:inset 0 0 80px rgba(77,204,152,.1); } .admin-hero-orb.two { right:30%; bottom:-110px; width:200px; height:200px; background:rgba(55,189,137,.07); } .admin-command-copy,.admin-command-actions { position:relative; z-index:1; } .admin-command-copy { max-width:720px; } .admin-eyebrow { display:inline-flex; align-items:center; gap:8px; color:#85dbb8; font-size:12px; font-weight:950; letter-spacing:.17em; } .admin-eyebrow::before { width:24px; height:1px; background:#85dbb8; content:""; } .admin-command-copy h1 { margin:12px 0 8px; color:#fff; font-size:clamp(31px,4.4vw,56px); line-height:.98; letter-spacing:-.045em; } .admin-command-copy p { max-width:630px; margin:0; color:#b4c9c0; font-size:14px; line-height:1.6; } .admin-command-actions { display:grid; justify-items:end; gap:10px; min-width:185px; } .admin-command-actions > small { color:#8ea69c; font-size:11.5px; } .admin-connection-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(255,255,255,.1); border-radius:99px; background:rgba(255,255,255,.055); color:#d9ebe3; font-size:12px; font-weight:850; backdrop-filter:blur(10px); } .admin-connection-pill i,.admin-growth-footer i { width:7px; height:7px; border-radius:50%; background:#f3b95f; box-shadow:0 0 0 4px rgba(243,185,95,.1); } .admin-connection-pill.online i,.admin-growth-footer i.live { background:#56dfa6; box-shadow:0 0 0 4px rgba(86,223,166,.12),0 0 15px rgba(86,223,166,.7); } .admin-connection-pill.error i { background:#ff6f74; } .admin-refresh-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:0 16px; border:1px solid rgba(134,232,192,.27); border-radius:14px; background:linear-gradient(135deg,rgba(88,220,166,.2),rgba(88,220,166,.08)); color:#ecfff7; cursor:pointer; font-size:11px; font-weight:900; transition:.2s ease; } .admin-refresh-button:hover { transform:translateY(-2px); border-color:rgba(134,232,192,.55); background:rgba(88,220,166,.2); } .admin-refresh-button:disabled { opacity:.65; cursor:wait; transform:none; } .admin-refresh-button:disabled .admin-icon { animation:admin-spin 1s linear infinite; } .admin-tabs { position:sticky; z-index:8; top:76px; display:flex; gap:5px; width:max-content; max-width:100%; padding:5px; overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb,var(--card) 88%,transparent); box-shadow:0 12px 30px rgba(16,45,35,.08); backdrop-filter:blur(16px); scrollbar-width:none; } .admin-tabs::-webkit-scrollbar { display:none; } .admin-tabs button { display:flex; align-items:center; gap:8px; min-height:38px; padding:0 14px; border:0; border-radius:11px; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; font-weight:850; white-space:nowrap; transition:.18s ease; } .admin-tabs button .admin-icon { width:16px; height:16px; } .admin-tabs button:hover { color:var(--ink); background:var(--surface-soft); } .admin-tabs button.active { color:#fff; background:var(--admin-night); box-shadow:0 8px 18px rgba(8,39,29,.17); } .admin-tabs button b { display:grid; min-width:18px; height:18px; place-items:center; border-radius:99px; background:#ec646b; color:#fff; font-size:11.5px; } .admin-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .admin-stat-card { position:relative; min-width:0; padding:18px; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,color-mix(in srgb,var(--card) 96%,var(--green-soft)),var(--card)); box-shadow:0 12px 32px rgba(20,50,40,.055); } .admin-stat-card::after { position:absolute; right:-35px; bottom:-45px; width:110px; height:110px; border-radius:50%; background:color-mix(in srgb,var(--admin-accent) 9%,transparent); content:""; } .admin-stat-card.green { --admin-accent:#198965; }.admin-stat-card.violet { --admin-accent:#7559db; }.admin-stat-card.red { --admin-accent:#e75c65; }.admin-stat-card.blue { --admin-accent:#397fd3; } .admin-stat-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; } .admin-stat-icon { display:grid; width:38px; height:38px; place-items:center; border-radius:12px; color:var(--admin-accent); background:color-mix(in srgb,var(--admin-accent) 11%,var(--card)); } .admin-stat-icon .admin-icon { width:18px; height:18px; } .admin-trend { padding:5px 8px; border-radius:99px; color:var(--admin-accent); background:color-mix(in srgb,var(--admin-accent) 9%,transparent); font-size:11.5px; font-weight:900; } .admin-stat-card > strong { position:relative; z-index:1; display:block; color:var(--ink); font-size:30px; line-height:1; letter-spacing:-.04em; } .admin-stat-card > span:not(.admin-stat-top) { display:block; margin-top:6px; color:var(--ink); font-size:11px; font-weight:900; } .admin-stat-card > small { display:block; margin-top:4px; overflow:hidden; color:var(--muted); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; } .admin-overview-grid { display:grid; grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr); gap:14px; min-width:0; } .admin-overview-grid.lower { grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr); } .admin-surface { min-width:0; padding:22px; border:1px solid var(--line); border-radius:24px; background:var(--card); box-shadow:0 15px 38px rgba(16,48,37,.055); } .admin-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; } .admin-section-heading > div > span { color:var(--green); font-size:11px; font-weight:950; letter-spacing:.16em; } .admin-section-heading h2 { margin:4px 0 2px; color:var(--ink); font-size:18px; letter-spacing:-.025em; } .admin-section-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; } .admin-section-heading > strong { color:var(--green); font-size:27px; letter-spacing:-.04em; } .admin-mini-chart { display:flex; align-items:flex-end; gap:7px; height:142px; padding:14px 4px 0; border-bottom:1px solid var(--line); background:repeating-linear-gradient(to bottom,transparent 0,transparent 34px,color-mix(in srgb,var(--line) 70%,transparent) 35px); } .admin-mini-bar { flex:1; height:var(--bar); min-width:5px; border-radius:7px 7px 2px 2px; background:linear-gradient(to top,#198965,#74dab2); transform-origin:bottom; animation:admin-bar-in .65s cubic-bezier(.2,.8,.2,1) both; opacity:.72; } .admin-mini-bar:nth-child(2n) { animation-delay:.04s; }.admin-mini-bar:nth-child(3n) { animation-delay:.08s; } .admin-mini-bar.today { opacity:1; box-shadow:0 0 18px rgba(40,177,126,.24); } .admin-growth-footer { display:flex; justify-content:space-between; gap:12px; margin-top:12px; color:var(--muted); font-size:11.5px; } .admin-growth-footer span { display:flex; align-items:center; gap:7px; } .admin-attention-list { display:grid; gap:9px; } .admin-attention-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:11px; width:100%; padding:12px; border:1px solid var(--line); border-radius:16px; text-align:left; background:color-mix(in srgb,var(--surface-soft) 40%,var(--card)); color:var(--ink); cursor:pointer; transition:.18s ease; } .admin-attention-card:hover { transform:translateX(3px); border-color:color-mix(in srgb,var(--green) 32%,var(--line)); } .admin-attention-card > span { display:grid; width:34px; height:34px; place-items:center; border-radius:11px; background:var(--surface-soft); color:var(--green); } .admin-attention-card.danger > span { color:#d84d56; background:var(--red-soft); }.admin-attention-card.warning > span { color:#ae781a; background:var(--amber-soft); }.admin-attention-card.good > span { color:var(--green); background:var(--green-soft); } .admin-attention-card .admin-icon { width:16px; height:16px; } .admin-attention-card div { display:grid; gap:3px; min-width:0; } .admin-attention-card div strong { font-size:11px; }.admin-attention-card div small { overflow:hidden; color:var(--muted); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; } .admin-attention-card > b { font-size:16px; }.admin-attention-card > i { color:var(--muted); font-style:normal; } .admin-link-button { border:0; background:transparent; color:var(--green); cursor:pointer; font-size:12px; font-weight:900; } .admin-people-list { display:grid; gap:2px; } .admin-person-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); } .admin-person-row:last-child { border-bottom:0; } .admin-avatar { display:grid; flex:0 0 auto; width:36px; height:36px; place-items:center; border:1px solid color-mix(in srgb,var(--green) 20%,var(--line)); border-radius:12px; color:var(--green); background:linear-gradient(145deg,var(--green-soft),var(--card)); font-size:12px; font-weight:950; } .admin-person-row > div { display:grid; min-width:0; }.admin-person-row strong { overflow:hidden; color:var(--ink); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.admin-person-row small { overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .admin-person-meta { display:grid; justify-items:end; gap:2px; }.admin-person-meta b { color:var(--ink); font-size:11px; }.admin-person-meta small { font-size:11px; } .admin-money-card { position:relative; overflow:hidden; color:#eafff5; background:radial-gradient(circle at 100% 0,rgba(94,224,173,.2),transparent 38%),linear-gradient(145deg,#0c2a20,#10392c); } .admin-money-card::after { position:absolute; right:-60px; bottom:-80px; width:210px; height:210px; border:1px solid rgba(120,230,186,.12); border-radius:50%; content:""; } .admin-money-card .admin-section-heading h2,.admin-money-card .admin-section-heading > .admin-icon { color:#fff; }.admin-money-card .admin-section-heading p { color:#9db8ad; }.admin-money-card .admin-section-heading > .admin-icon { width:31px; height:31px; opacity:.6; } .admin-money-card > strong { position:relative; z-index:1; display:block; margin-top:26px; color:#fff; font-size:clamp(27px,3.3vw,43px); letter-spacing:-.05em; }.admin-money-card > small { color:#87aa9b; font-size:11.5px; } .admin-money-split { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:22px; }.admin-money-split span { display:grid; gap:3px; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.04); color:#8eaa9e; font-size:11px; }.admin-money-split b { color:#eafff5; font-size:11px; } .admin-users-surface { padding:0; overflow:hidden; } .admin-users-heading { margin:0; padding:22px 22px 14px; } .admin-count-chip { display:inline-grid; min-width:31px; min-height:25px; padding:0 9px; place-items:center; border:1px solid var(--line); border-radius:99px; color:var(--ink); background:var(--surface-soft); font-size:11.5px; font-weight:900; } .admin-user-toolbar { display:flex; align-items:center; gap:10px; padding:0 22px 18px; border-bottom:1px solid var(--line); } .admin-search-field { display:flex; flex:1; align-items:center; gap:9px; min-height:42px; padding:0 13px; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); color:var(--muted); } .admin-search-field:focus-within { border-color:color-mix(in srgb,var(--green) 55%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 9%,transparent); } .admin-search-field .admin-icon { width:17px; }.admin-search-field input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:11px; } .admin-user-toolbar .filter-select { min-width:180px; min-height:42px; } .admin-table-wrap { position:relative; min-width:0; overflow-x:auto; } .admin-users-table { width:100%; min-width:860px; border-collapse:collapse; } .admin-users-table th { padding:11px 16px; color:var(--muted); background:color-mix(in srgb,var(--surface-soft) 70%,var(--card)); font-size:11px; letter-spacing:.08em; text-align:left; text-transform:uppercase; } .admin-users-table td { padding:13px 16px; border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent); color:var(--ink); font-size:12px; vertical-align:middle; } .admin-users-table tr:hover td { background:color-mix(in srgb,var(--green-soft) 35%,transparent); } .admin-account-cell { display:flex; align-items:center; gap:10px; min-width:220px; }.admin-account-cell > div { display:grid; min-width:0; }.admin-account-cell strong,.admin-account-cell small,.admin-account-cell em { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.admin-account-cell strong { font-size:11px; }.admin-account-cell small { color:var(--muted); font-size:11px; }.admin-account-cell em { color:color-mix(in srgb,var(--muted) 75%,transparent); font-size:11px; font-style:normal; } .admin-status-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:99px; color:var(--muted); background:var(--surface-soft); font-size:11px; font-weight:900; white-space:nowrap; }.admin-status-pill i { width:6px; height:6px; border-radius:50%; background:currentColor; }.admin-status-pill.verified { color:#087a58; background:var(--green-soft); }.admin-status-pill.unverified { color:#a87315; background:var(--amber-soft); }.admin-status-pill.blocked { color:#c8444d; background:var(--red-soft); } .admin-select-stack { display:flex; gap:5px; }.admin-select-stack .filter-select { width:auto; min-width:88px; min-height:33px; padding:0 25px 0 9px; font-size:11px; } .admin-users-table td:nth-child(4) { display:table-cell; }.admin-users-table td:nth-child(4) > strong,.admin-users-table td:nth-child(4) > small { display:block; }.admin-users-table td:nth-child(4) > strong { font-size:11.5px; }.admin-users-table td:nth-child(4) > small { margin-top:3px; color:var(--muted); font-size:11px; } .admin-row-menu { position:relative; }.admin-row-menu summary { display:grid; width:32px; height:32px; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--card); cursor:pointer; font-weight:950; list-style:none; }.admin-row-menu summary::-webkit-details-marker{display:none}.admin-row-menu[open] summary{border-color:var(--green);color:var(--green)} .admin-row-menu > div { position:absolute; z-index:12; top:37px; right:0; display:grid; width:170px; padding:6px; border:1px solid var(--line); border-radius:13px; background:var(--card); box-shadow:0 16px 40px rgba(13,36,29,.18); }.admin-row-menu button { padding:9px; border:0; border-radius:8px; text-align:left; background:transparent; color:var(--ink); cursor:pointer; font-size:11.5px; font-weight:800; }.admin-row-menu button:hover{background:var(--surface-soft)}.admin-row-menu button.danger{color:#c8444d} .admin-filter-empty { padding:32px; color:var(--muted); font-size:11px; text-align:center; } .admin-moderation-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; border:1px solid color-mix(in srgb,var(--amber) 24%,var(--line)); border-radius:22px; background:linear-gradient(120deg,color-mix(in srgb,var(--amber-soft) 42%,var(--card)),var(--card)); }.admin-moderation-hero > div{display:flex;align-items:center;gap:13px}.admin-moderation-hero > div>span{display:grid;width:45px;height:45px;place-items:center;border-radius:14px;color:#ae781a;background:var(--amber-soft)}.admin-moderation-hero > div>div{display:grid}.admin-moderation-hero strong{color:var(--ink);font-size:27px;line-height:1}.admin-moderation-hero small,.admin-moderation-hero p{color:var(--muted);font-size:11.5px}.admin-moderation-hero p{max-width:480px;margin:0;line-height:1.5} .admin-moderation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.admin-moderation-list{display:grid;gap:9px}.admin-report-item{padding:14px;border:1px solid var(--line);border-radius:17px;background:color-mix(in srgb,var(--surface-soft) 32%,var(--card))}.admin-report-item.hidden-item{opacity:.72}.admin-report-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px}.admin-report-top>div{display:grid;min-width:0}.admin-report-top strong,.admin-report-top small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-report-top strong{color:var(--ink);font-size:12px}.admin-report-top small{color:var(--muted);font-size:11px}.admin-report-count{padding:5px 8px;border-radius:99px;color:#c84d56;background:var(--red-soft);font-size:11px;font-weight:900}.admin-report-item>p{margin:12px 0;color:var(--ink);font-size:12px;line-height:1.55}.admin-report-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.admin-report-actions>button{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--green);cursor:pointer;font-size:11px;font-weight:900}.admin-report-actions>button.danger{color:#c8444d}.admin-all-good{display:grid;min-height:230px;place-items:center;align-content:center;gap:7px;color:var(--green);text-align:center}.admin-all-good .admin-icon{width:35px;height:35px}.admin-all-good strong{color:var(--ink);font-size:13px}.admin-all-good small{color:var(--muted);font-size:11.5px} .admin-system-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.admin-system-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:16px;border:1px solid var(--line);border-radius:19px;background:var(--card)}.admin-system-card>span{display:grid;width:39px;height:39px;place-items:center;border-radius:12px;color:var(--green);background:var(--green-soft)}.admin-system-card>div{display:grid}.admin-system-card small,.admin-system-card p{margin:0;color:var(--muted);font-size:11px}.admin-system-card strong{color:var(--ink);font-size:20px}.admin-system-card>i{width:8px;height:8px;border-radius:50%;background:#59ce9e;box-shadow:0 0 0 4px rgba(89,206,158,.1)}.admin-system-card.warning>i{background:#e7ad4d}.admin-security-panel{margin:0!important;border-radius:24px!important;box-shadow:0 15px 38px rgba(16,48,37,.055)} .admin-ticker-cloud{display:flex;flex-wrap:wrap;gap:7px}.admin-ticker-cloud>span{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}.admin-ticker-cloud strong{color:var(--ink);font-size:11px}.admin-ticker-cloud small{color:var(--muted);font-size:11px}.admin-token-field{display:grid;gap:7px}.admin-token-field>span{color:var(--muted);font-size:11px;font-weight:800}.admin-token-field input{min-height:43px;padding:0 13px;border:1px solid var(--line);border-radius:12px;outline:0;background:var(--surface-soft);color:var(--ink);font:inherit;font-size:12px}.admin-token-field input:focus{border-color:var(--green)}.admin-token-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.admin-token-actions button{display:inline-flex;align-items:center;gap:7px}.admin-token-actions .admin-icon{width:15px;height:15px} .admin-invite-intro{display:flex;align-items:center;gap:14px;padding:20px 22px;border-radius:22px;color:#eafff5;background:linear-gradient(135deg,#0c2a20,#144332)}.admin-invite-intro>span{display:grid;width:48px;height:48px;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(255,255,255,.06)}.admin-invite-intro strong{display:block;color:#fff;font-size:16px}.admin-invite-intro p{margin:4px 0 0;color:#9fb9ae;font-size:12px}.admin-shell>.panel{margin:0;border-radius:24px;box-shadow:0 15px 38px rgba(16,48,37,.055)} .admin-access-card{display:grid;grid-template-columns:120px minmax(0,520px);justify-content:center;align-items:center;gap:28px;min-height:360px;padding:40px;border:1px solid var(--line);border-radius:28px;background:var(--card);box-shadow:0 20px 50px rgba(16,48,37,.07)}.admin-access-visual{position:relative;display:grid;width:110px;height:110px;place-items:center;border-radius:32px;color:var(--green);background:linear-gradient(145deg,var(--green-soft),var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 18%,var(--line)),0 16px 35px rgba(18,99,73,.13)}.admin-access-visual .admin-icon{width:45px;height:45px}.admin-access-visual i{position:absolute;right:11px;bottom:11px;width:12px;height:12px;border:3px solid var(--card);border-radius:50%;background:#60dba8}.admin-access-card>div:last-child>span{color:var(--green);font-size:11.5px;font-weight:950;letter-spacing:.15em}.admin-access-card h2{margin:7px 0;color:var(--ink);font-size:24px}.admin-access-card p{margin:0 0 16px;color:var(--muted);font-size:11px;line-height:1.6}.admin-access-card .primary-button{display:inline-flex;align-items:center;gap:8px}.admin-loading-line{height:4px;overflow:hidden;border-radius:99px;background:var(--surface-soft)}.admin-loading-line i{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--green),transparent);animation:admin-loading 1.3s ease-in-out infinite} @keyframes admin-spin{to{transform:rotate(360deg)}} @keyframes admin-bar-in{from{transform:scaleY(0);opacity:0}} @keyframes admin-loading{from{transform:translateX(-120%)}to{transform:translateX(340%)}} @media (max-width:1120px){.admin-stat-grid,.admin-system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-command-hero{padding:30px}.admin-overview-grid,.admin-overview-grid.lower{grid-template-columns:1fr}.admin-moderation-grid{grid-template-columns:1fr}.admin-security-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:700px){.admin-shell{gap:12px}.admin-command-hero{grid-template-columns:1fr;min-height:0;padding:25px 20px;border-radius:24px}.admin-command-copy h1{font-size:34px}.admin-command-actions{justify-items:start;min-width:0;margin-top:23px}.admin-command-actions>small{display:none}.admin-tabs{top:68px;width:100%;border-radius:14px}.admin-tabs button{flex:1;justify-content:center;padding:0 10px}.admin-tabs button span{display:none}.admin-tabs button .admin-icon{width:18px;height:18px}.admin-stat-grid,.admin-system-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.admin-stat-card{padding:14px;border-radius:18px}.admin-stat-card>strong{font-size:24px}.admin-overview-grid{gap:10px}.admin-surface{padding:17px;border-radius:20px}.admin-mini-chart{gap:4px;height:115px}.admin-money-split{grid-template-columns:1fr}.admin-user-toolbar{align-items:stretch;flex-direction:column;padding:0 15px 15px}.admin-user-toolbar .filter-select{width:100%;min-width:0}.admin-users-heading{padding:18px 15px 13px}.admin-table-wrap{overflow:visible}.admin-users-table{display:block;min-width:0}.admin-users-table thead{display:none}.admin-users-table tbody{display:grid;gap:9px;padding:10px}.admin-users-table tr{position:relative;display:grid;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.admin-users-table td{display:block!important;padding:6px 0;border:0}.admin-users-table td::before{display:block;margin-bottom:4px;color:var(--muted);content:attr(data-label);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.admin-users-table td:first-child::before,.admin-users-table td:last-child::before{display:none}.admin-users-table td:last-child{position:absolute;right:10px;top:10px}.admin-account-cell{padding-right:40px}.admin-row-menu>div{position:fixed;z-index:100;right:16px;bottom:78px;top:auto;width:calc(100% - 32px);padding:10px;border-radius:18px}.admin-row-menu button{padding:13px}.admin-select-stack{flex-wrap:wrap}.admin-moderation-hero{align-items:flex-start;flex-direction:column}.admin-moderation-grid{gap:10px}.admin-report-actions{align-items:flex-start;flex-direction:column}.admin-report-actions>button{width:100%}.admin-access-card{grid-template-columns:1fr;min-height:0;padding:28px 20px;text-align:center}.admin-access-visual{margin:auto}.admin-access-card .primary-button{justify-content:center;width:100%}.admin-invite-intro{align-items:flex-start}.admin-shell>.panel .form-grid{grid-template-columns:1fr}.admin-shell>.panel .table-wrap{overflow-x:auto}} @media (max-width:430px){.admin-stat-grid,.admin-system-grid{grid-template-columns:1fr 1fr}.admin-stat-card>small{display:none}.admin-stat-card>span:not(.admin-stat-top){font-size:11.5px}.admin-stat-icon{width:34px;height:34px}.admin-section-heading{gap:8px}.admin-section-heading h2{font-size:16px}.admin-attention-card{grid-template-columns:auto minmax(0,1fr) auto}.admin-attention-card>i{display:none}.admin-person-meta{display:none}.admin-person-row{grid-template-columns:auto minmax(0,1fr)}.admin-growth-footer{align-items:flex-start;flex-direction:column}.admin-moderation-hero p{display:none}} :root[data-motion="off"] .admin-mini-bar,:root[data-motion="off"] .admin-loading-line i,:root[data-motion="off"] .admin-refresh-button:disabled .admin-icon{animation:none!important} @media(prefers-reduced-motion:reduce){:root:not([data-motion="on"]) .admin-mini-bar,:root:not([data-motion="on"]) .admin-loading-line i,:root:not([data-motion="on"]) .admin-refresh-button:disabled .admin-icon{animation:none!important}} .admin-nav-item { position:relative; } .admin-nav-item.has-attention::after { position:absolute; top:8px; left:35px; width:7px; height:7px; border:2px solid var(--sidebar); border-radius:50%; background:#ff6570; box-shadow:0 0 0 4px rgba(255,101,112,.1); content:""; } .admin-nav-count { display:grid; min-width:21px; height:21px; margin-left:auto; padding:0 6px; place-items:center; border-radius:99px; color:#fff; background:linear-gradient(135deg,#e95662,#ff7a83); font-size:11px; font-weight:950; box-shadow:0 7px 17px rgba(223,65,76,.24); } .admin-nav-count[hidden] { display:none; } .admin-account-cell { width:100%; padding:0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; } .admin-account-cell > span:nth-child(2) { display:grid; min-width:0; } .admin-account-cell > i { margin-left:auto; color:var(--muted); font-style:normal; transition:transform .18s ease,color .18s ease; } .admin-account-cell:hover > i { color:var(--green); transform:translateX(3px); } .admin-status-pill.deactivated { color:#7b5bc7; background:color-mix(in srgb,#8d6bda 13%,var(--card)); } .admin-row-menu button.subtle { margin-top:3px; border-top:1px solid var(--line); border-radius:0 0 8px 8px; font-size:11px; opacity:.7; } .admin-health-surface,.admin-audit-surface { padding:22px; } .admin-health-score { display:inline-grid; min-width:66px; min-height:32px; place-items:center; border-radius:99px; font-size:11.5px; font-weight:950; } .admin-health-score.good { color:#087a58; background:var(--green-soft); }.admin-health-score.warning { color:#a87315; background:var(--amber-soft); } .admin-health-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; } .admin-health-grid article { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; min-height:65px; padding:12px; border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb,var(--surface-soft) 42%,var(--card)); } .admin-health-grid article > span { display:grid; width:34px; height:34px; place-items:center; border-radius:11px; }.admin-health-grid article .admin-icon{width:16px;height:16px} .admin-health-grid article > div { display:grid; min-width:0; gap:3px; }.admin-health-grid strong { overflow:hidden; color:var(--ink); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }.admin-health-grid small { color:var(--muted); font-size:11px; line-height:1.35; } .admin-health-grid article > i { padding:4px 6px; border-radius:99px; font-size:11px; font-style:normal; font-weight:950; } .admin-health-grid article.good > span,.admin-health-grid article.good > i { color:#087a58; background:var(--green-soft); }.admin-health-grid article.warning > span,.admin-health-grid article.warning > i { color:#a87315; background:var(--amber-soft); } .admin-health-foot { margin:13px 2px 0; color:var(--muted); font-size:11px; } .admin-audit-list { display:grid; gap:6px; } .admin-audit-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent); } .admin-audit-item:last-child { border-bottom:0; }.admin-audit-item > span { display:grid; width:32px; height:32px; place-items:center; border-radius:10px; color:var(--green); background:var(--green-soft); }.admin-audit-item .admin-icon{width:15px;height:15px} .admin-audit-item > div { display:grid; min-width:0; gap:3px; }.admin-audit-item strong { overflow:hidden; color:var(--ink); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.admin-audit-item small { overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .admin-audit-item > button { padding:5px 8px; border:1px solid var(--line); border-radius:9px; background:var(--surface-soft); color:var(--green); cursor:pointer; font-size:11px; font-weight:900; } .admin-user-backdrop { position:fixed; z-index:10020; inset:0; display:flex; justify-content:flex-end; background:rgba(5,18,14,.55); backdrop-filter:blur(8px); animation:admin-backdrop-in .2s ease both; } .admin-user-drawer { display:flex; width:min(720px,94vw); height:100%; flex-direction:column; overflow:hidden; border-left:1px solid rgba(255,255,255,.13); background:var(--bg); box-shadow:-30px 0 80px rgba(2,18,12,.24); animation:admin-drawer-in .35s cubic-bezier(.2,.8,.2,1) both; } .admin-user-drawer-head { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:28px 27px 24px; color:#eafff5; background:radial-gradient(circle at 90% 5%,rgba(106,225,178,.22),transparent 35%),linear-gradient(145deg,#09271e,#124735); } .admin-user-drawer-head .admin-avatar.xl { width:58px; height:58px; border-color:rgba(255,255,255,.18); border-radius:19px; color:#fff; background:rgba(255,255,255,.09); font-size:15px; } .admin-user-drawer-head > div { min-width:0; }.admin-user-drawer-head > div > span { color:#80d8b5; font-size:11px; font-weight:950; letter-spacing:.14em; }.admin-user-drawer-head h2 { overflow:hidden; margin:4px 0 1px; color:#fff; font-size:25px; letter-spacing:-.04em; text-overflow:ellipsis; white-space:nowrap; }.admin-user-drawer-head p { overflow:hidden; margin:0; color:#a4c0b5; font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; } .admin-user-drawer-head .admin-status-pill { align-self:start; margin-top:4px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.08); color:#b9e8d5; } .admin-drawer-close { position:absolute; z-index:2; top:9px; right:9px; display:grid; width:34px; height:34px; place-items:center; border:1px solid rgba(255,255,255,.11); border-radius:11px; color:#fff; background:rgba(255,255,255,.07); cursor:pointer; }.admin-drawer-close .admin-icon{width:16px;height:16px} .admin-user-drawer-body { display:grid; gap:13px; padding:17px 20px 32px; overflow-y:auto; overscroll-behavior:contain; scrollbar-color:color-mix(in srgb,var(--green) 50%,transparent) transparent; scrollbar-width:thin; } .admin-user-facts,.admin-user-money-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .admin-user-facts article,.admin-user-money-grid article { display:grid; min-width:0; gap:5px; padding:13px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:0 10px 24px rgba(10,34,27,.035); } .admin-user-facts small,.admin-user-money-grid small { color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; }.admin-user-facts strong { overflow:hidden; color:var(--ink); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }.admin-user-money-grid strong{color:var(--ink);font-size:15px;letter-spacing:-.03em}.admin-user-money-grid span{color:var(--muted);font-size:11px}.admin-user-money-grid article.buy{box-shadow:inset 0 3px 0 #37ad80}.admin-user-money-grid article.sell{box-shadow:inset 0 3px 0 #7b6bd5}.admin-user-money-grid article.dividend{box-shadow:inset 0 3px 0 #d8a647} .admin-drawer-section { padding:17px; border:1px solid var(--line); border-radius:21px; background:var(--card); box-shadow:0 14px 34px rgba(8,30,23,.045); }.admin-drawer-section .admin-section-heading{margin-bottom:12px}.admin-drawer-section .admin-section-heading h3{margin:4px 0 2px;color:var(--ink);font-size:15px}.admin-drawer-section .admin-section-heading p{margin:0;color:var(--muted);font-size:11px} .admin-user-tx-list { display:grid; }.admin-user-tx-list > article { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 2px; border-top:1px solid var(--line); }.admin-user-tx-list .tx{min-width:63px;padding:5px 7px;border-radius:8px;text-align:center;color:var(--green);background:var(--green-soft);font-size:11px;font-weight:900}.admin-user-tx-list .tx.sell{color:#6552bd;background:color-mix(in srgb,#7b6bd5 13%,var(--card))}.admin-user-tx-list .tx.dividend{color:#a16a0e;background:var(--amber-soft)}.admin-user-tx-list > article div{display:grid;min-width:0}.admin-user-tx-list strong{color:var(--ink);font-size:12px}.admin-user-tx-list small{color:var(--muted);font-size:11px}.admin-user-tx-list b{color:var(--ink);font-size:12px} .admin-user-live-portfolio { overflow:hidden; margin-top:10px; border:1px solid color-mix(in srgb,var(--green) 19%,var(--line)); border-radius:17px; background:linear-gradient(145deg,color-mix(in srgb,var(--green-soft) 34%,var(--card)),var(--card)); }.admin-user-live-portfolio>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border-bottom:1px solid var(--line)}.admin-user-live-portfolio>header>div{display:grid;gap:3px}.admin-user-live-portfolio>header small{color:var(--green);font-size:11px;font-weight:950;letter-spacing:.08em}.admin-user-live-portfolio>header strong{color:var(--ink);font-size:20px;letter-spacing:-.04em}.admin-user-live-portfolio>header span{color:var(--muted);font-size:11px}.admin-user-live-portfolio>header>b{padding:5px 8px;border-radius:99px;color:var(--green);background:var(--green-soft);font-size:11px;white-space:nowrap}.admin-user-live-portfolio>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}.admin-user-live-portfolio article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 11px;background:var(--card)}.admin-user-live-portfolio article>div{display:grid;min-width:0}.admin-user-live-portfolio article strong,.admin-user-live-portfolio article small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-user-live-portfolio article strong{color:var(--ink);font-size:11.5px}.admin-user-live-portfolio article small{color:var(--muted);font-size:11px}.admin-user-live-portfolio article>b{color:var(--ink);font-size:11.5px;white-space:nowrap}.admin-user-live-portfolio article.missing>b{color:#a87315}.admin-position-logo,.admin-position-fallback{display:grid;width:29px;height:29px;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--surface-soft);font-size:11px;font-weight:950}.admin-position-logo img{width:100%;height:100%;object-fit:contain;border-radius:inherit} .admin-user-posts { display:grid; gap:7px; }.admin-user-posts article{padding:11px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft)}.admin-user-posts p{margin:0;color:var(--ink);font-size:11.5px;line-height:1.55}.admin-user-posts small{display:block;margin-top:6px;color:var(--muted);font-size:11px} .admin-deactivation-note,.admin-protected-note { display:flex; align-items:center; gap:11px; padding:13px 15px; border:1px solid color-mix(in srgb,#8d6bda 26%,var(--line)); border-radius:16px; color:#7656c5; background:color-mix(in srgb,#8d6bda 9%,var(--card)); }.admin-deactivation-note .admin-icon{width:19px}.admin-deactivation-note>div{display:grid;gap:2px}.admin-deactivation-note strong{font-size:12px}.admin-deactivation-note small{color:var(--muted);font-size:11px}.admin-protected-note{justify-content:center;font-size:11.5px;font-weight:850} .admin-account-controls { display:grid; gap:10px; padding:16px; border:1px solid var(--line); border-radius:20px; background:var(--card); }.admin-account-controls > button{display:flex;align-items:center;justify-content:center;gap:8px}.admin-account-controls .admin-icon{width:15px;height:15px}.admin-account-controls .secondary-button.danger{color:#c8444d;border-color:color-mix(in srgb,#c8444d 25%,var(--line));background:var(--red-soft)} .admin-danger-zone { border-top:1px solid var(--line); }.admin-danger-zone summary{padding:12px 2px 3px;color:var(--muted);cursor:pointer;font-size:11px;font-weight:900}.admin-danger-zone>div{padding:9px;border-radius:13px;background:var(--red-soft)}.admin-danger-zone p{margin:0 0 9px;color:#8f474c;font-size:11px;line-height:1.5}.admin-danger-zone .danger-button{width:100%;padding:10px;border:0;border-radius:10px;color:#fff;background:#bd3d46;cursor:pointer;font:inherit;font-size:11px;font-weight:950} .admin-drawer-loader { display:grid; height:100%; place-items:center; align-content:center; gap:9px; color:var(--ink); }.admin-drawer-loader span{width:42px;height:42px;border:3px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:admin-spin .8s linear infinite}.admin-drawer-loader strong{font-size:14px}.admin-drawer-loader small{color:var(--muted);font-size:11.5px} @keyframes admin-backdrop-in{from{opacity:0}}@keyframes admin-drawer-in{from{transform:translateX(100%)}} @media (max-width:1120px){.admin-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:700px){.admin-nav-item.has-attention::after{left:31px}.admin-user-drawer{width:100vw}.admin-user-drawer-head{grid-template-columns:auto minmax(0,1fr);padding:25px 18px 20px}.admin-user-drawer-head>.admin-status-pill{grid-column:1/-1;width:max-content;margin:0}.admin-user-drawer-body{padding:12px 12px 92px}.admin-user-facts,.admin-user-money-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-health-grid{grid-template-columns:1fr}.admin-health-surface,.admin-audit-surface{padding:16px}.admin-drawer-section{padding:14px}.admin-audit-item>button{display:none}.admin-user-live-portfolio>div{grid-template-columns:1fr}} @media (max-width:430px){.admin-user-drawer-head h2{font-size:21px}.admin-user-drawer-head .admin-avatar.xl{width:50px;height:50px}.admin-user-tx-list>article{grid-template-columns:auto minmax(0,1fr)}.admin-user-tx-list>article>b{grid-column:2}.admin-health-grid article{grid-template-columns:auto minmax(0,1fr)}.admin-health-grid article>i{grid-column:2;width:max-content}} :root[data-motion="off"] .admin-user-backdrop,:root[data-motion="off"] .admin-user-drawer,:root[data-motion="off"] .admin-drawer-loader span{animation:none!important} @media(prefers-reduced-motion:reduce){:root:not([data-motion="on"]) .admin-user-backdrop,:root:not([data-motion="on"]) .admin-user-drawer,:root:not([data-motion="on"]) .admin-drawer-loader span{animation:none!important}} .browser-notification-panel { position: relative; overflow: hidden; margin: 0; padding: 0; border-color: color-mix(in srgb, var(--brand-accent) 30%, var(--line)); background: radial-gradient(circle at 8% 0, color-mix(in srgb, var(--brand-accent) 19%, transparent), transparent 29%), radial-gradient(circle at 94% 20%, color-mix(in srgb, #7967df 10%, transparent), transparent 27%), var(--card); box-shadow: 0 24px 60px rgba(8, 34, 26, .09); } .browser-notification-panel + .panel { margin-top: 16px; } .browser-notification-hero { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: 218px; padding: 28px 30px 25px; } .browser-notification-orbit { position: relative; display: grid; width: 104px; height: 104px; place-items: center; border: 1px solid color-mix(in srgb, var(--brand-accent) 34%, transparent); border-radius: 32px; color: #eafff5; background: linear-gradient(145deg, color-mix(in srgb, var(--green) 90%, #071e17), color-mix(in srgb, var(--green-2) 84%, #071e17)); box-shadow: 0 18px 34px color-mix(in srgb, var(--green) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.14); } .browser-notification-orbit > span { position: relative; z-index: 2; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(255,255,255,.09); font-size: 15px; font-weight: 950; letter-spacing: -.04em; } .browser-notification-orbit > i { position: absolute; border-radius: 50%; background: #78e1b6; box-shadow: 0 0 16px rgba(120,225,182,.8); } .browser-notification-orbit > i:nth-of-type(1) { top: 15px; right: 16px; width: 7px; height: 7px; animation: notification-orbit-one 4.2s linear infinite; } .browser-notification-orbit > i:nth-of-type(2) { bottom: 18px; left: 13px; width: 5px; height: 5px; animation: notification-orbit-two 3.5s ease-in-out infinite; } .browser-notification-orbit > i:nth-of-type(3) { right: 10px; bottom: 24px; width: 3px; height: 3px; opacity: .65; } .browser-notification-copy { min-width: 0; } .browser-notification-copy .eyebrow { color: var(--green-2); font-size: 11.5px; font-weight: 950; letter-spacing: .14em; } .browser-notification-copy h2 { max-width: 680px; margin: 7px 0 8px; color: var(--ink); font-size: clamp(25px, 3vw, 38px); line-height: 1.05; letter-spacing: -.045em; } .browser-notification-copy > p { max-width: 760px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; } .browser-notification-status { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; margin-top: 15px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface-soft) 76%, transparent); } .browser-notification-status > i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 13%, transparent); } .browser-notification-status.positive > i { background: #39bd88; box-shadow: 0 0 0 4px rgba(57,189,136,.13), 0 0 15px rgba(57,189,136,.28); animation: notification-status-pulse 2s ease-in-out infinite; } .browser-notification-status.negative > i { background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 12%, transparent); } .browser-notification-status > span { display: grid; min-width: 0; gap: 1px; } .browser-notification-status strong { color: var(--ink); font-size: 12px; } .browser-notification-status small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .browser-notification-actions { display: grid; justify-items: stretch; gap: 8px; min-width: 220px; } .browser-notification-actions button { justify-content: center; min-height: 44px; white-space: nowrap; } .browser-notification-actions button:disabled { cursor: not-allowed; opacity: .48; } .browser-notification-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 0 30px 20px; } .browser-notification-grid.is-disabled, .browser-notification-controls.is-disabled { opacity: .5; } .browser-notification-option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 82px; padding: 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface-soft) 48%, var(--card)); cursor: pointer; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease; } .browser-notification-option:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--green) 28%, var(--line)); box-shadow: 0 12px 26px rgba(10,38,29,.06); } .browser-notification-option.active { border-color: color-mix(in srgb, var(--green) 29%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--green-soft) 72%, var(--card)), var(--card)); } .browser-notification-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; } .browser-notification-option-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--card); font-size: 14px; font-weight: 950; } .browser-notification-option.active .browser-notification-option-icon { border-color: transparent; color: var(--green); background: var(--green-soft); } .browser-notification-option > span:nth-of-type(2) { display: grid; min-width: 0; gap: 4px; } .browser-notification-option strong { color: var(--ink); font-size: 12px; } .browser-notification-option small { color: var(--muted); font-size: 11px; line-height: 1.4; } .browser-notification-option > i { display: block; width: 31px; height: 18px; padding: 3px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 20%, var(--line)); transition: background .2s ease; } .browser-notification-option > i::after { display: block; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.15); content: ""; transition: transform .2s ease; } .browser-notification-option.active > i { background: var(--green-2); } .browser-notification-option.active > i::after { transform: translateX(13px); } .browser-notification-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 18px 30px; border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent); background: color-mix(in srgb, var(--surface-soft) 52%, transparent); } .browser-notification-controls > label { display: grid; gap: 6px; } .browser-notification-controls > label > span { color: var(--muted); font-size: 11px; font-weight: 900; } .browser-notification-controls select { width: 100%; min-height: 41px; padding: 0 11px; border: 1px solid var(--line); border-radius: 12px; outline: none; color: var(--ink); background: var(--card); font: inherit; font-size: 12px; font-weight: 850; } .browser-notification-controls select:focus { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 9%, transparent); } .browser-notification-controls .browser-notification-check { grid-column: span 2; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); cursor: pointer; } .browser-notification-check input { width: 17px; height: 17px; accent-color: var(--green); } .browser-notification-check > span { display: grid; gap: 2px; } .browser-notification-check strong { color: var(--ink); font-size: 11.5px; } .browser-notification-check small { color: var(--muted); font-size: 11px; line-height: 1.35; } .browser-notification-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 18px 30px 21px; } .browser-notification-foot > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; } .browser-notification-foot > div::before { grid-row: 1 / 3; width: 2px; border-radius: 99px; background: linear-gradient(var(--brand-accent), transparent); content: ""; } .browser-notification-foot strong { color: var(--ink); font-size: 11.5px; } .browser-notification-foot small { color: var(--muted); font-size: 11px; line-height: 1.5; } .browser-notification-history { margin: 0 30px 25px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface-soft) 55%, var(--card)); } .browser-notification-history > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 13px; color: var(--ink); cursor: pointer; font-size: 11.5px; font-weight: 900; list-style: none; } .browser-notification-history > summary::-webkit-details-marker { display: none; } .browser-notification-history > summary span { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 99px; color: var(--green); background: var(--green-soft); font-size: 11px; } .browser-notification-history > div { border-top: 1px solid var(--line); } .browser-notification-history button { display: grid; width: 100%; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 13px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; cursor: pointer; } .browser-notification-history button:last-child { border-bottom: 0; } .browser-notification-history button:hover { background: var(--green-soft); } .browser-notification-history button > i { width: 7px; height: 7px; border-radius: 50%; background: var(--green-2); } .browser-notification-history button > span { display: grid; min-width: 0; gap: 2px; } .browser-notification-history strong, .browser-notification-history small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .browser-notification-history strong { font-size: 11.5px; } .browser-notification-history small { color: var(--muted); font-size: 11px; } @keyframes notification-orbit-one { to { transform: rotate(360deg) translateX(6px) rotate(-360deg); } } @keyframes notification-orbit-two { 50% { transform: translate(9px, -8px) scale(.7); opacity: .5; } } @keyframes notification-status-pulse { 50% { box-shadow: 0 0 0 7px rgba(57,189,136,0), 0 0 18px rgba(57,189,136,.4); } } @media (max-width: 1120px) { .browser-notification-hero { grid-template-columns: 96px minmax(0, 1fr); } .browser-notification-orbit { width: 86px; height: 86px; border-radius: 27px; } .browser-notification-actions { grid-column: 1 / -1; display: flex; min-width: 0; } .browser-notification-actions button { flex: 1; } .browser-notification-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .browser-notification-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .report-status-table-wrap { min-width: 0; } .report-status-table { min-width: 760px; } .strategy-welcome-card { min-height: 0; border-color: rgba(255,255,255,.22); box-shadow: 0 30px 80px rgba(0,0,0,.55); } .strategy-welcome-card h2 { font-size: clamp(26px, 7vw, 34px); letter-spacing: -1px; } .strategy-welcome-orbit { display: none; } .browser-notification-panel { border-radius: 23px; } .browser-notification-hero { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; min-height: 0; padding: 21px 16px 17px; } .browser-notification-orbit { width: 64px; height: 64px; border-radius: 21px; } .browser-notification-orbit > span { width: 34px; height: 34px; border-radius: 11px; font-size: 11px; } .browser-notification-copy .eyebrow { font-size: 11px; } .browser-notification-copy h2 { margin: 5px 0; font-size: 22px; } .browser-notification-copy > p { grid-column: 1 / -1; font-size: 11.5px; } .browser-notification-status { max-width: calc(100vw - 32px); } .browser-notification-status small { white-space: normal; } .browser-notification-actions { display: grid; } .browser-notification-grid { grid-template-columns: 1fr; padding: 0 16px 16px; } .browser-notification-option { min-height: 71px; } .browser-notification-controls { grid-template-columns: 1fr 1fr; padding: 15px 16px; } .browser-notification-controls .browser-notification-check { grid-column: 1 / -1; } .browser-notification-foot { grid-template-columns: 1fr; gap: 13px; padding: 16px; } .browser-notification-history { margin: 0 16px 18px; } } @media (max-width: 420px) { .browser-notification-hero { grid-template-columns: 1fr; } .browser-notification-orbit { display: none; } .browser-notification-actions { grid-column: 1; } .browser-notification-controls { grid-template-columns: 1fr; } .browser-notification-controls .browser-notification-check { grid-column: span 1; } } :root[data-motion="off"] .browser-notification-orbit > i, :root[data-motion="off"] .browser-notification-status.positive > i { animation: none !important; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .browser-notification-orbit > i, :root:not([data-motion="on"]) .browser-notification-status.positive > i { animation: none !important; } } .analyst-consensus-premium { overflow:hidden; background:radial-gradient(circle at 92% 0,rgba(109,74,255,.09),transparent 34%),var(--card); } .analyst-consensus-premium .panel-title .eyebrow { display:block; margin-bottom:6px; color:#6d4aff; font-size:11.5px; font-weight:950; letter-spacing:.13em; } .analyst-consensus-hero { display:grid; grid-template-columns:minmax(180px,.72fr) minmax(0,1.8fr); align-items:center; gap:30px; padding:22px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface-soft) 92%,#eee9ff),var(--card)); } .analyst-consensus-hero > div:first-child { display:grid; gap:4px; } .analyst-consensus-hero > div:first-child span { color:var(--muted); font-size:12px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; } .analyst-consensus-hero > div:first-child strong { color:var(--ink); font-size:clamp(27px,3.4vw,44px); line-height:1; letter-spacing:-.045em; } .analyst-consensus-hero > div:first-child b { margin-top:5px; font-size:11px; } .analyst-target-scale { position:relative; min-height:88px; } .analyst-scale-line { position:absolute; top:43px; right:2%; left:2%; height:6px; border-radius:99px; background:linear-gradient(90deg,#ef777b,#e8c55b 35%,#79d4ae 68%,#3daf82); box-shadow:inset 0 1px 2px rgba(0,0,0,.12); } .analyst-target-scale i { position:absolute; top:30px; left:var(--target-pos); display:grid; min-width:54px; justify-items:center; color:var(--muted); font-style:normal; transform:translateX(-50%); } .analyst-target-scale i::before { z-index:1; width:16px; height:16px; border:3px solid var(--card); border-radius:50%; background:#74847e; box-shadow:0 3px 12px rgba(14,38,31,.2); content:""; } .analyst-target-scale i small { position:absolute; top:-22px; font-size:11px; font-weight:950; letter-spacing:.08em; } .analyst-target-scale i b { margin-top:7px; padding:3px 7px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font-size:11.5px; white-space:nowrap; box-shadow:0 5px 14px rgba(16,45,35,.08); } .analyst-target-scale i.current { z-index:3; } .analyst-target-scale i.current::before { width:20px; height:20px; margin-top:-2px; background:#172e27; box-shadow:0 0 0 5px rgba(23,46,39,.12); } .analyst-target-scale i.mean::before { background:#6d4aff; box-shadow:0 0 0 5px rgba(109,74,255,.14),0 3px 12px rgba(54,35,125,.25); } .analyst-target-scale i.low::before { background:#e36c73; }.analyst-target-scale i.high::before { background:#31a778; } .analyst-grid-expanded { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:14px; } .analyst-recommendation-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:14px; } .analyst-recommendation-strip > div { position:relative; display:grid; grid-template-columns:1fr auto; gap:5px 8px; padding:11px 12px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); } .analyst-recommendation-strip > div > span { grid-column:1/-1; height:4px; overflow:hidden; border-radius:99px; background:color-mix(in srgb,var(--line) 65%,transparent); } .analyst-recommendation-strip > div > span::before { display:block; width:var(--share); height:100%; border-radius:inherit; background:#6d4aff; content:""; } .analyst-recommendation-strip .strong-buy > span::before,.analyst-recommendation-strip .buy > span::before { background:#28a979; } .analyst-recommendation-strip .hold > span::before { background:#d6a23c; }.analyst-recommendation-strip .sell > span::before { background:#df656b; } .analyst-recommendation-strip small { color:var(--muted); font-size:11.5px; }.analyst-recommendation-strip b { color:var(--ink); font-size:11px; } .analyst-change-list { margin-top:14px; border:1px solid var(--line); border-radius:18px; background:var(--card); } .analyst-change-list header,.analyst-change-list > div { display:grid; grid-template-columns:minmax(130px,1fr) minmax(110px,.7fr) minmax(150px,1fr); align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--line); } .analyst-change-list header { grid-template-columns:1fr auto; background:var(--surface-soft); border-radius:18px 18px 0 0; } .analyst-change-list > div:last-child { border-bottom:0; }.analyst-change-list strong { color:var(--ink); font-size:11px; }.analyst-change-list span { font-size:12px; font-weight:800; }.analyst-change-list small { color:var(--muted); font-size:11.5px; } .analyst-consensus-premium .form-hint a { color:#6d4aff; font-weight:850; text-decoration:none; } .trading-lab-shell { --tl-night:#071a15; --tl-panel:#0c261e; --tl-mint:#69efba; display:grid; min-width:0; gap:16px; } .trading-lab-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; min-height:260px; padding:38px; overflow:hidden; border:1px solid rgba(105,239,186,.18); border-radius:30px; color:#effff8; background:radial-gradient(circle at 78% 20%,rgba(105,239,186,.18),transparent 31%),radial-gradient(circle at 16% 110%,rgba(109,74,255,.22),transparent 43%),linear-gradient(135deg,#061711,#0b271d 58%,#071a15); box-shadow:0 26px 65px rgba(5,31,23,.2); } .trading-lab-grid-bg { position:absolute; inset:0; opacity:.16; background-image:linear-gradient(rgba(128,238,194,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(128,238,194,.2) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(90deg,#000,transparent 78%); transform:perspective(700px) rotateX(55deg) scale(1.3) translateY(16%); transform-origin:bottom; } .trading-lab-live { position:absolute; top:22px; left:38px; display:flex; align-items:center; gap:8px; color:#8de9c2; font-size:11.5px; font-weight:950; letter-spacing:.15em; } .trading-lab-live i { width:7px; height:7px; border-radius:50%; background:var(--tl-mint); box-shadow:0 0 0 5px rgba(105,239,186,.1),0 0 18px rgba(105,239,186,.75); animation:trading-live-pulse 1.8s ease-in-out infinite; } .trading-lab-hero > div:not(.trading-lab-grid-bg) { position:relative; z-index:1; max-width:820px; } .trading-lab-hero > div > span { color:#77cfae; font-size:12px; font-weight:950; letter-spacing:.17em; } .trading-lab-hero h2 { max-width:780px; margin:13px 0 10px; color:#fff; font-size:clamp(34px,5vw,62px); line-height:.98; letter-spacing:-.055em; } .trading-lab-hero p { max-width:720px; margin:0; color:#a9c5ba; font-size:13px; line-height:1.7; } .trading-lab-hero aside { position:relative; z-index:1; display:grid; min-width:145px; padding:20px; border:1px solid rgba(105,239,186,.18); border-radius:22px; background:rgba(255,255,255,.055); backdrop-filter:blur(12px); } .trading-lab-hero aside strong { color:var(--tl-mint); font-size:26px; letter-spacing:.04em; }.trading-lab-hero aside span { margin-top:3px; color:#fff; font-size:15px; font-weight:900; }.trading-lab-hero aside small { margin-top:8px; color:#8aa99c; font-size:11px; } .trading-lab-controls { display:grid; grid-template-columns:minmax(210px,1.5fr) repeat(5,minmax(105px,.65fr)) auto; align-items:end; gap:10px; padding:15px; } .trading-lab-controls label { display:grid; gap:6px; min-width:0; }.trading-lab-controls label > span { padding-left:2px; color:var(--muted); font-size:11.5px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; } .trading-lab-controls .filter-select { width:100%; min-width:0; }.trading-lab-controls > .primary-button { min-height:46px; white-space:nowrap; } .trading-quick-tickers { display:flex; grid-column:1/-1; gap:7px; max-width:100%; overflow-x:auto; scrollbar-width:none; } .trading-quick-tickers::-webkit-scrollbar { display:none; }.trading-quick-tickers button { display:flex; align-items:center; gap:6px; padding:5px 10px 5px 5px; border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--muted); cursor:pointer; font-size:11.5px; font-weight:900; transition:.18s ease; } .trading-quick-tickers button:hover,.trading-quick-tickers button.active { border-color:rgba(64,172,129,.5); color:var(--green); background:var(--green-soft); transform:translateY(-1px); } .trading-quick-logo { display:grid; width:25px; height:25px; place-items:center; overflow:hidden; border-radius:50%; background:#fff; object-fit:contain; font-size:11px; } .trading-lab-loading { display:grid; min-height:430px; place-items:center; padding:28px; }.trading-lab-loading > p { max-width:600px; margin:-80px auto 0; color:var(--muted); font-size:11px; text-align:center; } .trading-lab-result { display:grid; gap:16px; min-width:0; } .trading-signal-hero { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:25px; padding:25px 28px; overflow:hidden; border:1px solid rgba(105,239,186,.18); border-radius:26px; color:#eafff6; background:radial-gradient(circle at 90% 0,rgba(105,239,186,.15),transparent 30%),linear-gradient(135deg,#091e17,#0d2d23); box-shadow:0 18px 44px rgba(7,35,27,.14); } .trading-signal-hero.negative { border-color:rgba(244,107,113,.25); background:radial-gradient(circle at 90% 0,rgba(244,107,113,.13),transparent 30%),linear-gradient(135deg,#211012,#2e1519); } .trading-signal-hero.neutral { border-color:rgba(232,188,92,.25); background:radial-gradient(circle at 90% 0,rgba(232,188,92,.12),transparent 30%),linear-gradient(135deg,#211c0d,#29220e); } .trading-signal-orbit { position:relative; display:grid; width:104px; height:104px; place-content:center; border:1px solid rgba(105,239,186,.24); border-radius:50%; box-shadow:inset 0 0 30px rgba(105,239,186,.08),0 0 0 9px rgba(105,239,186,.035); text-align:center; } .trading-signal-orbit::before { position:absolute; inset:-6px; border:2px solid transparent; border-top-color:var(--tl-mint); border-right-color:rgba(105,239,186,.3); border-radius:50%; content:""; animation:trading-orbit 6s linear infinite; } .trading-signal-hero.negative .trading-signal-orbit::before { border-top-color:#ff777c; }.trading-signal-orbit b { color:#fff; font-size:33px; line-height:.9; }.trading-signal-orbit small { margin-top:4px; color:#79a493; font-size:11px; } .trading-signal-copy > span { color:#77cfae; font-size:11.5px; font-weight:950; letter-spacing:.12em; }.trading-signal-copy h2 { margin:7px 0 5px; color:#fff; font-size:clamp(25px,3.3vw,42px); letter-spacing:-.04em; }.trading-signal-copy p { margin:0; color:#a7c2b7; font-size:11px; }.trading-signal-copy > div { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }.trading-signal-copy > div b { padding:5px 8px; border:1px solid rgba(255,255,255,.1); border-radius:99px; background:rgba(255,255,255,.05); color:#cfe4db; font-size:11px; } .trading-signal-actions { display:grid; justify-items:end; gap:8px; }.trading-signal-actions small { max-width:180px; color:#779389; font-size:11px; text-align:right; }.trading-signal-actions .primary-button:disabled { opacity:.6; } .trading-risk-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.trading-risk-grid article { display:grid; gap:4px; min-width:0; padding:16px; border:1px solid var(--line); border-radius:19px; background:var(--card); }.trading-risk-grid span { color:var(--muted); font-size:11.5px; font-weight:850; text-transform:uppercase; }.trading-risk-grid strong { color:var(--ink); font-size:18px; letter-spacing:-.025em; }.trading-risk-grid small { color:var(--muted); font-size:11px; }.trading-risk-grid article.negative { background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--card) 82%,#ffe7e8)); }.trading-risk-grid article.positive { background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--card) 82%,#dff9ee)); } .trading-live-plan { display:grid; gap:14px; padding:20px; border:1px solid color-mix(in srgb,var(--green) 28%,var(--line)); border-radius:24px; background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--green-soft) 66%,transparent),transparent 36%),var(--card); box-shadow:var(--shadow); } .trading-live-plan-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }.trading-live-plan-grid article { position:relative; display:grid; gap:4px; min-width:0; padding:14px; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--surface-soft); }.trading-live-plan-grid article.selected { border-color:color-mix(in srgb,var(--green) 52%,var(--line)); box-shadow:0 10px 28px color-mix(in srgb,var(--green) 12%,transparent); }.trading-live-plan-grid article.danger { border-color:color-mix(in srgb,var(--red) 36%,var(--line)); }.trading-live-plan-grid span { color:var(--green); font-size:20px; font-weight:950; }.trading-live-plan-grid strong { color:var(--ink); font-size:11px; }.trading-live-plan-grid small { color:var(--red); font-size:11.5px; font-weight:800; }.trading-live-plan-grid i { position:absolute; right:0; bottom:0; left:0; width:var(--plan-risk); max-width:100%; height:3px; background:var(--red); } .trading-flat-callout { display:flex; align-items:center; gap:14px; padding:17px 20px; border:1px solid color-mix(in srgb,var(--amber) 35%,var(--line)); border-radius:20px; background:color-mix(in srgb,var(--amber-soft) 45%,var(--card)); }.trading-flat-callout > span { padding:8px 11px; border-radius:10px; background:var(--amber); color:#fff; font-size:12px; font-weight:950; }.trading-flat-callout strong,.trading-flat-callout small { display:block; }.trading-flat-callout strong { color:var(--ink); font-size:12px; }.trading-flat-callout small { margin-top:3px; color:var(--muted); font-size:11.5px; } .trading-component-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.trading-component-grid article { padding:14px; border:1px solid var(--line); border-radius:17px; background:var(--card); }.trading-component-grid span,.trading-component-grid small { display:block; color:var(--muted); font-size:11px; }.trading-component-grid strong { display:block; margin:5px 0 8px; color:var(--ink); font-size:19px; }.trading-component-grid div { height:5px; overflow:hidden; border-radius:99px; background:var(--surface-soft); }.trading-component-grid i { display:block; width:var(--factor); height:100%; border-radius:inherit; background:#d4a746; }.trading-component-grid .positive i { background:#2aaa79; }.trading-component-grid .negative i { background:#e45e65; }.trading-component-grid small { margin-top:7px; } .trading-backtest-chart { min-width:0; padding:20px; overflow:hidden; }.trading-backtest-chart .full-chart-wrap { min-width:0; margin-top:10px; }.trading-backtest-warning { margin:10px 4px 0; padding:11px 13px; border-left:3px solid #d6a23c; border-radius:0 10px 10px 0; background:color-mix(in srgb,var(--card) 82%,#fff4d8); color:var(--muted); font-size:11.5px; line-height:1.55; } .trading-results-table { padding:20px; }.trading-results-table table { width:100%; border-collapse:collapse; }.trading-results-table th,.trading-results-table td { padding:11px 10px; border-bottom:1px solid var(--line); font-size:11.5px; text-align:right; white-space:nowrap; }.trading-results-table th:first-child,.trading-results-table td:first-child { text-align:left; }.trading-results-table tbody tr.primary { background:color-mix(in srgb,var(--green-soft) 65%,transparent); }.trading-results-table tbody tr.primary strong { color:var(--green); } .trading-leverage-matrix { min-width:0; padding:20px; overflow:hidden; }.trading-leverage-matrix .table-wrap { overflow-x:auto; }.trading-leverage-matrix table { width:100%; min-width:940px; border-collapse:collapse; }.trading-leverage-matrix th,.trading-leverage-matrix td { padding:11px 9px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; text-align:right; white-space:nowrap; }.trading-leverage-matrix th:first-child,.trading-leverage-matrix td:first-child,.trading-leverage-matrix th:nth-child(2),.trading-leverage-matrix td:nth-child(2) { text-align:left; }.trading-leverage-matrix tr.primary { background:color-mix(in srgb,var(--green-soft) 64%,transparent); }.trading-leverage-matrix td > strong { color:var(--ink); font-size:12px; }.trading-leverage-matrix .admin-status-pill { white-space:nowrap; } .trading-detail-grid { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr); gap:16px; min-width:0; }.trading-detail-grid > .admin-surface { min-width:0; padding:20px; } .trading-factor-list { display:grid; gap:6px; }.trading-factor-list > div { display:grid; grid-template-columns:minmax(0,1fr) auto 46px; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }.trading-factor-list span { color:var(--ink); font-size:11.5px; font-weight:850; }.trading-factor-list span small { display:block; margin-top:2px; color:var(--muted); font-size:11px; font-weight:500; }.trading-factor-list strong { font-size:11.5px; }.trading-factor-list b { padding:4px 6px; border-radius:8px; background:var(--card); color:var(--muted); font-size:11px; text-align:center; }.trading-factor-list .positive b { color:#15805c; }.trading-factor-list .negative b { color:#cf4b53; } .trading-news-list { display:grid; gap:7px; }.trading-news-list article { display:grid; grid-template-columns:7px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); }.trading-news-list i { width:7px; height:7px; margin-top:3px; border-radius:50%; background:#d0a33e; box-shadow:0 0 0 4px rgba(208,163,62,.1); }.trading-news-list article.positive i { background:#2bab7a; }.trading-news-list article.negative i { background:#e35e65; }.trading-news-list strong { display:block; overflow:hidden; color:var(--ink); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }.trading-news-list small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }.trading-news-list .ghost-button { min-height:30px; padding:6px 9px; font-size:11px; white-space:nowrap; } .trading-analyst-target { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.trading-analyst-target > div { display:grid; gap:4px; padding:14px 10px; border:1px solid var(--line); border-radius:15px; background:var(--surface-soft); text-align:center; }.trading-analyst-target .mean { border-color:rgba(109,74,255,.3); background:color-mix(in srgb,var(--card) 72%,#eee9ff); }.trading-analyst-target small { color:var(--muted); font-size:11px; }.trading-analyst-target strong { color:var(--ink); font-size:15px; }.trading-analyst-target span { font-size:11px; font-weight:900; } .trading-guardrails ul { display:grid; gap:10px; margin:0; padding:0; list-style:none; }.trading-guardrails li { position:relative; padding:10px 11px 10px 34px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); color:var(--muted); font-size:11.5px; line-height:1.45; }.trading-guardrails li::before { position:absolute; top:9px; left:10px; display:grid; width:16px; height:16px; place-items:center; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:11.5px; font-weight:950; content:"✓"; } .trading-paper-ledger { padding:20px; }.trading-paper-list { display:grid; gap:7px; }.trading-paper-list article { display:grid; grid-template-columns:55px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-left:3px solid #d5a33d; border-radius:13px; background:var(--surface-soft); }.trading-paper-list article.positive { border-left-color:#2baa7a; }.trading-paper-list article.negative { border-left-color:#e35e65; }.trading-paper-list > article > span { color:var(--ink); font-size:12px; font-weight:950; }.trading-paper-list strong { display:block; color:var(--ink); font-size:11.5px; }.trading-paper-list small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }.trading-paper-list b { color:var(--ink); font-size:12px; } .trading-panel-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:7px; border:1px solid var(--line); border-radius:21px; background:color-mix(in srgb,var(--card) 86%,transparent); box-shadow:0 12px 35px rgba(13,51,40,.08); backdrop-filter:blur(16px); } .trading-panel-nav button { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; min-height:58px; padding:10px 16px; overflow:hidden; border:0; border-radius:15px; background:transparent; color:var(--muted); cursor:pointer; text-align:left; transition:transform .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease; } .trading-panel-nav button::after { position:absolute; right:18%; bottom:-24px; left:18%; height:28px; border-radius:50%; background:rgba(105,239,186,.38); filter:blur(16px); content:""; opacity:0; transition:.2s ease; } .trading-panel-nav button > i { width:8px; height:8px; flex:0 0 auto; border:2px solid currentColor; border-radius:50%; box-shadow:0 0 0 5px color-mix(in srgb,currentColor 9%,transparent); } .trading-panel-nav button span { display:grid; gap:2px; color:inherit; font-size:12px; font-weight:950; letter-spacing:.01em; }.trading-panel-nav button small { color:var(--muted); font-size:11px; font-weight:600; } .trading-panel-nav button:hover { color:var(--green); transform:translateY(-1px); }.trading-panel-nav button.active { color:#b9ffe4; background:linear-gradient(135deg,#0b2b21,#164634); box-shadow:0 11px 24px rgba(7,48,35,.18); }.trading-panel-nav button.active::after { opacity:1; }.trading-panel-nav button.active small { color:#84bfa7; } .trading-simulator-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; min-height:205px; padding:30px; overflow:hidden; border:1px solid rgba(109,74,255,.22); border-radius:28px; background:radial-gradient(circle at 80% 0,rgba(109,74,255,.2),transparent 34%),radial-gradient(circle at 0 100%,rgba(105,239,186,.12),transparent 38%),linear-gradient(135deg,#0a1d18,#111c2c); color:#fff; box-shadow:0 20px 50px rgba(16,28,42,.15); } .trading-simulator-hero > div > span { color:#8de9c2; font-size:11.5px; font-weight:950; letter-spacing:.15em; }.trading-simulator-hero h2 { margin:9px 0 7px; font-size:clamp(28px,4vw,50px); line-height:1; letter-spacing:-.045em; }.trading-simulator-hero p { max-width:720px; margin:0; color:#a9bab5; font-size:11px; line-height:1.65; } .trading-simulator-hero aside { display:grid; min-width:230px; gap:4px; padding:22px; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:rgba(255,255,255,.065); backdrop-filter:blur(15px); }.trading-simulator-hero aside small { color:#9aada7; font-size:11px; font-weight:800; text-transform:uppercase; }.trading-simulator-hero aside strong { color:#69efba; font-size:30px; letter-spacing:-.04em; }.trading-simulator-hero aside b { color:#83dcb9; font-size:12px; }.trading-simulator-hero aside.negative strong,.trading-simulator-hero aside.negative b { color:#ff858b; } .trading-simulator-controls { display:grid; grid-template-columns:minmax(330px,1.4fr) minmax(150px,.55fr) minmax(150px,.55fr) auto; align-items:end; gap:10px; padding:16px; }.trading-simulator-controls > label { display:grid; gap:6px; }.trading-simulator-controls > label span,.trading-capital-presets > span { color:var(--muted); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.trading-simulator-controls input { width:100%; min-height:45px; padding:10px 12px; border:1px solid var(--line); border-radius:13px; outline:0; background:var(--surface-soft); color:var(--ink); font:inherit; font-size:12px; }.trading-simulator-controls input:focus { border-color:color-mix(in srgb,var(--green) 58%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 10%,transparent); } .trading-capital-presets { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }.trading-capital-presets > span { width:100%; }.trading-capital-presets > button { min-height:45px; padding:9px 13px; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); color:var(--muted); cursor:pointer; font-size:11.5px; font-weight:900; }.trading-capital-presets > button.active { border-color:color-mix(in srgb,var(--green) 48%,var(--line)); background:var(--green-soft); color:var(--green); }.trading-capital-presets label { position:relative; flex:1; min-width:120px; }.trading-capital-presets label small { position:absolute; top:4px; right:9px; color:var(--muted); font-size:11px; text-transform:uppercase; pointer-events:none; }.trading-capital-presets label input { padding-top:14px; font-weight:900; } .trading-simulator-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.trading-simulator-kpis article { display:grid; gap:5px; min-width:0; padding:17px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(150deg,var(--card),var(--surface-soft)); }.trading-simulator-kpis span { color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; }.trading-simulator-kpis strong { color:var(--ink); font-size:20px; letter-spacing:-.03em; }.trading-simulator-kpis small { color:var(--muted); font-size:11px; }.trading-simulator-kpis .positive strong { color:var(--green); }.trading-simulator-kpis .negative strong { color:var(--red); } .trading-simulator-leverage,.trading-simulator-ledger,.trading-signal-history { padding:20px; }.trading-simulator-leverage > div:last-child { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:14px; }.trading-simulator-leverage button { position:relative; display:grid; gap:5px; min-width:0; padding:16px; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--surface-soft); cursor:pointer; text-align:left; }.trading-simulator-leverage button.active { border-color:rgba(109,74,255,.45); background:color-mix(in srgb,var(--card) 76%,#eeeaff); box-shadow:0 12px 30px rgba(109,74,255,.1); }.trading-simulator-leverage button > span { color:#6d4aff; font-size:18px; font-weight:950; }.trading-simulator-leverage button strong { color:var(--ink); font-size:15px; }.trading-simulator-leverage button small { color:var(--muted); font-size:11px; }.trading-simulator-leverage button i { position:absolute; right:0; bottom:0; left:0; width:var(--sim-return); height:3px; background:linear-gradient(90deg,#6d4aff,#69efba); } .trading-sim-trades,.trading-backtest-ledger,.trading-server-ledger { display:grid; gap:7px; margin-top:14px; }.trading-sim-trades article { display:grid; grid-template-columns:minmax(115px,.55fr) minmax(190px,1fr) minmax(135px,.65fr) minmax(135px,.65fr); align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--line); border-left:4px solid var(--green); border-radius:15px; background:var(--surface-soft); }.trading-sim-trades article.negative { border-left-color:var(--red); }.trading-sim-trades article > div { display:grid; gap:3px; min-width:0; }.trading-sim-trades article span { color:var(--muted); font-size:11px; text-transform:uppercase; }.trading-sim-trades article strong { overflow:hidden; color:var(--ink); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.trading-sim-trades article small { color:var(--muted); font-size:11px; }.trading-sim-action > span { width:max-content; padding:4px 7px; border-radius:7px; background:var(--green-soft); color:var(--green)!important; font-weight:950; } .trading-server-status { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:21px 23px; border-color:color-mix(in srgb,var(--amber) 35%,var(--line)); background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--amber-soft) 42%,transparent),transparent 42%),var(--card); }.trading-server-status.is-on { border-color:color-mix(in srgb,var(--green) 35%,var(--line)); background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--green-soft) 55%,transparent),transparent 42%),var(--card); }.trading-server-status > div:first-child { position:relative; display:grid; gap:3px; padding-left:20px; }.trading-server-status > div:first-child > i { position:absolute; top:4px; left:0; width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 6px color-mix(in srgb,var(--amber) 12%,transparent); }.trading-server-status.is-on > div:first-child > i { background:var(--green); box-shadow:0 0 0 6px color-mix(in srgb,var(--green) 12%,transparent); }.trading-server-status span { color:var(--muted); font-size:11px; font-weight:950; letter-spacing:.1em; }.trading-server-status strong { color:var(--ink); font-size:15px; }.trading-server-status small { color:var(--muted); font-size:11px; } .trading-server-counts { display:flex; gap:8px; }.trading-server-counts b { display:grid; min-width:82px; gap:3px; padding:10px 12px; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); color:var(--ink); font-size:16px; text-align:center; }.trading-server-counts b small { color:var(--muted); font-size:11px; font-weight:650; } .trading-server-ledger article,.trading-backtest-ledger article { display:grid; grid-template-columns:70px minmax(0,1fr) minmax(150px,.5fr) 85px; align-items:center; gap:11px; padding:12px 13px; border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:14px; background:var(--surface-soft); }.trading-server-ledger article.open,.trading-server-ledger article.positive,.trading-backtest-ledger article.positive { border-left-color:var(--green); }.trading-server-ledger article.negative,.trading-backtest-ledger article.negative { border-left-color:var(--red); }.trading-server-ledger article.pending { border-left-color:var(--amber); }.trading-server-ledger > article > span,.trading-history-action { width:max-content; padding:5px 8px; border-radius:8px; background:var(--card); color:var(--ink); font-size:11px; font-weight:950; }.trading-server-ledger article > div,.trading-backtest-ledger article > div { display:grid; gap:3px; min-width:0; }.trading-server-ledger strong,.trading-backtest-ledger strong { overflow:hidden; color:var(--ink); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }.trading-server-ledger small,.trading-backtest-ledger small { color:var(--muted); font-size:11px; }.trading-server-ledger article > b,.trading-backtest-ledger article > b { font-size:11px; text-align:right; } @keyframes trading-live-pulse { 50% { opacity:.45; transform:scale(.75); } } @keyframes trading-orbit { to { transform:rotate(360deg); } } @media (max-width:1100px) { .trading-lab-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }.trading-lab-controls > .primary-button { grid-column:span 2; } .trading-risk-grid,.trading-component-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .trading-detail-grid { grid-template-columns:1fr; } .trading-simulator-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }.trading-capital-presets { grid-column:1/-1; }.trading-simulator-controls > .primary-button { min-height:45px; } } @media (max-width:720px) { .analyst-consensus-hero { grid-template-columns:1fr; gap:12px; }.analyst-target-scale { min-height:102px; }.analyst-grid-expanded,.analyst-recommendation-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }.analyst-change-list header,.analyst-change-list > div { grid-template-columns:1fr auto; }.analyst-change-list > div small { grid-column:1/-1; } .trading-lab-hero { grid-template-columns:1fr; min-height:330px; padding:58px 22px 24px; }.trading-lab-live { top:20px; left:22px; }.trading-lab-hero aside { grid-template-columns:auto auto 1fr; align-items:center; gap:8px; min-width:0; margin-top:20px; }.trading-lab-hero aside small { margin:0; text-align:right; } .trading-signal-hero { grid-template-columns:auto minmax(0,1fr); padding:20px; }.trading-signal-actions { grid-column:1/-1; justify-items:stretch; }.trading-signal-actions small { max-width:none; text-align:center; } .trading-signal-orbit { width:78px; height:78px; }.trading-signal-orbit b { font-size:25px; } .trading-backtest-chart,.trading-results-table,.trading-leverage-matrix,.trading-detail-grid > .admin-surface,.trading-paper-ledger,.trading-live-plan { padding:15px; } .trading-live-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .trading-backtest-chart .full-chart-wrap { overflow-x:auto; }.trading-backtest-chart .chart-svg { min-width:760px; } .trading-results-table .table-wrap { overflow-x:auto; }.trading-results-table table { min-width:720px; } .trading-simulator-hero { grid-template-columns:1fr; padding:22px; }.trading-simulator-hero aside { min-width:0; }.trading-simulator-kpis,.trading-simulator-leverage > div:last-child { grid-template-columns:repeat(2,minmax(0,1fr)); } .trading-sim-trades article { grid-template-columns:repeat(2,minmax(0,1fr)); }.trading-server-status { align-items:flex-start; flex-direction:column; }.trading-server-counts { width:100%; }.trading-server-counts b { flex:1; min-width:0; }.trading-server-ledger article,.trading-backtest-ledger article { grid-template-columns:62px minmax(0,1fr) 70px; }.trading-server-ledger article > div:nth-of-type(2),.trading-backtest-ledger article > div:nth-of-type(2) { grid-column:2/-1; }.trading-server-ledger article > b,.trading-backtest-ledger article > b { grid-column:3; grid-row:1; } } @media (max-width:500px) { .trading-lab-controls { grid-template-columns:1fr; }.trading-lab-controls > .primary-button { grid-column:auto; }.trading-quick-tickers { grid-column:auto; } .trading-risk-grid,.trading-component-grid { grid-template-columns:1fr 1fr; }.trading-risk-grid strong { font-size:14px; } .trading-signal-hero { grid-template-columns:1fr; text-align:center; }.trading-signal-orbit { margin:auto; }.trading-signal-copy > div { justify-content:center; } .trading-factor-list > div { grid-template-columns:minmax(0,1fr) auto; }.trading-factor-list > div > b { grid-column:2; } .trading-paper-list article { grid-template-columns:42px minmax(0,1fr); }.trading-paper-list article > b { grid-column:2; } .trading-panel-nav { grid-template-columns:1fr; }.trading-panel-nav button { justify-content:flex-start; min-height:48px; }.trading-simulator-controls { grid-template-columns:1fr; }.trading-capital-presets { grid-column:auto; }.trading-simulator-kpis { grid-template-columns:1fr 1fr; }.trading-simulator-kpis strong { font-size:16px; }.trading-simulator-leverage > div:last-child { grid-template-columns:1fr 1fr; }.trading-sim-trades article { grid-template-columns:1fr; }.trading-server-counts { gap:5px; }.trading-server-counts b { padding:8px 5px; }.trading-server-ledger article,.trading-backtest-ledger article { grid-template-columns:54px minmax(0,1fr); }.trading-server-ledger article > b,.trading-backtest-ledger article > b { grid-column:2; grid-row:auto; text-align:left; }.trading-server-ledger article > div:nth-of-type(2),.trading-backtest-ledger article > div:nth-of-type(2) { grid-column:2; } } @media (prefers-reduced-motion:reduce) { .trading-lab-live i,.trading-signal-orbit::before { animation:none!important; } } @keyframes evra-spin { to { transform: rotate(360deg); } } .xtb-before-after { margin: 18px 0; padding: clamp(18px, 2.4vw, 28px); border: 1px solid color-mix(in srgb, var(--accent, #15735c) 22%, var(--border)); border-radius: 24px; background: radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--accent, #15735c) 12%, transparent), transparent 34%), color-mix(in srgb, var(--panel, #fff) 96%, var(--accent, #15735c)); box-shadow: 0 18px 50px rgba(11, 35, 28, .08); } .xtb-before-after-head h3 { margin: 5px 0 6px; font-size: clamp(20px, 2vw, 28px); } .xtb-before-after-head p { margin: 0; color: var(--muted); } .xtb-impact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } .xtb-impact-grid article { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--panel, #fff) 94%, transparent); } .xtb-impact-grid span, .xtb-impact-grid small { display: block; color: var(--muted); font-size: 11px; } .xtb-impact-grid strong { display: block; margin: 6px 0 3px; font-size: 16px; letter-spacing: -.02em; } .xtb-impact-grid strong i { color: var(--accent, #15735c); font-style: normal; padding: 0 4px; } .xtb-impact-positions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .xtb-impact-row { display: grid; grid-template-columns: 70px 1fr; gap: 3px 10px; padding: 11px 13px; border-radius: 14px; background: color-mix(in srgb, var(--accent, #15735c) 7%, var(--panel, #fff)); } .xtb-impact-row small { grid-column: 2; color: var(--muted); } .xtb-import-history-panel { margin-top: 16px; } .xtb-import-history-list { display: grid; gap: 8px; padding: 0 20px 20px; } .xtb-import-history-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(150px, .8fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 17px; background: color-mix(in srgb, var(--panel, #fff) 96%, var(--accent, #15735c)); } .xtb-import-history-row strong, .xtb-import-history-row small { display: block; } .xtb-import-history-row small { color: var(--muted); margin-top: 3px; } .xtb-duplicate-modal { width: min(980px, calc(100vw - 28px)); max-height: min(92vh, 900px); overflow: auto; } .xtb-duplicate-list { display: grid; gap: 8px; margin: 14px 0; } .xtb-duplicate-group { display: flex; justify-content: space-between; gap: 18px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); } .xtb-duplicate-group span small { display: block; color: var(--muted); margin-top: 3px; } .xtb-duplicate-group em { align-self: center; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 800; text-transform: uppercase; } .xtb-duplicate-group.safe em { background: rgba(21, 139, 104, .12); color: #107054; } .xtb-duplicate-group.conflict em { background: rgba(208, 91, 70, .12); color: #b54432; } .comparison-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); align-items: center; gap: 24px; padding: clamp(22px, 3vw, 38px); overflow: hidden; position: relative; } .comparison-hero::after { content: ""; position: absolute; width: 260px; height: 260px; right: -120px; top: -130px; border-radius: 50%; background: color-mix(in srgb, var(--accent, #15735c) 17%, transparent); filter: blur(3px); pointer-events: none; } .comparison-hero h2 { margin: 7px 0 8px; font-size: clamp(28px, 4vw, 52px); line-height: 1; letter-spacing: -.045em; } .comparison-hero p { color: var(--muted); max-width: 720px; } .comparison-builder { display: flex; gap: 8px; position: relative; z-index: 1; } .comparison-builder select { min-width: 0; flex: 1; } .comparison-capacity { display: flex; align-items: center; gap: 9px; margin-top: 18px; } .comparison-capacity b { display: grid; place-items: center; min-width: 52px; height: 34px; padding: 0 10px; border-radius: 999px; background: var(--accent, #15735c); color: #fff; font-size: 13px; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent, #15735c) 25%, transparent); } .comparison-capacity span { color: var(--muted); font-size: 12px; font-weight: 700; } .comparison-capacity button { margin-left: auto; border: 0; background: transparent; color: var(--accent, #15735c); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; } .comparison-builder-v2 { position: relative; z-index: 2; min-width: 0; padding: 16px; border: 1px solid color-mix(in srgb, var(--accent, #15735c) 18%, var(--border)); border-radius: 22px; background: color-mix(in srgb, var(--panel, #fff) 92%, var(--accent, #15735c)); box-shadow: 0 18px 48px rgba(12, 45, 36, .09); } .comparison-builder-v2 > label > span { display: block; margin: 0 0 8px 3px; color: var(--muted); font-size: 12px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .comparison-search-input { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 48px; padding: 0 13px; border: 1px solid color-mix(in srgb, var(--accent, #15735c) 24%, var(--border)); border-radius: 15px; background: var(--panel, #fff); transition: border-color .18s ease, box-shadow .18s ease; } .comparison-search-input:focus-within { border-color: var(--accent, #15735c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #15735c) 11%, transparent); } .comparison-search-input i { color: var(--accent, #15735c); font-size: 22px; font-style: normal; line-height: 1; } .comparison-search-input input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 700; } .comparison-search-input input::placeholder { color: var(--muted); font-weight: 550; } .comparison-search-input kbd { padding: 3px 7px; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb, var(--panel, #fff) 86%, var(--bg)); color: var(--muted); font: 700 10px/1.2 inherit; } .comparison-search-results { display: grid; gap: 5px; max-height: 205px; margin-top: 9px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent, #15735c) 38%, transparent) transparent; } .comparison-search-results > button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 51px; padding: 7px 9px; border: 0; border-radius: 13px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .16s ease, transform .16s ease; } .comparison-search-results > button:hover, .comparison-search-results > button:focus-visible { background: color-mix(in srgb, var(--accent, #15735c) 10%, var(--panel, #fff)); transform: translateX(2px); outline: none; } .comparison-search-results .ticker-mark, .comparison-search-results .ticker-logo, .comparison-index-mark { width: 36px; height: 36px; min-width: 36px; border-radius: 12px; } .comparison-index-mark { display: grid; place-items: center; background: linear-gradient(145deg, var(--accent, #15735c), color-mix(in srgb, var(--accent, #15735c) 60%, #0c2620)); color: #fff; font-size: 11.5px; font-weight: 900; letter-spacing: -.02em; } .comparison-search-results > button > span { min-width: 0; } .comparison-search-results strong, .comparison-search-results small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comparison-search-results strong { font-size: 12px; } .comparison-search-results small { margin-top: 2px; color: var(--muted); font-size: 11.5px; } .comparison-search-results > button > b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: color-mix(in srgb, var(--accent, #15735c) 11%, var(--panel, #fff)); color: var(--accent, #15735c); font-size: 17px; } .comparison-search-empty { padding: 15px 10px 5px; text-align: center; } .comparison-search-empty strong, .comparison-search-empty small { display: block; } .comparison-search-empty small { margin-top: 4px; color: var(--muted); } .comparison-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-top: 12px; } .comparison-presets > button { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 68px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 17px; background: var(--panel, #fff); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .comparison-presets > button:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent, #15735c) 35%, var(--border)); box-shadow: 0 10px 28px rgba(12, 45, 36, .08); } .comparison-presets > button.active { border-color: color-mix(in srgb, var(--accent, #15735c) 58%, var(--border)); background: color-mix(in srgb, var(--accent, #15735c) 8%, var(--panel, #fff)); } .comparison-presets i { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 11px; background: color-mix(in srgb, var(--accent, #15735c) 10%, var(--panel, #fff)); color: var(--accent, #15735c); font-style: normal; font-weight: 900; } .comparison-presets span { min-width: 0; } .comparison-presets strong, .comparison-presets small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comparison-presets strong { font-size: 11px; } .comparison-presets small { margin-top: 3px; color: var(--muted); font-size: 11.5px; } .comparison-main-panel { margin-top: 16px; overflow: hidden; } .comparison-controls { display: grid; gap: 12px; padding: 0 22px 16px; } .comparison-controls .range-switch { display: flex; flex-wrap: wrap; gap: 6px; } .comparison-controls .range-switch button { min-height: 34px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--panel, #fff) 95%, var(--accent, #15735c)); color: var(--muted); font: inherit; font-size: 11px; font-weight: 780; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; } .comparison-controls .range-switch button:hover { transform: translateY(-1px); color: var(--text); } .comparison-controls .range-switch button.active { border-color: var(--accent, #15735c); background: var(--accent, #15735c); color: #fff; box-shadow: 0 7px 18px color-mix(in srgb, var(--accent, #15735c) 22%, transparent); } .comparison-selected { display: flex; gap: 8px; flex-wrap: wrap; } .comparison-selected button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--series) 32%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--series) 7%, var(--panel, #fff)); color: var(--text); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; } .comparison-selected button i { width: 8px; height: 8px; border-radius: 50%; background: var(--series); box-shadow: 0 0 0 4px color-mix(in srgb, var(--series) 14%, transparent); } .comparison-selected button span { color: var(--muted); font-size: 16px; } .comparison-chart-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: color-mix(in srgb, var(--accent, #15735c) 48%, transparent) transparent; } .comparison-chart-stage { position: relative; min-width: 820px; padding: 6px 10px 0; } .comparison-chart-stage svg { width: 100%; min-height: 0; display: block; } .evra-chart-watermark { position: absolute; right: 34px; bottom: 34px; color: color-mix(in srgb, var(--text) 32%, transparent); font-size: 12px; font-weight: 800; letter-spacing: .08em; pointer-events: none; } .comparison-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 24px 22px; border-top: 1px solid var(--border); } .comparison-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; } .comparison-legend i { width: 8px; height: 8px; border-radius: 50%; } .comparison-legend em { font-style: normal; font-weight: 850; } .comparison-highlight-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--border); box-shadow: var(--shadow-sm, 0 10px 30px rgba(12,45,36,.06)); } .comparison-highlight-strip article { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; min-width: 0; padding: 17px 19px; background: var(--panel, #fff); } .comparison-highlight-strip span { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .comparison-highlight-strip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .comparison-highlight-strip small { font-size: 12px; font-weight: 850; text-align: right; } .comparison-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; } .comparison-metric-card { padding: 20px; border-top: 3px solid var(--series); } .comparison-metric-card > div:first-child { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .comparison-metric-card > div:first-child i { width: 9px; height: 9px; border-radius: 50%; background: var(--series); } .comparison-metric-card h3 { min-height: 44px; margin: 12px 0 4px; font-size: 18px; } .comparison-metric-card > strong { display: block; margin-bottom: 15px; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.04em; } .comparison-metric-card dl { margin: 0; display: grid; gap: 8px; } .comparison-metric-card dl div { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--border); } .comparison-metric-card dt { color: var(--muted); } .comparison-metric-card dd { margin: 0; font-weight: 800; } .comparison-reading-panel { margin-top: 14px; padding-bottom: 22px; } .comparison-reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 22px; } .comparison-reading-grid article { padding: 16px; border-radius: 17px; background: color-mix(in srgb, var(--accent, #15735c) 7%, var(--panel, #fff)); } .comparison-reading-grid p { color: var(--muted); margin: 7px 0 0; line-height: 1.55; } .social-chart-tab { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; min-width: 112px; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--accent, #15735c) 26%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--accent, #15735c) 7%, var(--panel, #fff)); color: var(--text); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; } .social-chart-tab:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(13, 48, 38, .12); } .social-chart-tab > span { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: var(--accent, #15735c); color: white; font-weight: 900; } .social-chart-tab b { text-align: left; font-size: 12px; } .social-chart-tab small { text-align: left; color: var(--muted); font-size: 11.5px; } .social-studio-modal { width: min(1100px, calc(100vw - 24px)); max-height: 94vh; overflow: auto; background: #f4f6f4; } .social-aspect-switch { display: flex; justify-content: center; gap: 6px; margin: 6px 0 14px; } .social-aspect-switch button { padding: 8px 12px; border: 1px solid #d9e0dc; border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; } .social-aspect-switch button.active { background: #112c24; color: #fff; border-color: #112c24; } .social-canvas { --social-pad: clamp(18px, 3vw, 38px); position: relative; margin: 0 auto; overflow: hidden; border-radius: 28px; padding: var(--social-pad); background: radial-gradient(circle at 85% 0%, #2a7f66 0, #123b31 27%, #071f19 68%); color: #fff; box-shadow: 0 28px 80px rgba(5, 25, 19, .24); } .social-canvas.wide { width: min(100%, 960px); aspect-ratio: 16 / 9; } .social-canvas.square { width: min(100%, 720px); aspect-ratio: 1; } .social-canvas.portrait { width: min(100%, 620px); aspect-ratio: 4 / 5; } .social-canvas-top, .social-canvas-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; } .social-canvas-top span { color: #7ee6be; font-size: 11px; font-weight: 850; letter-spacing: .12em; } .social-canvas-top h3 { margin: 7px 0 0; max-width: 680px; color: #fff; font-size: clamp(20px, 3vw, 38px); line-height: 1.03; } .social-canvas-top > b { color: #fff; font-size: 13px; letter-spacing: .08em; } .social-chart-clone { position: absolute; z-index: 1; inset: 25% var(--social-pad) 13%; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.96); } .social-chart-clone > *, .social-chart-clone svg { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; } .social-chart-clone .social-chart-tab, .social-chart-clone .evra-chart-watermark { display: none !important; } .social-canvas-foot { position: absolute; left: var(--social-pad); right: var(--social-pad); bottom: 18px; color: rgba(255,255,255,.72); font-size: 12px; } .social-canvas-foot strong { color: rgba(255,255,255,.9); } .chart-loading-premium { min-height: 410px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); } .chart-loading-premium i { width: 42px; height: 42px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent, #15735c) 16%, transparent); border-top-color: var(--accent, #15735c); animation: evra-spin .9s linear infinite; } .chart-loading-premium strong { color: var(--text); font-size: 18px; } @media (max-width: 820px) { .comparison-hero { grid-template-columns: 1fr; } .comparison-builder { width: 100%; } .comparison-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } .comparison-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .comparison-reading-grid { grid-template-columns: 1fr; } .xtb-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xtb-import-history-row { grid-template-columns: 1fr auto; } .xtb-import-history-row > span { grid-column: 1; } .xtb-import-history-row > button { grid-column: 2; grid-row: 1 / 3; } } @media (max-width: 560px) { body.app-mode .content, body.app-mode .main-area, body.app-mode .panel { min-width: 0; max-width: 100%; } .comparison-hero { padding: 21px 17px; border-radius: 22px; } .comparison-hero h2 { font-size: 34px; } .comparison-builder { display: grid; grid-template-columns: 1fr auto; } .comparison-builder-v2 { padding: 12px; border-radius: 18px; } .comparison-search-results { max-height: 214px; } .comparison-presets { display: flex; margin-inline: -2px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } .comparison-presets::-webkit-scrollbar { display: none; } .comparison-presets > button { min-width: 158px; scroll-snap-align: start; } .comparison-highlight-strip { grid-template-columns: 1fr; } .comparison-highlight-strip article { min-height: 70px; } .comparison-main-panel .panel-header { align-items: flex-start; } .social-chart-tab { min-width: 44px; width: 44px; padding: 7px; grid-template-columns: 1fr; } .social-chart-tab > span { grid-row: auto; margin: auto; } .social-chart-tab b, .social-chart-tab small { display: none; } .comparison-controls { padding-inline: 14px; } .comparison-chart-stage { min-width: 690px; } .comparison-chart-stage svg { min-height: 0; } .comparison-metric-grid { grid-template-columns: 1fr; } .comparison-metric-card { padding: 17px; } .comparison-reading-panel { padding-inline: 0; } .comparison-reading-grid { padding-inline: 14px; } .xtb-impact-grid, .xtb-impact-positions { grid-template-columns: 1fr; } .xtb-impact-row { grid-template-columns: 64px 1fr; } .xtb-import-history-list { padding-inline: 12px; } .xtb-import-history-row { grid-template-columns: 1fr; } .xtb-import-history-row > button, .xtb-import-history-row > span { grid-column: 1; grid-row: auto; } .xtb-reconciliation-table { overflow-x: auto; } .xtb-reconciliation-head, .xtb-reconciliation-row { min-width: 780px; } .xtb-duplicate-group { align-items: flex-start; flex-direction: column; gap: 8px; } .social-studio-modal { padding-inline: 12px; border-radius: 22px; } .social-canvas { --social-pad: 16px; border-radius: 20px; } .social-canvas.wide, .social-canvas.square, .social-canvas.portrait { width: 100%; aspect-ratio: 4 / 5; } .social-canvas-top { display: block; } .social-canvas-top > b { display: block; margin-top: 6px; } .social-chart-clone { inset: 27% 12px 13%; } .social-canvas-foot { left: 16px; right: 16px; } .social-canvas-foot strong { display: none; } } @media (prefers-reduced-motion: reduce) { .chart-loading-premium i { animation: none; } .social-chart-tab { transition: none; } } .portfolio-share-launch { display:inline-flex; align-items:center; justify-content:center; gap:8px; } .portfolio-share-launch > span { display:grid; place-items:center; width:24px; height:24px; border-radius:8px; background:rgba(255,255,255,.16); } .social-studio-backdrop { padding:12px; background:rgba(4,12,9,.76); backdrop-filter:blur(18px) saturate(1.1); } .social-studio-modal.social-studio-v2 { width:min(1420px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent,#15735c) 18%,var(--border)); border-radius:30px; background:color-mix(in srgb,var(--panel,#fff) 96%,var(--accent,#15735c)); color:var(--text); box-shadow:0 36px 120px rgba(2,18,13,.38); } .social-studio-v2 > .modal-header { padding:22px 24px 18px; border-bottom:1px solid var(--border); background:linear-gradient(120deg,color-mix(in srgb,var(--accent,#15735c) 8%,var(--panel,#fff)),var(--panel,#fff)); } .social-studio-v2 > .modal-header h2 { margin:5px 0 2px; font-size:clamp(24px,3vw,38px); letter-spacing:-.04em; } .social-studio-v2 > .modal-header p { margin:0; color:var(--muted); font-size:12px; } .social-studio-layout { display:grid; grid-template-columns:285px minmax(0,1fr); min-height:0; height:min(690px,calc(100dvh - 190px)); } .social-studio-controls { padding:18px; overflow:auto; border-right:1px solid var(--border); background:color-mix(in srgb,var(--accent,#15735c) 3%,var(--panel,#fff)); scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--accent,#15735c) 55%,transparent) transparent; } .social-studio-controls > section + section { margin-top:20px; } .social-studio-controls > section > span { display:block; margin:0 0 9px; color:var(--muted); font-size:11.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; } .social-control-grid { display:grid; gap:7px; } .social-control-grid > button { display:grid; gap:2px; width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:14px; background:var(--panel,#fff); color:var(--text); text-align:left; cursor:pointer; transition:border-color .2s,transform .2s,box-shadow .2s,background .2s; } .social-control-grid > button:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent,#15735c) 42%,var(--border)); box-shadow:0 9px 24px rgba(8,38,29,.08); } .social-control-grid > button.active { border-color:var(--accent,#15735c); background:color-mix(in srgb,var(--accent,#15735c) 8%,var(--panel,#fff)); box-shadow:inset 3px 0 0 var(--accent,#15735c); } .social-control-grid b { font-size:12px; } .social-control-grid small { color:var(--muted); font-size:11.5px; line-height:1.35; } .social-theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .social-theme-grid button { display:grid; place-items:center; gap:5px; padding:9px 3px; border:1px solid var(--border); border-radius:13px; background:var(--panel,#fff); color:var(--muted); font:inherit; font-size:11.5px; font-weight:800; cursor:pointer; } .social-theme-grid button i { width:20px; height:20px; border-radius:50%; background:var(--theme-dot); box-shadow:0 0 0 5px color-mix(in srgb,var(--theme-dot) 16%,transparent); } .social-theme-grid button.active { border-color:var(--theme-dot); color:var(--text); transform:translateY(-1px); } .social-privacy-note { margin:8px 2px 0; color:var(--muted); font-size:11.5px; line-height:1.5; } .social-ready-card { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid color-mix(in srgb,#59d39f 28%,var(--border)); border-radius:15px; background:color-mix(in srgb,#59d39f 7%,var(--panel,#fff)); } .social-ready-card > i { width:11px; height:11px; flex:0 0 auto; border:2px solid rgba(25,121,88,.2); border-top-color:#35b27f; border-radius:50%; animation:evra-spin .9s linear infinite; } .social-ready-card b,.social-ready-card small { display:block; } .social-ready-card b { font-size:11px; } .social-ready-card small { margin-top:2px; color:var(--muted); font-size:11px; } .social-studio-stage { display:grid; place-items:center; align-content:center; min-width:0; padding:24px; overflow:auto; background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--accent,#15735c) 9%,transparent),transparent 55%),color-mix(in srgb,var(--bg,#f4f7f5) 75%,var(--panel,#fff)); } .social-canvas.social-share-v2 { --social-pad:clamp(17px,3vw,38px); isolation:isolate; position:relative; flex:0 0 auto; margin:auto; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:28px; padding:var(--social-pad); color:#fff; box-shadow:0 30px 80px rgba(4,24,18,.3); transform:translateZ(0); } .social-canvas.social-share-v2.wide { width:min(100%,980px); aspect-ratio:16/9; } .social-canvas.social-share-v2.portrait { width:min(100%,540px); aspect-ratio:4/5; } .social-canvas.social-share-v2.story { width:min(100%,365px); aspect-ratio:9/16; } .social-share-v2.theme-emerald { background:linear-gradient(145deg,#061711 5%,#0b2c22 58%,#116149); } .social-share-v2.theme-midnight { background:linear-gradient(145deg,#080d1b 5%,#111d37 58%,#243b70); } .social-share-v2.theme-plum { background:linear-gradient(145deg,#160b1c 5%,#2c1738 58%,#643a73); } .social-share-v2 .social-aura { position:absolute; z-index:-1; border-radius:50%; filter:blur(48px); opacity:.48; animation:social-aura-drift 7s ease-in-out infinite alternate; } .social-share-v2 .social-aura-one { width:45%; aspect-ratio:1; right:-18%; top:-25%; background:#67d2a9; } .social-share-v2.theme-midnight .social-aura-one { background:#83a8ff; } .social-share-v2.theme-plum .social-aura-one { background:#e9a9ff; } .social-share-v2 .social-aura-two { width:35%; aspect-ratio:1; left:-18%; bottom:-20%; background:#d6a94f; animation-delay:-2.5s; } .social-share-v2 .social-grid { position:absolute; z-index:-1; inset:0; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:8% 8%; mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 76%,transparent); } .social-share-v2 .social-scan { position:absolute; z-index:5; left:-20%; top:-15%; width:18%; height:135%; opacity:.15; transform:rotate(14deg); background:linear-gradient(90deg,transparent,#fff,transparent); animation:social-scan-pass 5.8s ease-in-out infinite; pointer-events:none; } .social-share-v2 .social-canvas-top { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; } .social-share-v2 .social-canvas-top > div { flex:1 1 auto; min-width:0; } .social-share-v2 .social-canvas-top span { color:#7ee6be; } .social-share-v2.theme-midnight .social-canvas-top span { color:#a9c0ff; } .social-share-v2.theme-plum .social-canvas-top span { color:#f0bfff; } .social-share-v2 .social-canvas-top h3 { margin:6px 0 0; max-width:100%; color:#fff; font-size:clamp(18px,3vw,38px); line-height:1.02; letter-spacing:-.035em; } .social-share-v2 .social-canvas-top small { display:block; margin-top:5px; color:rgba(255,255,255,.58); font-size:11.5px; } .social-share-v2 .social-canvas-top > b { font-size:11px; } .social-share-v2 .social-hero-result { position:absolute; z-index:2; top:19%; left:var(--social-pad); color:#72dfb4; font-size:clamp(34px,7vw,82px); font-weight:950; letter-spacing:-.065em; animation:social-result-pop .75s cubic-bezier(.2,.8,.2,1) both; } .social-share-v2 .social-hero-result.negative { color:#ff8a90; } .social-share-v2 .social-kpi-row { position:absolute; z-index:2; top:34%; left:var(--social-pad); right:var(--social-pad); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .social-share-v2 .social-kpi-row > span { display:grid; gap:2px; min-width:0; padding:10px 12px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(255,255,255,.075); backdrop-filter:blur(9px); animation:social-chip-rise .55s ease-out var(--delay) both; } .social-share-v2 .social-kpi-row small { color:rgba(255,255,255,.52); font-size:11px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; } .social-share-v2 .social-kpi-row b { overflow:hidden; color:#fff; font-size:clamp(11px,1.6vw,18px); text-overflow:ellipsis; white-space:nowrap; } .social-share-v2.kind-portfolio .social-chart-clone { position:absolute; z-index:1; inset:auto var(--social-pad); top:49%; height:27%; border-color:rgba(255,255,255,.13); background:rgba(4,18,14,.28); backdrop-filter:blur(8px); animation:social-chart-rise .8s cubic-bezier(.2,.8,.2,1) .12s both; } .social-share-v2.kind-portfolio .social-pulse-clone svg { color:#69d8aa; } .social-share-v2.kind-portfolio.negative .social-pulse-clone svg,.social-share-v2.kind-portfolio .social-pulse-clone svg.negative { color:#ff8a90; } .social-share-v2 .social-holding-strip { position:absolute; z-index:2; top:79%; left:var(--social-pad); right:var(--social-pad); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; } .social-share-v2 .social-holding-strip > span { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:7px; min-width:0; padding:8px 9px; border-radius:12px; background:rgba(255,255,255,.08); animation:social-chip-rise .55s ease-out var(--delay) both; } .social-share-v2 .social-holding-strip i { grid-row:1/3; width:7px; height:7px; border-radius:50%; background:var(--asset); box-shadow:0 0 12px var(--asset); } .social-share-v2 .social-holding-strip b { font-size:12px; } .social-share-v2 .social-holding-strip small { overflow:hidden; color:rgba(255,255,255,.56); font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .social-share-v2.kind-chart .social-chart-clone { inset:27% var(--social-pad) 13%; border-radius:18px; animation:social-chart-rise .8s cubic-bezier(.2,.8,.2,1) .08s both; } .social-share-v2 .social-data-wait { display:grid; place-content:center; justify-items:center; gap:7px; width:100%; height:100%; padding:24px; color:#17382e; text-align:center; } .social-share-v2 .social-data-wait i { width:28px; height:28px; border:3px solid rgba(20,91,69,.18); border-top-color:#34a47d; border-radius:50%; animation:evra-spin .85s linear infinite; } .social-share-v2 .social-data-wait strong { font-size:clamp(13px,2vw,20px); } .social-share-v2 .social-data-wait small { max-width:330px; color:#6e7f79; font-size:clamp(8px,1.1vw,11px); line-height:1.45; } .social-share-v2.kind-chart .social-proof-row { position:absolute; z-index:3; left:calc(var(--social-pad) + 10px); right:calc(var(--social-pad) + 10px); bottom:8%; display:flex; flex-wrap:wrap; gap:6px; } .social-share-v2.kind-chart .social-proof-row span { display:inline-flex; align-items:center; gap:5px; padding:5px 7px; border-radius:999px; background:rgba(5,29,22,.75); color:rgba(255,255,255,.72); font-size:11px; font-weight:750; } .social-share-v2.kind-chart .social-proof-row i { width:5px; height:5px; border-radius:50%; background:#69d8aa; } .social-share-v2 .social-canvas-foot { left:var(--social-pad); right:var(--social-pad); bottom:2.3%; font-size:11px; } .social-stage-caption { display:flex; justify-content:space-between; align-items:center; gap:14px; width:min(100%,980px); margin-top:13px; color:var(--muted); font-size:11.5px; } .social-stage-caption span { display:inline-flex; align-items:center; gap:6px; color:var(--text); font-weight:850; } .social-stage-caption i { width:7px; height:7px; border-radius:50%; background:#52cd98; box-shadow:0 0 0 4px rgba(82,205,152,.12); } .social-studio-footer { display:flex; justify-content:flex-end; align-items:center; gap:9px; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--panel,#fff); } .social-share-main { display:grid!important; grid-template-columns:auto auto; grid-template-rows:auto auto; align-items:center; column-gap:9px; min-width:260px; text-align:left; } .social-share-main > span { grid-row:1/3; display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:rgba(255,255,255,.16); font-size:18px; } .social-share-main b { font-size:12px; } .social-share-main small { color:rgba(255,255,255,.68); font-size:11px; } .social-share-main.loading { opacity:.72; pointer-events:none; } .social-share-main.loading > span { animation:evra-spin .8s linear infinite; } .social-share-main:disabled { opacity:.48; cursor:wait; } .social-save-image { display:inline-flex; align-items:center; justify-content:center; gap:7px; } .social-save-image.loading { opacity:.65; pointer-events:none; } .social-save-image.loading > span { animation:evra-spin .8s linear infinite; } @keyframes social-aura-drift { to { transform:translate(-8%,10%) scale(1.12); } } @keyframes social-scan-pass { 0%,18% { transform:translateX(-130%) rotate(14deg); } 70%,100% { transform:translateX(760%) rotate(14deg); } } @keyframes social-result-pop { from { opacity:0; transform:translateY(15px) scale(.94); } } @keyframes social-chip-rise { from { opacity:0; transform:translateY(10px); } } @keyframes social-chart-rise { from { opacity:0; transform:translateY(12px) scale(.985); } } @media(max-width:900px){ .social-studio-layout { grid-template-columns:1fr; height:min(760px,calc(100dvh - 190px)); overflow:auto; } .social-studio-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; overflow:visible; border-right:0; border-bottom:1px solid var(--border); } .social-studio-controls > section,.social-studio-controls > section + section { margin:0; } .social-studio-controls .social-ready-card { grid-column:1/-1; } .social-studio-stage { min-height:430px; overflow:visible; } } @media(max-width:580px){ .social-studio-backdrop { padding:0; } .social-studio-modal.social-studio-v2 { width:100vw; max-height:100dvh; height:100dvh; border:0; border-radius:0; } .social-studio-v2 > .modal-header { padding:16px 15px 13px; } .social-studio-v2 > .modal-header h2 { padding-right:40px; font-size:24px; } .social-studio-v2 > .modal-header p { display:none; } .social-studio-layout { height:calc(100dvh - 158px); } .social-studio-controls { display:grid; grid-template-columns:1fr; gap:13px; padding:12px 10px; overflow:visible; } .social-studio-controls > section { min-width:0; } .social-studio-controls .social-ready-card { min-width:0; } .social-control-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .social-control-grid.privacy { grid-template-columns:repeat(2,minmax(0,1fr)); } .social-control-grid > button { min-width:0; padding:9px 8px; } .social-control-grid b,.social-control-grid small { overflow:hidden; text-overflow:ellipsis; } .social-studio-stage { display:block; min-height:0; padding:15px 10px 18px; overflow:auto; } .social-canvas.social-share-v2.wide { width:100%; aspect-ratio:16/9; } .social-canvas.social-share-v2.portrait { width:min(100%,420px); aspect-ratio:4/5; } .social-canvas.social-share-v2.story { width:min(80%,320px); aspect-ratio:9/16; } .social-share-v2 { --social-pad:14px!important; border-radius:19px!important; } .social-share-v2 .social-canvas-top { display:flex; } .social-share-v2 .social-canvas-top h3 { max-width:82%; font-size:clamp(15px,5vw,23px); } .social-share-v2 .social-canvas-top > b { display:block; margin:0; font-size:11px; } .social-share-v2 .social-hero-result { font-size:clamp(27px,10vw,52px); } .social-share-v2 .social-kpi-row > span { padding:7px 8px; border-radius:9px; } .social-share-v2 .social-kpi-row small { font-size:11px; } .social-share-v2 .social-kpi-row b { font-size:11.5px; } .social-share-v2 .social-holding-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } .social-share-v2.wide .social-holding-strip > span:nth-child(n+3) { display:none; } .social-share-v2 .social-holding-strip > span { padding:4px 6px; } .social-stage-caption { padding-inline:5px; } .social-stage-caption small { display:none; } .social-studio-footer { position:sticky; bottom:0; padding:9px 10px calc(9px + env(safe-area-inset-bottom)); } .social-studio-footer .secondary-button { min-width:45px; font-size:0; } .social-studio-footer .secondary-button::after { content:"Opis"; font-size:11px; } .social-share-main { min-width:0; width:100%; } } :root[data-motion="off"] .social-share-v2 *, :root[data-motion="off"] .social-share-v2 *::before, :root[data-motion="off"] .social-share-v2 *::after, :root[data-motion="off"] .social-ready-card > i { animation:none!important; } @media(prefers-reduced-motion:reduce){ :root:not([data-motion="on"]) .social-share-v2 *, :root:not([data-motion="on"]) .social-share-v2 *::before, :root:not([data-motion="on"]) .social-share-v2 *::after, :root:not([data-motion="on"]) .social-ready-card > i { animation:none!important; } } svg[data-chart-cursor] { touch-action:pan-y; -webkit-user-select:none; user-select:none; } .chart-range-label { gap:5px; min-width:132px; padding:7px 11px; border-color:color-mix(in srgb,var(--accent,#15735c) 46%,var(--border)); border-radius:13px; background:color-mix(in srgb,var(--panel,#fff) 94%,var(--accent,#15735c)); box-shadow:0 12px 30px rgba(6,31,23,.18); } .chart-range-label > span { display:flex; align-items:center; justify-content:center; gap:8px; } .chart-range-label em { color:var(--muted); font-size:11px; font-style:normal; font-weight:750; } .chart-range-label.up { border-color:color-mix(in srgb,#1f8a6b 55%,var(--border)); } .chart-range-label.down { border-color:color-mix(in srgb,#bd5558 55%,var(--border)); } .share-spark-start circle { fill:var(--panel,#fff); stroke:currentColor; stroke-width:3; } .share-spark-start text,.share-spark-end-label { fill:currentColor; font-size:11px; font-weight:900; letter-spacing:.06em; } .xtb-dividend-sync-note { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; margin:0 0 14px; padding:13px 14px; border:1px solid color-mix(in srgb,#1d7b5e 28%,var(--border)); border-radius:17px; background:linear-gradient(120deg,color-mix(in srgb,#1d7b5e 9%,var(--panel,#fff)),var(--panel,#fff)); } .xtb-dividend-sync-note > span { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:#0b3126; color:#78dfb7; font-size:12px; font-weight:950; letter-spacing:.08em; } .xtb-dividend-sync-note strong,.xtb-dividend-sync-note small { display:block; } .xtb-dividend-sync-note strong { font-size:12px; } .xtb-dividend-sync-note small { margin-top:3px; color:var(--muted); font-size:11.5px; line-height:1.45; } .social-canvas.social-share-v2.square { width:min(100%,620px); aspect-ratio:1; } .social-range-ribbon { position:absolute; z-index:4; top:45%; left:var(--social-pad); right:var(--social-pad); display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:9px; min-height:28px; padding:6px 10px; border:1px solid rgba(255,255,255,.13); border-radius:11px; background:rgba(3,18,13,.67); box-shadow:0 9px 25px rgba(0,0,0,.18); backdrop-filter:blur(10px); } .social-range-ribbon span { color:rgba(255,255,255,.62)!important; font-size:11px; font-weight:900; letter-spacing:.06em; } .social-range-ribbon b { color:#7ce0b7; font-size:12px; } .social-range-ribbon b.down { color:#ff8a90; } .social-range-ribbon small { color:rgba(255,255,255,.48); font-size:11px; } .social-range-ribbon.chart-range { top:19%; right:auto; width:min(58%,460px); } .social-share-v2.kind-portfolio .social-range-ribbon + .social-chart-clone { top:51%; height:25%; } .social-share-v2 .social-holding-strip > span em { grid-column:2; overflow:hidden; color:rgba(255,255,255,.4); font-size:11px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; } .social-share-v2.kind-chart:has(.social-range-ribbon) .social-chart-clone { top:31%; } @media(max-width:760px){ .company-chart-grid > .panel { overflow:hidden; } .company-chart-grid .panel-header { align-items:stretch; flex-direction:column; gap:10px; } .company-chart-grid .panel-title { min-width:0; } .company-chart-grid .chart-controls { width:100%; min-width:0; } .company-chart-grid .range-tabs,.company-chart-grid .view-tabs,.company-chart-grid .interval-tabs { width:100%; max-width:none; scroll-snap-type:x proximity; scrollbar-width:none; } .company-chart-grid .range-tabs::-webkit-scrollbar,.company-chart-grid .view-tabs::-webkit-scrollbar,.company-chart-grid .interval-tabs::-webkit-scrollbar { display:none; } .company-chart-grid .range-tabs button,.company-chart-grid .view-tabs button,.company-chart-grid .interval-tabs button { flex:0 0 auto; scroll-snap-align:start; } .company-chart-grid .full-chart-wrap { margin-inline:-4px; padding:5px 1px 10px; overflow:hidden; border-radius:15px; } .company-chart-grid .full-chart-svg { width:100%; height:255px; min-width:0; } .company-chart-grid .chart-y-label { font-size:11px; } .company-chart-grid .chart-x-label { font-size:11px; } .chart-range-label { top:auto; right:8px; bottom:5px; left:8px!important; width:auto; min-width:0; transform:none; flex-direction:row; justify-content:space-between; padding:7px 10px; } .chart-range-label > span { justify-content:flex-start; } .chart-range-label em { overflow:hidden; text-align:right; text-overflow:ellipsis; white-space:nowrap; } .chart-cursor-tip { max-width:calc(100vw - 24px); } .xtb-dividend-sync-note { grid-template-columns:auto minmax(0,1fr); } .xtb-dividend-sync-note button { grid-column:1/-1; width:100%; } } @media(max-width:580px){ .social-studio-v2 > .modal-header { position:relative; z-index:5; } .social-studio-v2 > .modal-header h2 { font-size:21px; } .social-studio-layout { display:flex; flex-direction:column; height:calc(100dvh - 154px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; } .social-studio-stage { order:1; flex:0 0 auto; min-height:285px; padding:12px 10px 8px; overflow:visible; } .social-studio-controls { order:2; grid-template-columns:1fr 1fr; padding:12px 10px 22px; border-top:1px solid var(--border); border-bottom:0; } .social-studio-controls > section:first-child,.social-studio-controls .social-ready-card,.social-studio-controls > section:has(.privacy) { grid-column:1/-1; } .social-control-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .social-control-grid > button { min-height:53px; } .social-theme-grid { height:100%; } .social-studio-stage .social-canvas.social-share-v2.wide { width:100%; } .social-studio-stage .social-canvas.social-share-v2.square { width:min(86vw,360px); aspect-ratio:1; } .social-studio-stage .social-canvas.social-share-v2.portrait { width:min(74vw,320px); } .social-studio-stage .social-canvas.social-share-v2.story { width:min(54vw,240px); } .social-range-ribbon { top:44%; grid-template-columns:auto auto; gap:5px; padding:4px 6px; } .social-range-ribbon small { display:none; } .social-range-ribbon.chart-range { top:22%; width:calc(100% - var(--social-pad) * 2); } .social-share-v2.kind-chart:has(.social-range-ribbon) .social-chart-clone { top:34%; } .social-share-v2 .social-holding-strip > span em { display:none; } .social-studio-footer { z-index:6; display:grid; grid-template-columns:54px auto minmax(0,1fr); } .social-studio-footer .social-save-image { min-width:0; padding-inline:10px; font-size:12px; } .social-studio-footer .social-save-image::after { content:none; } .social-share-main { min-width:0; width:auto; } .social-share-main small { display:none; white-space:nowrap; } .xtb-dividend-sync-note { margin-inline:0; padding:11px; } .company-chart-grid .social-chart-tab { width:auto; min-width:118px; grid-template-columns:auto auto; padding:7px 10px; } .company-chart-grid .social-chart-tab > span { grid-row:1/3; } .company-chart-grid .social-chart-tab b { display:block; } .company-chart-grid .social-chart-tab small { display:none; } } @media(max-width:390px){ .company-chart-grid .full-chart-svg { height:235px; } .chart-range-label em { max-width:48%; } .social-studio-controls { grid-template-columns:1fr; } .social-studio-controls > section { grid-column:1!important; } .social-theme-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } .company-chart-grid .chart-controls > .social-chart-tab { flex:0 0 auto; margin-left:2px; } .xtb-match-hero { display:grid; grid-template-columns:auto minmax(240px,.8fr) minmax(320px,1.2fr); align-items:center; gap:20px; margin:0 20px 15px; padding:18px; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent,#15735c) 22%,var(--line)); border-radius:22px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent,#15735c) 8%,var(--card)),var(--card)); } .xtb-match-hero.warning { border-color:color-mix(in srgb,#c58a2e 38%,var(--line)); background:linear-gradient(135deg,color-mix(in srgb,#d8a33a 10%,var(--card)),var(--card)); } .xtb-match-score { --match:0; position:relative; display:grid; width:92px; height:92px; place-items:center; border-radius:50%; background:conic-gradient(var(--green) calc(var(--match) * 1%),color-mix(in srgb,var(--line) 68%,transparent) 0); box-shadow:0 14px 34px rgba(7,46,34,.12); } .xtb-match-score::after { content:""; position:absolute; inset:8px; border-radius:inherit; background:var(--card); } .xtb-match-score > span { position:relative; z-index:1; display:flex; align-items:baseline; } .xtb-match-score strong { color:var(--ink); font-size:31px; letter-spacing:-.06em; } .xtb-match-score small { color:var(--muted); font-size:11.5px; font-weight:900; } .xtb-match-hero h3 { margin:5px 0 6px; color:var(--ink); font-size:clamp(18px,2vw,25px); letter-spacing:-.035em; } .xtb-match-hero p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; } .xtb-match-checklist { display:grid; gap:8px; margin:0; padding:0; list-style:none; } .xtb-match-checklist li { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:9px; padding:9px 11px; border:1px solid var(--line); border-radius:13px; background:color-mix(in srgb,var(--surface-soft) 72%,var(--card)); } .xtb-match-checklist li > i { width:8px; height:8px; margin-top:4px; border-radius:50%; background:#c58a2e; box-shadow:0 0 0 5px color-mix(in srgb,#c58a2e 12%,transparent); } .xtb-match-checklist li.positive > i { background:var(--green); box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 12%,transparent); } .xtb-match-checklist li.negative > i { background:var(--red); box-shadow:0 0 0 5px color-mix(in srgb,var(--red) 12%,transparent); } .xtb-match-checklist b,.xtb-match-checklist small { display:block; } .xtb-match-checklist b { color:var(--ink); font-size:12px; } .xtb-match-checklist small { margin-top:2px; color:var(--muted); font-size:11px; line-height:1.42; } .xtb-account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 20px 15px; } .xtb-account-card { position:relative; overflow:hidden; padding:16px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--green-soft) 25%,var(--card))); box-shadow:0 14px 36px rgba(8,42,32,.055); } .xtb-account-card::before { content:""; position:absolute; top:0; right:0; width:42%; height:4px; background:linear-gradient(90deg,transparent,var(--green)); } .xtb-account-card.mismatch::before { background:linear-gradient(90deg,transparent,var(--red)); } .xtb-account-card > header,.xtb-account-card > footer { display:flex; align-items:center; justify-content:space-between; gap:12px; } .xtb-account-card > header > span { display:flex; align-items:center; gap:7px; color:var(--ink); font-size:11px; font-weight:900; } .xtb-account-card > header i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 12%,transparent); } .xtb-account-card.mismatch > header i { background:var(--red); box-shadow:0 0 0 5px color-mix(in srgb,var(--red) 12%,transparent); } .xtb-account-card > header > b { padding:5px 8px; border-radius:99px; background:var(--green-soft); color:var(--green); font-size:11px; text-transform:uppercase; letter-spacing:.06em; } .xtb-account-card.mismatch > header > b { background:color-mix(in srgb,var(--red) 10%,var(--card)); color:var(--red); } .xtb-account-value { display:grid; grid-template-columns:1fr auto; align-items:end; gap:2px 12px; margin:18px 0 13px; } .xtb-account-value small { grid-column:1/-1; color:var(--muted); font-size:11px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; } .xtb-account-value strong { color:var(--ink); font-size:clamp(28px,3vw,40px); letter-spacing:-.055em; } .xtb-account-value em { padding-bottom:5px; color:var(--muted); font-size:12px; font-style:normal; font-weight:800; } .xtb-account-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--line); } .xtb-account-facts > span { display:grid; gap:3px; min-width:0; padding:10px; background:var(--card); } .xtb-account-facts small,.xtb-account-facts em { overflow:hidden; color:var(--muted); font-size:11px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; } .xtb-account-facts b { overflow:hidden; color:var(--ink); font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .xtb-account-card > footer { margin-top:12px; color:var(--muted); font-size:11px; } @media(max-width:980px){ .xtb-match-hero { grid-template-columns:auto 1fr; } .xtb-match-checklist { grid-column:1/-1; } .xtb-account-facts { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:680px){ .company-chart-grid .chart-controls > .social-chart-tab { order:-1; width:100%; margin:0; } .company-chart-grid .chart-controls > .social-chart-tab b,.company-chart-grid .chart-controls > .social-chart-tab small { display:block; } .xtb-match-hero { grid-template-columns:72px minmax(0,1fr); gap:12px; margin:0 10px 12px; padding:13px; border-radius:18px; } .xtb-match-score { width:68px; height:68px; } .xtb-match-score strong { font-size:24px; } .xtb-match-hero h3 { font-size:17px; } .xtb-match-hero p { font-size:11.5px; } .xtb-match-checklist { gap:6px; } .xtb-account-grid { grid-template-columns:1fr; margin:0 10px 12px; } .xtb-account-card { padding:13px; border-radius:17px; } .xtb-account-value { margin-block:14px 10px; } .xtb-account-value strong { font-size:30px; } } .public-freshness-chip { display:inline-flex; align-items:center; gap:6px; width:max-content; max-width:100%; padding:6px 9px; border:1px solid color-mix(in srgb,var(--green) 18%,var(--line)); border-radius:999px; color:var(--muted); background:color-mix(in srgb,var(--green-soft) 34%,var(--card)); font-size:11px; white-space:nowrap; } .public-freshness-chip i { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 10%,transparent); } .public-freshness-chip strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; } .company-premium-view > .company-chart-grid, .company-premium-view > .dashboard-grid, .company-premium-view > .report-quality-panel, .company-premium-view > .report-truth-panel, .portfolio-mobile-priority > .portfolio-benchmark-panel, .portfolio-mobile-priority > .portfolio-share-studio, .portfolio-mobile-priority > .portfolio-dividend-hub, .portfolio-mobile-priority > .portfolio-bottom-drawer { content-visibility:auto; contain-intrinsic-size:auto 680px; } .report-coverage-panel, .report-company-status-panel, .report-expectations-panel, .report-parser-panel, .report-queue-panel, .report-robot-panel, .report-automation-panel, .report-data-panel, .report-ops-panel { content-visibility: auto; contain-intrinsic-size: auto 620px; } @media(max-width:760px){ .report-coverage-panel, .report-company-status-panel, .report-expectations-panel, .report-parser-panel, .report-queue-panel, .report-robot-panel, .report-automation-panel, .report-data-panel, .report-ops-panel { contain-intrinsic-size: auto 480px; } } .app-widget-panel { margin-top:16px; overflow:hidden; background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent,#15735c) 13%,transparent),transparent 38%),var(--card); } .app-widget-layout { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(300px,1.2fr); gap:18px; padding:0 20px 18px; } .app-widget-options { display:grid; gap:9px; align-content:start; } .app-widget-option { display:grid; grid-template-columns:42px minmax(0,1fr) 16px; align-items:center; gap:11px; width:100%; padding:12px; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:var(--surface-soft); text-align:left; cursor:pointer; transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease; } .app-widget-option:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--green) 36%,var(--line)); } .app-widget-option.active { border-color:color-mix(in srgb,var(--green) 58%,var(--line)); background:color-mix(in srgb,var(--green-soft) 58%,var(--card)); box-shadow:0 13px 30px color-mix(in srgb,var(--green) 10%,transparent); } .app-widget-option > i { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:var(--green); background:var(--card); font-size:18px; font-style:normal; box-shadow:inset 0 0 0 1px var(--line); } .app-widget-option span,.app-widget-option strong,.app-widget-option small { display:block; min-width:0; } .app-widget-option strong { font-size:11px; } .app-widget-option small { margin-top:3px; color:var(--muted); font-size:11px; line-height:1.4; } .app-widget-option > b { width:13px; height:13px; border:2px solid var(--line-strong,var(--line)); border-radius:50%; } .app-widget-option.active > b { border:4px solid var(--green); } .app-widget-preview { position:relative; display:grid; align-content:center; min-height:210px; padding:25px; overflow:hidden; border-radius:28px; color:#effcf6; background:radial-gradient(circle at 85% 15%,rgba(102,218,174,.26),transparent 31%),linear-gradient(145deg,#07120e,#10382c 68%,#07130f); box-shadow:0 24px 54px rgba(7,40,30,.22); } .app-widget-preview::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.08) 44%,transparent 61%); transform:translateX(-100%); animation:widget-sheen 5.5s ease-in-out infinite; } .app-widget-preview.theme-ocean { background:radial-gradient(circle at 85% 15%,rgba(105,166,245,.3),transparent 31%),linear-gradient(145deg,#071220,#0c3767 68%,#07101c); } .app-widget-preview.theme-fiolet { background:radial-gradient(circle at 85% 15%,rgba(183,155,246,.3),transparent 31%),linear-gradient(145deg,#130c24,#432b79 68%,#110a20); } .app-widget-preview.theme-bursztyn { background:radial-gradient(circle at 85% 15%,rgba(246,176,78,.28),transparent 31%),linear-gradient(145deg,#241006,#6b2b08 68%,#1b0b04); } .app-widget-preview.theme-dark { background:radial-gradient(circle at 85% 15%,rgba(60,196,151,.22),transparent 31%),linear-gradient(145deg,#080c0a,#18221d 68%,#060907); } .app-widget-preview.theme-grafit { background:radial-gradient(circle at 85% 15%,rgba(127,195,224,.28),transparent 31%),linear-gradient(145deg,#0b141a,#28556b 68%,#0a1218); } .app-widget-preview.theme-rubin { background:radial-gradient(circle at 85% 15%,rgba(251,113,133,.28),transparent 31%),linear-gradient(145deg,#1c0710,#6d0e26 68%,#170610); } .app-widget-preview.theme-cyber { background:radial-gradient(circle at 85% 15%,rgba(103,232,249,.3),transparent 31%),linear-gradient(145deg,#03101a,#0b4a5c 68%,#020c14); } .app-widget-brand { position:absolute; top:17px; left:19px; display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:950; letter-spacing:.13em; } .app-widget-brand i { display:grid; width:27px; height:27px; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:9px; background:rgba(255,255,255,.09); font-size:11px; font-style:normal; } .app-widget-preview > small { color:#92b9aa; font-size:12px; font-weight:800; } .app-widget-preview > strong { margin-top:3px; font-size:clamp(26px,4vw,43px); letter-spacing:-.055em; } .app-widget-preview > em { margin-top:7px; color:#c5dbd2; font-size:12px; font-style:normal; } .app-widget-preview > b { position:absolute; right:19px; bottom:17px; color:#80dfb7; font-size:11.5px; } .app-widget-actions { display:flex; align-items:center; gap:10px; padding:0 20px 20px; } .app-widget-actions .browser-notification-check { flex:1 1 360px; margin-right:auto; } .app-widget-actions > .form-hint { max-width:330px; margin:0; } .admin-client-diagnostics { display:grid; gap:16px; } .admin-client-feed-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; } .admin-client-feed-grid article { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:9px; min-width:0; padding:11px; border:1px solid var(--line); border-radius:15px; background:var(--surface-soft); } .admin-client-feed-grid article > span { display:grid; width:32px; height:32px; place-items:center; border-radius:10px; color:var(--green); background:var(--card); } .admin-client-feed-grid article > span svg { width:16px; } .admin-client-feed-grid article strong,.admin-client-feed-grid article small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .admin-client-feed-grid article strong { font-size:11.5px; } .admin-client-feed-grid article small { margin-top:2px; color:var(--muted); font-size:11px; } .admin-client-feed-grid article > i { grid-column:2; width:max-content; color:var(--green); font-size:11px; font-style:normal; font-weight:900; text-transform:uppercase; } .admin-client-feed-grid article.warning > i { color:#b37a20; } .admin-client-runtime { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--line); } .admin-client-runtime > span { display:grid; gap:4px; padding:12px; background:var(--card); } .admin-client-runtime small { color:var(--muted); font-size:11px; text-transform:uppercase; } .admin-client-runtime strong { color:var(--ink); font-size:12px; } .admin-client-errors { display:grid; gap:7px; padding:13px; border:1px solid color-mix(in srgb,var(--red) 25%,var(--line)); border-radius:15px; background:color-mix(in srgb,var(--red) 5%,var(--card)); } .admin-client-errors > strong { color:var(--red); font-size:11.5px; } .admin-client-errors article { display:grid; grid-template-columns:150px minmax(0,1fr); gap:9px; align-items:start; } .admin-client-errors span { color:var(--ink); font-size:11px; font-weight:850; } .admin-client-errors code { overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .admin-advanced-diagnostics { overflow:hidden; } .admin-advanced-diagnostics > summary { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; padding:18px; list-style:none; cursor:pointer; } .admin-advanced-diagnostics > summary::-webkit-details-marker { display:none; } .admin-advanced-diagnostics > summary > span { display:grid; width:44px; height:44px; place-items:center; border-radius:14px; color:var(--green); background:var(--green-soft); } .admin-advanced-diagnostics > summary svg { width:19px; } .admin-advanced-diagnostics > summary strong,.admin-advanced-diagnostics > summary small { display:block; } .admin-advanced-diagnostics > summary strong { font-size:12px; } .admin-advanced-diagnostics > summary small { margin-top:4px; color:var(--muted); font-size:11px; } .admin-advanced-diagnostics > summary > i { color:var(--green); font-size:11px; font-style:normal; font-weight:900; } .admin-advanced-diagnostics[open] > summary > i { font-size:0; } .admin-advanced-diagnostics[open] > summary > i::after { content:"Zwiń"; font-size:11px; } .admin-advanced-diagnostics-body { display:grid; gap:14px; padding:0 14px 14px; } .admin-advanced-diagnostics-body > .panel { margin:0; box-shadow:none; } @keyframes widget-sheen { 0%,65%{transform:translateX(-110%)} 82%,100%{transform:translateX(115%)} } @media(max-width:980px){ .app-widget-layout { grid-template-columns:1fr; } .admin-client-feed-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:680px){ .app-widget-layout { padding:0 10px 12px; } .app-widget-preview { min-height:180px; padding:22px; border-radius:22px; } .app-widget-actions { display:grid; grid-template-columns:1fr; padding:0 10px 14px; } .app-widget-actions > button { width:100%; } .admin-client-feed-grid,.admin-client-runtime { grid-template-columns:1fr 1fr; } .admin-client-errors article { grid-template-columns:1fr; } } :root[data-motion="off"] .app-widget-preview::before { animation:none!important; } @media(prefers-reduced-motion:reduce){.app-widget-preview::before{animation:none!important}} .financial-row-source { display: block; margin-top: 0.28rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; } .financial-row-source a { color: var(--accent, #147a5b); text-decoration: none; } .financial-row-source a:hover { text-decoration: underline; } .social-owner-control label { display:grid; gap:7px; } .social-owner-control label small { color:var(--muted); font-size:11px; line-height:1.4; } .social-owner-control input { width:100%; min-height:44px; padding:0 13px; border:1px solid color-mix(in srgb,var(--green) 24%,var(--line)); border-radius:14px; outline:0; color:var(--ink); background:color-mix(in srgb,var(--green-soft) 24%,var(--card)); font-family:inherit; font-size:11px; font-weight:850; line-height:1.2; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; } .social-owner-control input:focus { border-color:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 11%,transparent); transform:translateY(-1px); } .report-coverage-stats { grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); } .report-coverage-list article { content-visibility:auto; contain-intrinsic-size:auto 88px; } @media(max-width:760px){ .report-coverage-panel .panel-header, .report-truth-coverage .panel-header { align-items:flex-start; } .report-coverage-stats { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(145px,72vw); grid-template-columns:none; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scrollbar-width:none; } .report-coverage-stats::-webkit-scrollbar { display:none; } .report-coverage-stats > article { scroll-snap-align:start; } .report-coverage-list article { grid-template-columns:minmax(0,1fr) auto; } .report-coverage-list article > p,.report-coverage-list article > small { grid-column:1/-1; } .social-owner-control { grid-column:1/-1; } .social-owner-control input { min-height:46px; font-size:12px; } .social-studio-stage .social-canvas.social-share-v2 { box-shadow:0 20px 50px rgba(4,24,18,.25); will-change:transform; } } @media(max-width:420px){ .social-studio-layout { height:calc(100dvh - 142px); } .social-studio-stage { position:sticky; top:0; z-index:2; background:var(--bg); } .social-share-v2 .social-canvas-top small { max-width:82%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .social-share-v2 .social-kpi-row { gap:5px; } .social-share-v2 .social-holding-strip { gap:5px; } } :root[data-motion="off"] .social-owner-control input { transition:none!important; } @media(prefers-reduced-motion:reduce){ :root:not([data-motion="on"]) .social-owner-control input { transition:none!important; } } .broker-sale-timeline, .tax-period-toolbar { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--green) 22%, var(--line)); border-radius: 22px; background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--green) 13%, transparent), transparent 36%), linear-gradient(145deg, color-mix(in srgb, var(--green-soft) 34%, var(--card)), var(--card)); } .broker-sale-timeline { margin: 14px 0; padding: 18px; } .broker-sale-timeline-head { display: grid; grid-template-columns: minmax(0, .85fr) minmax(260px, 1.15fr); gap: 18px; align-items: end; margin-bottom: 14px; } .broker-sale-timeline-head h3 { margin: 4px 0 0; font-size: 17px; } .broker-sale-timeline-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; } .broker-sale-timeline > div:last-child { display: grid; gap: 7px; } .broker-sale-timeline-row { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(160px, 1fr) minmax(150px, .9fr); gap: 12px; align-items: center; padding: 12px 13px; border: 1px solid color-mix(in srgb, var(--green) 10%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--card) 94%, transparent); } .broker-sale-timeline-row.is-incomplete { border-color: color-mix(in srgb, var(--amber) 38%, var(--line)); background: color-mix(in srgb, var(--amber) 5%, var(--card)); } .broker-sale-timeline-row > span { display: grid; gap: 3px; min-width: 0; } .broker-sale-timeline-row > span:last-child { justify-items: end; text-align: right; } .broker-sale-timeline-row strong { font-size: 12px; } .broker-sale-timeline-row small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .broker-sale-date strong { color: var(--green); font-variant-numeric: tabular-nums; } .tax-period-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 15px 18px; } .tax-period-toolbar > div { display: grid; gap: 3px; } .tax-period-toolbar > div > strong { color: var(--green); font-size: 20px; } .tax-period-toolbar > div > small { color: var(--muted); font-size: 11.5px; } .tax-period-toolbar > label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; } .tax-period-toolbar .filter-select { min-width: 150px; } .tax-cost-warning { display: grid; gap: 4px; margin-bottom: 13px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--amber) 7%, var(--card)); } .tax-cost-warning strong { color: var(--amber); font-size: 12px; } .tax-cost-warning span { color: var(--muted); font-size: 11.5px; line-height: 1.45; } @media(max-width:720px) { .broker-sale-timeline { padding: 14px; border-radius: 18px; } .broker-sale-timeline-head { grid-template-columns: 1fr; gap: 8px; } .broker-sale-timeline-row { grid-template-columns: 1fr auto; padding: 11px; } .broker-sale-timeline-row > span:nth-child(2) { grid-column: 1; grid-row: 2; } .broker-sale-timeline-row > span:last-child { grid-column: 2; grid-row: 1 / span 2; } .tax-period-toolbar { align-items: stretch; flex-direction: column; padding: 14px; border-radius: 18px; } .tax-period-toolbar .filter-select { width: 100%; min-width: 0; } } .market-calendar-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) auto; gap: 28px; align-items: end; overflow: hidden; margin-bottom: 16px; padding: clamp(24px, 4vw, 44px); border-color: color-mix(in srgb, var(--green) 25%, var(--line)); background: radial-gradient(circle at 88% 4%, color-mix(in srgb, #6d4aff 15%, transparent), transparent 34%), radial-gradient(circle at 4% 100%, color-mix(in srgb, var(--green) 13%, transparent), transparent 36%), linear-gradient(145deg, color-mix(in srgb, var(--card) 97%, var(--green-soft)), var(--card)); } .market-calendar-hero::after { position: absolute; right: -55px; bottom: -100px; width: 260px; height: 260px; border: 1px solid color-mix(in srgb, var(--green) 20%, transparent); border-radius: 50%; content: ""; pointer-events: none; } .market-calendar-hero-copy { position: relative; z-index: 1; max-width: 820px; } .market-calendar-hero-copy h2 { max-width: 760px; margin: 8px 0 12px; color: var(--ink); font-size: clamp(29px, 4vw, 55px); line-height: .98; letter-spacing: -.055em; } .market-calendar-hero-copy > p { max-width: 760px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; } .market-calendar-hero-copy > div { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; } .market-calendar-hero-copy > div > span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--card) 88%, transparent); font-size: 11.5px; font-weight: 800; } .market-calendar-hero-copy > div b { color: var(--green); font-size: 13px; } .market-calendar-export { position: relative; z-index: 1; display: grid; gap: 7px; min-width: 220px; justify-items: stretch; } .market-calendar-export small { color: var(--muted); font-size: 11px; text-align: center; } .market-calendar-featured { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; margin: 0 0 16px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 1px 1px 8px; scrollbar-width: none; scroll-snap-type: x mandatory; } .market-calendar-featured::-webkit-scrollbar { display: none; } .market-calendar-feature-card { position: relative; min-height: 178px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; align-content: end; overflow: hidden; padding: 20px; border: 0; border-radius: 25px; color: #fff; background: radial-gradient(circle at 90% 0, rgba(255,255,255,.24), transparent 34%), linear-gradient(145deg, #245cff, #5c72ff); box-shadow: 0 18px 44px rgba(45, 80, 200, .18); cursor: pointer; text-align: left; scroll-snap-align: start; transition: transform .24s ease, box-shadow .24s ease; } .market-calendar-feature-card.type-rates { background: radial-gradient(circle at 90% 0, rgba(255,255,255,.22), transparent 34%), linear-gradient(145deg, #4b42d6, #7654f0); } .market-calendar-feature-card.type-inflation { background: radial-gradient(circle at 90% 0, rgba(255,255,255,.22), transparent 34%), linear-gradient(145deg, #e36b2f, #ff9842); } .market-calendar-feature-card.type-employment { background: radial-gradient(circle at 90% 0, rgba(255,255,255,.2), transparent 34%), linear-gradient(145deg, #057b62, #20b88e); } .market-calendar-feature-card.type-report { background: radial-gradient(circle at 90% 0, rgba(255,255,255,.22), transparent 34%), linear-gradient(145deg, #19619c, #3690d4); } .market-calendar-feature-card:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(36, 70, 180, .24); } .market-calendar-feature-card > span { align-self: start; font-size: 11.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .market-calendar-feature-card > b { align-self: start; justify-self: end; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.17); font-size: 11.5px; } .market-calendar-feature-card > strong { grid-column: 1 / -1; max-width: 270px; font-size: 19px; line-height: 1.15; } .market-calendar-feature-card > small { grid-column: 1 / -1; color: rgba(255,255,255,.76); font-size: 11.5px; } .market-calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 10px 12px; } .market-calendar-tabs, .market-calendar-ranges { display: flex; align-items: center; gap: 5px; } .market-calendar-tabs button, .market-calendar-ranges button { min-height: 42px; padding: 0 14px; border: 0; border-radius: 14px; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: 12px; font-weight: 850; transition: color .18s ease, background .18s ease, transform .18s ease; } .market-calendar-tabs button { display: inline-flex; align-items: center; gap: 7px; } .market-calendar-tabs button b { display: grid; min-width: 21px; height: 21px; place-items: center; border-radius: 999px; background: var(--surface-soft); font-size: 11px; } .market-calendar-tabs button.active, .market-calendar-ranges button.active { color: var(--ink); background: color-mix(in srgb, var(--green-soft) 72%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 18%, var(--line)); } .market-calendar-tabs button.active b { color: #fff; background: var(--green); } .market-calendar-picker { margin-bottom: 16px; overflow: hidden; padding: 0; } .market-calendar-picker > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; } .market-calendar-picker > summary::-webkit-details-marker { display: none; } .market-calendar-picker > summary > span { display: grid; gap: 3px; } .market-calendar-picker > summary small { color: var(--green); font-size: 11px; font-weight: 950; letter-spacing: .11em; } .market-calendar-picker > summary strong { color: var(--ink); font-size: 15px; } .market-calendar-picker > summary em { color: var(--muted); font-size: 11.5px; font-style: normal; } .market-calendar-picker > summary > i { color: var(--green); font-style: normal; transition: transform .2s ease; } .market-calendar-picker[open] > summary > i { transform: rotate(180deg); } .market-calendar-picker-body { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(300px, 1.3fr); gap: 15px 22px; padding: 0 20px 20px; border-top: 1px solid var(--line); } .market-calendar-watch-toggle { display: flex; align-items: center; gap: 11px; min-height: 70px; cursor: pointer; } .market-calendar-watch-toggle input { position: absolute; opacity: 0; pointer-events: none; } .market-calendar-watch-toggle > span { position: relative; width: 43px; height: 25px; flex: 0 0 auto; border-radius: 999px; background: color-mix(in srgb, var(--muted) 25%, var(--surface-soft)); transition: background .2s ease; } .market-calendar-watch-toggle > span::after { position: absolute; top: 4px; left: 4px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.18); content: ""; transition: transform .2s ease; } .market-calendar-watch-toggle input:checked + span { background: var(--green); } .market-calendar-watch-toggle input:checked + span::after { transform: translateX(18px); } .market-calendar-watch-toggle > div { display: grid; gap: 4px; } .market-calendar-watch-toggle strong { color: var(--ink); font-size: 11px; } .market-calendar-watch-toggle small { color: var(--muted); font-size: 11px; } .market-calendar-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; } .market-calendar-search input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; outline: none; color: var(--ink); background: var(--surface-soft); font: inherit; font-size: 12px; } .market-calendar-search input:focus { border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 10%, transparent); } .market-calendar-search-results, .market-calendar-selected { grid-column: 1 / -1; } .market-calendar-search-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .market-calendar-search-results button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--card); cursor: pointer; text-align: left; } .market-calendar-search-results button > span { display: grid; gap: 2px; min-width: 0; } .market-calendar-search-results button strong { font-size: 12px; } .market-calendar-search-results button small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .market-calendar-search-results button > b { color: var(--green); font-size: 17px; } .market-calendar-selected { display: flex; flex-wrap: wrap; gap: 7px; } .market-calendar-selected > span { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 7px 4px 5px; border: 1px solid color-mix(in srgb, var(--green) 15%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--green-soft) 34%, var(--card)); } .market-calendar-selected .ticker-logo { width: 28px; height: 28px; } .market-calendar-selected b { color: var(--ink); font-size: 11.5px; } .market-calendar-selected small { color: var(--muted); font-size: 11px; } .market-calendar-selected button { width: 24px; height: 24px; border: 0; border-radius: 50%; color: var(--muted); background: var(--card); cursor: pointer; } .market-calendar-feed { overflow: hidden; margin-bottom: 16px; } .market-calendar-groups { display: grid; gap: 26px; } .market-calendar-day { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 16px; } .market-calendar-day > h3 { position: sticky; top: 110px; align-self: start; margin: 11px 0 0; color: var(--ink); font-size: 13px; line-height: 1.35; text-transform: capitalize; } .market-calendar-day > div { display: grid; gap: 9px; min-width: 0; } .market-event-card { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; align-items: start; overflow: hidden; padding: 15px; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, #546dff 6%, transparent), transparent 33%), var(--surface-soft); transition: border-color .2s ease, transform .22s ease, box-shadow .22s ease; } .content.view-fresh .market-event-card, .content.view-enter .market-event-card { animation: market-event-in .44s cubic-bezier(.18,.8,.25,1) both; } .market-event-card:hover { border-color: color-mix(in srgb, var(--green) 26%, var(--line)); transform: translateY(-2px); box-shadow: 0 15px 32px rgba(12, 42, 32, .08); } .market-event-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: #6278f5; content: ""; } .market-event-card.impact-high::before { background: #ef745d; } .market-event-date { display: grid; min-height: 72px; align-content: center; justify-items: center; border: 1px solid var(--line); border-radius: 16px; background: var(--card); } .market-event-date small { color: var(--muted); font-size: 11px; font-weight: 900; } .market-event-date strong { margin: 2px 0; color: var(--ink); font-size: 22px; line-height: 1; } .market-event-date span { color: var(--green); font-size: 11px; font-weight: 900; } .market-event-main { display: grid; gap: 9px; min-width: 0; } .market-event-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .market-event-kicker > span { color: #6574e8; font-size: 11px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; } .market-event-kicker > b { padding: 4px 7px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: 11px; } .market-event-kicker > i { display: flex; gap: 2px; margin-left: auto; } .market-event-kicker > i u { width: 4px; height: 11px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 25%, transparent); } .market-event-card.impact-high .market-event-kicker > i u { background: #ef745d; } .market-event-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .market-event-title > div { min-width: 0; } .market-event-title h3 { margin: 0 0 4px; color: var(--ink); font-size: 14px; line-height: 1.28; } .market-event-title p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; } .market-event-flag { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-size: 20px; } .market-event-tags { display: flex; flex-wrap: wrap; gap: 5px; } .market-event-tags span { padding: 4px 7px; border-radius: 999px; color: var(--muted); background: var(--card); font-size: 11px; font-weight: 800; } .market-event-context { border-top: 1px solid var(--line); padding-top: 7px; } .market-event-context summary { color: var(--green); cursor: pointer; font-size: 11px; font-weight: 900; } .market-event-context p { margin: 7px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.55; } .market-event-actions { display: grid; grid-template-columns: repeat(3, minmax(60px, 1fr)); gap: 6px; align-self: center; } .calendar-action { display: grid; min-width: 64px; min-height: 62px; place-items: center; gap: 3px; padding: 7px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: var(--card); cursor: pointer; text-decoration: none; font: inherit; } .calendar-action span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 9px; color: #fff; background: #3976dd; font-size: 12px; font-weight: 950; } .calendar-action.apple span { color: var(--ink); background: var(--surface-soft); } .calendar-action.source span { background: var(--green); } .calendar-action b { font-size: 11px; white-space: nowrap; } .market-calendar-loading { display: grid; gap: 9px; } .market-calendar-loading i, .ah-upcoming-shimmer { display: block; min-height: 116px; overflow: hidden; border-radius: 20px; background: linear-gradient(100deg, var(--surface-soft) 25%, color-mix(in srgb, var(--card) 55%, var(--green-soft)) 44%, var(--surface-soft) 64%); background-size: 240% 100%; animation: calendar-shimmer 1.25s linear infinite; } .ah-upcoming-empty, .ah-movers-empty { display: grid; gap: 6px; align-content: center; min-height: 116px; padding: 18px 16px; border: 1px dashed color-mix(in srgb, var(--line) 80%, var(--green-2)); border-radius: 18px; background: color-mix(in srgb, var(--surface-soft) 88%, var(--card)); color: var(--ink); text-align: left; cursor: pointer; transition: transform .15s ease, border-color .15s ease; } .ah-upcoming-empty:hover, .ah-movers-empty:hover { transform: translateY(-1px); border-color: var(--green-2); } .ah-upcoming-empty strong, .ah-movers-empty strong { font-size: 14px; } .ah-upcoming-empty small, .ah-movers-empty small { color: var(--muted); font-size: 12px; line-height: 1.45; } .ah-movers-empty { width: 100%; cursor: default; } .market-calendar-sources { margin-bottom: 16px; } .market-calendar-sources > div:last-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .market-calendar-sources a { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 2px 9px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: var(--surface-soft); text-decoration: none; } .market-calendar-sources a > span { grid-row: 1 / span 2; display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: var(--green); background: var(--green-soft); font-size: 11.5px; font-weight: 950; } .market-calendar-sources a strong { font-size: 11.5px; } .market-calendar-sources a small { color: var(--muted); font-size: 11px; } .ah-app-tabs { display: flex; gap: 5px; margin-bottom: 12px; padding: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--card); scrollbar-width: none; } .ah-app-tabs::-webkit-scrollbar { display: none; } .ah-app-tabs button { min-height: 40px; padding: 0 15px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; } .ah-app-tabs button.active { color: var(--ink); background: var(--surface-soft); } .ah-upcoming { margin: 17px 0; } .ah-upcoming-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 72%); gap: 10px; overflow-x: auto; padding: 1px 1px 7px; scrollbar-width: none; scroll-snap-type: x mandatory; } .ah-upcoming-track::-webkit-scrollbar { display: none; } .ah-upcoming-card { display: grid; grid-template-columns: 1fr auto; gap: 7px; min-height: 164px; align-content: end; padding: 18px; border: 0; border-radius: 23px; color: #fff; background: linear-gradient(145deg, #4c5ee8, #6f64ee); cursor: pointer; text-align: left; scroll-snap-align: start; } .ah-upcoming-card.type-inflation { background: linear-gradient(145deg, #df642c, #f5953f); } .ah-upcoming-card.type-employment { background: linear-gradient(145deg, #06775f, #21ac87); } .ah-upcoming-card > span { font-size: 11px; font-weight: 900; text-transform: uppercase; } .ah-upcoming-card > b { justify-self: end; font-size: 11px; } .ah-upcoming-card > strong { grid-column: 1 / -1; font-size: 17px; line-height: 1.2; } .ah-upcoming-card > small { grid-column: 1 / -1; color: rgba(255,255,255,.75); font-size: 11px; } .ah-upcoming-shimmer { width: 230px; min-height: 164px; scroll-snap-align: start; } .ah-mover-spark { flex: 0 0 72px; width: 72px; height: 28px; color: var(--green-2); overflow: visible; } .ah-mover-spark.down, .ah-mover-spark.negative { color: var(--tick-down); } .ah-mover-spark.flat { color: var(--muted); } .ah-mover-spark polyline { stroke: currentColor; stroke-width: 1.8; } .ah-mover-spark.position-spark-loader { height: 28px; background: color-mix(in srgb, var(--muted) 7%, transparent); } .ah-mover-spark.position-spark-loader i { width: 27px; } .ah-mover-spark.position-spark-loader i:nth-child(2) { left: 23px; } .ah-mover-spark.position-spark-loader i:nth-child(3) { left: 46px; } .ah-mover-spark.loading { border-radius: 9px; background: linear-gradient(100deg, color-mix(in srgb, var(--line) 42%, transparent) 25%, color-mix(in srgb, var(--card) 90%, #fff) 45%, color-mix(in srgb, var(--line) 42%, transparent) 65%); background-size: 220% 100%; animation: calendar-shimmer 1.35s linear infinite; } .report-status-mobile-list, .gem-results-mobile { display: none; } .report-status-mobile-card { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface-soft); } .report-status-mobile-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; } .report-status-mobile-card > header > div { display: grid; gap: 3px; min-width: 0; } .report-status-mobile-card > header strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .report-status-mobile-card > header small { color: var(--muted); font-size: 11px; } .report-status-mobile-card > div { display: grid; gap: 5px; padding: 9px; border-radius: 12px; background: var(--card); } .report-status-mobile-card > div > span { display: flex; align-items: center; justify-content: space-between; gap: 9px; } .report-status-mobile-card > div small { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; } .report-status-mobile-card > div strong { color: var(--ink); font-size: 12px; } .report-status-mobile-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; } .report-status-mobile-card details { border-top: 1px solid var(--line); padding-top: 8px; } .report-status-mobile-card summary { color: var(--green); cursor: pointer; font-size: 11px; font-weight: 900; } .report-status-mobile-card details p { margin-top: 7px; } .gem-results-mobile { gap: 8px; } .gem-results-mobile article { padding: 13px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface-soft); } .gem-results-mobile article.primary { border-color: color-mix(in srgb, #6d4aff 38%, var(--line)); background: color-mix(in srgb, #6d4aff 7%, var(--card)); } .gem-results-mobile header { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 10px; } .gem-results-mobile header strong { color: var(--ink); font-size: 11px; } .gem-results-mobile header span { padding: 4px 7px; border-radius: 999px; color: #fff; background: #6d4aff; font-size: 11px; font-weight: 950; } .gem-results-mobile article > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .gem-results-mobile article > div span { display: grid; gap: 3px; padding: 9px; border-radius: 11px; background: var(--card); } .gem-results-mobile small { color: var(--muted); font-size: 11px; text-transform: uppercase; } .gem-results-mobile b { font-size: 11px; } .strategy-welcome-overlay { background: rgba(3, 10, 8, .86) !important; } .strategy-welcome-card { isolation: isolate; background: #0a211b !important; } .strategy-welcome-card::after { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(circle at 76% 17%, rgba(125,92,255,.45), transparent 29%), linear-gradient(145deg, #071a15, #13372b 58%, #2b2255); content: ""; } .strategy-welcome-card > span, .strategy-welcome-card > h2, .strategy-welcome-card > p, .strategy-welcome-card > div:last-child { position: relative; z-index: 2; } @keyframes market-event-in { from { opacity: 0; transform: translateY(12px); } } @keyframes calendar-shimmer { to { background-position: -180% 0; } } @media (max-width: 980px) { .market-calendar-hero { grid-template-columns: 1fr; } .market-calendar-export { min-width: 0; justify-items: start; } .market-calendar-toolbar { align-items: stretch; flex-direction: column; } .market-calendar-tabs, .market-calendar-ranges { overflow-x: auto; scrollbar-width: none; } .market-calendar-day { grid-template-columns: 110px minmax(0, 1fr); } .market-event-card { grid-template-columns: 58px minmax(0, 1fr); } .market-event-actions { grid-column: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); } .market-calendar-sources > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .market-calendar-hero { gap: 18px; margin-inline: -2px; padding: 23px 17px; border-radius: 24px; } .market-calendar-hero-copy h2 { font-size: clamp(29px, 9vw, 39px); } .market-calendar-hero-copy > p { font-size: 12px; } .market-calendar-export, .market-calendar-export .primary-button { width: 100%; } .market-calendar-featured { grid-auto-columns: minmax(235px, 84vw); } .market-calendar-feature-card { min-height: 166px; border-radius: 22px; } .market-calendar-toolbar { margin-bottom: 12px; padding: 7px; border-radius: 18px; } .market-calendar-tabs button, .market-calendar-ranges button { flex: 0 0 auto; min-height: 39px; padding-inline: 11px; } .market-calendar-picker > summary { padding: 16px; } .market-calendar-picker-body { grid-template-columns: 1fr; gap: 12px; padding: 0 15px 15px; } .market-calendar-search { grid-template-columns: 1fr; } .market-calendar-search .primary-button { width: 100%; } .market-calendar-search-results { grid-template-columns: 1fr; } .market-calendar-feed { padding: 14px 10px; } .market-calendar-day { grid-template-columns: 1fr; gap: 8px; } .market-calendar-day > h3 { position: static; margin: 2px 4px; color: var(--muted); font-size: 12px; letter-spacing: .04em; } .market-event-card { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 18px; } .market-event-date { min-height: 65px; border-radius: 14px; } .market-event-title h3 { font-size: 12px; } .market-event-title p { font-size: 11px; } .market-event-flag { width: 36px; height: 36px; border-radius: 12px; font-size: 17px; } .market-event-actions { grid-column: 1 / -1; } .calendar-action { min-height: 49px; grid-template-columns: auto 1fr; justify-content: center; } .calendar-action span { width: 23px; height: 23px; } .market-calendar-sources > div:last-child { grid-template-columns: 1fr; } .report-status-table-wrap, .gem-results-table-wrap { display: none !important; } .report-status-mobile-list, .gem-results-mobile { display: grid; } .comparison-chart-scroll { overflow: visible; } .comparison-chart-stage { width: 100%; min-width: 0 !important; padding: 0; } .comparison-chart-stage svg, .gem-chart-wrap svg, .gem-drawdown-wrap svg { width: 100%; max-width: 100%; height: auto; min-height: 0; } .gem-chart-wrap, .gem-drawdown-wrap { min-width: 0 !important; overflow: hidden; } .company-premium-view .full-chart-wrap, .portfolio-mobile-priority .full-chart-wrap { min-width: 0 !important; max-width: 100%; overflow: hidden; } .chart-loading-premium { min-height: 240px; } .strategy-welcome-overlay { padding: 12px; } .strategy-welcome-card { width: min(100%, 520px); max-height: calc(100dvh - 24px); min-height: 0 !important; overflow-y: auto; padding: 26px 20px; border-radius: 25px; } .strategy-welcome-card h2 { max-width: none; font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.02; } .strategy-welcome-card p { font-size: 11px; } .app-mode .app-tabbar button small { font-size: 11px; } .app-mode .app-tabbar button i { width: 22px; height: 22px; } } @media (max-width: 420px) { .market-calendar-hero-copy > div { display: grid; grid-template-columns: repeat(3, 1fr); } .market-calendar-hero-copy > div > span { display: grid; justify-items: center; padding: 7px 5px; text-align: center; } .market-calendar-featured { grid-auto-columns: 88vw; } .market-event-kicker > i { display: none; } .market-event-title { align-items: flex-start; } .market-event-title .ticker-mark, .market-event-title .ticker-logo { width: 36px; height: 36px; } .calendar-action b { font-size: 11px; } .market-calendar-selected { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; } .market-calendar-selected > span { flex: 0 0 auto; } } :root[data-motion="off"] .market-calendar-feature-card, :root[data-motion="off"] .market-event-card, :root[data-motion="off"] .market-calendar-loading i, :root[data-motion="off"] .ah-upcoming-shimmer, :root[data-motion="off"] .ah-mover-spark.loading { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .market-calendar-feature-card, :root:not([data-motion="on"]) .market-event-card, :root:not([data-motion="on"]) .market-calendar-loading i, :root:not([data-motion="on"]) .ah-upcoming-shimmer, :root:not([data-motion="on"]) .ah-mover-spark.loading { animation: none !important; transition: none !important; } } @keyframes evra-route-forward { from { opacity: .18; transform: translate3d(22px, 0, 0) scale(.992); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes evra-route-back { from { opacity: .18; transform: translate3d(-22px, 0, 0) scale(.992); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes evra-route-detail { from { opacity: .08; transform: translate3d(0, 13px, 0) scale(.982); } 72% { opacity: 1; transform: translate3d(0, -1px, 0) scale(1.002); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes evra-route-fade { from { opacity: .08; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes evra-loader-scan { 0% { transform: translate3d(-115%, 0, 0); } 100% { transform: translate3d(260%, 0, 0); } } @keyframes evra-tab-ripple { 0% { opacity: .34; transform: translate(-50%, -50%) scale(.18); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); } } @media (max-width: 700px) { body.app-mode .content { will-change: auto; transition: opacity .07s ease, transform .09s cubic-bezier(.2,.8,.2,1); } body.app-mode .content.view-leave { pointer-events: none; opacity: .42; filter: none; will-change: opacity, transform; } body.app-mode[data-route-motion="forward"] .content.view-leave { transform: translate3d(-12px, 0, 0) scale(.997); } body.app-mode[data-route-motion="back"] .content.view-leave { transform: translate3d(12px, 0, 0) scale(.997); } body.app-mode[data-route-motion="detail"] .content.view-leave { transform: translate3d(0, -7px, 0) scale(.99); } body.app-mode[data-route-motion="fade"] .content.view-leave { transform: translate3d(0, 4px, 0); } body.app-mode .content.view-enter { will-change: opacity, transform; animation-duration: .34s; animation-timing-function: cubic-bezier(.16,.82,.24,1); animation-fill-mode: both; } body.app-mode[data-route-motion="forward"] .content.view-enter { animation-name: evra-route-forward; } body.app-mode[data-route-motion="back"] .content.view-enter { animation-name: evra-route-back; } body.app-mode[data-route-motion="detail"] .content.view-enter { animation-name: evra-route-detail; } body.app-mode[data-route-motion="fade"] .content.view-enter { animation-name: evra-route-fade; } body.app-mode .view-loader { top: calc(max(8px, env(safe-area-inset-top)) + 5px); left: 50%; z-index: 360; transform: translate3d(-50%, -8px, 0) scale(.96); } body.app-mode .view-loader.show { transform: translate3d(-50%, 0, 0) scale(1); } body.app-mode .view-loader .loader-card { position: relative; min-width: 0; max-width: 74vw; overflow: hidden; gap: 7px; padding: 7px 12px; border-color: color-mix(in srgb, var(--green) 20%, var(--line)); background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: 0 12px 36px rgba(3,12,9,.16); } body.app-mode .view-loader .loader-card::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--green), #8be5bd, transparent); content: ""; animation: evra-loader-scan .72s linear infinite; } body.app-mode .view-loader .loader-ring { width: 11px; height: 11px; border-width: 2px; } body.app-mode .view-loader .loader-card strong { display: none; } body.app-mode .view-loader .loader-card small { overflow: hidden; max-width: 58vw; color: var(--ink); font-size: 11.5px; font-weight: 780; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; } body.app-mode .app-tabbar button { overflow: hidden; isolation: isolate; } body.app-mode .app-tabbar button i { position: relative; z-index: 2; display: grid; width: 38px; height: 30px; place-items: center; border-radius: 999px; transition: color .22s ease, background .24s ease, transform .28s cubic-bezier(.18,.89,.32,1.28), box-shadow .24s ease; } body.app-mode .app-tabbar button.active i { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); box-shadow: 0 7px 20px color-mix(in srgb, var(--green) 11%, transparent); transform: translate3d(0, -2px, 0) scale(1.06); } body.app-mode .app-tabbar button::before { position: absolute; z-index: 0; top: 44%; left: 50%; width: 62px; height: 62px; border-radius: 50%; background: color-mix(in srgb, var(--green) 24%, transparent); content: ""; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.2); } body.app-mode .app-tabbar button.tap-pulse::before { animation: evra-tab-ripple .4s ease-out both; } body.app-mode .app-tabbar button small { position: relative; z-index: 2; transition: color .2s ease, transform .22s ease; } body.app-mode .app-tabbar button.active small { transform: translate3d(0, -1px, 0); } body.app-mode .market-calendar-feature-card, body.app-mode .ah-value-card, body.app-mode .ah-dividend-card, body.app-mode .app-native-position-button, body.app-mode .portfolio-stat-card { transform: translateZ(0); transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease, filter .24s ease; } body.app-mode .market-calendar-feature-card:active, body.app-mode .ah-value-card:active, body.app-mode .ah-dividend-card:active, body.app-mode .app-native-position-button:active, body.app-mode .portfolio-stat-card:active { filter: saturate(1.06); transform: scale(.975); } } .catalog-mobile-sort { display: none; } @keyframes catalog-mobile-rise { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); } } @keyframes app-range-pop { 0% { transform: scale(.82); } 72% { transform: scale(1.06); } } @media (max-width: 700px) { body.app-mode[data-view="companies"] .content > .page-heading { padding: 19px 3px 11px; } body.app-mode[data-view="companies"] .content > .page-heading h1 { font-size: 34px; } body.app-mode[data-view="companies"] .content > .page-heading p { max-width: 31ch; font-size: 11.5px; -webkit-line-clamp: 1; } body.app-mode[data-view="companies"] .catalog-primary-search { position: sticky; z-index: 24; top: max(4px, env(safe-area-inset-top)); margin: 0 -2px 8px; padding: 5px 2px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(20px) saturate(1.2); } body.app-mode[data-view="companies"] .catalog-primary-search .local-search { height: 52px; min-height: 52px; border-color: color-mix(in srgb, var(--green) 16%, var(--line)); border-radius: 19px; background: var(--app-surface-raised); box-shadow: 0 12px 30px rgba(3, 18, 13, .08); } body.app-mode[data-view="companies"] .catalog-advanced-filters { border-radius: 19px; } body.app-mode[data-view="companies"] .catalog-market-shortcuts { display: block; margin-bottom: 8px; padding: 7px; border-radius: 21px; background: var(--app-surface); box-shadow: none; } body.app-mode[data-view="companies"] .catalog-market-shortcuts > div:first-child { display: none; } body.app-mode[data-view="companies"] .catalog-market-chips.compact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; } body.app-mode[data-view="companies"] .catalog-market-chips.compact button { display: grid; min-width: 0; min-height: 46px; place-items: center; gap: 1px; padding: 5px 2px; border: 0; border-radius: 15px; color: var(--muted); background: transparent; font-size: 11.5px; } body.app-mode[data-view="companies"] .catalog-market-chips.compact button strong { font-size: 11px; } body.app-mode[data-view="companies"] .catalog-market-chips.compact button.active { color: var(--ink); background: var(--app-surface-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 18%, var(--line)); } .catalog-mobile-sort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0 0 10px; } .catalog-mobile-sort button { display: grid; grid-template-columns: auto minmax(0, 1fr); min-width: 0; min-height: 48px; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 17px; color: var(--muted); background: var(--app-surface); font: inherit; text-align: left; } .catalog-mobile-sort button i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 9px; color: var(--green); background: var(--green-soft); font-size: 11px; font-style: normal; font-weight: 900; } .catalog-mobile-sort button span { overflow: hidden; font-size: 11px; font-weight: 800; line-height: 1.15; } .catalog-mobile-sort button.active { border-color: color-mix(in srgb, var(--green) 34%, var(--line)); color: var(--ink); background: color-mix(in srgb, var(--green-soft) 34%, var(--app-surface-raised)); } .catalog-mobile-sort button:active { transform: scale(.96); } body.app-mode[data-view="companies"] .company-table { overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body.app-mode[data-view="companies"] .company-table .table-window-info { min-height: 45px; padding: 5px 4px 9px; border: 0; background: transparent; } body.app-mode[data-view="companies"] .company-table .table-window-info strong { font-size: 13px; } body.app-mode[data-view="companies"] .company-table .table-window-info small { display: none; } body.app-mode[data-view="companies"] .company-table .table-window-info .ghost-button { min-height: 34px; padding: 7px 10px; border-radius: 12px; font-size: 11px; } body.app-mode[data-view="companies"] .company-table tbody { gap: 7px; padding: 0; } body.app-mode[data-view="companies"] .company-table tbody tr { grid-template-columns: minmax(0, 1fr) auto 39px; min-height: 69px; gap: 2px 7px; padding: 9px; border-radius: 17px; background: var(--app-surface); box-shadow: 0 9px 24px rgba(3, 18, 13, .055); contain: layout paint; transition: border-color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease; } body.app-mode[data-view="companies"] .company-table tbody tr:active { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); background: color-mix(in srgb, var(--green-soft) 25%, var(--app-surface)); transform: scale(.985); } body.app-mode[data-view="companies"] .company-table .ticker-mark { width: 35px; height: 35px; border-radius: 11px; } body.app-mode[data-view="companies"] .company-table .table-company { gap: 6px; } body.app-mode[data-view="companies"] .company-table .watch-star { width: 23px; min-width: 23px; height: 32px; padding: 0; } body.app-mode[data-view="companies"] .company-table .company-copy strong { font-size: 11px; } body.app-mode[data-view="companies"] .company-table .company-copy small { font-size: 11px; } body.app-mode[data-view="companies"] .company-table tbody tr td:nth-child(3) { font-size: 11px; } body.app-mode[data-view="companies"] .company-table tbody tr td:nth-child(4) { font-size: 11.5px; font-weight: 800; } body.app-mode[data-view="companies"] .company-table tbody tr td:nth-child(8) { min-width: 39px; min-height: 39px; padding: 5px !important; border-radius: 13px !important; font-size: 11px; } body.app-mode[data-view="companies"] .load-more-row { margin-top: 9px; padding: 11px; border-radius: 17px; } body.app-mode[data-view="companies"] .load-more-row small { display: none; } body.app-mode[data-view="company"] .app-native-company-title { padding-top: 16px; } body.app-mode[data-view="company"] .app-native-company-title > div > span strong { font-size: clamp(22px, 7vw, 29px); } body.app-mode[data-view="company"] .app-native-quote { padding-top: 22px; } body.app-mode[data-view="company"] .app-native-quote > strong { font-size: clamp(48px, 14vw, 62px); } body.app-mode[data-view="company"] .app-native-chart { min-height: 226px; padding-top: 25px; } body.app-mode[data-view="company"] .app-native-chart .company-hero-spark { height: 184px; } body.app-mode[data-view="company"] .app-native-range button { min-height: 38px; } body.app-mode[data-view="company"] .app-native-position-button { min-height: 56px; margin-top: 18px; margin-bottom: 25px; } body.app-mode[data-view="company"] .app-native-position { padding-bottom: 28px; } body.app-mode[data-view="company"] .app-native-upcoming-track article { min-height: 174px; gap: 10px; padding: 18px; border-radius: 25px; } body.app-mode[data-view="company"] .app-native-upcoming-track article > strong { font-size: 21px; } body.app-mode[data-view="company"] .content > .analyst-brief, body.app-mode[data-view="company"] .content > .business-profile-panel, body.app-mode[data-view="company"] .content > .company-chart-grid, body.app-mode[data-view="company"] .content > .quote-session-panel, body.app-mode[data-view="company"] .content > .dashboard-grid, body.app-mode[data-view="company"] .content > .manual-ai-card, body.app-mode[data-view="portfolio"] .content > .dashboard-grid, body.app-mode[data-view="portfolio"] .content > .portfolio-currency-board, body.app-mode[data-view="portfolio"] .content > .portfolio-risk-panel, body.app-mode[data-view="portfolio"] .content > .portfolio-bottom-drawer { content-visibility: auto; contain-intrinsic-size: auto 620px; } :root[data-motion="on"] body.app-mode[data-view="companies"] .company-table tbody tr { animation: catalog-mobile-rise .38s cubic-bezier(.18,.82,.24,1) both; animation-delay: var(--row-delay, 0ms); } :root[data-motion="on"] body.app-mode[data-view="company"] .app-native-range button.active { animation: app-range-pop .32s cubic-bezier(.2,.8,.2,1) both; } } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="companies"] .catalog-primary-search, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="companies"] .catalog-market-shortcuts, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="companies"] .catalog-mobile-sort button, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="companies"] .company-table tbody tr { border-color: rgba(124, 168, 151, .13); background-color: #111715; } :root[data-motion="off"] .catalog-mobile-sort *, :root[data-motion="off"] body.app-mode[data-view="companies"] .company-table tbody tr, :root[data-motion="off"] body.app-mode[data-view="company"] .app-native-range button { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .catalog-mobile-sort *, body.app-mode[data-view="companies"] .company-table tbody tr, body.app-mode[data-view="company"] .app-native-range button { animation: none !important; transition: none !important; } } :root[data-motion="off"] body.app-mode .content, :root[data-motion="off"] body.app-mode .view-loader *, :root[data-motion="off"] body.app-mode .app-tabbar button::before, :root[data-motion="off"] body.app-mode .app-tabbar button i { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { body.app-mode .content, body.app-mode .view-loader *, body.app-mode .app-tabbar button::before, body.app-mode .app-tabbar button i { animation: none !important; transition: none !important; } } .market-calendar-export { gap: 8px; } .market-calendar-export .secondary-button, .market-calendar-export .text-button { width: 100%; justify-content: center; } .market-calendar-export code { display: block; width: min(100%, 310px); overflow: hidden; padding: 8px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; color: rgba(255,255,255,.62); background: rgba(4,20,15,.18); font: 700 8px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; } body.app-mode { --mobile-card-radius: 24px; --mobile-gap: 12px; background: radial-gradient(circle at 82% 4%, color-mix(in srgb, var(--brand-accent) 7%, transparent), transparent 22rem), var(--bg); } body.app-mode .content { width: min(100%, 920px); margin-inline: auto; } body.app-mode .content > .panel, body.app-mode .content > details.panel { border-color: color-mix(in srgb, var(--line) 78%, transparent); border-radius: var(--mobile-card-radius); box-shadow: 0 16px 46px color-mix(in srgb, var(--navy) 7%, transparent); } body.app-mode .content > .page-heading { position: relative; overflow: hidden; padding-block: 4px 8px; } body.app-mode .content > .page-heading h1 { max-width: 14ch; font-size: clamp(30px, 5vw, 50px); line-height: .98; letter-spacing: -.055em; } body.app-mode .content > .page-heading p { max-width: 62ch; margin-top: 9px; font-size: 11px; line-height: 1.55; } body.app-mode .panel-header { gap: 12px; padding-bottom: 14px; } body.app-mode .panel-title h2 { letter-spacing: -.025em; } body.app-mode .primary-button, body.app-mode .secondary-button, body.app-mode .ghost-button { min-height: 44px; border-radius: 14px; } body.app-mode .app-tabbar { border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: 0 -10px 34px color-mix(in srgb, var(--navy) 11%, transparent); backdrop-filter: blur(24px) saturate(1.35); -webkit-backdrop-filter: blur(24px) saturate(1.35); } body.app-mode .app-tabbar button { border-radius: 16px; } body.app-mode .app-tabbar button.active { color: var(--green); background: color-mix(in srgb, var(--green-soft) 74%, transparent); } .ah-quick .ah-tile > span { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid color-mix(in srgb, var(--brand-accent) 24%, var(--line)); border-radius: 15px; color: var(--green); background: radial-gradient(circle at 28% 20%, color-mix(in srgb, var(--brand-accent) 24%, transparent), transparent 55%), var(--card); box-shadow: 0 10px 24px color-mix(in srgb, var(--green) 8%, transparent); } .ah-quick .ah-tile svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .ah-quick .ah-tile:active > span { transform: scale(.92); } .catalog-primary-search { position: relative; z-index: 24; display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 9px; } .catalog-primary-search .local-search { width: 100%; } .catalog-search-results { top: calc(100% + 7px); left: 0; width: 100%; max-height: min(560px, calc(100vh - 170px)); } @media (max-width: 700px) { .catalog-search-results { position: absolute; top: calc(100% + 6px); right: 0; left: 0; width: 100%; max-height: min(62vh, 520px); backdrop-filter: none; } } .market-event-discussion{margin-top:14px;border:1px solid color-mix(in srgb,var(--border) 76%,var(--accent) 24%);border-radius:18px;background:color-mix(in srgb,var(--surface) 94%,var(--accent) 6%);overflow:hidden}.market-event-discussion>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;cursor:pointer;list-style:none;font-weight:800}.market-event-discussion>summary::-webkit-details-marker{display:none}.market-event-discussion>summary:after{content:"⌄";color:var(--muted);transition:transform .2s ease}.market-event-discussion[open]>summary:after{transform:rotate(180deg)}.market-event-discussion>summary>span:last-child{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}.market-event-discussion>summary>span:last-child span{padding:5px 8px;border-radius:999px;background:var(--surface);font-size:11px;white-space:nowrap}.market-event-social-bull{color:var(--success)!important}.market-event-social-bear{color:var(--danger)!important}.market-event-discussion>[data-market-event-discussion]{padding:0 15px 15px}.market-event-comment-form{display:grid;gap:10px;padding:14px;border-radius:15px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}.market-event-stance-picker{display:flex;gap:7px;flex-wrap:wrap}.market-event-stance-picker label{position:relative;display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--border);border-radius:999px;cursor:pointer;font-size:12px;font-weight:800}.market-event-stance-picker input{position:absolute;opacity:0;pointer-events:none}.market-event-stance-picker label:has(input:checked){box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 38%,transparent)}.market-event-stance-picker .bull:has(input:checked){color:var(--success);border-color:var(--success)}.market-event-stance-picker .bear:has(input:checked){color:var(--danger);border-color:var(--danger)}.market-event-comment-form>div:nth-child(2){display:flex;gap:8px;align-items:stretch}.market-event-comment-form textarea{min-width:0;flex:1;resize:vertical;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--surface);color:var(--text);font:inherit}.market-event-comment-form small{color:var(--muted)}.market-event-comments{display:grid;gap:8px;margin-top:10px}.market-event-comment{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:11px 4px;border-top:1px solid var(--border)}.market-event-comment header{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.market-event-comment header small{color:var(--muted);margin-left:auto}.market-event-comment p{margin:5px 0 0;line-height:1.5}.market-event-stance{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:900}.market-event-stance.bull{color:var(--success);background:color-mix(in srgb,var(--success) 12%,transparent)}.market-event-stance.bear{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}.market-event-stance.neutral{color:var(--muted);background:var(--surface-2)}.market-event-login{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:14px;background:var(--surface)}.market-event-discussion-loading{display:flex;align-items:center;gap:7px;padding:14px;color:var(--muted)}.market-event-discussion-loading i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:evraEventDot 1s ease-in-out infinite}.market-event-discussion-loading i:nth-child(2){animation-delay:.12s}.market-event-discussion-loading i:nth-child(3){animation-delay:.24s}@keyframes evraEventDot{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-5px);opacity:1}} @media(max-width:700px){.market-event-discussion>summary{align-items:flex-start;flex-direction:column}.market-event-discussion>summary>span:last-child{justify-content:flex-start}.market-event-comment-form>div:nth-child(2){flex-direction:column}.market-event-comment-form button{width:100%}.market-event-login{align-items:flex-start;flex-direction:column}.market-event-login button{width:100%}.market-event-comment header small{width:100%;margin-left:0}} .catalog-advanced-filters { overflow: clip; margin-bottom: 10px; padding: 0 !important; } .catalog-advanced-filters > summary { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; cursor: pointer; list-style: none; } .catalog-advanced-filters > summary::-webkit-details-marker { display: none; } .catalog-advanced-filters > summary > span { display: grid; gap: 2px; } .catalog-advanced-filters > summary small { color: var(--green); font-size: 11px; font-weight: 950; letter-spacing: .12em; } .catalog-advanced-filters > summary strong { color: var(--ink); font-size: 14px; } .catalog-advanced-filters > summary em { color: var(--muted); font-size: 11px; font-style: normal; } .catalog-advanced-filters > summary > i { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-soft); font-style: normal; transition: transform .2s ease; } .catalog-advanced-filters[open] > summary > i { transform: rotate(180deg); } .catalog-advanced-filters > .filters-bar { margin: 0; padding: 12px; } @media (max-width: 700px) { body.app-mode .main-area { overflow-x: clip; background: transparent; } body.app-mode .content { padding-inline: 12px; padding-top: max(12px, env(safe-area-inset-top)); } body.app-mode .content > * { max-width: 100%; } body.app-mode .content > .panel, body.app-mode .content > details.panel { margin-bottom: var(--mobile-gap); border-radius: 22px; box-shadow: 0 11px 34px color-mix(in srgb, var(--navy) 6%, transparent); } body.app-mode .content > .page-heading { min-height: 92px; align-items: end; margin: 0 2px 10px; } body.app-mode .content > .page-heading h1 { max-width: none; font-size: clamp(31px, 10vw, 44px); } body.app-mode .content > .page-heading p { display: -webkit-box; overflow: hidden; max-width: 42ch; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.app-mode .panel-header { align-items: flex-start; padding: 2px 1px 12px; } body.app-mode .panel-title h2 { font-size: 18px; } body.app-mode .panel-title p { display: -webkit-box; overflow: hidden; margin-top: 4px; font-size: 11.5px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.app-mode .data-stamp { max-width: 128px; padding: 6px 8px; font-size: 11px; } body.app-mode .catalog-primary-search { margin-bottom: 8px; } body.app-mode .catalog-advanced-filters > summary { display: flex; } body.app-mode .catalog-advanced-filters > .filters-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 0 10px 10px; } body.app-mode .catalog-advanced-filters > .filters-bar > * { width: 100%; min-width: 0; } body.app-mode .catalog-advanced-filters .watch-filter { justify-content: center; } body.app-mode .filters, body.app-mode .company-filters, body.app-mode .market-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scroll-snap-type: x proximity; scrollbar-width: none; } body.app-mode .filters::-webkit-scrollbar, body.app-mode .company-filters::-webkit-scrollbar, body.app-mode .market-filters::-webkit-scrollbar { display: none; } body.app-mode .filters > *, body.app-mode .company-filters > *, body.app-mode .market-filters > * { flex: 0 0 auto; scroll-snap-align: start; } body.app-mode .table-wrap { border-radius: 17px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand-accent) 60%, transparent) transparent; } body.app-mode .table-wrap::-webkit-scrollbar { height: 5px; } body.app-mode .table-wrap::-webkit-scrollbar-thumb { border-radius: 99px; background: color-mix(in srgb, var(--brand-accent) 65%, transparent); } body.app-mode[data-view="company"] .company-hero, body.app-mode[data-view="portfolio"] .portfolio-hero, body.app-mode[data-view="calendar"] .market-calendar-hero { border-radius: 26px; } body.app-mode[data-view="company"] .company-hero, body.app-mode[data-view="portfolio"] .portfolio-hero { overflow: hidden; } .market-calendar-export code { width: 100%; } .ah-quick { grid-template-columns: repeat(6, minmax(64px, 1fr)); overflow-x: auto; margin-inline: -12px; padding: 3px 12px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; } .ah-quick::-webkit-scrollbar { display: none; } .ah-quick .ah-tile { min-width: 66px; scroll-snap-align: start; } .ah-quick .ah-tile > span { width: 46px; height: 46px; border-radius: 16px; } .ah-upcoming-track, .market-calendar-featured { scroll-padding-inline: 12px; overscroll-behavior-inline: contain; } .market-calendar-export .primary-button, .market-calendar-export .secondary-button { min-height: 48px; } } @media (max-width: 430px) { body.app-mode .content { padding-inline: 10px; } body.app-mode .content > .panel, body.app-mode .content > details.panel { border-radius: 20px; } body.app-mode .app-tabbar { right: 8px; bottom: max(7px, env(safe-area-inset-bottom)); left: 8px; border-radius: 22px; } } @keyframes evra-v245-enter { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes evra-v245-breathe { 0%, 100% { opacity: .34; transform: translate3d(0, 0, 0) scale(1); } 50% { opacity: .62; transform: translate3d(13px, -9px, 0) scale(1.08); } } @keyframes evra-v245-chart-glow { 0%, 100% { filter: drop-shadow(0 8px 20px color-mix(in srgb, currentColor 18%, transparent)); } 50% { filter: drop-shadow(0 10px 28px color-mix(in srgb, currentColor 34%, transparent)); } } @keyframes evra-v245-active-tab { from { transform: translateX(-50%) scaleX(.2); opacity: 0; } to { transform: translateX(-50%) scaleX(1); opacity: 1; } } body.app-mode { --v245-radius-xl: 30px; --v245-radius-lg: 23px; --v245-glass: color-mix(in srgb, var(--app-surface-raised) 78%, transparent); } body.app-mode .content { isolation: isolate; } body.app-mode .content::before { position: fixed; z-index: -1; top: 9vh; right: -16vw; width: min(52vw, 620px); height: min(52vw, 620px); border-radius: 50%; background: color-mix(in srgb, var(--green) 7%, transparent); content: ""; filter: blur(90px); pointer-events: none; } body.app-mode .panel, body.app-mode .ah-panel, body.app-mode .business-profile-panel, body.app-mode .analyst-brief { border-color: color-mix(in srgb, var(--line) 70%, transparent); } body.app-mode .panel-header { align-items: end; } body.app-mode .panel-title h2, body.app-mode .panel-title h3 { text-wrap: balance; } body.app-mode .panel-title p { max-width: 62ch; line-height: 1.55; } body.app-mode[data-view="apphome"] .app-native-home-header { position: relative; } body.app-mode[data-view="apphome"] .app-native-home-header::after { position: absolute; right: 12%; bottom: 4px; width: 80px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--green) 16%, transparent); content: ""; filter: blur(24px); pointer-events: none; } body.app-mode[data-view="apphome"] .ah-app-tabs { border-color: color-mix(in srgb, var(--green) 10%, var(--line)); background: color-mix(in srgb, var(--app-surface) 82%, transparent); box-shadow: 0 16px 42px rgba(0, 0, 0, .07); backdrop-filter: blur(22px) saturate(1.18); } body.app-mode[data-view="apphome"] .ah-app-tabs button { position: relative; } body.app-mode[data-view="apphome"] .ah-app-tabs button.active::after { position: absolute; right: 24%; bottom: 5px; left: 24%; height: 2px; border-radius: 99px; background: var(--green); content: ""; } body.app-mode[data-view="apphome"] .ah-greet strong { text-wrap: balance; } body.app-mode[data-view="apphome"] .ah-greet small { letter-spacing: .015em; } body.app-mode[data-view="apphome"] .ah-value-card, body.app-mode[data-view="apphome"] .ah-dividend-card { border-radius: var(--v245-radius-xl); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 56px rgba(5, 18, 14, .13); } body.app-mode[data-view="apphome"] .ah-value-card::after { position: absolute; z-index: 0; top: -52px; right: -42px; width: 170px; height: 170px; border: 1px solid color-mix(in srgb, var(--green) 19%, transparent); border-radius: 50%; box-shadow: 0 0 0 26px color-mix(in srgb, var(--green) 4%, transparent), 0 0 0 58px color-mix(in srgb, var(--green) 2%, transparent); content: ""; pointer-events: none; } body.app-mode[data-view="apphome"] .ah-value-card > strong, body.app-mode[data-view="apphome"] .ah-dividend-card > strong, .app-native-quote > strong { font-variant-numeric: tabular-nums; } body.app-mode[data-view="apphome"] .ah-quick { align-items: start; } body.app-mode[data-view="apphome"] .ah-quick .ah-tile { min-width: 0; } body.app-mode[data-view="apphome"] .ah-quick .ah-tile > span { border-color: color-mix(in srgb, var(--green) 14%, var(--line)); background: radial-gradient(circle at 75% 18%, color-mix(in srgb, var(--green) 11%, transparent), transparent 42%), color-mix(in srgb, var(--app-surface-raised) 92%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 12px 30px rgba(0, 0, 0, .065); } body.app-mode[data-view="apphome"] .ah-quick .ah-tile small { color: color-mix(in srgb, var(--ink) 88%, var(--muted)); font-weight: 720; } body.app-mode[data-view="apphome"] .ah-upcoming-card, .app-native-upcoming-track article { border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--v245-radius-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 22px 48px rgba(3, 12, 9, .18); } body.app-mode[data-view="apphome"] .ah-upcoming-card > strong, .app-native-upcoming-track article > strong { text-wrap: balance; } body.app-mode[data-view="apphome"] .ah-mover, body.app-mode[data-view="apphome"] .ah-news-item { transition: background .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1); } body.app-mode[data-view="apphome"] .ah-mover:active, body.app-mode[data-view="apphome"] .ah-news-item:active { background: color-mix(in srgb, var(--green) 7%, var(--surface-soft)); transform: scale(.988); } body.app-mode[data-view="company"] .app-native-company { position: relative; } body.app-mode[data-view="company"] .app-native-company::before { position: absolute; z-index: -1; top: 80px; right: -110px; width: 280px; height: 280px; border-radius: 50%; background: color-mix(in srgb, var(--green) 9%, transparent); content: ""; filter: blur(72px); pointer-events: none; } body.app-mode[data-view="company"] .app-native-company-nav button { border: 1px solid transparent; } body.app-mode[data-view="company"] .app-native-company-nav button:active { border-color: color-mix(in srgb, var(--green) 19%, var(--line)); } body.app-mode[data-view="company"] .app-native-company-title .hero-company-logo { box-shadow: 0 13px 30px rgba(0, 0, 0, .17), 0 0 0 1px color-mix(in srgb, var(--line) 78%, transparent); } body.app-mode[data-view="company"] .app-native-followers { border: 1px solid color-mix(in srgb, var(--line) 68%, transparent); background: var(--v245-glass); backdrop-filter: blur(12px); } body.app-mode[data-view="company"] .app-native-chart { overflow: hidden; border-radius: 0 0 var(--v245-radius-xl) var(--v245-radius-xl); } body.app-mode[data-view="company"] .app-native-range { padding: 6px; border: 1px solid color-mix(in srgb, var(--line) 66%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--app-surface) 80%, transparent); backdrop-filter: blur(18px); } body.app-mode[data-view="company"] .app-native-range button { min-height: 44px; border-radius: 14px; transition: color .2s ease, background .2s ease, transform .2s ease; } body.app-mode[data-view="company"] .app-native-range button:active { transform: scale(.92); } body.app-mode[data-view="company"] .app-native-position { border-top: 1px solid color-mix(in srgb, var(--line) 58%, transparent); } body.app-mode[data-view="company"] .app-native-position-grid { overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 68%, transparent); border-radius: var(--v245-radius-lg); background: color-mix(in srgb, var(--app-surface-raised) 90%, transparent); } body.app-mode .app-tabbar { border-color: color-mix(in srgb, var(--green) 9%, var(--line)); background: color-mix(in srgb, var(--app-surface) 88%, transparent); box-shadow: 0 -16px 45px rgba(0, 0, 0, .10); backdrop-filter: blur(24px) saturate(1.25); } body.app-mode .app-tabbar button.active i { border-radius: 12px; background: color-mix(in srgb, var(--green) 11%, transparent); box-shadow: 0 8px 20px color-mix(in srgb, var(--green) 9%, transparent); } body.app-mode[data-view="company"] .company-hero.company-hero-premium { border-color: rgba(117, 231, 186, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 30px 70px rgba(2, 18, 13, .25); } body.app-mode[data-view="company"] .company-hero-market-art { border: 1px solid rgba(255, 255, 255, .11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); backdrop-filter: blur(16px); } body.app-mode[data-view="company"] .company-hero-quick span { border: 1px solid rgba(255, 255, 255, .055); } body.app-mode[data-view="company"] .company-intel-card, body.app-mode[data-view="company"] .report-metric, body.app-mode[data-view="company"] .metric-card { transition: border-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1); } @media (hover:hover) and (pointer:fine) { body.app-mode[data-view="company"] .company-intel-card:hover, body.app-mode[data-view="company"] .report-metric:hover, body.app-mode[data-view="company"] .metric-card:hover { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); box-shadow: 0 20px 42px rgba(0, 0, 0, .09); transform: translateY(-3px); } } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode { --v245-glass: rgba(18, 24, 21, .82); } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .content::before { background: rgba(64, 220, 159, .055); } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .panel, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .ah-panel, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .business-profile-panel, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .analyst-brief { border-color: rgba(151, 187, 171, .105); background: #101513; box-shadow: 0 22px 54px rgba(0, 0, 0, .24); } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="apphome"] .ah-app-tabs, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="company"] .app-native-range, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .app-tabbar { border-color: rgba(109, 201, 165, .11); background: rgba(10, 14, 12, .88); } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="apphome"] .ah-quick .ah-tile > span { border-color: rgba(119, 205, 172, .10); background: radial-gradient(circle at 78% 16%, rgba(63, 218, 160, .085), transparent 42%), #151b18; } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="company"] .app-native-position-grid { border-color: rgba(136, 181, 161, .11); background: #111714; } :root[data-motion="on"] body.app-mode .ah-anim { animation: evra-v245-enter .64s cubic-bezier(.18, .82, .24, 1) both; animation-delay: calc(var(--d, 0) * 75ms); } :root[data-motion="on"] body.app-mode[data-view="apphome"] .app-native-home-header::after, :root[data-motion="on"] body.app-mode[data-view="company"] .app-native-company::before { animation: evra-v245-breathe 7.5s ease-in-out infinite; } :root[data-motion="on"] body.app-mode[data-view="company"] .app-native-chart .company-hero-spark { animation: evra-v245-chart-glow 3.6s ease-in-out infinite; } :root[data-motion="on"] body.app-mode[data-view="apphome"] .ah-app-tabs button.active::after { animation: evra-v245-active-tab .35s cubic-bezier(.2, .8, .2, 1) both; } @media (max-width: 700px) { body.app-mode { --v245-radius-xl: 27px; --v245-radius-lg: 21px; } body.app-mode[data-view="apphome"] .ah-home-card-row { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 10px; } body.app-mode[data-view="apphome"] .ah-value-card, body.app-mode[data-view="apphome"] .ah-dividend-card { min-width: 0; min-height: 214px; padding: 19px 16px; } body.app-mode[data-view="apphome"] .ah-value-card > strong, body.app-mode[data-view="apphome"] .ah-dividend-card > strong { font-size: clamp(29px, 8.6vw, 37px); } body.app-mode[data-view="apphome"] .ah-value-card > p, body.app-mode[data-view="apphome"] .ah-dividend-card > small { font-size: 12px; line-height: 1.45; } body.app-mode[data-view="apphome"] .ah-quick { grid-auto-columns: 68px; gap: 13px; margin-right: calc(var(--app-screen-pad) * -1); padding: 1px var(--app-screen-pad) 8px 1px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } body.app-mode[data-view="apphome"] .ah-quick::-webkit-scrollbar { display: none; } body.app-mode[data-view="apphome"] .ah-quick .ah-tile { width: 68px; scroll-snap-align: start; } body.app-mode[data-view="apphome"] .ah-quick .ah-tile > span { width: 58px; height: 58px; margin-inline: auto; border-radius: 19px; } body.app-mode[data-view="apphome"] .ah-quick .ah-tile small { margin-top: 8px; font-size: 11.5px; } body.app-mode[data-view="apphome"] .ah-upcoming { margin-top: 20px; } body.app-mode[data-view="apphome"] .ah-upcoming-track { grid-auto-columns: min(82vw, 315px); } body.app-mode[data-view="company"] .app-native-company-nav { min-height: 56px; } body.app-mode[data-view="company"] .app-native-company-title { padding-top: 21px; } body.app-mode[data-view="company"] .app-native-quote { padding-top: 28px; } body.app-mode[data-view="company"] .app-native-chart { min-height: 285px; } body.app-mode[data-view="company"] .app-native-position-button { min-height: 64px; border-radius: 22px; } } :root[data-motion="off"] body.app-mode .ah-anim, :root[data-motion="off"] body.app-mode[data-view="apphome"] .app-native-home-header::after, :root[data-motion="off"] body.app-mode[data-view="company"] .app-native-company::before, :root[data-motion="off"] body.app-mode[data-view="company"] .app-native-chart .company-hero-spark, :root[data-motion="off"] body.app-mode[data-view="apphome"] .ah-app-tabs button.active::after { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { body.app-mode .ah-anim, body.app-mode[data-view="apphome"] .app-native-home-header::after, body.app-mode[data-view="company"] .app-native-company::before, body.app-mode[data-view="company"] .app-native-chart .company-hero-spark, body.app-mode[data-view="apphome"] .ah-app-tabs button.active::after { animation: none !important; transition: none !important; } } :root[data-motion="off"] .ah-quick .ah-tile > span { transition: none !important; } :root:is([data-theme="dark"],[data-theme="cyber"]) body { background: radial-gradient(circle at 88% -8%, rgba(50, 199, 148, .075), transparent 28rem), radial-gradient(circle at 22% 10%, rgba(75, 111, 255, .045), transparent 24rem), var(--bg); } :root:is([data-theme="dark"],[data-theme="cyber"]) body:not(.home-view) { background: radial-gradient(circle at 28% -12%, rgba(53, 199, 148, .075), transparent 30%), radial-gradient(circle at 96% 4%, rgba(120, 230, 187, .04), transparent 24%), var(--bg); background-attachment: fixed; } :root:is([data-theme="dark"],[data-theme="cyber"]) .topbar { border-bottom-color: rgba(139, 166, 155, .16); background: rgba(7, 11, 13, .88); box-shadow: 0 12px 36px rgba(0, 0, 0, .3); } :root:is([data-theme="dark"],[data-theme="cyber"]) .sidebar { border-right: 1px solid rgba(129, 164, 149, .11); background: radial-gradient(circle at 12% 2%, rgba(88, 217, 170, .1), transparent 25%), linear-gradient(180deg, #09110f, #070b0d 72%); } :root:is([data-theme="dark"],[data-theme="cyber"]) .nav-item { color: #9cafA6; } :root:is([data-theme="dark"],[data-theme="cyber"]) .nav-item:hover { background: rgba(120, 230, 187, .075); color: #f4faf7; } :root:is([data-theme="dark"],[data-theme="cyber"]) .nav-item.active { border: 1px solid rgba(88, 217, 170, .16); background: linear-gradient(90deg, rgba(88, 217, 170, .16), rgba(88, 217, 170, .035) 78%), #0d1b18; color: #f7fcfa; box-shadow: inset 3px 0 0 var(--green); } :root:is([data-theme="dark"],[data-theme="cyber"]) .panel, :root:is([data-theme="dark"],[data-theme="cyber"]) .stat-card, :root:is([data-theme="dark"],[data-theme="cyber"]) details.panel, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .content > .panel, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .content > details.panel { border-color: rgba(144, 171, 160, .18); background: linear-gradient(155deg, rgba(255, 255, 255, .018), transparent 42%), var(--card); box-shadow: 0 1px 0 rgba(255, 255, 255, .018), 0 20px 50px rgba(0, 0, 0, .3); } :root:is([data-theme="dark"],[data-theme="cyber"]) .panel-header, :root:is([data-theme="dark"],[data-theme="cyber"]) .table-window-info, :root:is([data-theme="dark"],[data-theme="cyber"]) .load-more-row { border-color: rgba(144, 171, 160, .16); } :root:is([data-theme="dark"],[data-theme="cyber"]) input, :root:is([data-theme="dark"],[data-theme="cyber"]) select, :root:is([data-theme="dark"],[data-theme="cyber"]) textarea, :root:is([data-theme="dark"],[data-theme="cyber"]) .local-search, :root:is([data-theme="dark"],[data-theme="cyber"]) .global-search:focus-within, :root:is([data-theme="dark"],[data-theme="cyber"]) .filter-select, :root:is([data-theme="dark"],[data-theme="cyber"]) .admin-search-field { border-color: rgba(144, 171, 160, .22); background-color: #10191c; color: var(--ink); } :root:is([data-theme="dark"],[data-theme="cyber"]) input::placeholder, :root:is([data-theme="dark"],[data-theme="cyber"]) textarea::placeholder { color: #7f918a; } :root:is([data-theme="dark"],[data-theme="cyber"]) select option { color: var(--ink); background: #10191c; } :root:is([data-theme="dark"],[data-theme="cyber"]) kbd { border-color: rgba(144, 171, 160, .22); background: var(--surface-soft); color: var(--muted); box-shadow: none; } :root:is([data-theme="dark"],[data-theme="cyber"]) .primary-button, :root:is([data-theme="dark"],[data-theme="cyber"]) .view-tabs button.active, :root:is([data-theme="dark"],[data-theme="cyber"]) .web-section-nav button.active, :root:is([data-theme="dark"],[data-theme="cyber"]) .app-section-nav button.active { border-color: rgba(120, 230, 187, .16); background: linear-gradient(135deg, var(--action), #126246); color: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .1); } :root:is([data-theme="dark"],[data-theme="cyber"]) .primary-button:hover { background: linear-gradient(135deg, #1a8865, #146d4f); } :root:is([data-theme="dark"],[data-theme="cyber"]) .secondary-button, :root:is([data-theme="dark"],[data-theme="cyber"]) .ghost-button, :root:is([data-theme="dark"],[data-theme="cyber"]) .watch-filter, :root:is([data-theme="dark"],[data-theme="cyber"]) .theme-swatch { border-color: rgba(144, 171, 160, .2); background: var(--surface-soft); color: var(--ink); } :root:is([data-theme="dark"],[data-theme="cyber"]) .theme-swatch.active { border-color: var(--green); background: #18342d; box-shadow: inset 0 0 0 1px rgba(88, 217, 170, .18), 0 10px 26px rgba(0, 0, 0, .26); } :root:is([data-theme="dark"],[data-theme="cyber"]) .secondary-button:hover, :root:is([data-theme="dark"],[data-theme="cyber"]) .ghost-button:hover, :root:is([data-theme="dark"],[data-theme="cyber"]) .watch-filter:hover { border-color: rgba(88, 217, 170, .42); background: color-mix(in srgb, var(--green-soft) 52%, var(--surface-soft)); } :root:is([data-theme="dark"],[data-theme="cyber"]) .feedback-chip span { background: var(--action); } :root:is([data-theme="dark"],[data-theme="cyber"]) .feedback-chip, :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-market-chips button.active, :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-market-chips button:hover, :root:is([data-theme="dark"],[data-theme="cyber"]) .watch-filter.active { border-color: rgba(88, 217, 170, .34); background: var(--green-soft); color: var(--green); } :root:is([data-theme="dark"],[data-theme="cyber"]) .global-search-results { border-color: rgba(88, 217, 170, .22); background: rgba(14, 22, 25, .97); box-shadow: 0 28px 90px rgba(0, 0, 0, .6); } :root:is([data-theme="dark"],[data-theme="cyber"]) .global-search-results > button:hover, :root:is([data-theme="dark"],[data-theme="cyber"]) .global-search-results > button.active { border-color: rgba(88, 217, 170, .3); background: #19272a; box-shadow: none; } :root:is([data-theme="dark"],[data-theme="cyber"]) .ticker-mark, :root:is([data-theme="dark"],[data-theme="cyber"]) .index-logo, :root:is([data-theme="dark"],[data-theme="cyber"]) .comparison-index-mark { border-color: rgba(144, 171, 160, .24); background: radial-gradient(circle at 28% 18%, rgba(120, 230, 187, .18), transparent 36%), #182428; box-shadow: 0 9px 22px rgba(0, 0, 0, .28); } :root:is([data-theme="dark"],[data-theme="cyber"]) .ticker-mark.has-logo img, :root:is([data-theme="dark"],[data-theme="cyber"]) .index-logo img, :root:is([data-theme="dark"],[data-theme="cyber"]) .index-chip-logo { background: #f1f5f3; box-shadow: inset 0 0 0 1px rgba(7, 18, 14, .1); } :root:is([data-theme="dark"],[data-theme="cyber"]) .company-table { border: 1px solid rgba(144, 171, 160, .17); background: var(--card); } :root:is([data-theme="dark"],[data-theme="cyber"]) .company-table th { border-color: rgba(144, 171, 160, .16); background: #182328; color: #aebeb7; } :root:is([data-theme="dark"],[data-theme="cyber"]) .company-table tbody tr { background: #111a1d; } :root:is([data-theme="dark"],[data-theme="cyber"]) .company-table tbody tr:nth-child(even) { background: #141f22; } :root:is([data-theme="dark"],[data-theme="cyber"]) .company-table tbody tr:hover, :root:is([data-theme="dark"],[data-theme="cyber"]) .company-table tbody tr.active-row { background: #1a2c29; } :root:is([data-theme="dark"],[data-theme="cyber"]) .company-table td { border-color: rgba(144, 171, 160, .13); } :root:is([data-theme="dark"],[data-theme="cyber"]) .company-copy-rich em { border-color: rgba(88, 217, 170, .18); background: #182629; color: #c7d5cf; box-shadow: none; } :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-radar-panel, :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-market-shortcuts, :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-quality-panel, :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-groups-panel, :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-advanced-filters { border-color: rgba(144, 171, 160, .18); background: radial-gradient(circle at 96% 0, rgba(88, 217, 170, .055), transparent 34%), var(--card); box-shadow: 0 18px 44px rgba(0, 0, 0, .24); } :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-stat-grid article, :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-quality-grid article, :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-stat-grid article.data-fresh, :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-quality-grid article.positive { border-color: rgba(88, 217, 170, .2); background: #172529; } :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-stat-grid article.data-proxy { border-color: rgba(242, 189, 97, .24); background: #262218; } :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-stat-grid article.data-demo, :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-quality-grid article.negative { border-color: rgba(255, 133, 141, .24); background: #291a20; } :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-group-card, :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-hot-list button, :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-gap-list button, :root:is([data-theme="dark"],[data-theme="cyber"]) .index-overview-strip article { border-color: rgba(144, 171, 160, .18); background: var(--surface-soft); color: var(--ink); box-shadow: none; } :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-group-card:hover, :root:is([data-theme="dark"],[data-theme="cyber"]) .catalog-group-card.active { border-color: rgba(88, 217, 170, .4); background: #1a302b; } :root:is([data-theme="dark"],[data-theme="cyber"]) .chart-grid-line { stroke: var(--chart-grid); } :root:is([data-theme="dark"],[data-theme="cyber"]) .chart-axis-label { fill: #9cafA6; } :root:is([data-theme="dark"],[data-theme="cyber"]) .range-tabs, :root:is([data-theme="dark"],[data-theme="cyber"]) .view-tabs, :root:is([data-theme="dark"],[data-theme="cyber"]) .interval-tabs { border-color: rgba(144, 171, 160, .18); background: #0d1518; } :root:is([data-theme="dark"],[data-theme="cyber"]) .range-tabs button.active, :root:is([data-theme="dark"],[data-theme="cyber"]) .interval-tabs button.active { background: var(--surface-soft); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(144, 171, 160, .16); } :root:is([data-theme="dark"],[data-theme="cyber"]) .modal-backdrop { background: rgba(0, 0, 0, .74); backdrop-filter: blur(10px); } :root:is([data-theme="dark"],[data-theme="cyber"]) .modal, :root:is([data-theme="dark"],[data-theme="cyber"]) .news-modal, :root:is([data-theme="dark"],[data-theme="cyber"]) .social-studio-modal.social-studio-v2 { border: 1px solid rgba(144, 171, 160, .22); background: #10181b; color: var(--ink); box-shadow: 0 38px 110px rgba(0, 0, 0, .72); } :root:is([data-theme="dark"],[data-theme="cyber"]) .modal-actions { background: #10181b; } :root:is([data-theme="dark"],[data-theme="cyber"]) .news-modal-mini-card, :root:is([data-theme="dark"],[data-theme="cyber"]) .news-modal-section, :root:is([data-theme="dark"],[data-theme="cyber"]) .news-modal-section.source, :root:is([data-theme="dark"],[data-theme="cyber"]) .news-modal-section.context, :root:is([data-theme="dark"],[data-theme="cyber"]) .news-modal-section.verdict, :root:is([data-theme="dark"],[data-theme="cyber"]) .news-expanded { border-color: rgba(144, 171, 160, .18); background: var(--surface-soft); color: var(--ink); box-shadow: none; } :root:is([data-theme="dark"],[data-theme="cyber"]) .news-modal-section.source, :root:is([data-theme="dark"],[data-theme="cyber"]) .news-modal-section.verdict { border-left-color: var(--green); background: #142a25; } :root:is([data-theme="dark"],[data-theme="cyber"]) .news-modal-section.context { border-left-color: var(--amber); background: #282319; } :root:is([data-theme="dark"],[data-theme="cyber"]) .news-modal-counter, :root:is([data-theme="dark"],[data-theme="cyber"]) .news-modal-meta > span { border-color: rgba(144, 171, 160, .18); background: #192429; color: var(--muted); } :root:is([data-theme="dark"],[data-theme="cyber"]) .report-assessment-score { border: 1px solid rgba(88, 217, 170, .28); background: #102a24; color: var(--ink); } :root:is([data-theme="dark"],[data-theme="cyber"]) .reason-item, :root:is([data-theme="dark"],[data-theme="cyber"]) .decision-main p { color: var(--muted); } :root:is([data-theme="dark"],[data-theme="cyber"]) .badge.neutral, :root:is([data-theme="dark"],[data-theme="cyber"]) .score-chip.neutral { border-color: rgba(242, 189, 97, .25); background: var(--amber-soft); color: var(--amber); } :root:is([data-theme="dark"],[data-theme="cyber"]) .landing-faq-item, :root:is([data-theme="dark"],[data-theme="cyber"]) .personal-command-card, :root:is([data-theme="dark"],[data-theme="cyber"]) .dashboard-watch-card, :root:is([data-theme="dark"],[data-theme="cyber"]) .private-empty-ideas, :root:is([data-theme="dark"],[data-theme="cyber"]) .my-profile-side, :root:is([data-theme="dark"],[data-theme="cyber"]) .community-stats span, :root:is([data-theme="dark"],[data-theme="cyber"]) .public-social-strip span, :root:is([data-theme="dark"],[data-theme="cyber"]) .public-share-form, :root:is([data-theme="dark"],[data-theme="cyber"]) .profile-privacy-pill, :root:is([data-theme="dark"],[data-theme="cyber"]) .forum-hero-stats span, :root:is([data-theme="dark"],[data-theme="cyber"]) .watchlist-suggestion-card, :root:is([data-theme="dark"],[data-theme="cyber"]) .user-onboarding-section, :root:is([data-theme="dark"],[data-theme="cyber"]) .user-onboarding-summary, :root:is([data-theme="dark"],[data-theme="cyber"]) .data-gap-grid article, :root:is([data-theme="dark"],[data-theme="cyber"]) .score-audit-grid article, :root:is([data-theme="dark"],[data-theme="cyber"]) .financial-data-passport article, :root:is([data-theme="dark"],[data-theme="cyber"]) .expectation-import-stats article, :root:is([data-theme="dark"],[data-theme="cyber"]) .expectation-worklist-groups span, :root:is([data-theme="dark"],[data-theme="cyber"]) .automation-step, :root:is([data-theme="dark"],[data-theme="cyber"]) .report-automation-footer span, :root:is([data-theme="dark"],[data-theme="cyber"]) .file-drop, :root:is([data-theme="dark"],[data-theme="cyber"]) .report-expectation-panel, :root:is([data-theme="dark"],[data-theme="cyber"]) .feed-health-next, :root:is([data-theme="dark"],[data-theme="cyber"]) .source-blocker-list article, :root:is([data-theme="dark"],[data-theme="cyber"]) .view-tabs.subtle-tabs, :root:is([data-theme="dark"],[data-theme="cyber"]) .premium-preview-card { border-color: rgba(144, 171, 160, .18); background: var(--surface-soft); color: var(--ink); box-shadow: none; } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .app-tabbar { border-color: rgba(144, 171, 160, .2); background: rgba(14, 22, 25, .94); box-shadow: 0 -14px 38px rgba(0, 0, 0, .48); } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .app-tabbar button.active { background: #15332b; color: var(--green); } :root:is([data-theme="dark"],[data-theme="cyber"]) .ah-quick .ah-tile > span { border-color: rgba(88, 217, 170, .22); background: radial-gradient(circle at 28% 20%, rgba(120, 230, 187, .13), transparent 55%), #172226; box-shadow: 0 11px 28px rgba(0, 0, 0, .28); } :root:is([data-theme="dark"],[data-theme="cyber"]) .web-section-nav { border-color: rgba(144, 171, 160, .18); background: rgba(14, 22, 25, .9); box-shadow: 0 16px 42px rgba(0, 0, 0, .34); } :root:is([data-theme="dark"],[data-theme="cyber"]) *::-webkit-scrollbar-track { background: #0b1214; } :root:is([data-theme="dark"],[data-theme="cyber"]) *::-webkit-scrollbar-thumb { border-color: #0b1214; background: linear-gradient(180deg, #267e61, #3ac493); } @media (max-width: 700px) { :root:is([data-theme="dark"],[data-theme="cyber"]) .company-table tbody tr, :root:is([data-theme="dark"],[data-theme="cyber"]) .company-table tbody tr:nth-child(even) { border-color: rgba(144, 171, 160, .2); background: radial-gradient(circle at 100% 0, rgba(88, 217, 170, .055), transparent 42%), #141f22; box-shadow: 0 13px 32px rgba(0, 0, 0, .28); } :root:is([data-theme="dark"],[data-theme="cyber"]) .company-table tbody tr:active { background: #1a2c29; } } .company-intelligence-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 10px; margin: 14px 0 16px; overflow-x: auto; padding: 2px 2px 9px; overscroll-behavior-inline: contain; scrollbar-width: none; scroll-snap-type: x mandatory; } .company-intelligence-rail::-webkit-scrollbar { display: none; } .company-intel-card { position: relative; display: grid; min-height: 156px; gap: 8px; align-content: start; overflow: hidden; padding: 17px; border: 1px solid var(--line); border-radius: 22px; color: var(--ink); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--green) 9%, transparent), transparent 42%), var(--card); box-shadow: var(--shadow); scroll-snap-align: start; transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; } .company-intel-card::after { position: absolute; inset: auto 16px 0; height: 3px; border-radius: 99px 99px 0 0; background: var(--green); content: ""; opacity: .72; } .company-intel-card.report::after { background: #5279ef; } .company-intel-card.dividend::after { background: #f3a22f; } .company-intel-card.news::after { background: #8d61e8; } .company-intel-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--green) 28%, var(--line)); } .company-intel-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .company-intel-top > span { color: var(--muted); font-size: 11px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; } .company-intel-top > b, .intel-quality, .intel-tone { padding: 5px 7px; border-radius: 999px; color: var(--muted); background: var(--surface-soft); font-size: 11px; font-weight: 950; white-space: nowrap; } .intel-quality.confirmed, .event-quality.confirmed { color: var(--green); background: var(--green-soft); } .intel-quality.external, .event-quality.external { color: #4e70d8; background: color-mix(in srgb, #5579ee 12%, var(--card)); } .intel-quality.estimate, .event-quality.estimate { color: #a86d08; background: var(--amber-soft); } .intel-tone.positive { color: var(--green); background: var(--green-soft); } .intel-tone.negative { color: var(--red); background: var(--red-soft); } .company-intel-card > strong { font-size: 15px; line-height: 1.25; letter-spacing: -.02em; } .company-intel-card > p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .company-intel-card > small { margin-top: auto; color: var(--muted); font-size: 11px; line-height: 1.5; } .company-intel-card > small a { color: var(--green); font-weight: 900; text-decoration: none; } .market-event-kicker > em { padding: 4px 7px; border-radius: 999px; color: #9a6810; background: var(--amber-soft); font-size: 11px; font-style: normal; font-weight: 900; } .market-event-tags .event-quality { font-weight: 950; } .market-event-card.quality-estimate { border-style: dashed; } .market-event-card.quality-estimate::before { background: #d5a13f; } .market-event-context p + p { margin-top: 5px; } .market-event-context > small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.5; } .calendar-action.locked { cursor: not-allowed; opacity: .72; } .calendar-action.locked span { color: #9a6810; background: var(--amber-soft); } .market-calendar-feature-card.quality-estimate { filter: saturate(.78); } .ah-section-kicker { display: block; margin-bottom: 4px; color: var(--green); font-size: 11px; font-weight: 950; letter-spacing: .12em; } .ah-news { display: grid; gap: 8px; } .ah-news-item { display: grid; gap: 6px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); cursor: pointer; } .ah-news-item > div { display: flex; align-items: center; gap: 6px; } .ah-news-item > div > b { color: var(--green); font-size: 11px; } .ah-news-tone { padding: 4px 6px; border-radius: 999px; color: var(--muted); background: var(--card); font-size: 11px; font-weight: 900; } .ah-news-tone.positive { color: var(--green); background: var(--green-soft); } .ah-news-tone.negative { color: var(--red); background: var(--red-soft); } .ah-news-item > a, .ah-news-item > span, .ah-news-item > strong { color: var(--ink); font-size: 11px; font-weight: 900; line-height: 1.32; text-decoration: none; } .ah-news-item:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } .ah-news-item > p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .ah-news-item > small { color: var(--muted); font-size: 11px; } :root:is([data-theme="dark"],[data-theme="cyber"]) .company-intel-card, :root:is([data-theme="dark"],[data-theme="cyber"]) .ah-news-item, :root:is([data-theme="dark"],[data-theme="cyber"]) .dividend-agenda-section, :root:is([data-theme="dark"],[data-theme="cyber"]) .dividend-agenda-card { border-color: rgba(144, 171, 160, .18); background: radial-gradient(circle at 100% 0, rgba(88, 217, 170, .07), transparent 42%), #141f22; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); } :root:is([data-theme="dark"],[data-theme="cyber"]) .intel-quality.external, :root:is([data-theme="dark"],[data-theme="cyber"]) .event-quality.external { color: #92a9ff; background: rgba(92, 119, 236, .15); } :root:is([data-theme="dark"],[data-theme="cyber"]) .intel-quality.estimate, :root:is([data-theme="dark"],[data-theme="cyber"]) .event-quality.estimate, :root:is([data-theme="dark"],[data-theme="cyber"]) .market-event-kicker > em, :root:is([data-theme="dark"],[data-theme="cyber"]) .calendar-action.locked span { color: #f2bd61; background: rgba(242, 189, 97, .12); } :root:is([data-theme="dark"],[data-theme="cyber"]) .market-event-card, :root:is([data-theme="dark"],[data-theme="cyber"]) .market-event-date, :root:is([data-theme="dark"],[data-theme="cyber"]) .calendar-action { border-color: rgba(144, 171, 160, .18); background-color: #141f22; } @keyframes company-intel-rise { from { opacity: 0; transform: translateY(12px) scale(.985); } } :root[data-motion="on"] .company-intel-card { animation: company-intel-rise .46s cubic-bezier(.18,.8,.25,1) both; } :root[data-motion="on"] .company-intel-card:nth-child(2) { animation-delay: .05s; } :root[data-motion="on"] .company-intel-card:nth-child(3) { animation-delay: .1s; } :root[data-motion="on"] .company-intel-card:nth-child(4) { animation-delay: .15s; } @media (max-width: 700px) { body.app-mode[data-view="calendar"] .page-heading { margin-bottom: 10px; } body.app-mode[data-view="calendar"] .page-heading { display: block; width: 100%; min-height: 0; padding: 10px 2px 8px; } body.app-mode[data-view="calendar"] .page-heading > div:first-child { width: 100%; } body.app-mode[data-view="calendar"] .page-heading > .data-stamp { display: none; } body.app-mode[data-view="calendar"] .page-heading h1 { font-size: 25px; } body.app-mode[data-view="calendar"] .page-heading p { font-size: 11.5px; } body.app-mode[data-view="calendar"] .market-calendar-hero { gap: 12px; padding: 18px 15px; border-radius: 23px; } body.app-mode[data-view="calendar"] .market-calendar-hero-copy h2 { max-width: 315px; margin: 6px 0 9px; font-size: clamp(25px, 7.8vw, 32px); line-height: 1.02; } body.app-mode[data-view="calendar"] .market-calendar-hero-copy > p { display: -webkit-box; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } body.app-mode[data-view="calendar"] .market-calendar-hero-copy > div { margin-top: 12px; } body.app-mode[data-view="calendar"] .market-calendar-export { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } body.app-mode[data-view="calendar"] .market-calendar-export .primary-button { grid-column: 1 / -1; min-height: 44px; } body.app-mode[data-view="calendar"] .market-calendar-export .secondary-button, body.app-mode[data-view="calendar"] .market-calendar-export .text-button { width: 100%; min-height: 39px; padding: 8px; font-size: 11px; } body.app-mode[data-view="calendar"] .market-calendar-export small, body.app-mode[data-view="calendar"] .market-calendar-export code { display: none; } .company-intelligence-rail { grid-auto-columns: minmax(248px, 82vw); margin-inline: -1px; } .company-intel-card { min-height: 164px; border-radius: 21px; } .market-calendar-featured { grid-auto-columns: minmax(245px, 82vw); } .market-calendar-feature-card { min-height: 154px; } .market-calendar-feed > .panel-header { padding-inline: 4px; } .market-event-actions { display: flex; overflow-x: auto; scrollbar-width: none; } .calendar-action { min-width: 92px; flex: 1 0 92px; min-height: 44px; } .calendar-action b { white-space: normal; text-align: left; } .market-event-context > small { font-size: 11px; } .ah-news-item { padding: 13px; border-radius: 17px; } .ah-news-item > a, .ah-news-item > span { font-size: 12px; } .dividend-agenda-section { margin-top: 12px; margin-inline: -4px; padding: 17px 12px; border-radius: 23px; } .section-heading-row { display: grid; gap: 8px; margin-bottom: 14px; } .section-heading-row h2 { font-size: 25px; } .section-heading-row p { display: -webkit-box; overflow: hidden; font-size: 11.5px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .section-heading-row > .data-stamp { display: none; } .dividend-agenda-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(286px, 88vw); grid-template-columns: none; gap: 10px; margin-inline: -1px; padding: 1px 1px 7px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .dividend-agenda-grid::-webkit-scrollbar { display: none; } .dividend-agenda-card { padding: 15px; border-radius: 20px; scroll-snap-align: start; } .dividend-agenda-company strong { font-size: 13px; } .dividend-agenda-amount { margin: 14px 0; } .dividend-agenda-amount > span { padding: 9px; } .dividend-agenda-amount strong { font-size: 12px; } .dividend-lifecycle-node strong { font-size: 11.5px; } .dividend-lifecycle-node em { font-size: 11px; } .dividend-ledger-panel > summary { padding: 15px; } .dividend-ledger-panel > summary small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } @media (max-width: 420px) { body.app-mode[data-view="calendar"] .market-calendar-hero-copy > div > span { padding: 6px 3px; font-size: 11px; } body.app-mode[data-view="calendar"] .market-calendar-hero-copy > div b { font-size: 11px; } .market-event-card { padding: 11px; } .market-event-title h3 { font-size: 11.5px; } .company-intelligence-rail { grid-auto-columns: 86vw; } } :root[data-motion="off"] .company-intel-card, :root[data-motion="off"] .market-event-card, :root[data-motion="off"] .market-calendar-feature-card, :root[data-motion="off"] .dividend-lifecycle-node.active i { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .company-intel-card, .market-event-card, .market-calendar-feature-card, .dividend-lifecycle-node.active i { animation: none !important; transition: none !important; } } .app-native-home-header, .app-native-company { display: none; } .ah-home-card-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .42fr); gap: 12px; } .ah-dividend-card { position: relative; display: grid; min-width: 0; min-height: 100%; align-content: start; gap: 8px; overflow: hidden; padding: 22px 20px; border: 1px solid var(--line); border-radius: 22px; color: var(--ink); background: var(--card); box-shadow: var(--shadow); cursor: pointer; text-align: left; } .ah-dividend-card > span { color: var(--green); font-size: 12px; font-weight: 850; } .ah-dividend-card > strong { font-size: clamp(27px, 4vw, 38px); letter-spacing: -.05em; } .ah-dividend-card > small { color: var(--muted); font-size: 12px; } .ah-dividend-card > i { position: absolute; right: 18px; bottom: 17px; left: 18px; display: flex; height: 50px; align-items: end; gap: 6px; opacity: .72; } .ah-dividend-card > i b { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(#f5ae3e, #9b671a); } .ah-dividend-card > i b:nth-child(1) { height: 16%; } .ah-dividend-card > i b:nth-child(2) { height: 31%; } .ah-dividend-card > i b:nth-child(3) { height: 45%; } .ah-dividend-card > i b:nth-child(4) { height: 72%; } .ah-dividend-card > i b:nth-child(5) { height: 96%; } @keyframes app-native-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes app-native-chart-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes app-native-skeleton { 0%, 100% { opacity: .32; } 50% { opacity: .8; } } .app-menu-overlay { position: fixed; z-index: 10020; inset: 0; display: grid; align-items: end; justify-items: center; pointer-events: none; } .app-menu-backdrop { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; opacity: 0; background: rgba(2, 9, 7, .58); backdrop-filter: blur(4px); transition: opacity .24s ease; } .app-menu-sheet { position: relative; z-index: 1; width: min(100%, 560px); max-height: min(88dvh, 760px); overflow: auto; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); border: 1px solid color-mix(in srgb, var(--line) 82%, var(--green) 18%); border-bottom: 0; border-radius: 30px 30px 0 0; color: var(--ink); background: color-mix(in srgb, var(--card) 97%, var(--bg)); box-shadow: 0 -24px 70px rgba(1, 12, 8, .24); transform: translate3d(0, 105%, 0); transition: transform .34s cubic-bezier(.2,.82,.24,1); overscroll-behavior: contain; } .app-menu-overlay.open { pointer-events: auto; } .app-menu-overlay.open .app-menu-backdrop { opacity: 1; } .app-menu-overlay.open .app-menu-sheet { transform: translate3d(0, 0, 0); } .app-menu-open { overflow: hidden !important; } .app-menu-handle { width: 42px; height: 5px; margin: 0 auto 14px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 32%, transparent); } .app-menu-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 0 2px 16px; } .app-menu-header span { color: var(--green); font-size: 11.5px; font-weight: 950; letter-spacing: .18em; } .app-menu-header h2 { margin: 5px 0 3px; font-size: 23px; line-height: 1.05; letter-spacing: -.035em; } .app-menu-header p { margin: 0; color: var(--muted); font-size: 12px; } .app-menu-close { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface-soft); font-size: 27px; line-height: 1; } .app-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .app-menu-grid > button { display: grid; min-width: 0; min-height: 70px; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 19px; color: var(--ink); background: var(--surface-soft); text-align: left; box-shadow: none; } .app-menu-grid > button:active { transform: scale(.98); } .app-menu-grid > button > i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; color: var(--green); background: color-mix(in srgb, var(--green-soft) 74%, var(--card)); } .app-menu-grid svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .app-menu-grid span { display: grid; min-width: 0; gap: 2px; } .app-menu-grid strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .app-menu-grid small { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; } .app-menu-grid b { color: var(--muted); font-size: 19px; font-weight: 500; } .app-menu-themes { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 2px 2px; } .app-menu-themes > span { margin-right: auto; color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .12em; } .app-menu-themes button { display: inline-flex; min-height: 34px; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-soft); box-shadow: none; font-size: 12px; font-weight: 850; } .app-menu-themes button i { width: 10px; height: 10px; border-radius: 50%; background: #18866a; box-shadow: 0 0 0 3px rgba(24,134,106,.12); } .app-menu-themes button[data-app-menu-theme="dark"] i { background: #08110e; box-shadow: 0 0 0 3px rgba(89,218,172,.18); } .app-menu-themes button[data-app-menu-theme="cyber"] i { background: #06131a; box-shadow: 0 0 0 3px rgba(34,211,238,.22); } .app-menu-themes button[data-app-menu-theme="cyber"].active i { background: #22d3ee; } .app-menu-themes button.active { border-color: color-mix(in srgb, var(--green) 54%, var(--line)); color: var(--ink); } .app-menu-footnote { margin: 11px 0 0; color: var(--muted); font-size: 11.5px; text-align: center; } @media (prefers-reduced-motion: reduce) { .app-menu-backdrop, .app-menu-sheet { transition: none !important; } } @media (max-width: 700px) { :root[data-motion="on"] body.app-mode[data-view="apphome"] .app-native-home-header::after, :root[data-motion="on"] body.app-mode[data-view="apphome"] .ah-value-card::before, :root[data-motion="on"] body.app-mode[data-view="apphome"] .ah-dividend-card::before, :root[data-motion="on"] body.app-mode[data-view="apphome"] .ah-upcoming-card::before, :root[data-motion="on"] body.app-mode[data-view="apphome"] .ah-quick .ah-tile > span, :root[data-motion="on"] body.app-mode[data-view="company"] .app-native-company::before, :root[data-motion="on"] body.app-mode[data-view="company"] .app-native-chart .company-hero-spark, :root[data-motion="on"] body.app-mode .ah-portfolio-chart-halo, :root[data-motion="on"] body.app-mode .company-hero-halo, :root[data-motion="on"] body.app-mode .app-native-position-button::after, :root[data-motion="on"] body.app-mode .app-native-upcoming-track article::before, :root[data-motion="on"] body.app-mode .market-calendar-next-pulse > i u { animation: none !important; } } @media (max-width: 700px) { body.app-mode { --app-screen-pad: 19px; --app-surface: color-mix(in srgb, var(--card) 92%, var(--bg)); --app-surface-raised: color-mix(in srgb, var(--surface-soft) 86%, var(--card)); overflow-x: hidden; background: var(--bg); } body.app-mode .sidebar, body.app-mode .topbar { display: none !important; } body.app-mode .main-area { min-height: 100dvh; margin-left: 0 !important; background: var(--bg); } body.app-mode .content { width: 100%; padding: max(8px, env(safe-area-inset-top)) var(--app-screen-pad) calc(98px + env(safe-area-inset-bottom)); } body.app-mode .content.view-fresh > * { animation-duration: .42s; animation-delay: calc(var(--d, 0) * 38ms); } .app-native-home-header { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 0 10px; } .app-native-home-header > div:first-child { display: grid; gap: 1px; } .app-native-home-header > div:first-child > span { color: var(--green); font-size: 11px; font-weight: 950; letter-spacing: .2em; } .app-native-home-header h1 { margin: 0; color: var(--ink); font-size: 42px; font-weight: 650; line-height: 1; letter-spacing: -.055em; } .app-native-home-header > div:last-child { display: flex; align-items: center; gap: 10px; } .app-native-home-header button { display: grid; width: 46px; height: 46px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--ink); background: transparent; cursor: pointer; } .app-native-home-header button:active { background: var(--app-surface-raised); transform: scale(.92); } .app-native-home-header button > svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .app-native-home-header .app-native-home-avatar { overflow: hidden; border: 1px solid var(--line); background: var(--app-surface-raised); } .app-native-home-avatar > span { font-size: 11px; font-weight: 900; } .app-native-home-avatar .public-avatar.small { width: 100%; height: 100%; border: 0; border-radius: inherit; } body.app-mode[data-view="apphome"] .content { padding-top: max(4px, env(safe-area-inset-top)); } body.app-mode[data-view="apphome"] .ah-app-tabs { gap: 3px; margin: 2px -4px 26px; padding: 4px; border: 0; border-radius: 19px; background: transparent; } body.app-mode[data-view="apphome"] .ah-app-tabs button { flex: 1 0 auto; min-height: 48px; padding-inline: 16px; border-radius: 15px; font-size: 13px; font-weight: 650; } body.app-mode[data-view="apphome"] .ah-app-tabs button.active { color: var(--ink); background: var(--app-surface-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 72%, transparent); } body.app-mode[data-view="apphome"] .ah-hero { margin-bottom: 26px; } body.app-mode[data-view="apphome"] .ah-greet { gap: 3px; margin: 0 1px 15px; } body.app-mode[data-view="apphome"] .ah-greet strong { font-size: 26px; font-weight: 650; letter-spacing: -.04em; } body.app-mode[data-view="apphome"] .ah-greet small { font-size: 11px; } .ah-home-card-row { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: 10px; } body.app-mode[data-view="apphome"] .ah-value-card, body.app-mode[data-view="apphome"] .ah-dividend-card { min-width: 0; min-height: 190px; align-content: start; padding: 19px 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 74%, transparent); border-radius: 27px; background: var(--app-surface-raised); box-shadow: none; color: var(--ink); } body.app-mode[data-view="apphome"] .ah-value-card { gap: 9px; } body.app-mode[data-view="apphome"] .ah-value-card > span, body.app-mode[data-view="apphome"] .ah-dividend-card > span { color: var(--green); font-size: 11px; font-weight: 850; } body.app-mode[data-view="apphome"] .ah-value-card > strong, body.app-mode[data-view="apphome"] .ah-dividend-card > strong { overflow-wrap: anywhere; color: var(--ink); font-size: clamp(25px, 7.5vw, 34px); font-weight: 540; line-height: 1.02; letter-spacing: -.055em; } body.app-mode[data-view="apphome"] .ah-value-card > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; } body.app-mode[data-view="apphome"] .ah-value-card .primary-button { min-height: 34px; margin-top: auto; padding-inline: 11px; border-radius: 999px; font-size: 11.5px; } body.app-mode[data-view="apphome"] .ah-value-meta { display: grid; gap: 4px; } body.app-mode[data-view="apphome"] .ah-value-meta b { font-size: 12px; font-weight: 750; } body.app-mode[data-view="apphome"] .ah-orb { display: none; } .ah-dividend-card { position: relative; display: grid; gap: 7px; width: 100%; cursor: pointer; text-align: left; } .ah-dividend-card small { color: var(--muted); font-size: 11.5px; line-height: 1.4; } .ah-dividend-card > i { position: absolute; right: 13px; bottom: 15px; left: 13px; display: flex; height: 53px; align-items: end; gap: 6px; opacity: .72; } .ah-dividend-card > i b { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(#f5ae3e, #9b671a); } .ah-dividend-card > i b:nth-child(1) { height: 16%; } .ah-dividend-card > i b:nth-child(2) { height: 31%; } .ah-dividend-card > i b:nth-child(3) { height: 45%; } .ah-dividend-card > i b:nth-child(4) { height: 72%; } .ah-dividend-card > i b:nth-child(5) { height: 96%; } body.app-mode[data-view="apphome"] .ah-quick { grid-template-columns: repeat(6, 72px); gap: 8px; margin: 0 calc(var(--app-screen-pad) * -1) 28px; padding: 0 var(--app-screen-pad) 5px; } body.app-mode[data-view="apphome"] .ah-quick .ah-tile { gap: 8px; min-width: 72px; padding: 0; border: 0; background: transparent; box-shadow: none; } body.app-mode[data-view="apphome"] .ah-quick .ah-tile > span { width: 54px; height: 54px; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: 19px; background: var(--app-surface-raised); box-shadow: none; } body.app-mode[data-view="apphome"] .ah-quick .ah-tile small { color: var(--muted); font-size: 11.5px; font-weight: 650; } body.app-mode[data-view="apphome"] .ah-upcoming { margin: 0 0 30px; } body.app-mode[data-view="apphome"] .ah-upcoming > .panel-header, body.app-mode[data-view="apphome"] .ah-panel > .panel-header { align-items: end; padding: 0 2px 15px; } body.app-mode[data-view="apphome"] .panel-title h2 { font-size: 27px; font-weight: 620; letter-spacing: -.045em; } body.app-mode[data-view="apphome"] .panel-title p { font-size: 11.5px; } body.app-mode[data-view="apphome"] .text-button { font-size: 11.5px; } body.app-mode[data-view="apphome"] .ah-upcoming-track { grid-auto-columns: minmax(272px, 82vw); gap: 12px; margin-right: calc(var(--app-screen-pad) * -1); } body.app-mode[data-view="apphome"] .ah-upcoming-card { min-height: 205px; align-content: end; padding: 22px; border-radius: 28px; } body.app-mode[data-view="apphome"] .ah-upcoming-card > strong { max-width: 13ch; font-size: 25px; font-weight: 560; letter-spacing: -.035em; } body.app-mode[data-view="apphome"] .ah-upcoming-card > span, body.app-mode[data-view="apphome"] .ah-upcoming-card > b, body.app-mode[data-view="apphome"] .ah-upcoming-card > small { font-size: 11.5px; } body.app-mode[data-view="apphome"] .ah-panel { margin: 0 0 31px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body.app-mode[data-view="apphome"] .ah-movers { gap: 2px; } body.app-mode[data-view="apphome"] .ah-mover { min-height: 72px; padding: 10px 5px; border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent); border-radius: 0; } body.app-mode[data-view="apphome"] .ah-mover-copy strong, body.app-mode[data-view="apphome"] .ah-mover > b { font-size: 14px; } body.app-mode[data-view="apphome"] .ah-mover-copy small { font-size: 11.5px; } body.app-mode[data-view="apphome"] .ah-news { gap: 0; } body.app-mode[data-view="apphome"] .ah-news-item { gap: 7px; padding: 16px 3px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent); border-radius: 0; background: transparent; box-shadow: none; } body.app-mode[data-view="apphome"] .ah-news-item > a, body.app-mode[data-view="apphome"] .ah-news-item > span, body.app-mode[data-view="apphome"] .ah-news-item > strong { font-size: 15px; line-height: 1.35; } body.app-mode[data-view="apphome"] .ah-news-item > p { font-size: 12px; -webkit-line-clamp: 3; } body.app-mode .app-tabbar { right: 0 !important; bottom: 0 !important; left: 0 !important; min-height: calc(72px + env(safe-area-inset-bottom)); padding: 7px 6px env(safe-area-inset-bottom); border: 0; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 0 !important; background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: none; backdrop-filter: blur(24px) saturate(1.35); } body.app-mode .app-tabbar button { gap: 4px; min-height: 56px; padding: 6px 1px; border-radius: 14px; } body.app-mode .app-tabbar button i { width: 24px; height: 24px; } body.app-mode .app-tabbar button svg { width: 24px; height: 24px; stroke-width: 1.65; } body.app-mode .app-tabbar button small { font-size: 11.5px; font-weight: 570; } body.app-mode .app-tabbar button.active { color: var(--green); background: transparent; box-shadow: none; } body.app-mode[data-view="company"] .content { padding: max(4px, env(safe-area-inset-top)) 0 calc(98px + env(safe-area-inset-bottom)); } body.app-mode[data-view="company"] .app-section-nav, body.app-mode[data-view="company"] .content > .back-button, body.app-mode[data-view="company"] .content > .company-hero, body.app-mode[data-view="company"] .content > .company-intelligence-rail { display: none !important; } .app-native-company { display: block; min-width: 0; overflow: hidden; padding-bottom: 9px; color: var(--ink); } .app-native-company-nav { display: grid; grid-template-columns: 92px minmax(0, 1fr) 92px; min-height: 65px; align-items: center; padding: 4px var(--app-screen-pad); } .app-native-company-nav > strong { overflow: hidden; font-size: 15px; font-weight: 520; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .app-native-company-nav > div { display: flex; justify-content: end; gap: 4px; } .app-native-company-nav button { display: grid; width: 43px; height: 43px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--ink); background: transparent; cursor: pointer; } .app-native-company-nav button:active { background: var(--app-surface-raised); transform: scale(.9); } .app-native-company-nav button.active { color: var(--green); } .app-native-company-nav button svg, .app-native-position-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .app-native-company-title { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 13px; padding: 20px var(--app-screen-pad) 5px; } .app-native-company-title > div { display: flex; min-width: 0; align-items: center; gap: 12px; } .app-native-company-title .hero-company-logo { width: 54px; height: 54px; border-radius: 17px; } .app-native-company-title > div > span { display: grid; min-width: 0; gap: 3px; } .app-native-company-title > div > span strong { overflow: hidden; font-size: 24px; font-weight: 590; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; } .app-native-company-title > div > span small { color: var(--muted); font-size: 12px; } .app-native-followers { flex: 0 0 auto; max-width: 110px; overflow: hidden; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--app-surface); font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .app-native-quote { padding: 28px var(--app-screen-pad) 2px; } .app-native-quote > strong { display: block; font-size: clamp(48px, 14vw, 65px); font-weight: 470; line-height: .94; letter-spacing: -.065em; font-variant-numeric: tabular-nums; } .app-native-quote > p { margin: 13px 0 0; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; } .app-native-quote > p span { color: var(--muted); font-size: 11px; font-weight: 500; } .app-native-chart { position: relative; display: grid; min-height: 272px; align-items: end; overflow: hidden; margin-top: 8px; padding: 27px 0 3px; } .app-native-chart::after { position: absolute; right: 0; bottom: 27%; left: 0; border-top: 1px dashed color-mix(in srgb, currentColor 24%, transparent); content: ""; pointer-events: none; } .app-native-chart-change { position: absolute; z-index: 2; top: 17px; right: var(--app-screen-pad); display: flex; gap: 7px; color: var(--muted); font-size: 11.5px; } .app-native-chart .company-hero-spark { width: calc(100% + 12px); height: 228px; margin: 0 -6px; filter: none; } .app-native-chart .company-hero-spark polyline { stroke-width: 2.35; stroke-dasharray: 1; stroke-dashoffset: 0; } .app-native-chart .company-hero-spark polygon { opacity: .38; } :root[data-motion="on"] .app-native-chart .company-hero-spark polyline { animation: app-native-chart-draw .9s cubic-bezier(.18,.8,.25,1) both; } .app-native-range { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 0 var(--app-screen-pad); } .app-native-range button { min-width: 0; min-height: 42px; padding: 0; border: 0; border-radius: 14px; color: var(--muted); background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .app-native-range button.active { color: #fff; background: var(--green); } .app-native-position-button { display: flex; width: calc(100% - (var(--app-screen-pad) * 2)); min-height: 64px; align-items: center; justify-content: center; gap: 10px; margin: 24px var(--app-screen-pad) 35px; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--green), color-mix(in srgb, var(--green) 72%, #49e6ac)); box-shadow: 0 14px 34px color-mix(in srgb, var(--green) 22%, transparent); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; } .app-native-position-button svg { width: 20px; height: 20px; } .app-native-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; } .app-native-section-head > span { font-size: 29px; font-weight: 560; letter-spacing: -.045em; } .app-native-section-head > b { color: var(--muted); font-size: 12px; font-weight: 650; } .app-native-position { padding: 0 var(--app-screen-pad) 38px; } .app-native-position > p { margin: 0; padding: 20px; border-radius: 23px; color: var(--muted); background: var(--app-surface-raised); font-size: 11px; line-height: 1.55; } .app-native-position-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: var(--app-surface-raised); } .app-native-position-grid > span { display: grid; min-width: 0; gap: 7px; padding: 17px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .app-native-position-grid > span:nth-child(2n) { border-right: 0; } .app-native-position-grid > span:nth-last-child(-n+2) { border-bottom: 0; } .app-native-position-grid small { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; } .app-native-position-grid strong { overflow: hidden; font-size: 17px; font-weight: 590; text-overflow: ellipsis; white-space: nowrap; } .app-native-upcoming { padding: 0 0 34px var(--app-screen-pad); } .app-native-upcoming > .app-native-section-head { padding-right: var(--app-screen-pad); } .app-native-upcoming-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(284px, 83vw); gap: 12px; overflow-x: auto; padding: 1px var(--app-screen-pad) 7px 0; scroll-snap-type: x mandatory; scrollbar-width: none; } .app-native-upcoming-track::-webkit-scrollbar { display: none; } .app-native-upcoming-track article { display: grid; min-height: 198px; align-content: end; gap: 13px; padding: 21px; border: 0; border-radius: 29px; color: #fff; background: linear-gradient(145deg, #477cef, #6059db); scroll-snap-align: start; } .app-native-upcoming-track article.dividend { background: linear-gradient(145deg, #c87519, #ed9e29); } .app-native-upcoming-track article.score { background: linear-gradient(145deg, #08765c, #16a97e); } .app-native-upcoming-track article > div { display: flex; justify-content: space-between; gap: 10px; } .app-native-upcoming-track article > div span, .app-native-upcoming-track article > div b { color: rgba(255,255,255,.8); font-size: 11px; font-weight: 850; } .app-native-upcoming-track article > strong { max-width: 15ch; font-size: 24px; font-weight: 560; line-height: 1.12; letter-spacing: -.035em; } .app-native-upcoming-track article > p { margin: 0; color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.45; } .app-native-company-skeleton .app-native-chart-loading { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; min-height: 235px; align-items: end; margin: 22px var(--app-screen-pad) 4px; padding: 25px 0 34px; } .app-native-company-skeleton .app-native-chart-loading i { height: 42%; border-radius: 10px 10px 2px 2px; background: var(--app-surface-raised); animation: app-native-skeleton 1.1s ease-in-out infinite; } .app-native-company-skeleton .app-native-chart-loading i:nth-child(2) { height: 65%; animation-delay: .1s; } .app-native-company-skeleton .app-native-chart-loading i:nth-child(3) { height: 54%; animation-delay: .2s; } .app-native-company-skeleton .app-native-chart-loading i:nth-child(4) { height: 82%; animation-delay: .3s; } .app-native-company-skeleton .app-native-chart-loading span { position: absolute; right: 0; bottom: 4px; left: 0; color: var(--muted); font-size: 11.5px; text-align: center; } body.app-mode[data-view="company"] .content > .panel, body.app-mode[data-view="company"] .content > details.panel, body.app-mode[data-view="company"] .content > .analyst-brief, body.app-mode[data-view="company"] .content > .business-profile-panel, body.app-mode[data-view="company"] .content > .company-chart-grid, body.app-mode[data-view="company"] .content > .financial-results, body.app-mode[data-view="company"] .content > .reports-grid { width: auto; margin-right: var(--app-screen-pad); margin-left: var(--app-screen-pad); } body.app-mode[data-view="company"] .content > .analyst-brief, body.app-mode[data-view="company"] .content > .business-profile-panel, body.app-mode[data-view="company"] .content > .panel { border-radius: 25px; } body.app-mode[data-view="company"] .panel-title h2 { font-size: 25px; font-weight: 590; letter-spacing: -.04em; } body.app-mode[data-view="calendar"] .page-heading, body.app-mode[data-view="companies"] .page-heading, body.app-mode[data-view="dividends"] .page-heading, body.app-mode[data-view="reports"] .page-heading { min-height: 0; padding: 28px 1px 18px; } body.app-mode[data-view="calendar"] .page-heading h1, body.app-mode[data-view="companies"] .page-heading h1, body.app-mode[data-view="dividends"] .page-heading h1, body.app-mode[data-view="reports"] .page-heading h1 { font-size: 39px; font-weight: 570; letter-spacing: -.055em; } body.app-mode[data-view="calendar"] .market-calendar-feed { padding: 19px 12px; border-radius: 25px; } body.app-mode[data-view="calendar"] .market-calendar-day { gap: 12px; } body.app-mode[data-view="calendar"] .market-calendar-day > h3 { padding: 8px 2px 2px; font-size: 12px; } body.app-mode[data-view="calendar"] .market-event-card { min-height: 132px; padding: 14px; border-radius: 23px; box-shadow: none; } body.app-mode[data-view="calendar"] .market-event-title h3 { font-size: 15px; line-height: 1.25; } :root[data-motion="on"] .app-native-company-title, :root[data-motion="on"] .app-native-quote, :root[data-motion="on"] .app-native-position, :root[data-motion="on"] .app-native-upcoming { animation: app-native-rise .48s cubic-bezier(.18,.8,.25,1) both; } :root[data-motion="on"] .app-native-quote { animation-delay: .05s; } :root[data-motion="on"] .app-native-position { animation-delay: .1s; } :root[data-motion="on"] .app-native-upcoming { animation-delay: .15s; } } @media (max-width: 365px) { body.app-mode { --app-screen-pad: 15px; } .ah-home-card-row { grid-template-columns: 1fr; } body.app-mode[data-view="apphome"] .ah-value-card, body.app-mode[data-view="apphome"] .ah-dividend-card { min-height: 162px; } .app-native-company-title > div > span strong { font-size: 21px; } .app-native-followers { display: none; } } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode { --app-surface: #16191a; --app-surface-raised: #222526; background: #0d0f10; } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .main-area, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .content { background: #0d0f10; } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .app-tabbar { border-top-color: rgba(255,255,255,.085); background: rgba(13,15,16,.94); } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .app-tabbar button.active { color: #4addaa; background: transparent; } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="apphome"] .ah-app-tabs button.active, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="apphome"] .ah-value-card, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="apphome"] .ah-dividend-card, :root:is([data-theme="dark"],[data-theme="cyber"]) .app-native-position-grid, :root:is([data-theme="dark"],[data-theme="cyber"]) .app-native-position > p { border-color: rgba(255,255,255,.075); background: #222526; box-shadow: none; } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="apphome"] .ah-quick .ah-tile > span { border-color: rgba(255,255,255,.075); background: #222526; } :root:is([data-theme="dark"],[data-theme="cyber"]) .app-native-followers { border-color: rgba(255,255,255,.08); background: #181b1c; } :root:is([data-theme="dark"],[data-theme="cyber"]) .app-native-position-grid > span { border-color: rgba(255,255,255,.075); } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="company"] .content > .panel, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="company"] .content > details.panel, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="company"] .content > .analyst-brief, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="company"] .content > .business-profile-panel { border-color: rgba(255,255,255,.08); background: #171a1b; box-shadow: none; } :root[data-motion="off"] .app-native-company *, :root[data-motion="off"] .app-native-home-header, :root[data-motion="off"] .ah-dividend-card > i b { animation: none !important; transition: none !important; } @keyframes evra-line-reveal { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes evra-endpoint-pulse { 0%, 100% { opacity: .18; transform: scale(.72); } 50% { opacity: .62; transform: scale(1.18); } } @keyframes evra-card-glint { 0%, 62% { transform: translate3d(-145%, 0, 0) rotate(18deg); } 100% { transform: translate3d(310%, 0, 0) rotate(18deg); } } @keyframes evra-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -5px, 0); } } @keyframes evra-bar-rise { from { transform: scaleY(.08); } to { transform: scaleY(1); } } @keyframes evra-tab-pop { 0% { opacity: 0; transform: translate3d(-50%, 5px, 0) scale(.2); } 100% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); } } @keyframes evra-price-in { from { opacity: 0; transform: translate3d(14px, 0, 0) scale(.86); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } .company-hero-halo { fill: currentColor; opacity: .2; transform-box: fill-box; transform-origin: center; } .company-hero-endpoint { fill: var(--card); stroke: currentColor; stroke-width: .8; vector-effect: non-scaling-stroke; } @media (max-width: 700px) { body.app-mode { isolation: isolate; } body.app-mode::before, body.app-mode::after { position: fixed; z-index: -1; width: 260px; height: 260px; border-radius: 50%; content: ""; filter: blur(80px); opacity: .13; pointer-events: none; } body.app-mode::before { top: -120px; right: -110px; background: var(--green); } body.app-mode::after { bottom: 8vh; left: -150px; background: #6956ff; opacity: .08; } .app-native-home-header { min-height: 92px; } .app-native-home-header > div:first-child > span { display: flex; align-items: center; gap: 7px; } .app-native-home-header > div:first-child > span::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 18px currentColor; content: ""; } .app-native-home-header h1 { font-size: clamp(44px, 13vw, 56px); font-weight: 560; letter-spacing: -.07em; } .app-native-home-header button { transition: transform .2s ease, background .2s ease; } .app-native-home-header .app-native-home-avatar { border-color: color-mix(in srgb, var(--green) 26%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 7%, transparent); } body.app-mode[data-view="apphome"] .ah-app-tabs { position: relative; z-index: 3; overflow-x: auto; justify-content: start; margin-right: calc(var(--app-screen-pad) * -1); padding-right: var(--app-screen-pad); scrollbar-width: none; scroll-snap-type: x proximity; } body.app-mode[data-view="apphome"] .ah-app-tabs::-webkit-scrollbar { display: none; } body.app-mode[data-view="apphome"] .ah-app-tabs button { flex: 0 0 auto; min-width: 94px; scroll-snap-align: start; transition: color .24s ease, background .24s ease, transform .24s ease; } body.app-mode[data-view="apphome"] .ah-app-tabs button.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 18%, var(--line)), 0 10px 28px color-mix(in srgb, var(--green) 8%, transparent); } body.app-mode[data-view="apphome"] .ah-greet { margin-bottom: 18px; } body.app-mode[data-view="apphome"] .ah-greet strong { font-size: clamp(29px, 8vw, 36px); font-weight: 540; line-height: 1.05; letter-spacing: -.055em; } .ah-home-card-row { gap: 11px; } body.app-mode[data-view="apphome"] .ah-value-card, body.app-mode[data-view="apphome"] .ah-dividend-card { position: relative; min-height: 218px; isolation: isolate; border-color: color-mix(in srgb, var(--line) 72%, transparent); box-shadow: 0 22px 50px rgba(5, 12, 10, .12); transform: translateZ(0); transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; } body.app-mode[data-view="apphome"] .ah-value-card:active, body.app-mode[data-view="apphome"] .ah-dividend-card:active { transform: scale(.975); } body.app-mode[data-view="apphome"] .ah-value-card::before, body.app-mode[data-view="apphome"] .ah-dividend-card::before, .app-native-upcoming-track article::before, body.app-mode[data-view="apphome"] .ah-upcoming-card::before { position: absolute; z-index: 4; top: -45%; left: -38%; width: 34%; height: 190%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); content: ""; opacity: .34; pointer-events: none; transform: translate3d(-145%, 0, 0) rotate(18deg); } body.app-mode[data-view="apphome"] .ah-value-card > *, body.app-mode[data-view="apphome"] .ah-dividend-card > * { position: relative; z-index: 2; } body.app-mode[data-view="apphome"] .ah-value-card > span, body.app-mode[data-view="apphome"] .ah-dividend-card > span { letter-spacing: .01em; } body.app-mode[data-view="apphome"] .ah-value-card > strong, body.app-mode[data-view="apphome"] .ah-dividend-card > strong { font-size: clamp(26px, 7.6vw, 36px); font-weight: 510; } .ah-portfolio-chart { position: absolute !important; z-index: 0 !important; right: -3px; bottom: -3px; left: -3px; width: calc(100% + 6px); height: 99px; overflow: visible; color: var(--green); pointer-events: none; } .ah-portfolio-chart.negative { color: var(--red); } .ah-portfolio-chart polygon { opacity: .58; } .ah-portfolio-chart polyline { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; } .ah-portfolio-chart-halo { fill: currentColor; opacity: .2; transform-box: fill-box; transform-origin: center; } .ah-portfolio-chart-dot { fill: var(--app-surface-raised); stroke: currentColor; stroke-width: 2.5; vector-effect: non-scaling-stroke; } .ah-portfolio-chart.empty { display: grid; height: 64px; place-items: end start; padding: 0 16px 11px; border-top: 1px dashed color-mix(in srgb, var(--line) 66%, transparent); color: var(--muted); font-size: 11px; } body.app-mode[data-view="apphome"] .ah-value-meta { position: relative; z-index: 3; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--line) 58%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--app-surface-raised) 72%, transparent); backdrop-filter: blur(10px); } .ah-dividend-bars, .ah-dividend-empty { position: absolute !important; z-index: 1 !important; right: 14px; bottom: 15px; left: 14px; display: flex; height: 65px; align-items: end; gap: 6px; opacity: .9; } .ah-dividend-bars b { height: var(--h); flex: 1; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #ffc75a 0%, #f09424 58%, #9d5a0e 100%); box-shadow: 0 0 18px rgba(240, 148, 36, .16); transform-origin: bottom; } .ah-dividend-empty { display: grid; height: 48px; align-items: end; border-top: 1px dashed color-mix(in srgb, #e9a43b 34%, var(--line)); } .ah-dividend-empty span { color: var(--muted); font-size: 11px; font-style: normal; } body.app-mode[data-view="apphome"] .ah-dividend-card::after { position: absolute; z-index: 0; right: -42px; bottom: -65px; width: 145px; height: 145px; border-radius: 50%; background: rgba(239, 156, 36, .16); box-shadow: 0 0 65px rgba(239, 156, 36, .25); content: ""; pointer-events: none; } body.app-mode[data-view="apphome"] .ah-quick .ah-tile > span { position: relative; overflow: hidden; transition: border-color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; } body.app-mode[data-view="apphome"] .ah-quick .ah-tile:active > span { border-color: color-mix(in srgb, var(--green) 42%, var(--line)); box-shadow: 0 10px 24px color-mix(in srgb, var(--green) 11%, transparent); transform: translateY(-3px) scale(.95); } body.app-mode[data-view="apphome"] .ah-quick .ah-tile > span::after { position: absolute; inset: auto -18px -24px auto; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--green) 12%, transparent); content: ""; } body.app-mode[data-view="apphome"] .ah-upcoming-track, .app-native-upcoming-track { scroll-padding-left: 2px; } body.app-mode[data-view="apphome"] .ah-upcoming-card, .app-native-upcoming-track article { position: relative; isolation: isolate; overflow: hidden; box-shadow: 0 20px 45px rgba(12, 18, 28, .16); transform: translateZ(0); transition: transform .22s cubic-bezier(.2,.8,.2,1), filter .22s ease; } body.app-mode[data-view="apphome"] .ah-upcoming-card::after, .app-native-upcoming-track article::after { position: absolute; z-index: -1; top: -80px; right: -55px; width: 190px; height: 190px; border: 34px solid rgba(255,255,255,.10); border-radius: 50%; content: ""; } body.app-mode[data-view="apphome"] .ah-upcoming-card:active, .app-native-upcoming-track article:active { filter: saturate(1.08); transform: scale(.975); } body.app-mode[data-view="apphome"] .ah-upcoming-card > *, .app-native-upcoming-track article > * { position: relative; z-index: 2; } body.app-mode .app-tabbar button { position: relative; transition: color .22s ease, transform .22s cubic-bezier(.2,.8,.2,1); } body.app-mode .app-tabbar button::after { position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; content: ""; opacity: 0; transform: translate3d(-50%, 5px, 0) scale(.2); } body.app-mode .app-tabbar button.active::after { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); } body.app-mode .app-tabbar button:active { transform: scale(.92); } .app-native-company-nav { position: sticky; z-index: 20; top: 0; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(22px) saturate(1.25); } .app-native-company-title { padding-top: 26px; } .app-native-company-title > div > span strong { font-size: clamp(25px, 7.5vw, 32px); font-weight: 540; } .app-native-quote { padding-top: 34px; } .app-native-quote > strong { font-size: clamp(54px, 16.5vw, 72px); font-weight: 430; letter-spacing: -.075em; } .app-native-chart { min-height: 296px; margin-top: 2px; padding-top: 32px; } .app-native-chart::before { position: absolute; inset: 23% -25% 3% 43%; border-radius: 50%; background: currentColor; content: ""; filter: blur(75px); opacity: .1; pointer-events: none; } .app-native-chart::after { border-top-style: solid; opacity: .72; } .app-native-chart .company-hero-spark { position: relative; z-index: 1; height: 246px; color: var(--green); } .app-native-chart.negative .company-hero-spark { color: var(--red); } .app-native-chart .company-hero-spark polyline { stroke-width: 2.65; stroke-dasharray: 1; stroke-linecap: round; stroke-linejoin: round; } .app-native-chart .company-hero-spark polygon { opacity: .56; } .company-hero-halo { fill: currentColor; opacity: .22; transform-box: fill-box; transform-origin: center; } .company-hero-endpoint { fill: var(--bg); stroke: currentColor; stroke-width: .8; vector-effect: non-scaling-stroke; } .app-native-current-price { position: absolute; z-index: 5; right: var(--app-screen-pad); bottom: 45px; padding: 7px 9px; border: 1px solid color-mix(in srgb, currentColor 34%, var(--line)); border-radius: 10px; color: inherit; background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: 0 10px 28px rgba(0,0,0,.12); backdrop-filter: blur(14px); font-size: 11.5px; font-weight: 850; font-variant-numeric: tabular-nums; } .app-native-position-button { position: relative; isolation: isolate; overflow: hidden; min-height: 68px; box-shadow: 0 18px 42px color-mix(in srgb, var(--green) 27%, transparent); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; } .app-native-position-button::after { position: absolute; inset: -80% auto -80% -30%; width: 26%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent); content: ""; transform: translate3d(-145%, 0, 0) rotate(18deg); } .app-native-position-button:active { box-shadow: 0 10px 24px color-mix(in srgb, var(--green) 20%, transparent); transform: scale(.975); } .app-native-position-grid { box-shadow: 0 22px 48px rgba(0,0,0,.09); } body.app-mode[data-view="company"] .content > .panel, body.app-mode[data-view="company"] .content > details.panel, body.app-mode[data-view="company"] .content > .analyst-brief, body.app-mode[data-view="company"] .content > .business-profile-panel, body.app-mode[data-view="company"] .content > .company-chart-grid, body.app-mode[data-view="company"] .content > .financial-results, body.app-mode[data-view="company"] .content > .reports-grid { overflow: hidden; border-color: color-mix(in srgb, var(--line) 68%, transparent); box-shadow: 0 20px 46px rgba(0,0,0,.075); } body.app-mode[data-view="company"] .panel-title h2 { font-size: 28px; font-weight: 540; } body.app-mode[data-view="calendar"] .market-event-card { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--line) 65%, transparent); box-shadow: 0 16px 34px rgba(0,0,0,.07); transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease; } body.app-mode[data-view="calendar"] .market-event-card:active { border-color: color-mix(in srgb, var(--green) 34%, var(--line)); transform: scale(.985); } :root[data-motion="on"] body.app-mode[data-view="apphome"] .ah-value-card::before, :root[data-motion="on"] body.app-mode[data-view="apphome"] .ah-dividend-card::before, :root[data-motion="on"] body.app-mode[data-view="apphome"] .ah-upcoming-card::before, :root[data-motion="on"] .app-native-upcoming-track article::before { animation: evra-card-glint 5.8s ease-in-out infinite; } :root[data-motion="on"] body.app-mode[data-view="apphome"] .ah-dividend-card::before { animation-delay: 1.2s; } :root[data-motion="on"] .ah-portfolio-chart polyline, :root[data-motion="on"] .app-native-chart .company-hero-spark polyline { animation: evra-line-reveal 1.15s cubic-bezier(.18,.82,.24,1) both; } :root[data-motion="on"] .ah-portfolio-chart-halo, :root[data-motion="on"] .company-hero-halo { animation: evra-endpoint-pulse 1.85s ease-in-out infinite; } :root[data-motion="on"] .ah-dividend-bars b { animation: evra-bar-rise .72s cubic-bezier(.18,.82,.24,1) both; animation-delay: calc(var(--i) * 70ms); } :root[data-motion="on"] body.app-mode[data-view="apphome"] .ah-quick .ah-tile:nth-child(2n) > span { animation: evra-float 4.2s ease-in-out infinite; } :root[data-motion="on"] body.app-mode[data-view="apphome"] .ah-quick .ah-tile:nth-child(2n+1) > span { animation: evra-float 4.8s .55s ease-in-out infinite; } :root[data-motion="on"] body.app-mode .app-tabbar button.active::after { animation: evra-tab-pop .32s cubic-bezier(.2,.8,.2,1) both; } :root[data-motion="on"] .app-native-current-price { animation: evra-price-in .5s .65s cubic-bezier(.18,.82,.24,1) both; } :root[data-motion="on"] .app-native-position-button::after { animation: evra-card-glint 4.8s 1.4s ease-in-out infinite; } } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode { --app-surface: #101413; --app-surface-raised: #181d1b; background: #050706; } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .main-area, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode .content { background: #050706; } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="apphome"] .ah-value-card { border-color: rgba(91,232,178,.13); background: radial-gradient(circle at 88% 13%, rgba(70,224,165,.15), transparent 38%), linear-gradient(145deg, #17221e, #111513 68%); box-shadow: 0 24px 54px rgba(0,0,0,.35); } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="apphome"] .ah-dividend-card { border-color: rgba(255,184,78,.14); background: radial-gradient(circle at 90% 12%, rgba(255,171,55,.15), transparent 38%), linear-gradient(145deg, #211b13, #15130f 70%); box-shadow: 0 24px 54px rgba(0,0,0,.34); } :root:is([data-theme="dark"],[data-theme="cyber"]) .app-native-company-nav { background: rgba(5,7,6,.82); } :root:is([data-theme="dark"],[data-theme="cyber"]) .app-native-current-price { background: rgba(5,7,6,.82); } :root:is([data-theme="dark"],[data-theme="cyber"]) .company-hero-endpoint { fill: #050706; } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="company"] .content > .panel, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="company"] .content > details.panel, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="company"] .content > .analyst-brief, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="company"] .content > .business-profile-panel { background: #101413; box-shadow: 0 22px 52px rgba(0,0,0,.28); } :root[data-motion="off"] .ah-portfolio-chart *, :root[data-motion="off"] .ah-dividend-bars b, :root[data-motion="off"] .app-native-current-price, :root[data-motion="off"] .app-native-position-button::after, :root[data-motion="off"] body.app-mode .app-tabbar button::after, :root[data-motion="off"] body.app-mode::before, :root[data-motion="off"] body.app-mode::after { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .ah-portfolio-chart *, .ah-dividend-bars b, .app-native-current-price, .app-native-position-button::after, body.app-mode .app-tabbar button::after, body.app-mode[data-view="apphome"] .ah-value-card::before, body.app-mode[data-view="apphome"] .ah-dividend-card::before, body.app-mode[data-view="apphome"] .ah-upcoming-card::before, .app-native-upcoming-track article::before { animation: none !important; transition: none !important; } } .report-advanced-hub { position: relative; isolation: isolate; margin: 0 0 18px; overflow: clip; border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line)); border-radius: 24px; background: radial-gradient(circle at 93% -18%, color-mix(in srgb, var(--green-2) 15%, transparent), transparent 34%), linear-gradient(145deg, var(--card), color-mix(in srgb, var(--surface-soft) 58%, var(--card))); box-shadow: 0 16px 42px rgba(14, 36, 28, .07); } .report-advanced-hub > summary { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; min-height: 88px; padding: 17px 18px; list-style: none; cursor: pointer; user-select: none; } .report-advanced-hub > summary::-webkit-details-marker { display: none; } .report-advanced-hub > summary::after { position: absolute; inset: auto 18px 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--green) 25%, var(--line)), transparent); content: ""; opacity: 0; transform: scaleX(.5); transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1); } .report-advanced-hub[open] > summary::after { opacity: 1; transform: scaleX(1); } .report-advanced-hub-icon { display: grid; align-content: center; gap: 4px; width: 48px; height: 48px; padding: 12px; border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--green-soft) 72%, var(--card)); box-shadow: inset 0 1px rgba(255, 255, 255, .35); } .report-advanced-hub-icon i { display: block; height: 3px; border-radius: 99px; background: var(--green); transform-origin: left center; } .report-advanced-hub-icon i:nth-child(1) { width: 72%; } .report-advanced-hub-icon i:nth-child(2) { width: 100%; } .report-advanced-hub-icon i:nth-child(3) { width: 48%; } .report-advanced-hub-copy { display: grid; min-width: 0; gap: 3px; } .report-advanced-hub-copy small { color: var(--green-2); font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; } .report-advanced-hub-copy strong { overflow: hidden; color: var(--ink); font-size: 14px; line-height: 1.25; text-overflow: ellipsis; } .report-advanced-hub-copy em { overflow: hidden; color: var(--muted); font-size: 11.5px; font-style: normal; line-height: 1.45; text-overflow: ellipsis; } .report-advanced-hub-state { display: flex; align-items: center; gap: 8px; color: var(--green); } .report-advanced-hub-state b { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; } .report-advanced-hub-state i { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--card) 82%, transparent); font-size: 15px; font-style: normal; transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .report-advanced-hub[open] .report-advanced-hub-state i { transform: rotate(180deg); } .report-advanced-hub-body { display: grid; gap: 16px; padding: 18px; } .report-advanced-hub-body > * { margin: 0; } .report-advanced-hub[open] .report-advanced-hub-body { animation: evra-report-drawer-in .38s cubic-bezier(.18, .82, .24, 1) both; } @keyframes evra-report-drawer-in { from { opacity: 0; transform: translateY(-10px); } } @media (max-width: 700px) { body.app-mode[data-view="reports"] .content { overflow-x: clip; } body.app-mode[data-view="reports"] .page-heading { margin-bottom: 10px; } body.app-mode[data-view="reports"] .app-section-nav { order: initial; margin-top: 0; margin-bottom: 14px; } body.app-mode[data-view="reports"] .report-always-on-strip { gap: 9px; margin-bottom: 13px; padding: 14px 15px; border-radius: 19px; box-shadow: 0 14px 32px rgba(14, 36, 28, .06); } body.app-mode[data-view="reports"] .report-always-on-strip > div { gap: 2px; } body.app-mode[data-view="reports"] .report-always-on-strip > div + div { padding-top: 9px; } body.app-mode[data-view="reports"] .report-always-on-strip strong { font-size: 12px; } body.app-mode[data-view="reports"] .report-always-on-strip small { display: -webkit-box; overflow: hidden; font-size: 11px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.app-mode[data-view="reports"] .stats-grid { display: grid; grid-auto-columns: min(78vw, 292px); grid-auto-flow: column; grid-template-columns: none; gap: 10px; margin: 0 calc(var(--app-screen-pad) * -1) 14px; padding: 2px var(--app-screen-pad) 9px; overflow-x: auto; scroll-padding-inline: var(--app-screen-pad); scroll-snap-type: x mandatory; scrollbar-width: none; } body.app-mode[data-view="reports"] .stats-grid::-webkit-scrollbar { display: none; } body.app-mode[data-view="reports"] .stats-grid > * { min-height: 132px; scroll-snap-align: start; } body.app-mode[data-view="reports"] .report-advanced-hub { margin-bottom: 15px; border-radius: 21px; } body.app-mode[data-view="reports"] .report-advanced-hub > summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; min-height: 82px; padding: 14px; } body.app-mode[data-view="reports"] .report-advanced-hub-icon { width: 42px; height: 42px; padding: 10px; border-radius: 14px; } body.app-mode[data-view="reports"] .report-advanced-hub-copy strong { display: -webkit-box; font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.app-mode[data-view="reports"] .report-advanced-hub-copy em { display: none; } body.app-mode[data-view="reports"] .report-advanced-hub-state b { display: none; } body.app-mode[data-view="reports"] .report-advanced-hub-body { gap: 12px; padding: 12px; } body.app-mode[data-view="reports"] .reports-layout { gap: 12px; margin-bottom: 12px; } body.app-mode[data-view="reports"] .report-main-card { border-color: color-mix(in srgb, var(--green) 22%, var(--line)); box-shadow: 0 22px 48px rgba(14, 36, 28, .09); } body.app-mode[data-view="reports"] .report-countdown.large { border-radius: 19px; } } :root:is([data-theme="dark"],[data-theme="cyber"]) .report-advanced-hub { border-color: color-mix(in srgb, var(--green-2) 20%, var(--line)); background: radial-gradient(circle at 93% -18%, rgba(91, 232, 178, .12), transparent 34%), linear-gradient(145deg, #141a18, #0d110f); box-shadow: 0 20px 48px rgba(0, 0, 0, .28); } :root:is([data-theme="dark"],[data-theme="cyber"]) .report-advanced-hub-icon { background: rgba(91, 232, 178, .08); box-shadow: inset 0 1px rgba(255, 255, 255, .07); } :root:is([data-theme="dark"],[data-theme="cyber"]) .report-advanced-hub-state i { background: rgba(255, 255, 255, .035); } :root:is([data-theme="dark"],[data-theme="cyber"]) .report-advanced-hub .report-automation-panel { border-color: rgba(91, 232, 178, .12); background: radial-gradient(circle at top left, rgba(91, 232, 178, .1), transparent 34%), linear-gradient(145deg, #101614, #0a0e0c); box-shadow: 0 18px 44px rgba(0, 0, 0, .26); } :root:is([data-theme="dark"],[data-theme="cyber"]) .report-advanced-hub .automation-step, :root:is([data-theme="dark"],[data-theme="cyber"]) .report-advanced-hub .report-automation-footer span { border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .035); } :root:is([data-theme="dark"],[data-theme="cyber"]) .report-advanced-hub .automation-step strong, :root:is([data-theme="dark"],[data-theme="cyber"]) .report-advanced-hub .report-automation-copy h2 { color: var(--ink); } :root[data-motion="on"] .report-advanced-hub:not([open]) .report-advanced-hub-icon i { animation: evra-report-signal 2.7s ease-in-out infinite; } :root[data-motion="on"] .report-advanced-hub:not([open]) .report-advanced-hub-icon i:nth-child(2) { animation-delay: .18s; } :root[data-motion="on"] .report-advanced-hub:not([open]) .report-advanced-hub-icon i:nth-child(3) { animation-delay: .36s; } @keyframes evra-report-signal { 0%, 100% { opacity: .45; transform: scaleX(.72); } 45% { opacity: 1; transform: scaleX(1); } } :root[data-motion="off"] .report-advanced-hub *, :root[data-motion="off"] .report-advanced-hub-body { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .report-advanced-hub *, .report-advanced-hub-body { animation: none !important; transition: none !important; } } .quote-awaiting [data-live-company-price] { color: color-mix(in srgb, var(--muted) 72%, var(--ink)); font-variant-numeric: tabular-nums; } .quote-awaiting [data-live-company-change] { color: var(--muted) !important; background: color-mix(in srgb, var(--surface-soft) 74%, transparent) !important; } .company-hero-premium .company-price.quote-awaiting span { padding-inline: 11px; } :root:is([data-theme="dark"],[data-theme="cyber"]) .quote-awaiting [data-live-company-change] { background: rgba(255, 255, 255, .045) !important; } .content.company-premium-view > .analyst-brief, .content.company-premium-view > .business-profile-panel, .content.company-premium-view > .company-chart-grid, .content.company-premium-view > .company-chart-row, .content.company-premium-view > .quote-session-panel, .content.company-premium-view > .dashboard-grid, .content.company-premium-view > .report-data-panel, .content.company-premium-view > .company-detail-grid, .content.company-premium-view > .crypto-news-panel, .content.company-premium-view > .crypto-education { content-visibility: auto; contain-intrinsic-size: auto 680px; } .content.company-premium-view > .dashboard-grid, .content.company-premium-view > .report-data-panel, .content.company-premium-view > .company-detail-grid { contain-intrinsic-size: auto 920px; } .market-calendar-mobile-head, .market-calendar-date-rail { display: none; } body.app-mode[data-view="calendar"] .content { min-width: 0; max-width: 100%; overflow-x: clip; } body.app-mode[data-view="calendar"] .market-calendar-hero, body.app-mode[data-view="calendar"] .market-calendar-featured, body.app-mode[data-view="calendar"] .market-calendar-toolbar, body.app-mode[data-view="calendar"] .market-calendar-feed, body.app-mode[data-view="calendar"] .market-calendar-picker, body.app-mode[data-view="calendar"] .market-calendar-sources { max-width: 100%; box-sizing: border-box; } .market-event-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .market-event-facts > span { display: grid; gap: 3px; min-width: 0; padding: 8px 9px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--card) 72%, transparent); } .market-event-facts small { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .market-event-facts strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 700px) { body.app-mode[data-view="calendar"] .page-heading, body.app-mode[data-view="calendar"] .market-calendar-hero, body.app-mode[data-view="calendar"] .market-calendar-featured { display: none; } body.app-mode[data-view="calendar"] .content { padding-top: max(12px, env(safe-area-inset-top)); } body.app-mode[data-view="calendar"] .market-calendar-mobile-head { display: grid; gap: 17px; margin: 0 0 15px; } .market-calendar-mobile-title { display: flex; align-items: end; justify-content: space-between; min-height: 68px; padding: 5px 3px 0; } .market-calendar-mobile-title > div { display: grid; gap: 5px; } .market-calendar-mobile-title .eyebrow { color: var(--green); font-size: 11px; letter-spacing: .14em; } .market-calendar-mobile-title h1 { margin: 0; color: var(--ink); font-size: clamp(36px, 11vw, 48px); font-weight: 560; line-height: .92; letter-spacing: -.065em; } .market-calendar-mobile-title > b { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 8%, transparent); font-size: 21px; } .market-calendar-next-pulse { --pulse-a: #355cf4; --pulse-b: #6678ff; position: relative; display: grid; gap: 9px; min-height: 196px; overflow: hidden; padding: 23px 21px; border: 0; border-radius: 30px; color: #fff; background: radial-gradient(circle at 86% 3%, rgba(255,255,255,.28), transparent 31%), linear-gradient(145deg, var(--pulse-a), var(--pulse-b)); box-shadow: 0 24px 48px color-mix(in srgb, var(--pulse-a) 26%, transparent); cursor: pointer; text-align: left; isolation: isolate; } .market-calendar-next-pulse.type-rates { --pulse-a: #523bcc; --pulse-b: #7d56ed; } .market-calendar-next-pulse.type-inflation { --pulse-a: #df5a30; --pulse-b: #ff983d; } .market-calendar-next-pulse.type-employment { --pulse-a: #087c63; --pulse-b: #1fba8d; } .market-calendar-next-pulse.type-report { --pulse-a: #17659e; --pulse-b: #3b98db; } .market-calendar-next-pulse.type-dividend { --pulse-a: #b06b0a; --pulse-b: #f4a82f; } .market-calendar-next-pulse::before, .market-calendar-next-pulse::after { position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; content: ""; } .market-calendar-next-pulse::before { right: -66px; bottom: -98px; width: 235px; height: 235px; } .market-calendar-next-pulse::after { right: 22px; bottom: -76px; width: 138px; height: 138px; } .market-calendar-next-pulse > span { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.78); font-size: 11.5px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; } .market-calendar-next-pulse > span b { padding: 6px 8px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.16); font-size: 11px; letter-spacing: 0; text-transform: none; backdrop-filter: blur(8px); } .market-calendar-next-pulse > strong { max-width: 86%; margin-top: auto; font-size: clamp(23px, 7.1vw, 31px); font-weight: 590; line-height: 1.05; letter-spacing: -.045em; } .market-calendar-next-pulse > small { color: rgba(255,255,255,.76); font-size: 11.5px; } .market-calendar-next-pulse > i { position: absolute; right: 21px; bottom: 21px; display: flex; gap: 4px; align-items: end; height: 45px; } .market-calendar-next-pulse > i u { width: 4px; height: 18px; border-radius: 99px; background: rgba(255,255,255,.72); text-decoration: none; } .market-calendar-next-pulse > i u:nth-child(2) { height: 31px; } .market-calendar-next-pulse > i u:nth-child(3) { height: 43px; } body.app-mode[data-view="calendar"] .market-calendar-date-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 62px; gap: 8px; margin: 0 -2px 14px; padding: 2px 2px 7px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; scroll-snap-type: x mandatory; } .market-calendar-date-rail::-webkit-scrollbar { display: none; } .market-calendar-date-rail button { position: relative; display: grid; min-height: 84px; place-items: center; align-content: center; gap: 1px; padding: 9px 5px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); background: var(--card); box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 5%, transparent); cursor: pointer; scroll-snap-align: start; } .market-calendar-date-rail button.today { border-color: color-mix(in srgb, var(--green) 48%, var(--line)); color: var(--green); background: color-mix(in srgb, var(--green-soft) 72%, var(--card)); } .market-calendar-date-rail small { font-size: 11px; font-weight: 850; text-transform: uppercase; } .market-calendar-date-rail strong { color: var(--ink); font-size: 20px; line-height: 1; } .market-calendar-date-rail span { font-size: 11px; font-weight: 850; text-transform: uppercase; } .market-calendar-date-rail i { width: 5px; height: 5px; margin-top: 4px; border-radius: 50%; background: #687cf0; } .market-calendar-date-rail i.impact-high { background: #f06c57; box-shadow: 0 0 0 4px rgba(240,108,87,.11); } body.app-mode[data-view="calendar"] .market-calendar-toolbar { position: sticky; z-index: 12; top: max(6px, env(safe-area-inset-top)); margin: 0 0 12px; padding: 6px; border-radius: 20px; background: color-mix(in srgb, var(--card) 90%, transparent); box-shadow: 0 12px 34px color-mix(in srgb, var(--ink) 8%, transparent); backdrop-filter: blur(18px) saturate(1.35); } body.app-mode[data-view="calendar"] .market-calendar-tabs button, body.app-mode[data-view="calendar"] .market-calendar-ranges button { min-height: 40px; border-radius: 14px; } body.app-mode[data-view="calendar"] .market-calendar-picker { margin-bottom: 12px; border-radius: 21px; } body.app-mode[data-view="calendar"] .market-calendar-picker > summary { min-height: 70px; } body.app-mode[data-view="calendar"] .market-calendar-feed { margin-inline: -2px; padding: 18px 9px 20px; border: 0; background: transparent; box-shadow: none; } body.app-mode[data-view="calendar"] .market-calendar-feed > .panel-header { margin-bottom: 15px; } body.app-mode[data-view="calendar"] .market-calendar-feed > .panel-header p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.app-mode[data-view="calendar"] .market-calendar-groups { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 27px; } body.app-mode[data-view="calendar"] .market-calendar-day { width: auto; min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); content-visibility: visible; contain-intrinsic-size: none; } body.app-mode[data-view="calendar"] .market-calendar-day > div { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); } body.app-mode[data-view="calendar"] .market-calendar-day > h3 { position: relative; margin: 0; padding: 0 4px 4px 18px; font-size: 13px; font-weight: 850; letter-spacing: -.02em; } body.app-mode[data-view="calendar"] .market-calendar-day > h3::before { position: absolute; left: 3px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 10%, transparent); content: ""; } body.app-mode[data-view="calendar"] .market-calendar-day > div { gap: 11px; } body.app-mode[data-view="calendar"] .market-event-card { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; grid-template-columns: 48px minmax(0, 1fr); gap: 11px; min-height: 0; padding: 14px 13px; border-color: color-mix(in srgb, var(--line) 82%, transparent); border-radius: 24px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, #5f73ff 8%, transparent), transparent 38%), var(--card); box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 7%, transparent); } body.app-mode[data-view="calendar"] .market-event-card::before { inset: 18px auto 18px 0; width: 3px; border-radius: 0 99px 99px 0; } body.app-mode[data-view="calendar"] .market-event-date { min-height: 65px; border: 0; border-radius: 16px; background: var(--surface-soft); } body.app-mode[data-view="calendar"] .market-event-date strong { font-size: 21px; } body.app-mode[data-view="calendar"] .market-event-main { gap: 10px; } body.app-mode[data-view="calendar"] .market-event-kicker > span { font-size: 11px; } body.app-mode[data-view="calendar"] .market-event-kicker > i { display: none; } body.app-mode[data-view="calendar"] .market-event-title { gap: 9px; } body.app-mode[data-view="calendar"] .market-event-title .ticker-logo, body.app-mode[data-view="calendar"] .market-event-flag { width: 36px; height: 36px; border-radius: 12px; } body.app-mode[data-view="calendar"] .market-event-title h3 { font-size: 15px; font-weight: 730; line-height: 1.2; } body.app-mode[data-view="calendar"] .market-event-title p { font-size: 11px; line-height: 1.5; } body.app-mode[data-view="calendar"] .market-event-facts { gap: 5px; } body.app-mode[data-view="calendar"] .market-event-facts > span { padding: 8px 7px; border-radius: 11px; } body.app-mode[data-view="calendar"] .market-event-facts strong { font-size: 11px; } body.app-mode[data-view="calendar"] .market-event-tags span:not(.event-quality) { display: none; } body.app-mode[data-view="calendar"] .market-event-context summary { min-height: 34px; display: flex; align-items: center; font-size: 11px; } body.app-mode[data-view="calendar"] .market-event-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; padding-top: 1px; } body.app-mode[data-view="calendar"] .calendar-action { min-width: 0; min-height: 40px; grid-template-columns: auto minmax(0, 1fr); place-items: center start; padding: 6px 8px; border-radius: 12px; } body.app-mode[data-view="calendar"] .calendar-action span { width: 23px; height: 23px; border-radius: 8px; } body.app-mode[data-view="calendar"] .calendar-action b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; } body.app-mode[data-view="calendar"] .market-calendar-sources { border-radius: 24px; } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="calendar"] .market-calendar-toolbar, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="calendar"] .market-calendar-date-rail button, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="calendar"] .market-event-card { border-color: rgba(147, 173, 163, .15); background-color: #121b1e; } :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="calendar"] .market-event-date, :root:is([data-theme="dark"],[data-theme="cyber"]) body.app-mode[data-view="calendar"] .market-event-facts > span { border-color: rgba(147, 173, 163, .12); background: #182326; } :root[data-motion="on"] .market-calendar-mobile-title { animation: calendar-mobile-rise .42s cubic-bezier(.18,.8,.25,1) both; } :root[data-motion="on"] .market-calendar-next-pulse { animation: calendar-mobile-rise .48s .04s cubic-bezier(.18,.8,.25,1) both; } :root[data-motion="on"] .market-calendar-date-rail { animation: calendar-mobile-rise .46s .09s cubic-bezier(.18,.8,.25,1) both; } :root[data-motion="on"] .market-calendar-next-pulse > i u { animation: calendar-pulse-bars 1.8s ease-in-out infinite alternate; } :root[data-motion="on"] .market-calendar-next-pulse > i u:nth-child(2) { animation-delay: .22s; } :root[data-motion="on"] .market-calendar-next-pulse > i u:nth-child(3) { animation-delay: .42s; } } @keyframes calendar-mobile-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } } @keyframes calendar-pulse-bars { 50% { opacity: .45; transform: scaleY(.64); transform-origin: bottom; } } :root[data-motion="off"] .market-calendar-mobile-title, :root[data-motion="off"] .market-calendar-next-pulse, :root[data-motion="off"] .market-calendar-date-rail, :root[data-motion="off"] .market-calendar-next-pulse > i u { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .market-calendar-mobile-title, .market-calendar-next-pulse, .market-calendar-date-rail, .market-calendar-next-pulse > i u { animation: none !important; transition: none !important; } } @media (max-width: 700px) { body.app-mode .app-tabbar button i { width: 38px; height: 30px; } body.app-mode .app-tabbar button.active i { border-radius: 999px; transform: translate3d(0, -2px, 0) scale(1.06); } body.app-mode[data-view="settings"] .content > .panel > .panel-header { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 13px; } body.app-mode[data-view="settings"] .content > .panel > .panel-header .panel-title { width: 100%; min-width: 0; } body.app-mode[data-view="settings"] .content > .panel > .panel-header .panel-title h2 { font-size: 21px; line-height: 1.08; } body.app-mode[data-view="settings"] .content > .panel > .panel-header .panel-actions { display: flex; width: calc(100% + 2px); max-width: 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: start; padding: 2px 1px 5px; scrollbar-width: none; } body.app-mode[data-view="settings"] .content > .panel > .panel-header .panel-actions::-webkit-scrollbar { display: none; } body.app-mode[data-view="settings"] .content > .panel > .panel-header .panel-actions > * { flex: 0 0 auto; } body.app-mode[data-view="settings"] .content > .panel > .panel-header > .tax-toggle, body.app-mode[data-view="settings"] .content > .panel > .panel-header > .filter-select { width: 100%; max-width: none; } } @media (max-width: 700px) { body.app-mode[data-view="company"] .app-native-company-nav { min-height: 52px; } body.app-mode[data-view="company"] .app-native-company-title { padding-top: 14px; } body.app-mode[data-view="company"] .app-native-company-title > div > span strong { font-size: clamp(22px, 7vw, 29px); } body.app-mode[data-view="company"] .app-native-quote { padding-top: 16px; } body.app-mode[data-view="company"] .app-native-quote > strong { font-size: clamp(47px, 13.5vw, 60px); } body.app-mode[data-view="company"] .app-native-chart { min-height: 220px; padding-top: 21px; } body.app-mode[data-view="company"] .app-native-chart .company-hero-spark { height: 178px; } body.app-mode[data-view="company"] .app-native-range { padding: 5px; } body.app-mode[data-view="company"] .app-native-range button { min-height: 38px; } body.app-mode[data-view="company"] .app-native-position-button { min-height: 54px; margin-top: 13px; margin-bottom: 18px; border-radius: 19px; } body.app-mode[data-view="company"] .app-native-position { padding-bottom: 20px; } body.app-mode[data-view="company"] .app-native-upcoming { padding-bottom: 24px; } body.app-mode[data-view="company"] .app-native-upcoming-track article { min-height: 154px; padding: 16px; border-radius: 23px; } body.app-mode[data-view="company"] .app-native-upcoming-track article > strong { font-size: 19px; } } body.app-mode .view-loader:not(.show) .loader-ring, body.app-mode .view-loader:not(.show) .loader-card::after { animation-play-state: paused !important; } body.app-mode[data-view="companies"] .company-table .live-dot { animation: none !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 13%, transparent); } body.app-mode .ticker-mark.logo-fallback::before { animation: none !important; transform: rotate(12deg); } @media (max-width: 700px) { body.app-mode .news-modal-backdrop { align-items: stretch; padding: 0; background: var(--bg); backdrop-filter: none; } body.app-mode .news-modal { width: 100%; height: 100dvh; max-height: 100dvh; padding: calc(14px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none; overscroll-behavior: contain; scrollbar-gutter: auto; } body.app-mode .news-modal::before { display: none; } body.app-mode .news-modal-header { position: sticky; z-index: 4; top: calc(-14px - env(safe-area-inset-top)); flex-direction: row; align-items: center; margin: calc(-14px - env(safe-area-inset-top)) -16px 0; padding: calc(14px + env(safe-area-inset-top)) 16px 12px; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(14px); } body.app-mode .news-modal-header > div:first-child { min-width: 0; } body.app-mode .news-modal-header h2 { overflow: hidden; margin-top: 3px; font-size: 16px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } body.app-mode .news-modal-controls { width: auto; justify-content: flex-end; } body.app-mode .news-modal-content { padding-bottom: 18px; } } @media (max-width: 700px) { body.app-mode .content::before { display: none; } body.app-mode .app-tabbar, body.app-mode[data-view="apphome"] .ah-app-tabs, body.app-mode[data-view="calendar"] .market-calendar-toolbar, body.app-mode[data-view="company"] .app-native-company-nav, body.app-mode[data-view="company"] .app-native-range, body.app-mode .news-modal-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.app-mode .app-tabbar { background: var(--bg) !important; } body.app-mode[data-view="company"] .app-native-company-nav, body.app-mode .news-modal-header { background: var(--bg); } body.news-modal-open.app-mode .app-tabbar { opacity: 0; pointer-events: none; transform: translateY(100%); } body.app-mode .news-modal-backdrop { z-index: 420; } } :root { --evra-ease: cubic-bezier(.2, .75, .25, 1); --evra-spring: cubic-bezier(.34, 1.56, .64, 1); } body.app-mode .content.view-fresh > *:nth-child(n + 7) { animation-delay: 320ms; } .app-mode .app-tabbar button i { position: relative; } .app-mode .app-tabbar button i::before { content: ""; position: absolute; inset: -7px -15px; border-radius: 999px; background: currentColor; opacity: 0; transform: scale(.72); transition: opacity .2s ease, transform .3s var(--evra-spring); pointer-events: none; } .app-mode .app-tabbar button.active i::before { opacity: .14; transform: scale(1); } .app-mode .app-tabbar button svg { position: relative; z-index: 1; } .app-mode .app-tabbar button i, .app-mode .app-tabbar button small { transition: transform .28s var(--evra-spring); } .app-mode .app-tabbar button.active i { transform: translate3d(0, -2px, 0) scale(1.06); } .app-mode .stat-card, .app-mode .panel, .app-mode [data-company], .app-mode [data-nav] { transition: transform .16s var(--evra-ease); } .app-mode .stat-card:active, .app-mode [data-company]:active, .app-mode [data-nav]:active { transform: scale(.985); } .app-mode .company-table tbody tr, .app-mode .news-timeline-item { content-visibility: auto; contain-intrinsic-size: auto 72px; } :root[data-perf="lite"] body.app-mode .content.view-fresh > * { animation-duration: .28s; } :root[data-perf="lite"] body.app-mode .content.view-fresh > *:nth-child(n + 4) { animation-delay: 140ms; } :root[data-perf="lite"] .content.view-enter .portfolio-stats-grid .stat-card, :root[data-perf="lite"] .content.view-enter .portfolio-risk-card, :root[data-perf="lite"] .content.view-enter .realized-panel, :root[data-perf="lite"] .content.view-enter .portfolio-share-studio { animation-duration: .3s; filter: none; } :root[data-perf="lite"] .app-mode .app-tabbar button i::before { transition-duration: .16s; } :root[data-motion="off"] .app-mode .app-tabbar button i, :root[data-motion="off"] .app-mode .app-tabbar button i::before { animation: none; transition: none; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .app-mode .app-tabbar button i, :root:not([data-motion="on"]) .app-mode .app-tabbar button i::before { animation: none; transition: none; } } [data-theme="grafit"] { --green: #2f6f8f; --green-2: #3f8fb5; --green-soft: #e9f1f5; --navy: #16212a; --sidebar: #16212a; --brand-accent: #7fc3e0; } [data-theme="rubin"] { --green: #b0143c; --green-2: #e11d48; --green-soft: #fdeaef; --navy: #2a0a14; --sidebar: #2a0a14; --brand-accent: #fb7185; } [data-theme="cyber"] { --bg: #040d14; --surface: #08161f; --card: #0c1c27; --surface-soft: #122633; --ink: #eaf7fb; --muted: #93b0bd; --line: #213f4e; --green: #22d3ee; --green-2: #06b6d4; --green-soft: #0b3644; --red: #ff8095; --red-soft: #3f1c28; --amber: #ffd166; --amber-soft: #3b2f14; --navy: #04131b; --sidebar: #05141d; --brand-accent: #67e8f9; --action: #0e7f92; --chart-grid: #1e3b49; --shadow: 0 1px 0 rgba(160, 240, 255, 0.04), 0 18px 52px rgba(0, 0, 0, 0.55); } .verdict-card { display: grid; gap: 18px; padding: 20px 18px 18px; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--green) 11%, transparent), transparent 62%), var(--card); } .verdict-card.negative { background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--red) 12%, transparent), transparent 62%), var(--card); } .verdict-head { display: grid; gap: 6px; text-align: center; } .verdict-kicker { color: var(--muted); font-size: 12px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; } .verdict-action { font-size: clamp(24px, 6vw, 33px); font-weight: 860; letter-spacing: -0.03em; line-height: 1.08; } .verdict-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; } .verdict-dial { display: grid; justify-items: center; } .verdict-dial-arc { position: relative; width: min(100%, 272px); } .verdict-dial-arc svg { display: block; width: 100%; height: auto; overflow: visible; } .verdict-arc { fill: none; stroke-width: 6; stroke-linecap: round; opacity: .34; transition: opacity .4s ease .55s, stroke-width .4s ease .55s; } .verdict-ready .verdict-arc.active { opacity: 1; stroke-width: 8; } .verdict-arc-track { fill: none; stroke: var(--surface-soft); stroke-width: 13; stroke-linecap: round; } .verdict-arc.tone-bad { stroke: var(--tick-down); } .verdict-arc.tone-weak { stroke: #f0883e; } .verdict-arc.tone-mid { stroke: var(--amber); } .verdict-arc.tone-good { stroke: color-mix(in srgb, var(--tick-up) 78%, var(--amber)); } .verdict-arc.tone-best { stroke: var(--tick-up); } .verdict-arc-value { fill: none; stroke-width: 13; stroke-linecap: round; stroke-dasharray: var(--arc-len, 276); stroke-dashoffset: var(--arc-len, 276); transition: stroke-dashoffset 1.15s cubic-bezier(.22, .85, .25, 1); } .verdict-ready .verdict-arc-value { stroke-dashoffset: var(--arc-offset, 276); } .verdict-arc-value.tone-bad { stroke: var(--tick-down); } .verdict-arc-value.tone-weak { stroke: #f0883e; } .verdict-arc-value.tone-mid { stroke: var(--amber); } .verdict-arc-value.tone-good { stroke: color-mix(in srgb, var(--tick-up) 78%, var(--amber)); } .verdict-arc-value.tone-best { stroke: var(--tick-up); } .verdict-arc-dot { stroke: var(--card); stroke-width: 3.5; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .3s ease .95s, transform .45s cubic-bezier(.34,1.56,.64,1) .95s; } .verdict-ready .verdict-arc-dot { opacity: 1; transform: scale(1); } .verdict-arc-dot.tone-bad { fill: var(--tick-down); } .verdict-arc-dot.tone-weak { fill: #f0883e; } .verdict-arc-dot.tone-mid { fill: var(--amber); } .verdict-arc-dot.tone-good { fill: color-mix(in srgb, var(--tick-up) 78%, var(--amber)); } .verdict-arc-dot.tone-best { fill: var(--tick-up); } .verdict-dial-value { position: absolute; bottom: 6%; left: 50%; display: grid; justify-items: center; gap: 1px; transform: translateX(-50%); } .verdict-dial-value b { font-size: 40px; font-weight: 870; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .verdict-dial-value span { color: var(--muted); font-size: 12px; font-weight: 700; } .verdict-scale { display: flex; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; flex-wrap: wrap; justify-content: center; } .verdict-scale li { padding: 4px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 800; transition: transform .3s var(--evra-spring, cubic-bezier(.34,1.56,.64,1)), background .3s ease, color .3s ease; } .verdict-ready .verdict-scale li.on { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--ink); transform: scale(1.07); } .verdict-dial-note { margin: 9px 0 0; color: var(--muted); font-size: 11.5px; text-align: center; } .verdict-dial-note b { color: var(--ink); } .verdict-confidence { display: grid; gap: 6px; } .verdict-confidence-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 800; } .verdict-confidence-head span { color: var(--muted); } .verdict-confidence-bar { height: 9px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); } .verdict-confidence-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-2), var(--brand-accent)); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2, .8, .25, 1) .12s; } .verdict-ready .verdict-confidence-bar i { transform: scaleX(calc(var(--confidence, 50) / 100)); } .verdict-confidence small { color: var(--muted); font-size: 12px; line-height: 1.45; } .verdict-section { display: grid; gap: 10px; } .verdict-section h3 { display: flex; gap: 8px; align-items: baseline; margin: 0; font-size: 13px; font-weight: 850; } .verdict-section h3 small { color: var(--muted); font-size: 12px; font-weight: 650; } .verdict-factors { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .verdict-factor { display: grid; gap: 6px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; text-align: left; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .4s ease var(--d, 0ms), transform .4s cubic-bezier(.2,.8,.25,1) var(--d, 0ms), border-color .2s ease; } .verdict-ready .verdict-factor { opacity: 1; transform: none; } .verdict-factor[aria-expanded="true"] { border-color: color-mix(in srgb, var(--green) 58%, var(--line)); background: color-mix(in srgb, var(--green) 8%, var(--surface)); } .verdict-factor-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .verdict-factor-top strong { font-size: 12.5px; } .verdict-factor-top b { font-size: 15px; font-weight: 860; font-variant-numeric: tabular-nums; } .verdict-factor-bar { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); } .verdict-factor-bar i { display: block; width: var(--fill, 0%); height: 100%; border-radius: 999px; background: var(--tick-up); transform: scaleX(0); transform-origin: left; transition: transform .75s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0ms) + 120ms); } .verdict-factor.level-low .verdict-factor-bar i { background: var(--tick-down); } .verdict-factor.level-mid .verdict-factor-bar i { background: var(--amber); } .verdict-factor.level-low .verdict-factor-top b { color: var(--tick-down); } .verdict-factor.level-high .verdict-factor-top b { color: var(--tick-up); } .verdict-ready .verdict-factor-bar i { transform: scaleX(1); } .verdict-factor-foot { color: var(--muted); font-size: 12px; font-weight: 700; } .verdict-chips { display: flex; flex-wrap: wrap; gap: 7px; } .verdict-chip { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 11.5px; font-weight: 750; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .35s ease var(--d, 0ms), transform .35s cubic-bezier(.2,.8,.25,1) var(--d, 0ms), border-color .2s ease, background .2s ease; } .verdict-ready .verdict-chip { opacity: 1; transform: none; } .verdict-chip b { font-variant-numeric: tabular-nums; } .verdict-chip.up b { color: var(--tick-up); } .verdict-chip.down b { color: var(--tick-down); } .verdict-chip.active { border-color: color-mix(in srgb, var(--green) 58%, var(--line)); background: color-mix(in srgb, var(--green) 9%, var(--surface)); } .verdict-detail { display: grid; grid-template-rows: 0fr; border-radius: 14px; background: var(--surface-soft); transition: grid-template-rows .32s cubic-bezier(.2,.8,.25,1), padding .32s ease; padding: 0 13px; } .verdict-detail.open { grid-template-rows: 1fr; padding: 12px 13px; } .verdict-detail > * { overflow: hidden; min-height: 0; } .verdict-detail strong { display: block; font-size: 12.5px; } .verdict-detail strong.up { color: var(--tick-up); } .verdict-detail strong.down { color: var(--tick-down); } .verdict-detail p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .verdict-detail ul { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 5px; } .verdict-detail li { color: var(--muted); font-size: 11.5px; line-height: 1.45; } .verdict-detail li b { font-variant-numeric: tabular-nums; } .verdict-detail li.up b { color: var(--tick-up); } .verdict-detail li.down b { color: var(--tick-down); } .verdict-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .verdict-stats > div { display: grid; gap: 2px; padding: 11px 10px; border-radius: 14px; background: var(--surface-soft); text-align: center; } .verdict-stats span { color: var(--muted); font-size: 12px; font-weight: 700; } .verdict-stats strong { font-size: 14.5px; font-weight: 850; } :root[data-motion="off"] .verdict-needle, :root[data-motion="off"] .verdict-factor, :root[data-motion="off"] .verdict-chip, :root[data-motion="off"] .verdict-confidence-bar i, :root[data-motion="off"] .verdict-factor-bar i { transition: none; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .verdict-needle, :root:not([data-motion="on"]) .verdict-detail { transition: none; } } @media (max-width: 700px) { .verdict-card { padding: 17px 14px 15px; gap: 15px; } .verdict-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { body.app-mode[data-view="portfolio"] .content > *:nth-child(n + 3), body.app-mode[data-view="companies"] .content > *:nth-child(n + 3), body.app-mode[data-view="dividends"] .content > *:nth-child(n + 3), body.app-mode[data-view="calendar"] .content > *:nth-child(n + 3), body.app-mode[data-view="reports"] .content > *:nth-child(n + 3), body.app-mode[data-view="market"] .content > *:nth-child(n + 3) { content-visibility: auto; contain-intrinsic-size: auto 640px; } } .ah-value-card.is-empty .ah-empty-title, .ah-dividend-card.is-empty .ah-empty-title { font-size: clamp(19px, 5.2vw, 24px); font-weight: 850; letter-spacing: -0.025em; line-height: 1.15; } .ah-value-card.is-empty p { margin: 7px 0 12px; font-size: 12.5px; line-height: 1.5; } .ah-empty-secondary { margin-top: 9px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; font-size: 12.5px; font-weight: 800; width: 100%; } .ah-dividend-card.is-empty small { display: block; margin-top: 5px; line-height: 1.45; } .ah-dividend-card.is-empty .ah-dividend-empty { border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line)) !important; border-radius: 999px !important; background: color-mix(in srgb, var(--amber) 14%, transparent) !important; padding: 9px 12px !important; justify-content: center !important; } .ah-dividend-card.is-empty .ah-dividend-empty span { color: var(--ink) !important; font-size: 12px !important; font-weight: 820 !important; opacity: 1 !important; } .ah-dividend-card.is-empty .ah-dividend-empty::before, .ah-dividend-card.is-empty .ah-dividend-empty::after { display: none !important; } @media (max-width: 420px) { .app-menu-grid > button > span > strong { font-size: 13.5px; letter-spacing: -0.02em; } .app-menu-grid > button { gap: 8px; padding: 11px 9px; } .app-menu-grid > button > i { width: 34px; height: 34px; } .app-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } [data-hscroll] { scroll-padding-inline: 14px; -webkit-overflow-scrolling: touch; } [data-hscroll]:not([data-hscroll-end]) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 42px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 42px), transparent); } [data-hscroll]:not([data-hscroll-end]):not([data-hscroll-start]) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 42px), transparent); mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 42px), transparent); } [data-hscroll="snap"] { scroll-snap-type: x proximity; } [data-hscroll="snap"] > * { scroll-snap-align: start; } :root[data-motion="off"] [data-hscroll] { scroll-snap-type: none; } @media (max-width: 700px) { .portfolio-stats-grid > * { flex: 0 0 76% !important; min-width: 0 !important; } .position-panel-actions { flex-wrap: wrap; overflow-x: visible; } .position-panel-actions > * { flex: 1 1 46%; min-width: 0; } .position-panel-actions select { padding-right: 34px; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 700px) { tr[data-portfolio-holding] { position: relative; overflow: hidden; touch-action: pan-y; } tr[data-portfolio-holding] > td:not(.holding-swipe-actions) { transform: translate3d(var(--swipe, 0px), 0, 0); transition: transform .24s cubic-bezier(.2, .8, .25, 1); } tr[data-portfolio-holding].swiping > td:not(.holding-swipe-actions) { transition: none; } .holding-swipe-actions { position: absolute !important; top: 10px; bottom: 10px; right: 0; left: auto; z-index: 2; display: flex !important; width: 150px; padding: 0 !important; border: 0 !important; gap: 8px; align-items: stretch; transform: translate3d(calc(150px + var(--swipe, 0px)), 0, 0); opacity: 0; visibility: hidden; transition: transform .24s cubic-bezier(.2, .8, .25, 1), opacity .16s ease; } tr[data-portfolio-holding].swiping .holding-swipe-actions, tr[data-portfolio-holding].swipe-open .holding-swipe-actions { opacity: 1; visibility: visible; transition: transform .24s cubic-bezier(.2, .8, .25, 1); } tr[data-portfolio-holding].swiping .holding-swipe-actions { transition: none; } .holding-swipe-actions button { display: grid; flex: 1; place-content: center; justify-items: center; gap: 5px; padding: 0; border: 1px solid transparent; border-radius: 16px; color: #fff; cursor: pointer; font-size: 21px; line-height: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); transition: transform .18s ease; } .holding-swipe-actions button:active { transform: scale(.94); } .holding-swipe-actions button small { font-size: 12px; font-weight: 850; letter-spacing: -0.01em; } .holding-swipe-watch { background: linear-gradient(160deg, #f0b429, #d99206); } .holding-swipe-watch.on { background: linear-gradient(160deg, #b8860b, #8a6508); } .holding-swipe-add { background: linear-gradient(160deg, var(--green-2), var(--green)); } } @media (min-width: 701px) { .holding-swipe-actions { display: none !important; } } :root[data-motion="off"] tr[data-portfolio-holding] > td { transition: none !important; } .position-spark { width: 54px; height: 20px; flex: 0 0 auto; margin-left: auto; overflow: visible; opacity: .9; } .position-spark polyline { stroke: var(--tick-up); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .position-spark polyline { stroke-dasharray: 1; animation: row-spark-draw .52s cubic-bezier(.32,.78,.28,1) both; } .row-spark-slot { display: block; width: 54px; height: 20px; margin-top: 2px; } .row-spark-slot .position-spark { margin-left: 0; animation: evra-hero-area-in .3s ease both; } @media (max-width: 700px) { .row-spark-slot { height: 17px; } } .position-spark.down polyline { stroke: var(--tick-down); } .position-spark.flat polyline { stroke: var(--muted); } .portfolio-row-spark { flex: 0 0 54px; margin: 0 0 0 auto; } .position-detail-spark { flex: 0 0 54px; margin: 0; } .position-spark-loader, .position-spark-unavailable { position: relative; display: block; width: 54px; height: 20px; overflow: hidden; border-radius: 7px; } .position-spark-loader { background: color-mix(in srgb, var(--muted) 7%, transparent); } .position-spark-loader i { position: absolute; top: 10px; left: 1px; width: 20px; height: 2px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 55%, transparent); transform: rotate(-10deg); transform-origin: right center; animation: row-spark-loader 1.15s ease-in-out infinite; } .position-spark-loader i:nth-child(2) { left: 18px; top: 9px; transform: rotate(17deg); animation-delay: .14s; } .position-spark-loader i:nth-child(3) { left: 35px; top: 11px; transform: rotate(-21deg); animation-delay: .28s; } .position-spark-unavailable { display: grid; place-items: center; color: var(--muted); font-size: 14px; opacity: .6; } @keyframes row-spark-loader { 0%, 100% { opacity: .2; filter: none; } 50% { opacity: .9; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--brand-accent) 48%, transparent)); } } @keyframes row-spark-draw { from { stroke-dashoffset: 1; opacity: .35; } to { stroke-dashoffset: 0; opacity: 1; } } @media (max-width: 700px) { .position-spark { width: 44px; height: 17px; } } @media (max-width: 700px) { .row-spark-slot, .position-spark-loader, .position-spark-unavailable { width: 44px; height: 17px; } .portfolio-row-spark { flex-basis: 44px; } .position-detail-spark { flex-basis: 44px; } .position-spark-loader i { width: 17px; } .position-spark-loader i:nth-child(2) { left: 14px; } .position-spark-loader i:nth-child(3) { left: 28px; } } :root[data-motion="off"] .position-spark polyline, :root[data-motion="off"] .position-spark-loader i { animation: none !important; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .position-spark polyline, :root:not([data-motion="on"]) .position-spark-loader i { animation: none !important; } } @keyframes evra-hero-spark-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes evra-hero-area-in { from { opacity: 0; } to { opacity: 1; } } :root[data-motion="on"] .content.view-fresh .company-hero-spark polyline { stroke-dasharray: 1; animation: evra-hero-spark-draw .95s cubic-bezier(.32, .78, .28, 1) both; } :root[data-motion="on"] .content.view-fresh .company-hero-spark polygon, :root[data-motion="on"] .content.view-fresh .company-hero-spark circle { animation: evra-hero-area-in .7s ease .38s both; } :root[data-perf="lite"] .content.view-fresh .company-hero-spark polyline { animation-duration: .55s; } .company-hero-spark { touch-action: pan-y; } .company-hero-spark .cursor-vline { stroke: currentColor; stroke-width: .35; opacity: .5; } .company-hero-spark .cursor-dot { r: 1.4; fill: currentColor; stroke: var(--card); stroke-width: .5; } .company-tabbar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 6px); z-index: 40; display: flex; gap: 6px; margin: 4px 0 14px; padding: 7px; overflow-x: auto; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 97%, transparent); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); backdrop-filter: blur(12px); scrollbar-width: none; } .company-tabbar::-webkit-scrollbar { display: none; } #content > [hidden] { display: none !important; } .company-tabbar button { flex: 1 0 auto; padding: 9px 15px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12.5px; font-weight: 820; white-space: nowrap; transition: color .22s ease, background .26s ease, transform .22s var(--evra-spring, cubic-bezier(.34,1.56,.64,1)); } .company-tabbar button.active { background: var(--card); color: var(--ink); box-shadow: 0 2px 10px rgba(6, 22, 16, .1); } .company-tabbar button:active { transform: scale(.95); } @keyframes evra-company-tab-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } } .company-tab-in { animation: evra-company-tab-in .38s cubic-bezier(.16, .82, .24, 1) both; animation-delay: var(--tab-d, 0ms); } :root[data-motion="off"] .company-tab-in { animation: none; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .company-tab-in { animation: none; } } :root[data-perf="lite"] .company-tabbar { backdrop-filter: none; background: var(--bg); } .learn-card { border: 1px solid color-mix(in srgb, var(--green) 26%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--green) 5%, var(--surface)); overflow: hidden; } .learn-head { display: flex; gap: 11px; align-items: center; width: 100%; padding: 12px 13px; border: 0; background: none; cursor: pointer; text-align: left; } .learn-icon { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-2); font-size: 15px; } .learn-copy { display: grid; gap: 2px; min-width: 0; } .learn-copy strong { font-size: 12.5px; font-weight: 830; } .learn-copy small { color: var(--muted); font-size: 11px; line-height: 1.4; } .learn-chevron { margin-left: auto; color: var(--muted); font-size: 19px; font-weight: 800; transition: transform .28s cubic-bezier(.2,.8,.25,1); } .learn-card.open .learn-chevron { transform: rotate(90deg); } .learn-body { display: grid; grid-template-rows: 0fr; padding: 0 13px; transition: grid-template-rows .32s cubic-bezier(.2,.8,.25,1), padding .32s ease; } .learn-card.open .learn-body { grid-template-rows: 1fr; padding: 0 13px 13px; } .learn-body > div { overflow: hidden; min-height: 0; } .learn-body p { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.55; } .learn-body p:last-child { margin-bottom: 0; } .learn-body b { color: var(--ink); font-weight: 800; } .learn-trap { padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--amber) 70%, transparent); } :root[data-motion="off"] .learn-body, :root[data-motion="off"] .learn-chevron { transition: none; } @media (min-width: 1100px) { .full-chart-svg { height: 340px; } .full-chart-wrap { min-height: 0; padding-bottom: 10px; } } @media (min-width: 1500px) { .full-chart-svg { height: 380px; } } .chart-zoom-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--green) 32%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--green) 8%, var(--surface)); font-size: 11.5px; font-weight: 700; } .chart-zoom-bar[hidden] { display: none; } .chart-zoom-bar button { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; font-size: 11px; font-weight: 800; } .chart-gesture-hint { margin: 7px 0 0; color: var(--muted); font-size: 12px; text-align: center; } @media (min-width: 701px) { .chart-gesture-hint { display: none; } } svg[data-chart-cursor] { touch-action: pan-y; } .market-pref-grid { display: grid; gap: 9px; margin-top: 4px; } .market-pref { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .18s ease, background .18s ease; } .market-pref.on { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); background: color-mix(in srgb, var(--green) 7%, var(--surface)); } .market-pref input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--green-2); } .market-pref-flag { display: inline-flex; flex: 0 0 auto; } .market-pref-flag svg { width: 22px; height: 16px; border-radius: 3px; } .market-pref-copy { display: grid; min-width: 0; } .market-pref-copy strong { font-size: 13.5px; } .market-pref-copy small { color: var(--muted); font-size: 11px; } .market-pref:not(.on) .market-pref-copy strong, .market-pref:not(.on) .market-pref-flag { opacity: .55; } @keyframes evra-digit-roll-up { 0% { opacity: 0; transform: translate3d(0, 0.62em, 0); } 55% { opacity: 1; } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes evra-digit-roll-down { 0% { opacity: 0; transform: translate3d(0, -0.62em, 0); } 55% { opacity: 1; } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } :root { --tick-up: #10996a; --tick-down: #d92d43; } :is([data-theme="dark"],[data-theme="cyber"]) { --tick-up: #46e0a5; --tick-down: #ff7f8d; } @keyframes evra-tick-glow-up { 0% { color: var(--tick-up); } 62% { color: var(--tick-up); } 100% { color: inherit; } } @keyframes evra-tick-glow-down { 0% { color: var(--tick-down); } 62% { color: var(--tick-down); } 100% { color: inherit; } } @keyframes evra-tick-wash-up { 0% { background-color: color-mix(in srgb, var(--tick-up) 17%, transparent); } 100% { background-color: transparent; } } @keyframes evra-tick-wash-down { 0% { background-color: color-mix(in srgb, var(--tick-down) 17%, transparent); } 100% { background-color: transparent; } } .digit-roll { display: inline-block; will-change: transform; } .digit-roll.up { animation: evra-digit-roll-up .42s cubic-bezier(.2, .82, .28, 1) both; } .digit-roll.down { animation: evra-digit-roll-down .42s cubic-bezier(.2, .82, .28, 1) both; } [data-tick="up"] { animation: evra-tick-glow-up .95s ease-out both; } [data-tick="down"] { animation: evra-tick-glow-down .95s ease-out both; } tr[data-tick="up"], .ah-mover[data-tick="up"], .company-price[data-tick="up"], .app-native-quote[data-tick="up"] { animation: evra-tick-wash-up .95s ease-out both; } tr[data-tick="down"], .ah-mover[data-tick="down"], .company-price[data-tick="down"], .app-native-quote[data-tick="down"] { animation: evra-tick-wash-down .95s ease-out both; } :root[data-motion="on"] body.app-mode[data-view="companies"] .company-table tbody tr[data-tick="up"] { animation: evra-tick-wash-up .95s ease-out both; } :root[data-motion="on"] body.app-mode[data-view="companies"] .company-table tbody tr[data-tick="down"] { animation: evra-tick-wash-down .95s ease-out both; } :root[data-perf="lite"] .digit-roll { animation: none; } :root[data-perf="lite"] [data-tick] { animation-duration: .6s; } :root[data-motion="off"] .digit-roll, :root[data-motion="off"] [data-tick] { animation: none; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .digit-roll, :root:not([data-motion="on"]) [data-tick] { animation: none; } } :root[data-theme="cyber"] body { background: radial-gradient(circle at 88% -8%, rgba(34, 211, 238, .085), transparent 28rem), radial-gradient(circle at 22% 10%, rgba(59, 130, 246, .05), transparent 24rem), var(--bg); } :root[data-theme="cyber"] body:not(.home-view) { background: radial-gradient(circle at 28% -12%, rgba(34, 211, 238, .08), transparent 30%), radial-gradient(circle at 96% 4%, rgba(103, 232, 249, .045), transparent 24%), var(--bg); background-attachment: fixed; } :root[data-theme="cyber"] body.app-mode { --v245-glass: rgba(12, 28, 39, .84); } :root[data-theme="cyber"] body.app-mode .content::before { background: rgba(34, 211, 238, .05); } :root[data-theme="cyber"] body.app-mode .main-area, :root[data-theme="cyber"] body.app-mode .content { background: #05101a; } :root[data-theme="cyber"] body.app-mode .panel, :root[data-theme="cyber"] body.app-mode .ah-panel, :root[data-theme="cyber"] body.app-mode .business-profile-panel, :root[data-theme="cyber"] body.app-mode .analyst-brief { border-color: rgba(125, 185, 205, .13); background: #0c1c27; } :root[data-theme="cyber"] body.app-mode[data-view="apphome"] .ah-app-tabs, :root[data-theme="cyber"] body.app-mode[data-view="company"] .app-native-range, :root[data-theme="cyber"] body.app-mode .app-tabbar { border-color: rgba(34, 211, 238, .14); background: rgba(5, 17, 25, .9); } :root[data-theme="cyber"] body.app-mode .app-tabbar { border-top-color: rgba(150, 226, 240, .12); background: rgba(5, 17, 25, .94); } :root[data-theme="cyber"] body.app-mode .app-tabbar button.active { color: var(--green); } :root[data-theme="cyber"] body.app-mode[data-view="apphome"] .ah-quick .ah-tile > span { border-color: rgba(34, 211, 238, .13); background: radial-gradient(circle at 78% 16%, rgba(34, 211, 238, .1), transparent 42%), #0e2130; } :root[data-theme="cyber"] body.app-mode[data-view="company"] .app-native-position-grid { background: #0f2130; } :root[data-theme="cyber"] body.app-mode[data-view="apphome"] .ah-value-card { border-color: rgba(34, 211, 238, .16); background: radial-gradient(circle at 88% 13%, rgba(34, 211, 238, .16), transparent 38%), linear-gradient(145deg, #0f2634, #0a1a24 68%); } :root[data-theme="cyber"] body.app-mode[data-view="apphome"] .ah-dividend-card { background: radial-gradient(circle at 90% 12%, rgba(255, 196, 92, .15), transparent 38%), linear-gradient(145deg, #23241f, #131a20 70%); } :root[data-theme="cyber"] body.app-mode[data-view="companies"] .catalog-primary-search, :root[data-theme="cyber"] body.app-mode[data-view="companies"] .catalog-market-shortcuts, :root[data-theme="cyber"] body.app-mode[data-view="companies"] .catalog-mobile-sort button, :root[data-theme="cyber"] body.app-mode[data-view="companies"] .company-table tbody tr { border-color: rgba(125, 185, 205, .14); background-color: #0e1f2b; } :root[data-theme="cyber"] .company-table tbody tr { background: #0d1e29; } :root[data-theme="cyber"] .company-table tbody tr:nth-child(even) { background: #10242f; } :root[data-theme="cyber"] .modal-actions { background: #0b1a24; } :root[data-theme="cyber"] .primary-button { background: linear-gradient(135deg, var(--action), #0b4f6b); } :root[data-theme="cyber"] .primary-button:hover { background: linear-gradient(135deg, #17a3bb, #0d6b86); } :root[data-theme="cyber"] .theme-swatch.active { background: #0d3141; box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .2), 0 10px 26px rgba(0, 0, 0, .3); } :root[data-theme="cyber"] .nav-item { color: #9db9c4; } :root[data-theme="cyber"] .chart-axis-label { fill: #9db9c4; } :root[data-theme="cyber"] textarea::placeholder { color: #7d95a1; } :root[data-theme="cyber"] .auth-scene-backdrop { --auth-accent: 34, 211, 238; --auth-warm: 103, 232, 249; --auth-bg-a: #030a10; --auth-bg-b: #0b1c26; --auth-bg-c: #01060a; } @keyframes evra-tap-burst { 0% { opacity: .46; transform: translate3d(-50%, -50%, 0) scale(.16); } 55% { opacity: .24; } 100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1); } } .evra-tap-burst { position: fixed; z-index: 900; width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--green) 88%, transparent) 0%, color-mix(in srgb, var(--green) 40%, transparent) 42%, transparent 70%); content-visibility: auto; opacity: 0; pointer-events: none; transform: translate3d(-50%, -50%, 0) scale(.18); } .evra-tap-burst.go { animation: evra-tap-burst .46s cubic-bezier(.22, .8, .3, 1) both; } :root[data-perf="lite"] .evra-tap-burst.go { animation-duration: .32s; } @media (max-width: 700px) { body.app-mode .app-tabbar button::before { top: var(--tap-y, 44%); left: var(--tap-x, 50%); } } body.app-mode button, body.app-mode .chip, body.app-mode [data-app-menu-nav], body.app-mode [data-theme-set], body.app-mode [data-app-section-jump] { transition: transform .22s var(--evra-spring, cubic-bezier(.34, 1.56, .64, 1)), box-shadow .2s ease, border-color .2s ease; } body.app-mode button:active, body.app-mode .chip:active, body.app-mode [data-app-menu-nav]:active, body.app-mode [data-theme-set]:active, body.app-mode [data-app-section-jump]:active { transform: scale(.955); } body.app-mode .panel button:active, body.app-mode .primary-button:active, body.app-mode .ghost-button:active { transform: scale(.972); } body.app-mode .stat-card:active, body.app-mode .ah-tile:active, body.app-mode [data-company]:active, body.app-mode [data-nav]:active { transform: scale(.978); } :root[data-motion="off"] .evra-tap-burst { display: none; } :root[data-motion="off"] body.app-mode button, :root[data-motion="off"] body.app-mode .chip { transition: none; } :root[data-motion="off"] body.app-mode button:active, :root[data-motion="off"] body.app-mode .chip:active, :root[data-motion="off"] body.app-mode .stat-card:active, :root[data-motion="off"] body.app-mode [data-company]:active, :root[data-motion="off"] body.app-mode [data-nav]:active { transform: none; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .evra-tap-burst { display: none; } :root:not([data-motion="on"]) body.app-mode button:active, :root:not([data-motion="on"]) body.app-mode .chip:active, :root:not([data-motion="on"]) body.app-mode [data-company]:active, :root:not([data-motion="on"]) body.app-mode [data-nav]:active { transform: none; } } @keyframes evra-row-returned { 0% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--green) 62%, transparent); } 70% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--green) 30%, transparent); } 100% { box-shadow: inset 0 0 0 2px transparent; } } .row-returned { animation: evra-row-returned 1.05s ease-out both; } :root[data-motion="off"] .row-returned { animation: none; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .row-returned { animation: none; } } @keyframes evra-swatch-in { from { opacity: 0; transform: translate3d(0, 9px, 0) scale(.985); } to { opacity: 1; transform: none; } } body.app-mode .content.view-fresh .theme-grid .theme-swatch { animation: evra-swatch-in .34s cubic-bezier(.16, .82, .24, 1) both; } body.app-mode .content.view-fresh .theme-grid .theme-swatch:nth-child(2) { animation-delay: 40ms; } body.app-mode .content.view-fresh .theme-grid .theme-swatch:nth-child(3) { animation-delay: 80ms; } body.app-mode .content.view-fresh .theme-grid .theme-swatch:nth-child(4) { animation-delay: 120ms; } body.app-mode .content.view-fresh .theme-grid .theme-swatch:nth-child(n + 5) { animation-delay: 155ms; } :root[data-motion="off"] body.app-mode .content.view-fresh .theme-grid .theme-swatch { animation: none; } @media (max-width: 700px) { body.app-mode[data-view="settings"] .content > .panel > .panel-header { padding: 14px 15px 10px; } body.app-mode[data-view="settings"] .content > .panel > .form-hint, body.app-mode[data-view="settings"] .content > .panel > p, body.app-mode[data-view="settings"] .content > .panel > .theme-grid, body.app-mode[data-view="settings"] .content > .panel > .motion-preview { margin-right: 15px; margin-left: 15px; } body.app-mode[data-view="settings"] .content > .panel > .panel-header .panel-actions { padding: 0; } } .theme-swatch { position: relative; align-items: center; min-height: 74px; gap: 12px; overflow: hidden; } .theme-swatch .theme-preview { position: relative; display: block; flex: 0 0 auto; width: 46px; height: 46px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 11px; background: var(--pv-bg); } .theme-swatch .theme-preview i { position: absolute; display: block; border-radius: 2px; } .theme-swatch .theme-preview-bar { top: 0; right: 0; left: 0; height: 11px; border-radius: 0; background: var(--pv-accent); } .theme-swatch .theme-preview-line { right: 7px; left: 7px; height: 5px; background: var(--pv-card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pv-accent) 22%, transparent); } .theme-swatch .theme-preview-line:not(.short) { top: 18px; } .theme-swatch .theme-preview-line.short { top: 28px; right: 20px; } .theme-swatch .theme-preview-dot { right: 7px; bottom: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--pv-accent-2); } .theme-swatch .theme-swatch-text { min-width: 0; } .theme-swatch strong { display: block; overflow: hidden; font-size: 13.5px; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; } .theme-swatch small { overflow: hidden; line-height: 1.32; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .theme-swatch .theme-swatch-check { position: absolute; top: 6px; right: 8px; color: var(--green-2); font-size: 12px; font-weight: 900; line-height: 1; } .theme-swatch.active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-2) 15%, transparent); } @media (max-width: 700px) { .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .theme-swatch { min-height: 68px; gap: 9px; padding: 10px 11px; } .theme-swatch .theme-preview { width: 38px; height: 38px; } .theme-swatch strong { font-size: 12.5px; } .theme-swatch small { font-size: 12px; } } @keyframes evra-price-pop { 0% { transform: scale(1); } 32% { transform: scale(1.075); } 100% { transform: scale(1); } } @keyframes evra-price-ring { 0% { opacity: .55; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.35); } } .tick-up, .tick-down { position: relative; } .tick-up strong, .tick-down strong { animation-duration: .5s, .62s; } .tick-up strong { animation-name: tick-slide-up, evra-price-pop; } .tick-down strong { animation-name: tick-slide-down, evra-price-pop; } .tick-up::after, .tick-down::after { content: ""; position: absolute; inset: -6px -10px; border-radius: 12px; pointer-events: none; animation: evra-price-ring .72s ease-out both; } .tick-up::after { box-shadow: 0 0 0 2px var(--green-2); } .tick-down::after { box-shadow: 0 0 0 2px var(--red); } :root[data-motion="off"] .tick-up::after, :root[data-motion="off"] .tick-down::after { animation: none; display: none; } :root[data-perf="lite"] .tick-up::after, :root[data-perf="lite"] .tick-down::after { animation-duration: .45s; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .tick-up::after, :root:not([data-motion="on"]) .tick-down::after { animation: none; display: none; } } @keyframes evra-palette-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes evra-palette-in { 0% { opacity: 0; transform: translateY(22px) scale(.965); } 62% { opacity: 1; transform: translateY(-3px) scale(1.004); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes evra-palette-item-in { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: translateX(0); } } .command-palette-backdrop { position: fixed; inset: 0; z-index: 340; display: none; align-items: flex-start; justify-content: center; padding: min(14vh, 130px) 16px 24px; background: color-mix(in srgb, var(--navy) 42%, transparent); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .command-palette-backdrop.open { display: flex; animation: evra-palette-backdrop-in .18s ease-out both; } .command-palette { display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(64vh, 560px); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 30px 70px color-mix(in srgb, var(--navy) 38%, transparent); } .command-palette-backdrop.open .command-palette { animation: evra-palette-in .3s cubic-bezier(.2, .9, .25, 1.18) both; } .command-palette-input { display: flex; align-items: center; gap: 11px; padding: 15px 17px; border-bottom: 1px solid var(--line); } .command-palette-input svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; } .command-palette-input input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; outline: none; } .command-palette-input kbd, .command-palette-foot kbd, .command-palette-hint kbd { padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.4; } .command-palette-results { flex: 1; overflow-y: auto; padding: 8px; overscroll-behavior: contain; } .command-palette-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 11px; border: 0; border-radius: 13px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; } .command-palette-backdrop.open .command-palette-item { animation: evra-palette-item-in .24s ease-out both; animation-delay: calc(var(--cp-i, 0) * 20ms); } .command-palette-item.active, .command-palette-item:hover { background: color-mix(in srgb, var(--green-2) 11%, var(--surface-soft)); } .command-palette-item.active { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green-2) 45%, transparent); } .command-palette-glyph, .command-palette-swatch { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 13px; } .command-palette-swatch { background: var(--cp-swatch, var(--green-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy) 16%, transparent); } .command-palette-copy { min-width: 0; flex: 1; } .command-palette-copy strong { display: block; overflow: hidden; font-size: 14px; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; } .command-palette-copy small { display: block; overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; } .command-palette-badge { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .command-palette-badge.company { background: color-mix(in srgb, var(--green-2) 14%, var(--surface-soft)); color: var(--green); } .command-palette-badge.theme { background: color-mix(in srgb, var(--amber) 16%, var(--surface-soft)); color: color-mix(in srgb, var(--amber) 72%, var(--ink)); } .command-palette-empty { display: grid; gap: 4px; padding: 26px 16px; text-align: center; } .command-palette-empty small { color: var(--muted); } .command-palette-foot { display: flex; gap: 15px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); font-size: 11.5px; } .command-palette-foot span { display: inline-flex; align-items: center; gap: 5px; } .command-palette-hint { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 0; background: transparent; cursor: pointer; } .command-palette-hint:hover kbd { border-color: var(--green-2); color: var(--green); } @media (max-width: 900px) { .command-palette-hint { display: none; } .command-palette-backdrop { padding: 9vh 10px 16px; } .command-palette-foot { display: none; } } :root[data-motion="off"] .command-palette-backdrop.open, :root[data-motion="off"] .command-palette-backdrop.open .command-palette, :root[data-motion="off"] .command-palette-backdrop.open .command-palette-item { animation: none; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .command-palette-backdrop.open, :root:not([data-motion="on"]) .command-palette-backdrop.open .command-palette, :root:not([data-motion="on"]) .command-palette-backdrop.open .command-palette-item { animation: none; } } @keyframes evra-heatmap-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } } .market-heatmap { display: grid; grid-auto-flow: dense; grid-auto-rows: 64px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; } .heatmap-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 0; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--navy) 9%, transparent); border-radius: 13px; background: var(--surface-soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer; animation: evra-heatmap-in .34s ease-out both; animation-delay: var(--hm-delay, 0ms); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; } .heatmap-tile:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 10px 24px color-mix(in srgb, var(--navy) 20%, transparent); filter: saturate(1.12); z-index: 1; } .heatmap-tile:active { transform: translateY(-1px) scale(.99); } .heatmap-tile strong { font-size: 14px; letter-spacing: -0.01em; } .heatmap-tile span { font-size: 12px; font-weight: 800; opacity: .96; } .heatmap-tile small, .heatmap-tile em { display: none; overflow: hidden; max-width: 100%; font-style: normal; text-overflow: ellipsis; white-space: nowrap; } .heatmap-tile.hm-xl { grid-column: span 2; grid-row: span 2; } .heatmap-tile.hm-lg { grid-column: span 2; } .heatmap-tile.hm-xl strong { font-size: 21px; } .heatmap-tile.hm-xl span { font-size: 15px; } .heatmap-tile.hm-xl small, .heatmap-tile.hm-xl em, .heatmap-tile.hm-lg small { display: block; font-size: 11px; opacity: .78; } .heatmap-tile.hm-up-1 { background: color-mix(in srgb, var(--green-2) 16%, var(--card)); } .heatmap-tile.hm-up-2 { background: color-mix(in srgb, var(--green-2) 34%, var(--card)); } .heatmap-tile.hm-up-3 { background: color-mix(in srgb, var(--green-2) 54%, var(--card)); } .heatmap-tile.hm-down-1 { background: color-mix(in srgb, var(--red) 14%, var(--card)); } .heatmap-tile.hm-down-2 { background: color-mix(in srgb, var(--red) 30%, var(--card)); } .heatmap-tile.hm-down-3 { background: color-mix(in srgb, var(--red) 48%, var(--card)); } .heatmap-tile.hm-up-3, .heatmap-tile.hm-down-3 { color: color-mix(in srgb, var(--ink) 88%, var(--card)); } .heatmap-tile.hm-flat { background: var(--surface-soft); color: var(--muted); } @media (max-width: 700px) { .market-heatmap { grid-auto-rows: 58px; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 7px; } .heatmap-tile.hm-xl strong { font-size: 18px; } } :root[data-motion="off"] .heatmap-tile { animation: none; transition: none; } :root[data-perf="lite"] .heatmap-tile { animation-delay: 0ms; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .heatmap-tile { animation: none; transition: none; } } @keyframes evra-bubble-pop { 0% { opacity: 0; transform: scale(.35); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } @keyframes evra-bubble-float { from { transform: translateY(calc(var(--b-drift, 5px) * -1)); } to { transform: translateY(var(--b-drift, 5px)); } } .market-map-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .map-mode-tabs, .map-count-tabs { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); } .map-mode-tabs button, .map-count-tabs button { padding: 5px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease; } .map-mode-tabs button.active, .map-count-tabs button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 5px color-mix(in srgb, var(--navy) 16%, transparent); } .market-bubbles { position: relative; min-height: 230px; overflow: hidden; border-radius: 14px; } .market-bubbles:not(.ready) .bubble { opacity: 0; } .bubble { position: absolute; left: var(--b-x, 0); top: var(--b-y, 0); width: var(--b-r, 56px); height: var(--b-r, 56px); padding: 0; border: 0; background: transparent; cursor: pointer; animation: evra-bubble-float var(--b-dur, 6s) ease-in-out infinite alternate; animation-delay: calc(var(--b-i, 0) * -333ms); } .bubble-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--b-r, 56px) * 0.02); width: 100%; height: 100%; min-width: 0; border-radius: 50%; color: var(--ink); animation: evra-bubble-pop .5s cubic-bezier(.2, .85, .3, 1.2) both; animation-delay: calc(var(--b-i, 0) * 22ms); transition: transform .16s ease, box-shadow .16s ease; } .bubble:hover .bubble-body, .bubble:focus-visible .bubble-body { transform: scale(1.09); z-index: 2; } .bubble:active .bubble-body { transform: scale(.97); } .bubble.up .bubble-body { background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--green-2) 38%, var(--card)), color-mix(in srgb, var(--green-2) 12%, var(--card)) 74%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--green-2) 62%, transparent), inset 0 -8px 18px color-mix(in srgb, var(--green-2) 24%, transparent), 0 7px 18px color-mix(in srgb, var(--navy) 14%, transparent); } .bubble.down .bubble-body { background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--red) 34%, var(--card)), color-mix(in srgb, var(--red) 11%, var(--card)) 74%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--red) 58%, transparent), inset 0 -8px 18px color-mix(in srgb, var(--red) 22%, transparent), 0 7px 18px color-mix(in srgb, var(--navy) 14%, transparent); } .bubble.flat .bubble-body { background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--muted) 20%, var(--card)), var(--card) 76%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--muted) 38%, transparent), 0 7px 18px color-mix(in srgb, var(--navy) 12%, transparent); color: var(--muted); } .bubble .ticker-mark.bubble-logo { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; width: calc(var(--b-r, 56px) * 0.3); height: calc(var(--b-r, 56px) * 0.3); border-radius: 50%; background: var(--card); box-shadow: 0 1px 4px color-mix(in srgb, var(--navy) 22%, transparent); } .bubble .ticker-mark.bubble-logo img { width: 100%; height: 100%; object-fit: cover; } .bubble .ticker-mark.bubble-logo b { font-size: calc(var(--b-r, 56px) * 0.12); } .bubble .ticker-mark.bubble-logo em { display: none; } .bubble strong { max-width: 86%; overflow: hidden; font-size: clamp(9px, calc(var(--b-r, 56px) * 0.185), 21px); font-weight: 900; letter-spacing: -0.01em; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .bubble .bubble-change { font-size: clamp(8px, calc(var(--b-r, 56px) * 0.135), 15px); font-weight: 800; opacity: .92; } :root[data-motion="off"] .bubble, :root[data-motion="off"] .bubble-body { animation: none; transition: none; } :root[data-perf="lite"] .bubble { animation: none; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .bubble, :root:not([data-motion="on"]) .bubble-body { animation: none; transition: none; } } @keyframes evra-dca-card-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes evra-pulse-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes evra-source-chip-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .dca-sim-panel { margin-top: 16px; overflow: hidden; } .dca-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; padding: 4px 22px 16px; } .dca-amount-field, .dca-day-field { display: grid; gap: 5px; min-width: 140px; } .dca-amount-field span, .dca-day-field span { color: var(--muted); font-size: 11px; font-weight: 700; } .dca-amount-field > div { display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); } .dca-amount-field input { width: 110px; min-height: 40px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 18px; font-weight: 850; } .dca-amount-field b { color: var(--muted); font-size: 12px; } .dca-day-field select { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 700; } .dca-quick-amounts, .dca-mode-tabs, .dca-years-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); } .dca-quick-amounts button, .dca-mode-tabs button, .dca-years-tabs button { padding: 7px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease; } .dca-quick-amounts button.active, .dca-mode-tabs button.active, .dca-years-tabs button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 5px color-mix(in srgb, var(--navy) 14%, transparent); } .dca-quick-amounts button:hover, .dca-mode-tabs button:hover, .dca-years-tabs button:hover { color: var(--ink); } .dca-tickers { display: grid; gap: 10px; padding: 0 22px 14px; } .dca-ticker-chips { display: flex; flex-wrap: wrap; gap: 8px; } .dca-ticker-chips button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .15s ease, border-color .15s ease; } .dca-ticker-chips button:hover { border-color: color-mix(in srgb, var(--green-2) 40%, var(--line)); transform: translateY(-1px); } .dca-ticker-chips button span { color: var(--muted); font-size: 14px; line-height: 1; } .dca-ticker-add { position: relative; max-width: 420px; } .dca-search-results { position: absolute; z-index: 8; top: calc(100% + 4px); left: 0; right: 0; display: grid; gap: 2px; max-height: 260px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 14px 36px color-mix(in srgb, var(--navy) 16%, transparent); } .dca-search-results:empty { display: none; } .dca-search-results button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; } .dca-search-results button:hover { background: var(--surface-soft); } .dca-search-results strong { display: block; font-size: 13px; } .dca-search-results small { color: var(--muted); font-size: 11px; } .dca-search-results i { color: var(--green-2); font-style: normal; font-weight: 900; } .dca-search-empty { margin: 0; padding: 12px; color: var(--muted); font-size: 12px; } .dca-summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 18px 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); } .dca-summary-item { display: grid; gap: 4px; padding: 14px 16px; background: var(--card); } .dca-summary-item span { color: var(--muted); font-size: 11px; font-weight: 700; } .dca-summary-item strong { font-size: 22px; letter-spacing: -.4px; } .dca-summary-item.main strong { font-size: 28px; } .dca-summary-item small { color: var(--muted); font-size: 11px; } .dca-chart-stage { padding-bottom: 4px; } .dca-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; padding: 8px 18px 10px; } .dca-result-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); animation: evra-dca-card-in .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--dca-i, 0) * 55ms); } .dca-result-card > div:first-child { display: flex; align-items: center; gap: 8px; } .dca-result-card > div:first-child strong { display: block; font-size: 14px; } .dca-result-card > div:first-child small { color: var(--muted); font-size: 11px; } .dca-card-return { font-size: 24px; letter-spacing: -.5px; } .dca-result-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 0; } .dca-result-card dt { color: var(--muted); font-size: 12px; } .dca-result-card dd { margin: 2px 0 0; font-size: 12px; font-weight: 800; } .dca-footnote { margin: 0; padding: 4px 22px 18px; color: var(--muted); font-size: 11px; line-height: 1.5; } .portfolio-pulse-panel { margin-bottom: 14px; } .portfolio-pulse-actions { display: flex; flex-wrap: wrap; gap: 8px; } .portfolio-pulse-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 18px 18px; } .portfolio-pulse-card { display: grid; gap: 5px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--green-2) 8%, var(--card)), var(--card) 70%); animation: evra-pulse-card-in .42s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--pp-i, 0) * 60ms); } .portfolio-pulse-card.warn { background: linear-gradient(160deg, color-mix(in srgb, #d4a017 14%, var(--card)), var(--card) 72%); } .portfolio-pulse-card.down { background: linear-gradient(160deg, color-mix(in srgb, var(--red) 12%, var(--card)), var(--card) 72%); } .portfolio-pulse-card.up { background: linear-gradient(160deg, color-mix(in srgb, var(--green-2) 14%, var(--card)), var(--card) 72%); } .portfolio-pulse-card span { color: var(--muted); font-size: 11px; font-weight: 750; } .portfolio-pulse-card strong { font-size: 17px; letter-spacing: -.3px; line-height: 1.25; } .portfolio-pulse-card small { color: var(--muted); font-size: 11px; line-height: 1.4; } .news-source-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; } .news-source-strip span { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 750; animation: evra-source-chip-in .35s ease both; animation-delay: calc(var(--ns-i, 0) * 40ms); } .news-timeline-item, .news-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .news-timeline-item:hover, .news-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--navy) 10%, transparent); } :root[data-motion="off"] .dca-result-card, :root[data-motion="off"] .portfolio-pulse-card, :root[data-motion="off"] .news-source-strip span { animation: none; } @media (max-width: 900px) { .portfolio-pulse-grid { grid-template-columns: 1fr 1fr; } .dca-summary-strip { grid-template-columns: 1fr; } } @media (max-width: 640px) { .portfolio-pulse-grid { grid-template-columns: 1fr; } .dca-controls { padding-inline: 14px; } .dca-tickers, .dca-result-grid { padding-inline: 14px; } .dca-summary-strip { margin-inline: 12px; } } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .dca-result-card, :root:not([data-motion="on"]) .portfolio-pulse-card, :root:not([data-motion="on"]) .news-source-strip span, :root:not([data-motion="on"]) .news-timeline-item, :root:not([data-motion="on"]) .news-card { animation: none; transition: none; } } article.realized-panel.realized-panel-v2 { overflow: hidden; padding: 0; border: 0; color: #f4fbf7; background: radial-gradient(circle at 88% 0%, rgba(103, 210, 169, 0.22), transparent 34%), radial-gradient(circle at 8% 100%, rgba(255, 196, 92, 0.12), transparent 28%), linear-gradient(152deg, #0b2a22 0%, #134636 48%, #102820 100%); box-shadow: 0 18px 48px rgba(8, 28, 22, 0.22); } .content.view-enter article.realized-panel.realized-panel-v2, article.realized-panel.realized-panel-v2.is-in:not(.no-anim) { animation: realized-v2-in 0.42s cubic-bezier(.2,.8,.25,1) both; } @keyframes realized-v2-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .realized-v2-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr) auto; gap: 16px; align-items: center; padding: 22px 22px 8px; } .realized-panel-v2 .panel-title .eyebrow { color: #7ee2bc; letter-spacing: 0.14em; } .realized-panel-v2 .panel-title h2 { color: #fff; margin: 4px 0 6px; } .realized-panel-v2 .panel-title p { color: rgba(244, 251, 247, 0.68); max-width: 42ch; } .realized-v2-hero { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(8px); } .realized-v2-hero span, .realized-v2-hero small { color: rgba(244, 251, 247, 0.62); font-size: 12px; font-weight: 750; } .realized-v2-hero span { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 900; font-size: 11.5px; } .realized-v2-hero strong { color: #fff; font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.04em; line-height: 1.05; } .realized-v2-hero.trend-up strong { color: #8ef0c4; } .realized-v2-hero.trend-down strong { color: #ffb4b6; } .realized-panel-v2 > .ghost-button, .realized-v2-head > .ghost-button { justify-self: end; border-color: rgba(255, 255, 255, 0.2); color: #fff; background: rgba(255, 255, 255, 0.08); } .realized-v2-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 10px 22px 6px; } .realized-v2-metric { display: grid; gap: 4px; padding: 13px 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgba(255, 255, 255, 0.055); } .realized-panel-v2.is-in:not(.no-anim) .realized-v2-metric, .content.view-enter .realized-v2-metric { animation: realized-metric-in 0.4s cubic-bezier(.2,.8,.25,1) both; animation-delay: calc(var(--rz-i, 0) * 55ms + 80ms); } @keyframes realized-metric-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .realized-v2-metric span, .realized-v2-metric small { color: rgba(244, 251, 247, 0.58); font-size: 11.5px; } .realized-v2-metric span { text-transform: uppercase; letter-spacing: 0.07em; font-weight: 900; } .realized-v2-metric strong { color: #fff; font-size: 17px; letter-spacing: -0.02em; } .realized-v2-metric.trend-up strong { color: #8ef0c4; } .realized-v2-metric.trend-down strong { color: #ffb4b6; } .realized-panel-v2 .tax-cost-warning { margin: 10px 22px 0; border-color: rgba(255, 196, 92, 0.35); background: rgba(255, 196, 92, 0.1); color: #ffe4a8; } .realized-panel-v2 .closed-positions-ledger { margin: 14px 22px 0; } .realized-panel-v2 .realized-note { margin: 0; padding: 14px 22px 20px; color: rgba(244, 251, 247, 0.62); font-size: 12px; line-height: 1.5; } .realized-panel-v2 .realized-note b { color: #fff; } .closed-positions-ledger[open] .closed-position-row { animation: closed-row-in 0.28s ease both; animation-delay: calc(var(--cp-i, 0) * 40ms); } @keyframes closed-row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .portfolio-valuation-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--amber-soft) 70%, var(--card)); color: var(--ink); font-size: 12px; line-height: 1.4; } .portfolio-valuation-banner strong { font-weight: 850; } .portfolio-valuation-banner > span:last-child { color: var(--muted); } .portfolio-valuation-pulse { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 45%, transparent); animation: portfolio-val-pulse 1.2s ease-out infinite; } @keyframes portfolio-val-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 45%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (max-width: 1050px) { .realized-v2-head { grid-template-columns: 1fr 1fr; } .realized-v2-head > .ghost-button { grid-column: 1 / -1; justify-self: start; } .realized-v2-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .realized-v2-head { grid-template-columns: 1fr; padding: 18px 16px 6px; } .realized-v2-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 16px 4px; gap: 8px; } .realized-panel-v2 .closed-positions-ledger { margin-inline: 16px; } .realized-panel-v2 .realized-note { padding: 12px 16px 16px; } .realized-panel-v2 .tax-cost-warning { margin-inline: 16px; } } .company-chart-grid { align-items: start; } .company-chart-grid > .panel { display: grid; align-content: start; } .company-chart-grid .full-chart-wrap { min-height: 0 !important; padding-bottom: 4px; } .company-chart-grid .learn-card { margin: 8px 14px 12px; } .company-chart-grid .chart-gesture-hint { margin: 4px 0 2px; } .financial-bars-v2 { min-height: 0; border-right: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--green-soft) 35%, var(--card)), var(--card)); } .financial-bars-v2 .financial-bars { height: 200px; padding-top: 12px; } .financial-bars-v2 .financial-bar { height: var(--fb-h, 40px); transform: scaleY(1); transform-origin: bottom; box-shadow: 0 8px 18px color-mix(in srgb, var(--green) 18%, transparent); } .financial-bars-v2 .financial-bar.profit { box-shadow: 0 8px 18px color-mix(in srgb, #2f80ed 18%, transparent); } .financial-bars-v2.is-in:not(.no-anim) .financial-bar, .content.view-enter .financial-bars-v2 .financial-bar { animation: financial-bar-grow 0.55s cubic-bezier(.2,.8,.25,1) both; animation-delay: calc(var(--fb-i, 0) * 70ms + 60ms); } @keyframes financial-bar-grow { from { transform: scaleY(0.08); opacity: 0.35; } to { transform: scaleY(1); opacity: 1; } } .financial-bars-v2.is-in:not(.no-anim) .financial-column, .content.view-enter .financial-bars-v2 .financial-column { animation: financial-col-in 0.35s ease both; animation-delay: calc(var(--fb-i, 0) * 55ms); } @keyframes financial-col-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .financial-table-v2.is-in:not(.no-anim) tbody tr, .content.view-enter .financial-table-v2 tbody tr { animation: financial-row-in 0.3s ease both; animation-delay: calc(var(--ft-i, 0) * 45ms + 120ms); } @keyframes financial-row-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } } .financial-results { overflow: hidden; border-radius: 0 0 18px 18px; } .report-metric { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .report-metric.is-in:not(.no-anim) { animation: financial-row-in 0.35s ease both; animation-delay: calc(var(--rm-i, 0) * 50ms); } .dashboard-grid .report-metric:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--navy) 8%, transparent); } .market-calendar-hero { animation: none; } .content.view-fresh .market-calendar-hero, .content.view-enter .market-calendar-hero { animation: calendar-hero-in 0.4s ease both; } @keyframes calendar-hero-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .market-calendar-hero-copy > div > span { transition: transform 0.18s ease, border-color 0.18s ease; } .market-calendar-hero-copy > div > span:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--green) 40%, var(--line)); } .market-calendar-day.is-in:not(.no-anim) { animation: calendar-day-in 0.32s cubic-bezier(.22,.7,.3,1) both; } @keyframes calendar-day-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } } .market-calendar-day.is-in { will-change: auto; } .market-calendar-selected > span small { padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); font-weight: 800; letter-spacing: 0.02em; } .content.company-premium-view > .company-chart-grid, body.app-mode[data-view="company"] .content > .company-chart-grid, .company-premium-view > .company-chart-grid, .content.company-premium-view > .company-chart-row, body.app-mode[data-view="company"] .content > .company-chart-row, .company-premium-view > .company-chart-row { content-visibility: visible !important; contain-intrinsic-size: none !important; } .content.company-premium-view > .quote-session-panel, body.app-mode[data-view="company"] .content > .quote-session-panel, .content.company-premium-view > .dashboard-grid, body.app-mode[data-view="company"] .content > .dashboard-grid, .content.company-premium-view > .company-detail-grid, .content.company-premium-view > .report-data-panel { contain-intrinsic-size: auto 280px !important; } body.app-mode[data-view="portfolio"] .content > .dashboard-grid, body.app-mode[data-view="portfolio"] .content > .portfolio-currency-board, body.app-mode[data-view="portfolio"] .content > .portfolio-risk-panel, body.app-mode[data-view="portfolio"] .content > .portfolio-bottom-drawer, .portfolio-mobile-priority > .portfolio-benchmark-panel, .portfolio-mobile-priority > .portfolio-share-studio, .portfolio-mobile-priority > .portfolio-dividend-hub, .portfolio-mobile-priority > .portfolio-bottom-drawer { contain-intrinsic-size: auto 320px !important; } @media (max-width: 700px) { body.app-mode[data-view="portfolio"] .content > *:nth-child(n + 3), body.app-mode[data-view="company"] .content > *:nth-child(n + 4), body.app-mode[data-view="calendar"] .content > *:nth-child(n + 3) { contain-intrinsic-size: auto 300px !important; } } :root[data-motion="off"] .realized-panel-v2, :root[data-motion="off"] .realized-v2-metric, :root[data-motion="off"] .closed-position-row, :root[data-motion="off"] .financial-bars-v2 .financial-bar, :root[data-motion="off"] .financial-bars-v2 .financial-column, :root[data-motion="off"] .financial-table-v2 tbody tr, :root[data-motion="off"] .market-calendar-hero, :root[data-motion="off"] .market-calendar-day, :root[data-motion="off"] .market-event-card { animation: none !important; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .realized-panel-v2, :root:not([data-motion="on"]) .realized-v2-metric, :root:not([data-motion="on"]) .closed-position-row, :root:not([data-motion="on"]) .financial-bars-v2 .financial-bar, :root:not([data-motion="on"]) .financial-bars-v2 .financial-column, :root:not([data-motion="on"]) .financial-table-v2 tbody tr, :root:not([data-motion="on"]) .market-calendar-hero, :root:not([data-motion="on"]) .market-calendar-day, :root:not([data-motion="on"]) .market-event-card { animation: none !important; } } .company-chart-row, .company-chart-grid { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; gap: 14px !important; margin-bottom: 14px !important; grid-template-columns: none !important; grid-auto-rows: unset !important; } .company-chart-row > .company-chart-main, .company-chart-grid > .company-chart-main { flex: 1 1 58%; min-width: min(100%, 420px); align-self: flex-start !important; height: fit-content !important; max-height: none !important; min-height: 0 !important; } .company-chart-row > .company-decision-panel, .company-chart-grid > .company-decision-panel { flex: 1 1 300px; max-width: 420px; align-self: flex-start !important; height: fit-content !important; max-height: none !important; min-height: 0 !important; } .company-chart-row > *, .company-chart-grid > * { align-self: flex-start !important; height: fit-content !important; min-height: 0 !important; max-height: none !important; } .company-chart-main { display: flex !important; flex-direction: column; gap: 0; overflow: visible !important; } .company-chart-main .full-chart-wrap { flex: 0 0 auto; min-height: 0 !important; padding-bottom: 2px !important; } .company-chart-main .learn-card { margin: 6px 12px 12px !important; flex: 0 0 auto; } .company-decision-panel { overflow: hidden; } .analyst-consensus-premium.company-section-v2 { margin-bottom: 14px; border-radius: 22px; animation: company-section-in 0.4s ease both; } .company-section-v2 { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--green) 14%, var(--line)); border-radius: 22px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--green) 8%, transparent), transparent 36%), var(--card); box-shadow: 0 12px 32px color-mix(in srgb, var(--navy) 6%, transparent); } .company-section-v2 .panel-title .eyebrow, .company-section-v2 > .panel-header .eyebrow, .quote-session-panel .eyebrow, .report-data-panel .eyebrow, .financial-results-panel .eyebrow { display: block; margin-bottom: 4px; color: var(--green-2); font-size: 11.5px; font-weight: 950; letter-spacing: 0.14em; } .company-metric-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 4px 16px 16px; } .company-metric-tile { display: grid; gap: 5px; min-height: 96px; padding: 14px 15px; border: 1px solid color-mix(in srgb, var(--line) 88%, transparent); border-radius: 16px; background: linear-gradient(165deg, color-mix(in srgb, var(--green-soft) 28%, var(--card)), var(--card)); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .company-metric-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--green) 28%, var(--line)); box-shadow: 0 10px 22px color-mix(in srgb, var(--navy) 8%, transparent); } .company-metric-tile.beat { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); background: linear-gradient(165deg, color-mix(in srgb, var(--green-soft) 55%, var(--card)), var(--card)); } .company-metric-tile.miss { border-color: color-mix(in srgb, var(--red) 28%, var(--line)); background: linear-gradient(165deg, color-mix(in srgb, var(--red-soft) 55%, var(--card)), var(--card)); } .company-metric-tile span { color: var(--muted); font-size: 11.5px; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; } .company-metric-tile strong { color: var(--ink); font-size: clamp(15px, 1.7vw, 20px); letter-spacing: -0.03em; line-height: 1.15; } .company-metric-tile small { color: var(--muted); font-size: 12px; line-height: 1.35; } .company-section-v2.is-in:not(.no-anim), .content.view-enter .company-section-v2 { animation: company-section-in 0.42s cubic-bezier(.2,.8,.25,1) both; } @keyframes company-section-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .company-metric-tile.is-in:not(.no-anim) { animation: financial-row-in 0.32s ease both; animation-delay: calc(var(--rm-i, 0) * 45ms); } .report-data-panel.company-section-v2 .report-legend { margin: 0 16px 8px; } .financial-results-panel { overflow: hidden; } .portfolio-chart-pending { display: inline-flex; margin-top: 6px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--amber-soft) 80%, var(--card)); color: var(--amber); font-size: 12px; font-weight: 800; } @media (max-width: 900px) { .company-chart-row, .company-chart-grid { flex-direction: column !important; } .company-chart-row > .company-chart-main, .company-chart-row > .company-decision-panel, .company-chart-grid > .company-chart-main, .company-chart-grid > .company-decision-panel { flex: 1 1 auto; max-width: none; width: 100%; } .company-metric-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .company-chart-solo { display: flex !important; flex-direction: column; width: 100%; max-width: 100%; margin-bottom: 14px !important; height: auto !important; min-height: 0 !important; align-self: stretch !important; } .company-chart-solo .full-chart-wrap { flex: 0 0 auto; min-height: 0 !important; padding-bottom: 2px !important; } .company-chart-solo .learn-card { margin: 6px 12px 12px !important; flex: 0 0 auto; } .company-decision-solo { width: 100%; max-width: 100%; margin-bottom: 14px !important; height: auto !important; } .company-hero-spark-loading { display: grid; place-items: center; gap: 8px; min-height: 112px; margin: 18px 0 12px; color: rgba(255,255,255,.72); text-align: center; } .company-hero-spark-loading .chart-loader-orbit { width: 42px; height: 42px; transform: scale(.72); } .company-hero-spark-loading strong { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .report-insight-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 4px 16px 14px; } .report-insight-strip article { display: grid; gap: 4px; min-height: 84px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--green) 16%, var(--line)); border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--green-soft) 40%, var(--card)), var(--card)); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .report-insight-strip article:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--green) 34%, var(--line)); box-shadow: 0 10px 22px color-mix(in srgb, var(--navy) 8%, transparent); } .report-insight-strip span { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .report-insight-strip strong { font-size: 20px; letter-spacing: -.03em; } .report-insight-strip small { color: var(--muted); font-size: 11px; } .financial-results-v3 { overflow: hidden; } .financial-results-v3 .financial-bars-v2 { border-radius: 0; } .content.view-enter .report-insight-strip article, .report-insight-strip.is-in:not(.no-anim) article { animation: financial-row-in .35s ease both; animation-delay: calc(var(--ri, 0) * 55ms); } .report-insight-strip article:nth-child(1) { --ri: 0; } .report-insight-strip article:nth-child(2) { --ri: 1; } .report-insight-strip article:nth-child(3) { --ri: 2; } .report-insight-strip article:nth-child(4) { --ri: 3; } @media (max-width: 900px) { .report-insight-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .report-insight-strip { grid-template-columns: 1fr; padding-inline: 12px; } } .company-chart-row, .company-chart-grid { display: block !important; } .company-chart-row > .company-chart-main, .company-chart-row > .company-decision-panel, .company-chart-grid > .company-chart-main, .company-chart-grid > .company-decision-panel { width: 100% !important; max-width: none !important; margin-bottom: 14px; height: auto !important; } @media (max-width: 700px) { body.app-mode { overflow-x: clip; overscroll-behavior-y: none; } body.app-mode .main-area, body.app-mode .content, body.app-mode .panel, body.app-mode .page-heading { min-width: 0; max-width: 100%; overflow-x: clip; } body.app-mode .content > .panel, body.app-mode .content > section, body.app-mode .content > article { content-visibility: visible !important; contain-intrinsic-size: none !important; } body.app-mode .chart-data-loader, body.app-mode .chart-data-loader *, body.app-mode .company-hero-spark-loading, body.app-mode .company-hero-spark-loading *, body.app-mode .portfolio-chart-loading, body.app-mode .portfolio-chart-loading * { animation: revert !important; } body.app-mode .app-tabbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--card) 97%, transparent); box-shadow: 0 8px 28px rgba(10, 28, 21, 0.18); } body.app-mode .app-tabbar button { min-height: 44px; padding-top: 6px; padding-bottom: 6px; } body.app-mode .app-tabbar button small { font-size: 11.5px; letter-spacing: 0.01em; } body.app-mode .company-tabbar button { min-height: 40px; padding: 8px 12px; font-size: 12px; } body.app-mode .app-section-nav button { min-height: 36px; padding: 8px 12px; } body.app-mode .content.view-leave, body.app-mode .content.view-enter { will-change: auto; } body.app-mode[data-perf="lite"] .content.view-enter, body.app-mode[data-perf="lite"] .content.view-leave { animation: none !important; transition: opacity 0.05s ease !important; transform: none !important; } } .content > .portfolio-bottom-drawer, .portfolio-mobile-priority > .portfolio-bottom-drawer, body.app-mode[data-view="portfolio"] .content > .portfolio-bottom-drawer, .content > .portfolio-benchmark-panel, .portfolio-mobile-priority > .portfolio-benchmark-panel, body.app-mode[data-view="portfolio"] .content > .portfolio-benchmark-panel { content-visibility: visible !important; contain-intrinsic-size: none !important; } .company-intel-card.is-loading { align-content: stretch; } .company-intel-card.is-loading .company-intel-loader { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 96px; } .company-intel-card.is-loading .company-intel-loader strong { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .2px; } .company-intel-card.is-loading .chart-loader-orbit { width: 40px; height: 40px; } .company-intel-card.is-loading .chart-loader-orbit::after { inset: 6px; } .company-intel-card.is-loading .chart-loader-orbit i { inset: 15px; } .company-intel-card.is-loading .chart-loader-orbit b { top: 3px; left: 17px; transform-origin: 3px 17px; } .company-intel-card.is-loading .chart-loader-orbit em { right: 4px; bottom: 9px; } .calendar-action.watch { cursor: pointer; } .calendar-action.watch.on { border-color: color-mix(in srgb, var(--amber) 55%, transparent); background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--ink); } .calendar-action.watch.on span { color: var(--amber); } .market-calendar-settled .settled-event-list { display: grid; gap: 10px; margin-top: 4px; } .settled-event { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 13px 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); } .settled-event.is-watched { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 7%, transparent), var(--card) 42%); } .settled-event-date { display: grid; justify-items: center; gap: 1px; padding: 6px 0; border-radius: 12px; background: color-mix(in srgb, var(--muted) 10%, transparent); } .settled-event-date strong { font-size: 19px; line-height: 1; letter-spacing: -.5px; } .settled-event-date span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .8px; } .settled-event-main h3 { margin: 0; font-size: 15px; line-height: 1.3; } .settled-event-main p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; } .settled-event-main small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; opacity: .85; } .settled-event-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; justify-content: flex-end; } .settled-event-flag { padding: 4px 9px; border-radius: 99px; background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--ink); font-size: 11px; font-weight: 700; } @media (max-width: 700px) { .settled-event { grid-template-columns: 44px minmax(0, 1fr); } .settled-event-actions { grid-column: 1 / -1; justify-content: flex-start; } } .portfolio-chart-enter .portfolio-return-line { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: evra-portfolio-line-draw 1.15s cubic-bezier(.32, .78, .28, 1) forwards; } .portfolio-chart-enter .portfolio-return-line:nth-of-type(2) { animation-delay: .08s; } .portfolio-chart-enter .portfolio-return-line:nth-of-type(3) { animation-delay: .16s; } .portfolio-chart-enter .return-grid-line, .portfolio-chart-enter .return-axis-label { animation: evra-portfolio-grid-in .5s ease both; } @keyframes evra-portfolio-line-draw { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } } @keyframes evra-portfolio-grid-in { from { opacity: 0; } to { opacity: 1; } } :root[data-motion="off"] .portfolio-chart-enter .portfolio-return-line, :root[data-motion="off"] .portfolio-chart-enter .return-grid-line, :root[data-motion="off"] .portfolio-chart-enter .return-axis-label { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .portfolio-chart-enter .portfolio-return-line { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } } .chart-data-missing { min-height: 300px; gap: 4px; } .chart-data-missing .chart-missing-mark { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); font-size: 24px; } .chart-data-missing button { margin-top: 16px; } html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (max-width: 700px) { .company-table .live-dot::after, .catalog-row .live-dot::after { animation: none; transform: scale(1); opacity: .22; } } .settled-event.has-result { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); } .settled-event-result { display: grid; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--green) 9%, transparent); } .settled-event-result .ser-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .settled-event-result .ser-delta { padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-style: normal; font-weight: 700; } .settled-event-result .ser-delta.up { background: color-mix(in srgb, var(--tick-down) 15%, transparent); color: var(--tick-down); } .settled-event-result .ser-delta.down { background: color-mix(in srgb, var(--tick-up) 15%, transparent); color: var(--tick-up); } .settled-event-result .ser-delta.flat { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); } .settled-event-result .ser-evra { padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--green) 18%, transparent); } .settled-event-result .ser-evra .eyebrow { font-size: 11.5px; letter-spacing: 1px; } .settled-event-result .ser-evra p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; } .settled-event-result .ser-evra .ser-wniosek { margin-top: 6px; color: var(--ink); font-weight: 600; } .settled-event-result b { color: var(--green); font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1; } .settled-event-result span { color: var(--muted); font-size: 11.5px; } .catalog-market-chips .chip-index { display: block; margin-top: 2px; font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: .2px; opacity: .9; } .catalog-market-chips.compact button { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .ticker-mark.logo-fallback b { letter-spacing: -.3px; } .catalog-index-glyph { display: inline-flex; height: 15px; align-items: flex-end; gap: 2px; } .catalog-index-glyph i { display: block; width: 3px; border-radius: 3px 3px 1px 1px; background: currentColor; } .catalog-index-glyph i:nth-child(1) { height: 7px; opacity: .58; } .catalog-index-glyph i:nth-child(2) { height: 12px; opacity: .78; } .catalog-index-glyph i:nth-child(3) { height: 15px; } .catalog-index-catalog { overflow: hidden; } .catalog-index-catalog-head { padding: 18px 20px; } .catalog-index-catalog > .market-asset-hub-index-groups { padding: 0 20px 20px; } .catalog-index-live-count { display: grid; grid-template-columns: 8px auto; align-items: center; gap: 1px 7px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--green) 7%, var(--card)); } .catalog-index-live-count i { width: 7px; height: 7px; grid-row: 1 / 3; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 12%, transparent); } .catalog-index-live-count strong { font-size: 12px; } .catalog-index-live-count small { color: var(--muted); font-size: 11px; } .ticker-mark.semantic-asset-mark::before { display: none; } .ticker-mark.semantic-asset-mark { border-color: color-mix(in srgb, currentColor 18%, var(--line)); background: color-mix(in srgb, currentColor 8%, var(--card)); color: var(--accent); } .semantic-asset-mark.currency { color: #5068de; background: linear-gradient(145deg, color-mix(in srgb, #5268ff 17%, var(--card)), var(--card)); } .semantic-asset-mark.metal { color: #8d6712; background: linear-gradient(145deg, #fff8df, #e7ce7e); } .semantic-asset-mark.energy { color: #63c9ff; background: linear-gradient(145deg, #252c3a, #0d121b); } .semantic-asset-mark.agriculture { color: #5b7c30; background: linear-gradient(145deg, #f1f8e8, #d8e9b6); } .semantic-asset-mark.commodity { color: #8b5d3f; background: linear-gradient(145deg, #f7eee6, #e5cbb9); } .asset-semantic-svg { display: block; width: 82%; height: 82%; overflow: visible; } .market-asset-hub-logo .asset-semantic-svg { width: 30px; height: 30px; } .asset-semantic-svg text { fill: currentColor; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 5px; font-weight: 950; text-anchor: middle; } .asset-semantic-back { fill: currentColor; opacity: .15; } .asset-semantic-front { fill: color-mix(in srgb, currentColor 25%, var(--card)); stroke: currentColor; stroke-width: 1; } .semantic-asset-mark.currency .asset-semantic-back { fill: #cbd5ff; opacity: 1; } .semantic-asset-mark.currency .asset-semantic-front { fill: #f5f7ff; stroke: #5268de; } .semantic-asset-mark.currency .asset-semantic-arrows { stroke: #5268de; } .semantic-asset-mark.currency .asset-semantic-svg text { fill: #263991; } .asset-semantic-arrows, .asset-semantic-shine, .asset-semantic-stem, .asset-semantic-cube { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .asset-semantic-ingot { fill: color-mix(in srgb, currentColor 20%, #fff); stroke: currentColor; stroke-width: 1.4; } .asset-semantic-drop { fill: currentColor; stroke: currentColor; stroke-width: 1; } .semantic-asset-mark.energy .asset-semantic-shine { stroke: #d9f4ff; opacity: .72; } @media (max-width: 680px) { .catalog-index-catalog-head { align-items: flex-start; flex-direction: column; padding: 15px; } .catalog-index-catalog > .market-asset-hub-index-groups { padding: 0 12px 14px; } .catalog-index-catalog .market-asset-hub-index-groups { grid-template-columns: 1fr; } } .chart-data-loader-v341 { grid-template-columns: minmax(0, 680px); justify-items: stretch; gap: 0; min-height: 360px; padding: 28px clamp(18px, 4vw, 46px) 30px; border-color: color-mix(in srgb, var(--brand-accent) 32%, var(--line)); background: linear-gradient(color-mix(in srgb, var(--brand-accent) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 7%, transparent) 1px, transparent 1px), radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 38%), linear-gradient(145deg, color-mix(in srgb, var(--card) 98%, transparent), color-mix(in srgb, var(--green-soft) 30%, var(--card))); background-size: 34px 34px, 34px 34px, auto, auto; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent), 0 18px 54px color-mix(in srgb, var(--navy) 9%, transparent); } .chart-loader-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-bottom: 18px; color: var(--muted); font-size: 11.5px; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; } .chart-loader-brand, .chart-loader-sync { display: inline-flex; align-items: center; gap: 7px; } .chart-loader-brand i, .chart-loader-sync i { display: block; width: 7px; height: 7px; border-radius: 99px; background: var(--brand-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-accent) 12%, transparent); } .chart-loader-sync i { animation: chart-loader-status 1.6s ease-in-out infinite; } .chart-loader-telemetry { position: relative; display: flex; align-items: end; justify-content: center; gap: clamp(5px, 1vw, 10px); width: 100%; height: 112px; overflow: hidden; padding: 12px clamp(12px, 4vw, 32px) 10px; border: 1px solid color-mix(in srgb, var(--brand-accent) 20%, var(--line)); border-radius: 20px; background: color-mix(in srgb, var(--card) 76%, transparent); box-shadow: inset 0 -30px 50px color-mix(in srgb, var(--brand-accent) 7%, transparent); } .chart-loader-telemetry::before, .chart-loader-telemetry::after { position: absolute; inset-inline: 0; height: 1px; content: ""; background: color-mix(in srgb, var(--brand-accent) 12%, transparent); } .chart-loader-telemetry::before { top: 34%; } .chart-loader-telemetry::after { top: 67%; } .chart-loader-telemetry > i { position: relative; z-index: 2; width: clamp(9px, 2.6vw, 20px); height: var(--loader-height); max-height: 76px; border-radius: 999px 999px 5px 5px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-accent) 95%, #fff), color-mix(in srgb, var(--green) 78%, var(--brand-accent))); opacity: .68; transform: scaleY(.34); transform-origin: bottom; animation: chart-loader-telemetry 1.7s cubic-bezier(.2,.8,.25,1) infinite; animation-delay: calc(var(--loader-index) * 65ms); } .chart-loader-scan { position: absolute; z-index: 3; inset-block: 0; left: -18%; width: 18%; border-right: 1px solid color-mix(in srgb, var(--brand-accent) 76%, transparent); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-accent) 10%, transparent)); filter: drop-shadow(4px 0 10px color-mix(in srgb, var(--brand-accent) 30%, transparent)); animation: chart-loader-scan 2.2s cubic-bezier(.45,0,.55,1) infinite; } .chart-data-loader-v341 > strong { margin-top: 19px; text-align: center; font-size: clamp(19px, 2vw, 27px); } .chart-data-loader-v341 > small { justify-self: center; max-width: 560px; text-align: center; } .chart-loader-progress { display: grid; grid-template-columns: auto minmax(18px, 1fr) auto minmax(18px, 1fr) auto; align-items: center; gap: 8px; width: min(470px, 100%); margin: 22px auto 0; } .chart-loader-progress > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; } .chart-loader-progress > span i { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--muted); font-size: 11.5px; font-style: normal; } .chart-loader-progress > span.is-active { color: var(--green); } .chart-loader-progress > span.is-active i { border-color: color-mix(in srgb, var(--brand-accent) 55%, var(--line)); background: color-mix(in srgb, var(--green-soft) 78%, var(--card)); color: var(--green); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-accent) 9%, transparent); animation: chart-loader-status 1.6s ease-in-out infinite; } .chart-loader-progress > b { height: 1px; overflow: hidden; background: var(--line); } .chart-loader-progress > b::after { display: block; width: 44%; height: 100%; content: ""; background: linear-gradient(90deg, transparent, var(--brand-accent), transparent); animation: chart-loader-link 1.7s ease-in-out infinite; } @keyframes chart-loader-telemetry { 0%, 100% { opacity: .42; transform: scaleY(.34); } 48% { opacity: .94; transform: scaleY(1); } } @keyframes chart-loader-scan { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateX(660%); opacity: 0; } } @keyframes chart-loader-link { from { transform: translateX(-120%); } to { transform: translateX(330%); } } @keyframes chart-loader-status { 50% { opacity: .5; box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-accent) 5%, transparent); } } .financial-results-v3 { position: relative; border-color: color-mix(in srgb, var(--brand-accent) 24%, var(--line)); background: radial-gradient(circle at 96% 2%, color-mix(in srgb, var(--brand-accent) 13%, transparent), transparent 28%), linear-gradient(160deg, color-mix(in srgb, var(--card) 99%, transparent), color-mix(in srgb, var(--green-soft) 18%, var(--card))); box-shadow: 0 22px 60px color-mix(in srgb, var(--navy) 9%, transparent); } .financial-results-v3::before, .company-section-v2::before { position: absolute; z-index: 2; top: 0; left: 26px; width: 76px; height: 3px; border-radius: 0 0 99px 99px; content: ""; background: linear-gradient(90deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 8%, transparent)); } .financial-results-v3 > .panel-header { min-height: 92px; padding: 18px 20px; background: color-mix(in srgb, var(--card) 70%, transparent); } .financial-results-v3 .report-insight-strip { gap: 12px; padding: 8px 18px 18px; } .financial-results-v3 .report-insight-strip article { position: relative; isolation: isolate; min-height: 108px; overflow: hidden; padding: 17px; border-radius: 19px; background: radial-gradient(circle at 96% 10%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 36%), color-mix(in srgb, var(--card) 94%, var(--green-soft)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 62%, transparent), 0 10px 24px color-mix(in srgb, var(--navy) 7%, transparent); } .financial-results-v3 .report-insight-strip article::before { position: absolute; z-index: -1; right: -14px; bottom: -28px; width: 80px; height: 80px; border: 12px solid color-mix(in srgb, var(--brand-accent) 8%, transparent); border-radius: 50%; content: ""; transition: transform .28s ease; } .financial-results-v3 .report-insight-strip article:hover::before { transform: scale(1.16) rotate(12deg); } .financial-results-v3 .report-insight-strip strong { font-size: clamp(22px, 2.1vw, 30px); line-height: 1; } .financial-results-v3 .report-insight-strip small { margin-top: auto; } .financial-results-v3 .report-source-strip { margin: 0 18px 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand-accent) 15%, var(--line)); border-radius: 20px; background: color-mix(in srgb, var(--card) 84%, transparent); } .financial-results-v3 .report-source-strip > div { padding: 16px; } .financial-results-v3 .financial-results { margin: 0 18px 18px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand-accent) 16%, var(--line)); border-radius: 22px; background: var(--card); } .financial-results-v3 .financial-bars-v2 { border-right-color: color-mix(in srgb, var(--brand-accent) 14%, var(--line)); } .financial-results-v3 .financial-bar { border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-accent) 96%, #fff), var(--green)); } .financial-results-v3 .financial-bar.profit { background: linear-gradient(180deg, #79a9ff, #356de8); } .company-section-v2 .company-metric-tile { position: relative; overflow: hidden; min-height: 112px; padding: 17px; border-radius: 18px; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent); } .company-section-v2 .company-metric-tile::after { position: absolute; right: -36px; bottom: -48px; width: 92px; height: 92px; border-radius: 50%; content: ""; background: color-mix(in srgb, var(--brand-accent) 8%, transparent); transition: transform .25s ease; } .company-section-v2 .company-metric-tile:hover::after { transform: scale(1.22); } .company-section-v2 .company-metric-tile strong { font-size: clamp(18px, 2vw, 25px); } @media (max-width: 700px) { .chart-data-loader-v341 { min-height: 292px; padding: 18px 13px 20px; border-radius: 19px; } .chart-loader-topline { margin-bottom: 12px; } .chart-loader-telemetry { height: 82px; padding-inline: 12px; border-radius: 16px; } .chart-data-loader-v341 > strong { margin-top: 14px; font-size: 18px; } .chart-data-loader-v341 > small { margin-top: 6px; font-size: 11px; line-height: 1.4; } .chart-loader-progress { margin-top: 16px; gap: 5px; } .chart-loader-progress > span { gap: 4px; font-size: 11.5px; } .chart-loader-progress > span i { width: 18px; height: 18px; } .financial-results-v3 > .panel-header { min-height: 80px; padding: 15px; } .financial-results-v3 .report-insight-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 6px 11px 12px; } .financial-results-v3 .report-insight-strip article { min-height: 94px; padding: 13px; border-radius: 15px; } .financial-results-v3 .report-source-strip, .financial-results-v3 .financial-results { margin-inline: 11px; } .company-section-v2 .company-metric-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-inline: 11px; } .company-section-v2 .company-metric-tile { min-height: 102px; padding: 13px; } } :root[data-motion="off"] .chart-data-loader-v341 *, :root[data-motion="off"] .financial-results-v3 .report-insight-strip article, :root[data-motion="off"] .company-section-v2 .company-metric-tile { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .chart-data-loader-v341 *, :root:not([data-motion="on"]) .financial-results-v3 .report-insight-strip article, :root:not([data-motion="on"]) .company-section-v2 .company-metric-tile { animation: none !important; transition: none !important; } } .analyst-pill, .surprise-tag, .badge, .intel-quality, .intel-tone, .event-quality, .chip-index { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .chart-controls { max-width: 100%; min-width: 0; } .chart-controls .range-tabs, .chart-controls .view-tabs, .chart-controls .interval-tabs { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chart-controls .range-tabs::-webkit-scrollbar, .chart-controls .view-tabs::-webkit-scrollbar { display: none; } .chart-controls .range-tabs button, .chart-controls .view-tabs button { flex: 0 0 auto; } body { overflow-x: clip; } .dashboard-grid { align-items: start; } @media (min-width: 981px) { .dashboard-grid > .panel:last-child:not(:only-child) { position: sticky; top: 84px; } } @property --donut-reveal { syntax: "<angle>"; inherits: false; initial-value: 360deg; } .donut { --donut-reveal: 360deg; transition: transform .25s ease, filter .25s ease; } :root[data-motion="on"] .donut.donut-draw { animation: evra-donut-draw .75s cubic-bezier(.32, .78, .28, 1) both; -webkit-mask-image: conic-gradient(#000 var(--donut-reveal), transparent 0); mask-image: conic-gradient(#000 var(--donut-reveal), transparent 0); } @keyframes evra-donut-draw { from { --donut-reveal: 0deg; } to { --donut-reveal: 360deg; } } .donut.is-focused { transform: scale(1.035); filter: saturate(1.12); } .legend-item { border-radius: 8px; transition: background .16s ease, transform .16s ease; cursor: default; } .legend-item:hover, .legend-item.is-active { background: color-mix(in srgb, var(--green) 12%, transparent); transform: translateX(2px); } .legend-item:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .donut, .legend-item { animation: none !important; transition: none !important; } } :root[data-motion="off"] .donut { animation: none !important; -webkit-mask-image: none; mask-image: none; } @keyframes evra-quote-flash-up { 0% { background-color: color-mix(in srgb, var(--tick-up) 26%, transparent); } 100% { background-color: transparent; } } @keyframes evra-quote-flash-down { 0% { background-color: color-mix(in srgb, var(--tick-down) 26%, transparent); } 100% { background-color: transparent; } } :root[data-motion="on"] [data-live-price].flash-up, :root[data-motion="on"] [data-live-change].flash-up { animation: evra-quote-flash-up .55s ease-out; border-radius: 6px; } :root[data-motion="on"] [data-live-price].flash-down, :root[data-motion="on"] [data-live-change].flash-down { animation: evra-quote-flash-down .55s ease-out; border-radius: 6px; } @keyframes evra-score-settle { from { opacity: 0; transform: translateY(3px) scale(.96); } to { opacity: 1; transform: none; } } :root[data-motion="on"] .score-settled { animation: evra-score-settle .34s cubic-bezier(.3,.8,.3,1) both; } .catalog-market-chips.compact button { position: relative; } .catalog-market-chips.compact button::after { position: absolute; inset: auto 12px 4px; height: 2px; border-radius: 2px; background: var(--green); transform: scaleX(0); transform-origin: left center; transition: transform .26s cubic-bezier(.3,.8,.3,1); content: ""; } .catalog-market-chips.compact button.active::after { transform: scaleX(1); } .catalog-group-grid > * { animation: none !important; } :root[data-motion="on"] .catalog-group-grid { animation: evra-section-in .32s ease both; } @keyframes evra-section-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { .company-table tbody tr, .catalog-row { animation: none !important; } } @media (prefers-reduced-motion: reduce) { [data-live-price], [data-live-change], .score-settled, .catalog-market-chips.compact button::after, .catalog-group-grid { animation: none !important; transition: none !important; } } small { font-size: max(11px, 0.85em); } .row-spark-slot { width: auto; height: auto; } .position-spark-wrap { display: inline-flex; align-items: center; gap: 7px; } .position-spark-meta { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; } .position-spark-meta b { padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; } .position-spark-meta em { font-size: 11px; font-style: normal; font-weight: 700; } .position-spark-loader { display: inline-flex; width: 54px; height: 20px; } .position-spark-loader svg { width: 100%; height: 100%; overflow: visible; color: var(--muted); } .position-spark-loader polyline { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; opacity: .5; } :root[data-motion="on"] .position-spark-loader polyline { animation: evra-spark-loader-draw 1.5s cubic-bezier(.45,.05,.35,1) infinite; } @keyframes evra-spark-loader-draw { 0% { stroke-dashoffset: 1; opacity: .18; } 45% { opacity: .62; } 70% { stroke-dashoffset: 0; opacity: .62; } 100% { stroke-dashoffset: 0; opacity: 0; } } .position-spark-unavailable { display: inline-flex; align-items: center; width: 54px; height: 20px; color: var(--muted); font-size: 11px; opacity: .55; } @media (prefers-reduced-motion: reduce) { .position-spark-loader polyline { animation: none; stroke-dashoffset: 0; opacity: .4; } } @media (max-width: 700px) { .position-spark-meta b { display: none; } } .shareholders-panel { padding: 0; overflow: hidden; } .shareholders-panel > summary { display: grid; gap: 2px; padding: 17px 20px; cursor: pointer; list-style: none; user-select: none; } .shareholders-panel > summary::-webkit-details-marker { display: none; } .shareholders-panel > summary::after { position: absolute; right: 20px; color: var(--muted); content: "▾"; transition: transform .2s ease; } .shareholders-panel { position: relative; } .shareholders-panel[open] > summary::after { transform: rotate(180deg); } .shareholders-panel > summary:hover { background: color-mix(in srgb, var(--green) 5%, transparent); } .shareholders-panel > summary h2 { margin: 0; font-size: 17px; } .shareholders-panel > summary small { color: var(--muted); } .shareholders-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; padding: 0 20px 14px; } .shareholders-summary article { padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft, var(--card)); } .shareholders-summary span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } .shareholders-summary strong { display: block; margin: 3px 0 1px; font-size: 22px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .shareholders-summary small { color: var(--muted); font-size: 11px; } .shareholders-table-wrap { overflow-x: auto; padding: 0 20px; } .shareholders-table { width: 100%; border-collapse: collapse; font-size: 13px; } .shareholders-table th { padding: 7px 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; } .shareholders-table td { padding: 9px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } .shareholders-table tbody tr:last-child td { border-bottom: 0; } .shareholders-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; } .shareholders-table td.muted { color: var(--muted); } .holder-bar { display: inline-block; width: 46px; height: 5px; margin-right: 7px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 20%, transparent); vertical-align: middle; overflow: hidden; } .holder-bar i { display: block; width: var(--w, 0%); height: 100%; border-radius: 99px; background: var(--green); } .shareholders-source { display: block; padding: 12px 20px 16px; color: var(--muted); font-size: 11px; line-height: 1.5; } .shareholders-empty { padding: 0 20px 18px; color: var(--muted); font-size: 13px; max-width: 62ch; } @media (prefers-reduced-motion: no-preference) { .shareholders-panel[open] .shareholders-summary article { animation: evra-section-in .3s ease both; } } .shareholders-block { padding: 0 20px; margin-top: 6px; } .shareholders-block h3 { display: flex; align-items: baseline; gap: 7px; margin: 14px 0 6px; font-size: 13px; font-weight: 700; } .shareholders-block h3 b { padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); font-size: 11px; font-weight: 700; } .shareholders-block .shareholders-table-wrap { padding: 0; } @media (max-width: 700px) { .content button, .content select, .content [role="button"], .watch-pill, .verdict-chip, .calendar-action, .range-tabs button, .view-tabs button { min-height: 44px; } .back-button { display: inline-flex; align-items: center; min-height: 44px; padding-right: 12px; } .source-link.inline, .metric-help, .news-read-more { position: relative; } .source-link.inline::after, .metric-help::after, .news-read-more::after { position: absolute; top: 50%; left: 50%; width: max(44px, 100%); height: 44px; transform: translate(-50%, -50%); content: ""; } .company-hero-actions { gap: 10px; } .verdict-scale { gap: 6px; } } @media (max-width: 700px) { .company-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; padding: 10px 12px; } .company-table thead { display: none; } .company-table tbody td { display: none; padding: 0; border: 0; } .company-table tbody td:nth-child(1), .company-table tbody td:nth-child(3), .company-table tbody td:nth-child(8) { display: block; min-width: 0; } .company-table tbody td:nth-child(1) { grid-column: 1; } .company-table .table-company { min-width: 0; gap: 9px; } .company-table .company-copy { min-width: 0; } .company-table .company-copy strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; } .company-table .company-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .company-table tbody td:nth-child(3) { grid-column: 2; text-align: right; white-space: nowrap; } .company-table tbody td:nth-child(3) .row-spark-slot { display: flex; justify-content: flex-end; margin-top: 3px; } .company-table tbody td:nth-child(3) .source-mini { display: none; } .company-table tbody td:nth-child(8) { grid-column: 3; text-align: right; } .company-table tbody td:nth-child(4) { display: block; grid-column: 2; grid-row: 2; text-align: right; font-size: 12px; } } @media (max-width: 700px) { .company-table { width: 100%; table-layout: fixed; } .company-table tbody tr { width: 100%; box-sizing: border-box; grid-template-columns: minmax(0, 1fr) 96px 42px; } .company-table .table-company { gap: 7px; } .company-table .table-company .ticker-mark { flex: 0 0 auto; width: 26px; height: 26px; } .company-table .table-company .flag { width: 15px; height: 11px; } .company-table .table-company > .watch-star { flex: 0 0 auto; } } @media (max-width: 700px) { .company-table .table-company > .watch-star { position: relative; min-width: 22px; width: 22px; padding: 0; } .company-table .table-company > .watch-star::after { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); content: ""; } } @media (max-width: 700px) { .portfolio-positions-table { overflow-x: visible; } .portfolio-positions-table thead { display: none; } .portfolio-positions-table table, .portfolio-positions-table tbody { display: block; width: 100%; } .portfolio-positions-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); } .portfolio-positions-table tbody td { display: block; min-width: 0; padding: 0; border: 0; } .portfolio-positions-table tbody td:nth-child(1), .portfolio-positions-table tbody td:nth-child(2) { grid-column: 1 / -1; } .portfolio-positions-table .table-company { min-width: 0; gap: 8px; } .portfolio-positions-table .company-copy { min-width: 0; } .portfolio-positions-table .company-copy strong, .portfolio-positions-table .company-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .portfolio-positions-table tbody td:nth-child(n + 3)::before { display: block; margin-bottom: 1px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; content: attr(data-label); } .portfolio-positions-table tbody td:nth-child(n + 3) { padding: 7px 9px; border-radius: 10px; background: color-mix(in srgb, var(--muted) 7%, transparent); font-variant-numeric: tabular-nums; } } .position-history { margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--muted) 5%, transparent); overflow: hidden; } .position-history > summary { display: grid; gap: 2px; padding: 11px 14px; cursor: pointer; list-style: none; } .position-history > summary::-webkit-details-marker { display: none; } .position-history > summary::after { float: right; margin-top: -34px; color: var(--muted); content: "▾"; transition: transform .2s ease; } .position-history[open] > summary::after { transform: rotate(180deg); } .position-history > summary:hover { background: color-mix(in srgb, var(--green) 6%, transparent); } .position-history > summary strong { font-size: 14px; } .position-history > summary small { color: var(--muted); font-size: 11.5px; } .position-history-wrap { overflow-x: auto; padding: 0 14px; } .position-history-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .position-history-table th { padding: 6px 7px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; } .position-history-table td { padding: 8px 7px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); white-space: nowrap; } .position-history-table tbody tr:last-child td { border-bottom: 0; } .position-history-table td.num { font-variant-numeric: tabular-nums; text-align: right; } .position-history-table td.muted { color: var(--muted); } .position-history-table td small { display: block; font-size: 11px; opacity: .85; } .pos-hist-tag { padding: 2px 7px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; } .pos-hist-tag.buy { background: color-mix(in srgb, var(--tick-up) 16%, transparent); color: var(--tick-up); } .pos-hist-tag.sell { background: color-mix(in srgb, var(--tick-down) 16%, transparent); color: var(--tick-down); } .pos-hist-tag.dividend { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); } .position-history-note { display: block; padding: 10px 14px 13px; color: var(--muted); font-size: 11px; line-height: 1.5; } @media (max-width: 700px) { .position-history-table thead { display: none; } .position-history-table, .position-history-table tbody { display: block; } .position-history-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); } .position-history-table td { display: block; padding: 0; border: 0; text-align: left; } .position-history-table td::before { display: block; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; content: attr(data-label); } .position-history-table td.num { text-align: left; } } .donut { position: relative; isolation: isolate; } .donut::before { position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--green) 22%, transparent), transparent 68%); content: ""; opacity: 0; transition: opacity .3s ease; z-index: -1; } .donut.is-focused::before { opacity: 1; } :root[data-motion="on"] .donut.donut-draw { animation: evra-donut-pop .7s cubic-bezier(.22, 1.05, .34, 1) both; } @keyframes evra-donut-pop { 0% { transform: scale(.86) rotate(-8deg); opacity: .2; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } } .donut-center { transition: transform .18s ease; } .donut.is-focused .donut-center { transform: scale(1.06); } :root[data-motion="on"] .donut-center strong { transition: color .18s ease; } .donut.is-focused .donut-center strong { color: var(--green); } .legend-item .legend-color { transition: transform .16s ease, box-shadow .16s ease; } .legend-item:hover .legend-color, .legend-item.is-active .legend-color { transform: scale(1.35); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); } @media (prefers-reduced-motion: reduce) { .donut, .donut-center, .legend-item .legend-color { animation: none !important; transition: none !important; } } .donut-svg { position: relative; display: grid; place-items: center; width: 190px; height: 190px; background: none; } .donut-svg svg { width: 100%; height: 100%; overflow: visible; } .donut-slice { transform-origin: 60px 60px; transition: fill-opacity .2s ease, stroke-width .2s ease, filter .2s ease; cursor: pointer; stroke: var(--card); stroke-width: .8; } .donut-slice.is-active { stroke: var(--ink); stroke-width: 3.2; stroke-linejoin: round; paint-order: stroke; opacity: 1; } .donut-slice.is-dimmed { fill-opacity: .16; } .donut-slice.is-active { fill-opacity: 1; } .donut-slice:hover { filter: brightness(1.08); } :root[data-motion="on"] .donut-svg.donut-draw .donut-slice { animation: evra-slice-in .5s cubic-bezier(.3, .9, .3, 1) both; animation-delay: calc(var(--i) * 22ms); } @keyframes evra-slice-in { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } } .donut-svg .donut-center { position: absolute; display: grid; justify-items: center; pointer-events: none; } .donut-svg .donut-center strong { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; } .donut-svg .donut-center small { margin-top: 2px; color: var(--muted); font-size: 11.5px; } @media (prefers-reduced-motion: reduce) { .donut-slice { transition: none; animation: none !important; } } .portfolio-positions-table table { width: 100%; table-layout: fixed; } .portfolio-positions-table thead th:nth-child(1), .portfolio-positions-table tbody td:nth-child(2) { width: 37%; } .portfolio-positions-table thead th:nth-child(2), .portfolio-positions-table tbody td:nth-child(3) { width: 11%; } .portfolio-positions-table thead th:nth-child(3), .portfolio-positions-table tbody td:nth-child(4) { width: 16%; } .portfolio-positions-table thead th:nth-child(4), .portfolio-positions-table tbody td:nth-child(5) { width: 17%; } .portfolio-positions-table thead th:nth-child(5), .portfolio-positions-table tbody td:nth-child(6) { width: 19%; } .portfolio-positions-table .table-company { min-width: 0; } .portfolio-positions-table .company-copy { min-width: 0; } .portfolio-positions-table .company-copy strong, .portfolio-positions-table .company-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .portfolio-positions-table tbody td[data-label] { white-space: normal; } .portfolio-positions-table tbody td[data-label] > small, .portfolio-positions-table tbody td small { display: block; line-height: 1.35; } .position-history-body { padding: 4px 14px 0; } .pos-tl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin-bottom: 14px; } .pos-tl-stats > div { padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--surface-soft) 70%, var(--card)); } .pos-tl-stats span { display: block; color: var(--muted); font-size: 11px; } .pos-tl-stats strong { display: block; margin-top: 2px; font-size: 14px; font-variant-numeric: tabular-nums; } .pos-timeline { position: relative; margin: 0; padding: 0 0 0 22px; list-style: none; } .pos-timeline::before { position: absolute; top: 10px; bottom: 10px; left: 5px; width: 2px; border-radius: 2px; background: linear-gradient(to bottom, color-mix(in srgb, var(--green) 42%, transparent), color-mix(in srgb, var(--line) 90%, transparent)); content: ""; } .pos-tl-item { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 9px 10px; border-radius: 12px; transition: background .16s ease, transform .16s ease; } .pos-tl-item:hover { background: color-mix(in srgb, var(--green) 7%, transparent); transform: translateX(2px); } .pos-tl-dot { position: absolute; top: 50%; left: -21px; width: 10px; height: 10px; border: 2px solid var(--card); border-radius: 50%; background: var(--muted); transform: translateY(-50%); } .pos-tl-item.buy .pos-tl-dot { background: var(--green-2); } .pos-tl-item.sell .pos-tl-dot { background: var(--red); } .pos-tl-item.dividend .pos-tl-dot { background: var(--amber); } .pos-tl-main { min-width: 0; } .pos-tl-head { display: flex; gap: 8px; align-items: center; } .pos-tl-head time { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; } .pos-tl-sub { margin-top: 3px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .pos-tl-sub b { color: var(--ink); font-weight: 700; } .pos-tl-bar { display: block; overflow: hidden; width: 100%; max-width: 190px; height: 3px; margin-top: 6px; border-radius: 3px; background: color-mix(in srgb, var(--line) 80%, transparent); } .pos-tl-bar i { display: block; width: var(--udzial, 10%); height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--green-2) 70%, var(--line)); transform-origin: left center; } .pos-tl-item.sell .pos-tl-bar i { background: color-mix(in srgb, var(--red) 62%, var(--line)); } .pos-tl-item.dividend .pos-tl-bar i { background: color-mix(in srgb, var(--amber) 70%, var(--line)); } .pos-tl-pl { text-align: right; font-variant-numeric: tabular-nums; } .pos-tl-pl strong { display: block; font-size: 13.5px; } .pos-tl-pl small { display: block; font-size: 11px; opacity: .9; } .pos-tl-pl.muted { color: var(--muted); } :root[data-motion="on"] .position-history[open] .pos-tl-item { animation: evra-tl-in .34s cubic-bezier(.3, .9, .3, 1) both; animation-delay: calc(min(var(--i), 12) * 34ms); } :root[data-motion="on"] .position-history[open] .pos-tl-bar i { animation: evra-tl-bar .5s cubic-bezier(.3, .9, .3, 1) both; animation-delay: calc(min(var(--i), 12) * 34ms + 120ms); } @keyframes evra-tl-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } @keyframes evra-tl-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .pos-tl-item, .pos-tl-bar i { animation: none !important; transition: none !important; } } @media (max-width: 720px) { .pos-tl-item { grid-template-columns: 1fr auto; padding: 8px 6px; } .pos-tl-bar { max-width: none; } .position-history-body { padding: 4px 10px 0; } } .density-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); } .density-switch button { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; padding: 5px 13px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } .density-switch button span { font-size: 13px; opacity: .8; } .density-switch button:hover { color: var(--ink); } .density-switch button.on { background: var(--card); color: var(--green); box-shadow: 0 2px 8px rgba(9, 31, 24, .09); } .portfolio-positions-table.is-compact table { table-layout: auto; } .portfolio-positions-table.is-compact thead th { padding: 5px 8px; font-size: 11px; letter-spacing: .05em; white-space: nowrap; } .portfolio-positions-table.is-compact tbody td { padding: 3px 8px; font-size: 12.5px; line-height: 1.25; white-space: nowrap; vertical-align: middle; } .portfolio-positions-table.is-compact tbody td.num { font-variant-numeric: tabular-nums; text-align: right; } .portfolio-positions-table.is-compact tbody td em { display: inline; margin-left: 5px; font-size: 11px; font-style: normal; opacity: .78; } .compact-company { display: inline-flex; gap: 8px; align-items: center; min-width: 0; } .compact-company .ticker-mark { width: 24px; height: 24px; flex: 0 0 24px; font-size: 11px; transition: transform .18s ease; } .compact-row:hover .ticker-mark { transform: scale(1.12); } .compact-names { display: flex; gap: 7px; align-items: baseline; min-width: 0; line-height: 1.2; } .compact-names b { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; } .compact-names i { overflow: hidden; min-width: 0; max-width: 118px; color: var(--muted); font-size: 11px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; } .portfolio-positions-table.is-compact .compact-spark { width: 62px; padding-right: 4px; } .portfolio-positions-table.is-compact .position-spark-meta { display: none; } .portfolio-positions-table.is-compact .position-spark { width: 54px; height: 16px; } .compact-weight { width: 92px; } .portfolio-positions-table.is-compact .compact-weight { display: flex; gap: 6px; align-items: center; } .portfolio-positions-table.is-compact .compact-weight em { flex: 0 0 auto; margin: 0; font-size: 11px; font-style: normal; opacity: .85; } .compact-weight-bar { display: block; overflow: hidden; width: 100%; height: 4px; border-radius: 3px; background: color-mix(in srgb, var(--line) 85%, transparent); } .compact-weight-bar i { display: block; width: var(--udzial, 10%); height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--green-2), color-mix(in srgb, var(--green-2) 45%, var(--line))); transform-origin: left center; } .compact-score { width: 54px; } .compact-score-pill { display: inline-grid; min-width: 30px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--line) 60%, transparent); font-size: 11.5px; font-weight: 800; place-content: center; } .compact-score-pill.good { background: color-mix(in srgb, var(--green-2) 20%, transparent); color: var(--green); } .compact-score-pill.mid { background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--amber); } .compact-score-pill.low { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); } .compact-row { transition: background .15s ease, box-shadow .15s ease; } .compact-row:hover { background: color-mix(in srgb, var(--green) 6%, transparent); } .compact-row.active-row { box-shadow: inset 3px 0 0 var(--green); } :root[data-motion="on"] .portfolio-positions-table.is-compact .compact-row { animation: evra-compact-in .3s cubic-bezier(.3, .9, .3, 1) both; animation-delay: calc(min(var(--i), 18) * 22ms); } :root[data-motion="on"] .portfolio-positions-table.is-compact .compact-weight-bar i { animation: evra-compact-bar .45s cubic-bezier(.3, .9, .3, 1) both; animation-delay: calc(min(var(--i), 18) * 22ms + 90ms); } @keyframes evra-compact-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } @keyframes evra-compact-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .compact-row, .compact-weight-bar i, .compact-company .ticker-mark { animation: none !important; transition: none !important; } } @media (max-width: 720px) { .portfolio-positions-table.is-compact { overflow-x: auto; } .portfolio-positions-table.is-compact table { min-width: 660px; } .portfolio-positions-table.is-compact thead { display: table-header-group; } .portfolio-positions-table.is-compact tbody { display: table-row-group; } .portfolio-positions-table.is-compact tbody tr.compact-row { display: table-row; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .portfolio-positions-table.is-compact tbody tr.compact-row td { display: table-cell; width: auto; padding: 6px 7px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 0; background: none; } .portfolio-positions-table.is-compact tbody tr.compact-row td::before { display: none; } .portfolio-positions-table.is-compact .holding-swipe-actions { display: none; } .density-switch button { padding: 5px 10px; font-size: 12px; } } .dashboard-grid.positions-full-width { grid-template-columns: minmax(0, 1fr); } .panel-title .density-switch { margin-top: 10px; } @media (max-width: 720px) { .gem-chart-wrap, .comparison-chart-stage, .trading-backtest-chart .chart-svg { min-width: 0; width: 100%; } .gem-chart-panel .table-wrap, .comparison-chart-scroll, .trading-backtest-chart .full-chart-wrap { overflow-x: hidden; } .gem-chart-wrap svg, .comparison-chart-stage svg, .trading-backtest-chart .chart-svg { width: 100%; height: auto; } } @media (max-width: 720px) { .content small, .content em, .content b, .content .badge, .content .index-chip, .content .trend-up, .content .trend-down, .content .chip-index { font-size: 12.5px; line-height: 1.4; } .content small strong, .content small b { font-size: inherit; } .content .eyebrow, .content th, .content [data-label]::before { font-size: 11.5px; letter-spacing: .07em; } .content p, .content li { line-height: 1.55; } } @media (max-width: 720px) { .catalog-group-card strong { font-size: 13px; } .catalog-group-card small { font-size: 12px; line-height: 1.4; } .catalog-group-card > span { width: 32px; height: 32px; font-size: 13px; } .catalog-market-chips button, .catalog-market-chips button strong, .catalog-market-chips button span { font-size: 12.5px; } } .score-gauge div { display: grid; place-items: center; } .score-gauge strong { line-height: 1; } .score-gauge small { position: absolute; top: 100%; left: 50%; margin-top: 4px; transform: translateX(-50%); white-space: nowrap; } .trade-marker { cursor: pointer; } .trade-marker-stem { stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 4; opacity: .3; } .trade-marker-halo { fill: currentColor; opacity: 0; transition: opacity .18s ease; } .trade-marker-dot { fill: currentColor; stroke: var(--card); stroke-width: 2; transition: r .18s ease; } .full-chart-svg .trade-marker-glyph { fill: var(--card); font-size: 7px; font-weight: 900; pointer-events: none; } .trade-marker.buy { color: var(--green-2); } .trade-marker.sell { color: var(--red); } .trade-marker:hover .trade-marker-halo, .trade-marker:focus-visible .trade-marker-halo, .trade-marker.is-open .trade-marker-halo { opacity: .2; } .trade-marker:hover .trade-marker-dot, .trade-marker.is-open .trade-marker-dot { r: 7; } .trade-marker:focus-visible { outline: none; } .trade-marker:focus-visible .trade-marker-dot { stroke: var(--ink); stroke-width: 2.5; } :root[data-motion="on"] .trade-marker { animation: evra-trade-in .32s cubic-bezier(.3, .9, .3, 1) both; animation-delay: calc(min(var(--i), 14) * 45ms); } @keyframes evra-trade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .trade-marker-toggle { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; } .trade-marker-toggle span { font-size: 11px; } .trade-marker-toggle:hover { color: var(--ink); } .trade-marker-toggle.on { border-color: color-mix(in srgb, var(--green-2) 45%, var(--line)); background: color-mix(in srgb, var(--green-soft) 70%, var(--card)); color: var(--green); } .trade-tooltip { position: fixed; z-index: 10000; min-width: 176px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 18px 40px rgba(11, 35, 27, .18); pointer-events: none; animation: evra-trade-tip .18s ease both; } @keyframes evra-trade-tip { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } } .trade-tooltip-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .trade-tooltip-tag { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; } .trade-tooltip.buy .trade-tooltip-tag { background: color-mix(in srgb, var(--green-2) 18%, transparent); color: var(--green); } .trade-tooltip.sell .trade-tooltip-tag { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); } .trade-tooltip-head time { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; } .trade-tooltip-row { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; padding: 3px 0; font-size: 12.5px; } .trade-tooltip-row span { color: var(--muted); } .trade-tooltip-row strong { font-variant-numeric: tabular-nums; } .trade-tooltip-row em { font-size: 11px; font-style: normal; opacity: .85; } @media (prefers-reduced-motion: reduce) { .trade-marker, .trade-tooltip { animation: none !important; } .trade-marker-dot, .trade-marker-halo { transition: none !important; } } .position-filters-drawer > summary { display: none; } @media (max-width: 720px) { .position-filters-drawer > summary { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink); font-size: 12.5px; font-weight: 800; cursor: pointer; list-style: none; } .position-filters-drawer > summary::-webkit-details-marker { display: none; } .position-filters-drawer > summary span { font-size: 13px; opacity: .7; } .position-filters-drawer > summary em { margin-left: auto; overflow: hidden; max-width: 45%; color: var(--muted); font-size: 11.5px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; } .position-filters-drawer > summary::after { color: var(--muted); content: "▾"; transition: transform .2s ease; } .position-filters-drawer[open] > summary::after { transform: rotate(180deg); } .position-filters-drawer .position-panel-actions { display: grid; gap: 8px; margin-top: 10px; animation: evra-drawer-in .24s cubic-bezier(.3, .9, .3, 1) both; } .position-filters-drawer .position-panel-actions > * { width: 100%; } } @keyframes evra-drawer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .position-filters-drawer .position-panel-actions { animation: none !important; } } .app-native-chart .company-hero-spark { width: 100%; margin-inline: 0; } body.app-mode[data-view="company"] .app-native-chart { padding-inline: 10px; } .app-native-range { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; } .report-history-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); } .report-history-tabs button { min-height: 34px; padding: 5px 13px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 800; cursor: pointer; transition: background .18s ease, color .18s ease; } .report-history-tabs button:hover { color: var(--ink); } .report-history-tabs button.active { background: var(--card); color: var(--green); box-shadow: 0 2px 8px rgba(9, 31, 24, .09); } .report-history-wrap { padding: 0 16px 4px; } .report-history-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .report-history-table th { padding: 8px 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-align: left; text-transform: uppercase; } .report-history-table th.num, .report-history-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .report-history-table td { padding: 9px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); vertical-align: middle; } .report-history-table tbody tr:last-child td { border-bottom: 0; } .report-history-table td strong { font-size: 13px; } .report-history-table td em { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-style: normal; } .report-bar { display: block; overflow: hidden; width: 100%; max-width: 90px; height: 3px; margin: 5px 0 0 auto; border-radius: 3px; background: color-mix(in srgb, var(--line) 80%, transparent); } .report-bar i { display: block; width: var(--udzial, 10%); height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--green-2) 65%, var(--line)); transform-origin: left center; } .report-history-row { transition: background .15s ease; } .report-history-row:hover { background: color-mix(in srgb, var(--green) 6%, transparent); } .report-history-note { display: block; padding: 10px 16px 14px; color: var(--muted); font-size: 11.5px; line-height: 1.5; } :root[data-motion="on"] .report-history-row { animation: evra-report-row-in .3s cubic-bezier(.3, .9, .3, 1) both; animation-delay: calc(min(var(--i), 14) * 26ms); } :root[data-motion="on"] .report-bar i { animation: evra-report-bar .45s cubic-bezier(.3, .9, .3, 1) both; animation-delay: calc(min(var(--i), 14) * 26ms + 90ms); } @keyframes evra-report-row-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } @keyframes evra-report-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (max-width: 720px) { .report-history-wrap { overflow-x: auto; padding: 0 10px 4px; } .report-history-table { min-width: 520px; } .report-history-tabs { margin-top: 10px; } } @media (prefers-reduced-motion: reduce) { .report-history-row, .report-bar i { animation: none !important; transition: none !important; } } .chart-fullscreen { position: fixed; z-index: 120; inset: 0; display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); animation: evra-fs-in .22s ease both; } @keyframes evra-fs-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } } body.chart-fullscreen-open { overflow: hidden; } .chart-fullscreen-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 16px calc(14px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--line); } .chart-fullscreen-head strong { display: block; font-size: 16px; } .chart-fullscreen-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; } .chart-fullscreen-head button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); font-size: 17px; cursor: pointer; } .chart-fullscreen-stage { display: grid; align-content: center; padding: 8px 12px; overflow: hidden; } .chart-fullscreen .chart-fullscreen-stage svg { width: 100% !important; height: min(72vh, 620px) !important; max-height: none !important; } .chart-fullscreen-hint { margin: 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: 12px; text-align: center; } .chart-fullscreen-button { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: color .18s ease, border-color .18s ease; } .chart-fullscreen-button:hover { border-color: color-mix(in srgb, var(--green-2) 45%, var(--line)); color: var(--green); } .trade-marker-hit { fill: transparent; } .full-chart-svg .trade-marker-glyph { font-size: 9px; } @media (max-width: 720px) { .chart-fullscreen-stage { padding: 6px 8px; } .chart-fullscreen-head { padding: 10px 12px calc(10px + env(safe-area-inset-top, 0px)); } } @media (prefers-reduced-motion: reduce) { .chart-fullscreen { animation: none !important; } } .full-chart-slot, .full-chart-wrap, .app-native-chart { position: relative; } @media (max-width: 720px) { .portfolio-return-chart { min-width: 0; width: 100%; } .portfolio-return-wrap { overflow-x: hidden; } } @media (max-width: 720px) { .stat-open-hint { margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } .stat-card > strong { line-height: 1.15; } .stat-card .trend-up, .stat-card .trend-down { display: inline-block; margin-top: 4px; } } @media (max-width: 720px) { .report-history-panel .panel-header { display: block; } .report-history-panel .panel-title { min-width: 0; } .report-history-panel .panel-title h2 { font-size: 20px; line-height: 1.2; } .report-history-panel .report-history-tabs { display: flex; width: 100%; margin-top: 12px; } .report-history-panel .report-history-tabs button { flex: 1; } } .trade-range-hint { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 14px 0; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--green-2) 28%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--green-soft) 55%, var(--card)); color: var(--ink); font-size: 12.5px; } .trade-range-hint span { color: var(--green-2); } .trade-range-hint button { min-height: 34px; margin-left: auto; padding: 5px 13px; border: 1px solid color-mix(in srgb, var(--green-2) 45%, var(--line)); border-radius: 999px; background: var(--card); color: var(--green); font-size: 12px; font-weight: 800; cursor: pointer; } html { background: var(--bg); } .social-studio-stage, .social-canvas.social-share-v2 { container-type: inline-size; } .social-canvas.social-share-v2 { --social-pad: 4cqw; } .social-canvas.social-share-v2 .social-canvas-top span { font-size: 2.1cqw; } .social-canvas.social-share-v2 .social-canvas-top h3 { font-size: 5.4cqw; line-height: 1.05; } .social-canvas.social-share-v2 .social-canvas-top > b { font-size: 2.4cqw; } .social-canvas.social-share-v2 .social-canvas-foot { font-size: 2.2cqw; bottom: 3.2cqw; } .social-canvas.social-share-v2.portrait .social-canvas-top h3 { font-size: 7.2cqw; } .social-canvas.social-share-v2.portrait .social-canvas-top span { font-size: 2.9cqw; } .social-canvas.social-share-v2.portrait .social-canvas-foot { font-size: 3cqw; } .social-canvas.social-share-v2.story .social-canvas-top h3 { font-size: 8.4cqw; } .social-canvas.social-share-v2.story .social-canvas-top span { font-size: 3.4cqw; } .social-canvas.social-share-v2.story .social-canvas-foot { font-size: 3.4cqw; } .social-canvas.social-share-v2 .social-canvas-top { max-height: 24cqh; overflow: hidden; } .social-canvas.social-share-v2 .social-canvas-top h3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .odtworzona-plakietka { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: lowercase; vertical-align: middle; } .odtworzona-kropka { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--amber); vertical-align: middle; } .odtworz-pozycje > summary { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--amber) 32%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--amber) 8%, transparent); color: var(--ink); font-size: 12.5px; font-weight: 800; cursor: pointer; list-style: none; } .odtworz-pozycje > summary::-webkit-details-marker { display: none; } .odtworz-info { margin: 10px 2px; color: var(--muted); font-size: 12px; line-height: 1.5; } .odtworz-info strong { color: var(--ink); } .odtworz-pola { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 10px; } .odtworz-pola label { display: grid; gap: 4px; color: var(--muted); font-size: 11.5px; font-weight: 700; } .odtworz-pola input { min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-size: 13px; } .odtworz-podglad { margin-top: 12px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); } .odtworz-rzad { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 12.5px; } .odtworz-rzad span { color: var(--muted); } .odtworz-rzad strong { font-variant-numeric: tabular-nums; } .odtworz-zastrzezenie { margin: 10px 0; padding: 9px 11px; border-left: 3px solid var(--amber); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--amber) 10%, transparent); color: var(--muted); font-size: 11.5px; line-height: 1.5; } .odtworz-blad { margin: 10px 0 0; color: var(--red); font-size: 12.5px; } body.trade-tooltip-open .chart-cursor-tip { opacity: 0 !important; } .ah-rank-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 14px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ah-rank-tabs::-webkit-scrollbar { display: none; } .ah-rank-tabs button { flex: 0 0 auto; min-height: 38px; padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 12.5px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; } .ah-rank-tabs button.active { border-color: color-mix(in srgb, var(--green-2) 50%, var(--line)); background: color-mix(in srgb, var(--green-soft) 72%, var(--card)); color: var(--green); } .ah-rank-list { display: grid; gap: 2px; padding: 0 10px 12px; } .ah-rank-row { display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 14px; cursor: pointer; transition: background .16s ease; } .ah-rank-row:hover, .ah-rank-row:focus-visible { background: color-mix(in srgb, var(--green) 7%, transparent); outline: none; } .ah-rank-pos { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--line) 55%, transparent); color: var(--muted); font-size: 11.5px; font-weight: 900; } .ah-rank-row:first-child .ah-rank-pos { background: color-mix(in srgb, var(--green-2) 22%, transparent); color: var(--green); } .ah-rank-copy { min-width: 0; } .ah-rank-copy strong { display: block; font-size: 13px; } .ah-rank-copy small { display: block; overflow: hidden; color: var(--muted); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; } .ah-rank-row > b { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; } :root[data-motion="on"] .ah-rank-row { animation: evra-rank-in .28s cubic-bezier(.3, .9, .3, 1) both; animation-delay: calc(var(--i) * 34ms); } @keyframes evra-rank-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ah-rank-row { animation: none !important; } } .social-kolo { position: absolute; right: 4cqw; bottom: 13cqh; z-index: 3; display: flex; gap: 2.4cqw; align-items: center; padding: 2cqw 2.6cqw; border: 1px solid rgba(255, 255, 255, .16); border-radius: 3cqw; background: rgba(4, 22, 16, .5); backdrop-filter: blur(10px); } .social-kolo svg { width: 13cqw; height: 13cqw; } .social-kolo path { stroke: rgba(4, 22, 16, .55); stroke-width: 1.2; animation: evra-kolo-in .5s cubic-bezier(.3, .9, .3, 1) both; animation-delay: calc(var(--i) * 70ms + 300ms); transform-origin: 60px 60px; } @keyframes evra-kolo-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } } .social-kolo ul { display: grid; gap: .5cqw; margin: 0; padding: 0; list-style: none; } .social-kolo li { display: flex; gap: 1cqw; align-items: center; color: rgba(255, 255, 255, .88); font-size: 2cqw; font-weight: 700; white-space: nowrap; } .social-kolo li i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; } .social-kolo li b { margin-left: auto; padding-left: 1cqw; color: #fff; } .social-staz { display: inline-flex; gap: .8cqw; align-items: center; } .social-staz i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #67d2a9; } .social-canvas.social-share-v2.portrait .social-kolo, .social-canvas.social-share-v2.story .social-kolo { bottom: 22cqh; } @media (prefers-reduced-motion: reduce) { .social-kolo path { animation: none !important; } } @media (max-width: 720px) { .web-section-nav, .app-menu-sheet, .ah-ptr, .social-kolo, body.app-mode[data-view="company"] .app-native-range { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: color-mix(in srgb, var(--card) 94%, var(--surface-soft)) !important; } .content > section:not(.app-native-company):not(.company-hero), .content > article { content-visibility: auto; contain-intrinsic-size: auto 600px; } .panel { contain: layout paint; } .panel, .stat-card { box-shadow: 0 2px 10px rgba(11, 35, 27, .06); } } @media (max-width: 720px) and (update: slow) { .content * { animation: none !important; } } .trade-tooltip-lista { margin-top: 9px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .trade-tooltip-lista-tytul { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .trade-tooltip-poz { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 3px 0; font-size: 11.5px; font-variant-numeric: tabular-nums; } .trade-tooltip-poz time { color: var(--muted); } .trade-tooltip-poz span { color: var(--muted); font-size: 11px; } .trade-tooltip-poz b { text-align: right; } .trade-tooltip-poz.buy b { color: var(--green); } .trade-tooltip-poz.sell b { color: var(--red); } .trade-tooltip.wiele { min-width: 214px; } .trade-marker.dividend { color: #c9a227; } .trade-marker.dividend .trade-marker-dot { fill: #d4af37; stroke: #fff6db; stroke-width: 1.6; } .trade-marker.dividend .trade-marker-halo { fill: #d4af37; } .trade-marker.dividend .trade-marker-stem { stroke: #c9a227; opacity: .45; } .full-chart-svg .trade-marker.dividend .trade-marker-glyph { fill: #4a3a06; } .trade-tooltip.dividend .trade-tooltip-tag { background: color-mix(in srgb, #d4af37 24%, transparent); color: #8a6d0b; } .trade-tooltip-row.dywidenda strong { color: #a8820f; } .trade-tooltip-poz.dividend b { color: #a8820f; } @media (max-width: 720px) { .trade-tooltip { left: 8px !important; right: 8px; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); min-width: 0; width: auto; padding: 14px 16px; border-radius: 18px; box-shadow: 0 -8px 40px rgba(11, 35, 27, .28); animation: evra-trade-tip-mobile .2s ease both; } .trade-tooltip-head { margin-bottom: 10px; padding-bottom: 9px; } .trade-tooltip-tag { padding: 3px 10px; font-size: 12px; } .trade-tooltip-head time { font-size: 12.5px; } .trade-tooltip-row { padding: 5px 0; font-size: 13.5px; } .trade-tooltip-row em { font-size: 12px; } .trade-tooltip-poz { padding: 5px 0; font-size: 12.5px; } .trade-tooltip-lista-tytul { font-size: 11.5px; } .trade-tooltip::before { display: block; width: 36px; height: 4px; margin: -4px auto 10px; border-radius: 999px; background: color-mix(in srgb, var(--line) 90%, transparent); content: ""; } } @keyframes evra-trade-tip-mobile { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .trade-tooltip { animation: none !important; } } .social-canvas.social-share-v2.kind-portfolio .social-canvas-top { position: relative; z-index: 4; max-height: none; } .social-canvas.social-share-v2.kind-portfolio .social-canvas-top h3 { -webkit-line-clamp: 1; font-size: 4.6cqw; } .social-canvas.social-share-v2.kind-portfolio .social-canvas-top small { display: block; margin-top: .4cqw; font-size: 2cqw; opacity: .78; } .social-canvas.social-share-v2 .social-hero-result { position: static; margin: 1.2cqw 0 .4cqw; font-size: 9cqw; line-height: 1; } .social-canvas.social-share-v2.portrait .social-hero-result { font-size: 12cqw; } .social-canvas.social-share-v2.story .social-hero-result { font-size: 14cqw; } .dividend-forecast-panel .panel-title h2 { color: var(--amber); } .dividend-forecast-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; padding: 0 16px 6px; } .dividend-forecast-grid > div { padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--surface-soft) 72%, var(--card)); } .dividend-forecast-grid > div.wyroznione { border-color: color-mix(in srgb, var(--amber) 42%, var(--line)); background: color-mix(in srgb, var(--amber) 10%, var(--card)); } .dividend-forecast-grid span { display: block; color: var(--muted); font-size: 11.5px; } .dividend-forecast-grid strong { display: block; margin-top: 3px; font-size: 16px; font-variant-numeric: tabular-nums; } .dividend-forecast-grid > div.wyroznione strong { color: #a8820f; } .dividend-forecast-note { display: block; margin: 4px 16px 14px; padding: 10px 12px; border-left: 3px solid var(--amber); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--amber) 9%, transparent); color: var(--muted); font-size: 11.5px; line-height: 1.55; } @media (max-width: 720px) { .dividend-forecast-grid { padding: 0 10px 6px; } .dividend-forecast-note { margin: 4px 10px 12px; } } .company-metric-tile.klikalna { cursor: pointer; transition: border-color .18s ease, background .18s ease; } .company-metric-tile.klikalna:hover, .company-metric-tile.klikalna:focus-visible { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber) 8%, transparent); outline: none; } .company-metric-tile.klikalna::after { margin-left: 6px; color: var(--amber); content: "›"; font-weight: 900; } .dywidendy-okno { max-width: 640px; width: min(94vw, 640px); } .dywidendy-wrap { max-height: min(58vh, 520px); overflow: auto; padding: 0 18px; } .dywidendy-tabela { width: 100%; border-collapse: collapse; font-size: 13px; } .dywidendy-tabela th { position: sticky; top: 0; z-index: 1; padding: 9px 8px; border-bottom: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 11.5px; font-weight: 900; letter-spacing: .05em; text-align: left; text-transform: uppercase; } .dywidendy-tabela th.num, .dywidendy-tabela td.num { text-align: right; font-variant-numeric: tabular-nums; } .dywidendy-tabela td { padding: 10px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); } .dywidendy-tabela tbody tr:last-child td { border-bottom: 0; } .dywidendy-tabela tr.z-udzialem td.kwota { color: var(--green); font-weight: 800; } .dywidendy-tabela tr.bez-udzialu { opacity: .62; } .dywidendy-tabela td.zero { color: var(--muted); } .dywidendy-tabela td.hipotetyczne { color: #a8820f; font-style: italic; } .dywidendy-nota { display: block; margin: 4px 18px 18px; padding: 11px 13px; border-left: 3px solid var(--amber); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--amber) 9%, transparent); color: var(--muted); font-size: 11.5px; line-height: 1.55; } :root[data-motion="on"] .dywidendy-tabela tbody tr { animation: evra-rank-in .26s cubic-bezier(.3, .9, .3, 1) both; animation-delay: calc(min(var(--i), 12) * 26ms); } @media (max-width: 720px) { .dywidendy-okno { width: 100vw; max-width: none; border-radius: 22px 22px 0 0; } .dywidendy-wrap { padding: 0 12px; max-height: 62vh; } .dywidendy-tabela { font-size: 12.5px; } .dywidendy-nota { margin: 4px 12px 14px; } } @media (prefers-reduced-motion: reduce) { .dywidendy-tabela tbody tr { animation: none !important; } } .company-intel-card.klikalna { cursor: pointer; transition: border-color .18s ease, transform .18s ease; } .company-intel-card.klikalna:hover, .company-intel-card.klikalna:focus-visible { border-color: color-mix(in srgb, var(--amber) 48%, var(--line)); transform: translateY(-2px); outline: none; } .company-intel-card.klikalna .company-intel-top::after { margin-left: auto; color: var(--amber); content: "historia ›"; font-size: 11px; font-weight: 800; } .dywidendy-naglowek { align-items: flex-start; } .dywidendy-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 9px; padding: 4px 18px 12px; } .dywidendy-kafle > div { padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--surface-soft) 70%, var(--card)); animation: evra-rank-in .3s cubic-bezier(.3, .9, .3, 1) both; } .dywidendy-kafle > div:nth-child(2) { animation-delay: 50ms; } .dywidendy-kafle > div:nth-child(3) { animation-delay: 100ms; } .dywidendy-kafle > div:nth-child(4) { animation-delay: 150ms; } .dywidendy-kafle span { display: block; color: var(--muted); font-size: 11.5px; } .dywidendy-kafle strong { display: block; margin-top: 3px; font-size: 17px; font-variant-numeric: tabular-nums; } .dywidendy-kafle .wyroznione { border-color: color-mix(in srgb, var(--green-2) 42%, var(--line)); background: color-mix(in srgb, var(--green-soft) 62%, var(--card)); } .dywidendy-kafle .wyroznione strong { color: var(--green); } .dywidendy-kafle .hipoteza { border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); background: color-mix(in srgb, var(--amber) 9%, var(--card)); } .dywidendy-kafle .hipoteza strong { color: #a8820f; font-style: italic; } .dywidendy-slupki { display: flex; gap: 6px; align-items: flex-end; height: 92px; margin: 0 18px 14px; padding: 10px 12px 6px; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--surface-soft) 60%, var(--card)); } .dyw-slupek { display: flex; flex: 1; flex-direction: column; gap: 5px; align-items: center; justify-content: flex-end; height: 100%; } .dyw-slupek i { display: block; width: 100%; max-width: 34px; height: var(--h, 20%); border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--amber) 42%, var(--line)); transform-origin: bottom center; animation: evra-dyw-slupek .5s cubic-bezier(.3, .9, .3, 1) both; animation-delay: calc(var(--i) * 60ms); } .dyw-slupek.moja i { background: linear-gradient(180deg, #d4af37, #b8912a); box-shadow: 0 3px 10px rgba(212, 175, 55, .3); } .dyw-slupek em { color: var(--muted); font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; } .dyw-slupek.moja em { color: #a8820f; font-weight: 800; } @keyframes evra-dyw-slupek { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } @media (max-width: 720px) { .dywidendy-kafle { padding: 4px 12px 10px; } .dywidendy-slupki { margin: 0 12px 12px; height: 78px; } } @media (prefers-reduced-motion: reduce) { .dywidendy-kafle > div, .dyw-slupek i { animation: none !important; } } .app-menu-konto { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 14px 0 6px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--surface-soft) 70%, var(--card)); } .app-menu-konto span { display: block; color: var(--muted); font-size: 11.5px; } .app-menu-konto strong { display: block; overflow: hidden; margin-top: 2px; max-width: 46vw; font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; } .app-menu-konto button { flex: 0 0 auto; min-height: 42px; padding: 9px 16px; border: 1px solid color-mix(in srgb, var(--red) 38%, var(--line)); border-radius: 999px; background: var(--card); color: var(--red); font-size: 13px; font-weight: 800; cursor: pointer; } .app-menu-konto button.primary { border-color: color-mix(in srgb, var(--green-2) 45%, var(--line)); background: var(--green); color: #fff; } @media (max-width: 700px) { .company-table tbody tr td:nth-child(3) { min-width: 0; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; overflow: hidden; } .company-table tbody tr td:nth-child(3) > span { max-width: 100%; } .company-table tbody tr td:nth-child(4) { min-width: 0; overflow: hidden; } .company-table tbody tr td:nth-child(3) .row-spark-slot { display: flex; max-width: 100%; align-items: center; justify-content: flex-end; margin-top: 0; } .company-table tbody tr td:nth-child(3) .position-spark-wrap { max-width: 100%; } .company-table tbody tr td:nth-child(3) { font-size: 12.5px; } .company-table tbody tr td:nth-child(3) .position-spark-meta { font-size: 11px; } } @media (max-width: 700px) { .catalog-market-chips button { min-height: 44px; padding: 6px 12px; } .local-search input { min-height: 44px; padding: 0; } .company-table .watch-star { position: relative; } .company-table .watch-star::after { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); content: ""; } } @media (max-width: 700px) { .company-table tbody tr { grid-template-columns: minmax(0, 1fr) 88px 42px; } .company-table tbody tr td:nth-child(3) .position-spark { width: 36px; } .company-table tbody tr td:nth-child(3) .position-spark-meta { gap: 3px; } .company-table .table-company { gap: 6px; } .company-table .table-company > .watch-star { min-width: 18px; width: 18px; } .company-table .ticker-mark.logo-fallback em { display: none; } } @media (max-width: 700px) { .catalog-market-chips button, .catalog-market-chips.compact button { min-height: 44px; padding: 7px 12px; } } @media (max-width: 700px) { .company-table .company-copy strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 1.22; overflow-wrap: anywhere; } } @media (max-width: 700px) { .company-table .ticker-mark.logo-fallback b { font-size: 11px; letter-spacing: -.6px; } } .analyst-target-scale { min-height: calc(88px + (var(--label-rows, 1) - 1) * 26px); } .analyst-target-scale i b { transform: translateY(calc(var(--label-row, 0) * 26px)); transition: transform .2s ease; } .analyst-target-scale i[style*="--label-row"]::after { position: absolute; top: 20px; left: 50%; width: 1px; height: calc(var(--label-row, 0) * 26px); transform: translateX(-50%); background: color-mix(in srgb, var(--line) 70%, transparent); content: ""; } .analyst-target-scale i.is-merged small { display: none; } .analyst-target-scale i.is-merged b::before { margin-right: 4px; color: var(--muted); font-size: 11px; font-weight: 950; letter-spacing: .06em; content: attr(data-podpis); } .analyst-target-scale i b { position: relative; } @media (max-width: 700px) { .analyst-target-scale { min-height: calc(102px + (var(--label-rows, 1) - 1) * 26px); } } @media (max-width: 700px) { .company-chart-main .panel-header { align-items: stretch; flex-direction: column; gap: 10px; } .company-chart-main .chart-controls { width: 100%; justify-content: flex-start; } .chart-controls .range-tabs { flex: 1 0 100%; } .chart-controls .range-tabs button { flex: 1 1 0; min-width: 0; padding: 5px 4px; } .trade-range-hint button { min-height: 44px; } } @media (max-width: 700px) { .panel-header { flex-wrap: wrap; } .panel-header > .badge { flex: 0 0 auto; max-width: 100%; } } @media (max-width: 700px) { .public-nav-links a { display: inline-flex; min-height: 44px; align-items: center; } .landing-cta-row .landing-link { position: relative; padding: 6px 0; } .landing-cta-row .landing-link::after { position: absolute; top: 50%; left: 0; width: 100%; height: 44px; transform: translateY(-50%); content: ""; } } .company-table .price-pending { opacity: .55; font-weight: 700; } .source-mini.pending { color: var(--muted); } .source-mini.pending::before { background: var(--muted); } .data-stamp.pending { border-color: var(--line); background: var(--surface-soft); color: var(--muted); } .data-stamp.pending span { background: var(--muted); animation: evraPendingPulse 1.6s ease-in-out infinite; } @keyframes evraPendingPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } :root[data-motion="off"] .data-stamp.pending span { animation: none; } .company-table tbody .badge { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; } .company-table tbody .source-mini { display: block; overflow: hidden; white-space: normal; line-height: 1.3; } .company-hero-quick strong { overflow: visible; white-space: normal; line-height: 1.2; overflow-wrap: break-word; } @media (max-width: 700px) { .company-hero-quick span { align-items: start; grid-template-columns: minmax(0, 1fr); } } .company-intel-top { flex-wrap: wrap; row-gap: 6px; } .company-intel-top > * { flex: 0 0 auto; } .ticker-mark.logo-fallback.small em, .ticker-mark.logo-fallback.sm em { display: none; } @media (max-width: 700px) { .ah-rank-tabs button { min-height: 44px; } .ah-value-card .primary-button { min-height: 44px; } } @media (max-width: 720px) { .portfolio-positions-table.is-compact { overflow-x: visible; } .portfolio-positions-table.is-compact table { width: 100%; min-width: 0; table-layout: fixed; } .portfolio-positions-table.is-compact thead th:nth-child(2), .portfolio-positions-table.is-compact thead th:nth-child(3), .portfolio-positions-table.is-compact thead th:nth-child(4), .portfolio-positions-table.is-compact thead th:nth-child(5), .portfolio-positions-table.is-compact thead th:nth-child(8), .portfolio-positions-table.is-compact tbody tr.compact-row td:nth-child(3), .portfolio-positions-table.is-compact tbody tr.compact-row td:nth-child(4), .portfolio-positions-table.is-compact tbody tr.compact-row td:nth-child(5), .portfolio-positions-table.is-compact tbody tr.compact-row td:nth-child(6), .portfolio-positions-table.is-compact tbody tr.compact-row td:nth-child(9), .portfolio-positions-table.is-compact tbody tr.compact-row td.holding-swipe-actions { display: none; } .portfolio-positions-table.is-compact thead th:nth-child(1) { width: auto; } .portfolio-positions-table.is-compact thead th:nth-child(6) { width: 78px; } .portfolio-positions-table.is-compact thead th:nth-child(7) { width: 96px; } .portfolio-positions-table.is-compact thead th:nth-child(9) { width: 46px; } .portfolio-positions-table.is-compact thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-soft); } .portfolio-positions-table.is-compact tbody tr.compact-row td:nth-child(2) { overflow: hidden; } .portfolio-positions-table.is-compact .compact-company { min-width: 0; } .portfolio-positions-table.is-compact .compact-names { min-width: 0; } .portfolio-positions-table.is-compact .compact-names i { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .pos-cards { display: grid; gap: 10px; padding: 10px; } .pos-card { display: grid; gap: 9px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(160deg, var(--card), color-mix(in srgb, var(--green-soft) 22%, var(--card))); box-shadow: 0 10px 26px rgba(9, 31, 24, .06); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.2, .8, .2, 1); } .pos-card:active { transform: scale(.988); } .pos-card.is-active { border-color: color-mix(in srgb, var(--green-2) 52%, var(--line)); box-shadow: inset 0 3px 0 var(--green), 0 14px 30px rgba(9, 31, 24, .1); } .pos-card-top { display: grid; align-items: center; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; } .pos-card-top .ticker-mark { width: 34px; height: 34px; border-radius: 11px; } .pos-card-id { display: grid; min-width: 0; gap: 1px; } .pos-card-id b { font-size: 14.5px; font-weight: 900; letter-spacing: -.01em; } .pos-card-id i { overflow: hidden; color: var(--muted); font-size: 11.5px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; } .pos-card-score { display: grid; min-width: 38px; height: 30px; align-content: center; justify-items: center; padding: 0 9px; border-radius: 10px; font-size: 13px; font-weight: 950; font-variant-numeric: tabular-nums; } .pos-card-score.good { background: var(--green-soft); color: var(--green); } .pos-card-score.mid { background: color-mix(in srgb, var(--amber) 16%, transparent); color: color-mix(in srgb, var(--amber) 78%, var(--ink)); } .pos-card-score.low { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); } .pos-card-kwoty { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 11px; border-radius: 13px; background: color-mix(in srgb, var(--surface-soft) 70%, var(--card)); } .pos-card-kwoty > span { display: grid; min-width: 0; gap: 2px; } .pos-card-kwoty em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } .pos-card-kwoty b { overflow: hidden; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; } .pos-card-kwoty u { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; text-decoration: none; } .pos-card-wynik { text-align: right; } .pos-card-wynik.trend-up b, .pos-card-wynik.trend-up u { color: var(--green); } .pos-card-wynik.trend-down b, .pos-card-wynik.trend-down u { color: var(--red); } .pos-card-stopka { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pos-card-koszt { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .pos-card-spark { flex: 0 0 auto; } .pos-card-spark .position-spark { width: 62px; height: 20px; } .pos-card-spark .position-spark-meta { display: none; } .pos-card-procent { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-style: normal; font-weight: 900; font-variant-numeric: tabular-nums; } .pos-card-udzial-bar { position: relative; display: block; overflow: hidden; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--line) 70%, transparent); } .pos-card-udzial-bar i { position: absolute; inset: 0 auto 0 0; width: var(--udzial, 4%); border-radius: 99px; background: linear-gradient(90deg, var(--green-2), var(--green)); } @media (max-width: 720px) { .density-switch { display: none; } } .pos-card-detal { margin: -4px 0 2px; padding: 0 2px; animation: evraPosDetal .22s cubic-bezier(.2, .8, .2, 1) both; } @keyframes evraPosDetal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } :root[data-motion="off"] .pos-card-detal { animation: none; } :root[data-motion="on"] .pos-card { animation: evraPosCard .3s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i, 0), 8) * 22ms); } @keyframes evraPosCard { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } .zrzut-modal { display: grid; gap: 14px; max-width: 560px; } .zrzut-drop { display: grid; justify-items: center; gap: 7px; padding: 26px 18px; border: 2px dashed color-mix(in srgb, var(--green-2) 40%, var(--line)); border-radius: 16px; background: var(--surface-soft); text-align: center; } .zrzut-drop strong { font-size: 14px; } .zrzut-drop small { color: var(--muted); } .zrzut-drop button { margin-top: 4px; } .zrzut-status { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-radius: 13px; background: var(--surface-soft); font-weight: 800; } .zrzut-status em { margin-left: auto; color: var(--muted); font-style: normal; font-variant-numeric: tabular-nums; } .zrzut-spinner { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--green) 26%, transparent); border-top-color: var(--green); border-radius: 50%; animation: zrzutObrot .8s linear infinite; } @keyframes zrzutObrot { to { transform: rotate(360deg); } } :root[data-motion="off"] .zrzut-spinner { animation: none; } .zrzut-uwaga { margin: 0 0 10px; padding: 9px 12px; border-radius: 11px; background: color-mix(in srgb, var(--amber) 13%, transparent); color: color-mix(in srgb, var(--amber) 72%, var(--ink)); font-size: 12.5px; font-weight: 700; } .zrzut-lista { display: grid; gap: 9px; max-height: 46vh; overflow-y: auto; } .zrzut-pozycja { display: grid; align-items: center; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); cursor: pointer; } .zrzut-nazwa { display: grid; min-width: 0; gap: 1px; } .zrzut-nazwa b { font-size: 13.5px; font-weight: 900; } .zrzut-nazwa i { overflow: hidden; color: var(--muted); font-size: 11.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; } .zrzut-nazwa u { color: var(--muted); font-size: 11px; text-decoration: none; } .zrzut-pola { display: flex; gap: 8px; } .zrzut-pola label { display: grid; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 800; } .zrzut-pola input { width: 84px; min-height: 38px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; } @media (max-width: 700px) { .zrzut-pozycja { grid-template-columns: auto minmax(0, 1fr); } .zrzut-pola { grid-column: 1 / -1; } .zrzut-pola input { width: 100%; min-height: 44px; } .zrzut-lista { max-height: 40vh; } } .position-spark-waiting { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--line) 55%, transparent); color: var(--muted); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .strategy-workshop-orbit i { width: 88px; min-height: 58px; padding: 7px 6px; font-size: 11px; line-height: 1.18; overflow-wrap: anywhere; hyphens: auto; } .strategy-workshop-orbit i:nth-child(1) { top: 0; left: 91px; right: auto; bottom: auto; } .strategy-workshop-orbit i:nth-child(2) { top: 91px; left: auto; right: 0; bottom: auto; } .strategy-workshop-orbit i:nth-child(3) { top: auto; left: 91px; right: auto; bottom: 0; } .strategy-workshop-orbit i:nth-child(4) { top: 91px; left: 0; right: auto; bottom: auto; } @media (max-width: 1100px) { .strategy-workshop-orbit i { width: 76px; min-height: 52px; } .strategy-workshop-orbit i:nth-child(1) { top: 0; left: 72px; right: auto; bottom: auto; } .strategy-workshop-orbit i:nth-child(2) { top: 72px; left: auto; right: 0; bottom: auto; } .strategy-workshop-orbit i:nth-child(3) { top: auto; left: 72px; right: auto; bottom: 0; } .strategy-workshop-orbit i:nth-child(4) { top: 72px; left: 0; right: auto; bottom: auto; } } .panel-header > .badge { flex: 0 0 auto; max-width: 100%; } .panel-header > .panel-title { min-width: 0; } .market-index-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .index-card { min-width: 0; } .index-card > * { min-width: 0; } .index-card strong, .index-card span { overflow: hidden; text-overflow: ellipsis; } .market-asset-hub-card.index { grid-template-columns: auto minmax(0, 1fr) auto; } .market-asset-hub-logo.index:not(:has(img)) { width: auto; min-width: 38px; padding: 0 7px; } .market-asset-hub-logo.index:not(:has(img)) > b { position: static; inset: auto; overflow: visible; font-size: 11px; letter-spacing: -.3px; white-space: nowrap; } .market-asset-hub-logo.index:has(img) > b { display: none; } .comparison-presets small, .market-event-facts strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; } .forum-post-card { transition: border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.2, .8, .2, 1); } :root[data-motion="on"] .forum-post-card { animation: evraForumPost .34s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i, 0), 8) * 34ms); } @keyframes evraForumPost { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .forum-post-card:hover { border-color: color-mix(in srgb, var(--green-2) 42%, var(--line)); box-shadow: 0 12px 30px rgba(9, 31, 24, .09); transform: translateY(-2px); } .forum-post-card:active { transform: translateY(0) scale(.995); } .forum-post-card [data-forum-like].is-liked strong, .forum-like-count.is-bumped { animation: evraLikeBump .32s cubic-bezier(.2, .9, .3, 1.4); } @keyframes evraLikeBump { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } } :root[data-motion="on"] .forum-hero, :root[data-motion="on"] .community-hero { animation: evraSpolecznoscHero .42s cubic-bezier(.2, .8, .2, 1) both; } @keyframes evraSpolecznoscHero { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .community-card, .public-portfolio-card { transition: border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.2, .8, .2, 1); } :root[data-motion="on"] .community-card, :root[data-motion="on"] .public-portfolio-card { animation: evraForumPost .34s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i, 0), 8) * 34ms); } .community-card:hover, .public-portfolio-card:hover { border-color: color-mix(in srgb, var(--green-2) 42%, var(--line)); box-shadow: 0 14px 32px rgba(9, 31, 24, .1); transform: translateY(-3px); } .forum-ticker-filter button { transition: background .16s ease, color .16s ease, border-color .16s ease; } .forum-ticker-filter button.active { border-color: color-mix(in srgb, var(--green-2) 55%, var(--line)); background: var(--green-soft); color: var(--green); font-weight: 900; } :root[data-motion="off"] .forum-post-card, :root[data-motion="off"] .community-card, :root[data-motion="off"] .public-portfolio-card, :root[data-motion="off"] .forum-hero, :root[data-motion="off"] .community-hero { animation: none; } @media (prefers-reduced-motion: reduce) { .forum-post-card, .community-card, .public-portfolio-card { animation: none !important; transition: none; } } .forum-ticker-context { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 10px; } .forum-ticker-chip { display: inline-flex; min-height: 34px; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink); cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; transition: border-color .16s ease, background .16s ease, transform .16s cubic-bezier(.2, .8, .2, 1); } .forum-ticker-chip:hover { border-color: color-mix(in srgb, var(--green-2) 48%, var(--line)); background: var(--card); transform: translateY(-1px); } .forum-ticker-chip:active { transform: translateY(0) scale(.98); } .forum-ticker-chip b { font-size: 12.5px; font-weight: 900; letter-spacing: -.01em; } .forum-ticker-chip .forum-chip-price { font-size: 12px; font-weight: 700; } .forum-ticker-chip .forum-chip-price.is-pending { color: var(--muted); font-weight: 600; font-style: italic; } .forum-ticker-chip em { font-size: 11.5px; font-style: normal; font-weight: 800; } .forum-ticker-chip u { min-width: 24px; padding: 1px 6px; border-radius: 7px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 900; text-align: center; text-decoration: none; } @media (max-width: 700px) { .forum-ticker-chip { min-height: 40px; } } @media (max-width: 700px) { .forum-hero { grid-auto-rows: min-content; } .forum-hero-stats { align-self: start; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .forum-hero-stats span { padding: 10px 8px; text-align: center; } .forum-hero-stats small { font-size: 11px; } } .digit-roll.digit-roll { display: inline-block !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: inherit !important; font: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; box-shadow: none !important; vertical-align: baseline !important; } .chart-limit-pauza { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px; padding: 22px 18px; text-align: center; border: 1px dashed color-mix(in srgb, var(--amber) 34%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--amber-soft) 55%, transparent); } .chart-limit-ikona { font-size: 22px; line-height: 1; animation: limit-piasek 2.6s ease-in-out infinite; } @keyframes limit-piasek { 0%, 45% { transform: rotate(0deg); } 55%, 100% { transform: rotate(180deg); } } .chart-limit-pauza strong { font-size: 15px; color: var(--text, #e8edf5); letter-spacing: -0.01em; } .chart-limit-pauza p { margin: 0; max-width: 42ch; font-size: 12.5px; line-height: 1.5; color: var(--muted, #93a1b5); } .chart-limit-pauza small { font-size: 11.5px; font-weight: 600; color: color-mix(in srgb, var(--amber) 70%, var(--text)); letter-spacing: 0.02em; } .company-hero-spark-loading.jest-przerwa strong { color: var(--amber); font-size: 13px; } .limit-baner { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; gap: 10px; width: min(560px, calc(100vw - 32px)); padding: 11px 12px 11px 14px; border: 1px solid rgba(255, 176, 76, 0.28); border-radius: 14px; background: rgba(18, 22, 30, 0.96); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.44); color: #eef2f7; font-size: 12.5px; line-height: 1.45; transform: translate(-50%, calc(100% + 24px)); opacity: 0; pointer-events: none; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease; } .limit-baner.widoczny { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } .limit-baner-ikona { font-size: 15px; flex: 0 0 auto; } .limit-baner-tresc { flex: 1 1 auto; min-width: 0; } .limit-baner-zamknij { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: rgba(238, 242, 247, 0.72); font-size: 16px; line-height: 1; cursor: pointer; } .limit-baner-zamknij:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; } body.app-mode .limit-baner { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); } @media (prefers-reduced-motion: reduce) { .limit-baner { transition: opacity 0.2s ease; } .chart-limit-ikona { animation: none; } } .company-hero-main:has(.company-hero-session) .company-price small { display: none; } @media (max-width: 420px) { .company-hero-actions > * { padding-inline: 8px; } } @media (max-width: 359px) { .company-hero-actions { grid-template-columns: 1fr; } } @media (max-width: 720px) { .content > section:not(.app-native-company):not(.company-hero):first-of-type, .content > article:first-of-type { content-visibility: visible; contain-intrinsic-size: auto; } } @media (max-width: 720px) { body.app-mode .content > .page-heading { align-items: flex-start; justify-content: flex-end; } } @media (max-width: 460px) { .filters-bar select { grid-column: 1 / -1; } } @media (max-width: 700px) { body.app-mode .app-shell::before { position: fixed; top: 0; right: 0; left: 0; z-index: 60; height: env(safe-area-inset-top, 0px); background: var(--bg); content: ""; pointer-events: none; } } @media (max-width: 720px) { .app-native-range button, .range-tabs button, .company-tabbar button, .report-history-tabs button { min-height: 44px; } .range-tabs button { min-width: 44px; } } :root[data-motion="on"] .content[data-view="company"] [data-reveal].is-in:not(.no-anim), :root[data-motion="on"] body[data-view="company"] [data-reveal].is-in:not(.no-anim) { animation: evraSekcjaSpolki .26s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i, 0), 6) * 28ms); } @keyframes evraSekcjaSpolki { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (max-width: 720px) { body.app-mode .content[data-view="company"] > .panel + .panel, body.app-mode[data-view="company"] .content > .panel + .panel { margin-top: 14px; } } body.app-mode[data-view="company"] .panel-title .eyebrow { letter-spacing: .14em; opacity: .85; } @media (prefers-reduced-motion: reduce) { :root[data-motion="on"] [data-reveal].is-in:not(.no-anim) { animation: none; } } :root[data-motion="on"] .app-native-chart .company-hero-spark polyline, :root[data-motion="on"] .ah-portfolio-chart polyline, :root[data-motion="on"] .content.view-fresh .company-hero-spark polyline { stroke-dasharray: 1200; animation-name: evra-line-reveal-ekran; } .app-native-chart .company-hero-spark polyline, .ah-portfolio-chart polyline, .content.view-fresh .company-hero-spark polyline { stroke-dasharray: 1200; } @keyframes evra-line-reveal-ekran { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } } .position-spark polyline { stroke-dasharray: 400; animation-name: evra-row-spark-draw-ekran; } @keyframes evra-row-spark-draw-ekran { from { stroke-dashoffset: 400; opacity: .35; } to { stroke-dashoffset: 0; opacity: 1; } } .analyst-score-card { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; } .analyst-score-card .analyst-mini-grid { width: 100%; } .analyst-ring small { max-width: 68px; line-height: 1.1; letter-spacing: .02em; text-align: center; } :root[data-motion="on"] .analyst-ring { animation: evra-ring-in .62s cubic-bezier(.22, .84, .3, 1) both; } @keyframes evra-ring-in { from { opacity: 0; transform: scale(.88) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } } @media (prefers-reduced-motion: reduce) { :root[data-motion="on"] .analyst-ring { animation: none; } } .brand-mark[data-znak-rynku] { position: relative; display: grid; place-items: center; width: 34px; height: 34px; } .brand-mark[data-znak-rynku] img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s ease; } .brand-mark[data-znak-rynku] .znak-spadek { opacity: 0; } .brand-mark[data-znak-rynku].rynek-spada .znak-wzrost { opacity: 0; } .brand-mark[data-znak-rynku].rynek-spada .znak-spadek { opacity: 1; } :root[data-motion="on"] .brand-mark[data-znak-rynku] img { animation: evra-znak-wejscie .62s cubic-bezier(.2, .85, .3, 1) both; } @keyframes evra-znak-wejscie { from { transform: scale(.72) rotate(-12deg); } to { transform: scale(1) rotate(0); } } :root[data-motion="on"] .brand-mark[data-znak-rynku] .znak-spadek, :root[data-motion="on"] .brand-mark[data-znak-rynku].rynek-spada .znak-wzrost { opacity: 0; } :root[data-motion="on"] .brand-mark[data-znak-rynku].rynek-spada .znak-spadek { opacity: 1; } @media (prefers-reduced-motion: reduce) { .brand-mark[data-znak-rynku] img { animation: none !important; } } .public-brand-logotyp { display: inline-flex; align-items: center; gap: 10px; padding: 2px 4px; } .public-brand-logotyp .brand-mark[data-znak-rynku] { width: 38px; height: 38px; flex: 0 0 auto; } .public-brand-logotyp .public-brand-napis { display: inline-flex; font-size: 30px; font-weight: 900; letter-spacing: -.045em; line-height: 1; } .public-brand-logotyp .public-brand-napis b { color: var(--ink); } .public-brand-logotyp .public-brand-napis em { font-style: normal; color: var(--green); transition: color .5s ease; } .public-brand-logotyp .public-brand-napis em.rynek-spada { color: var(--red); } :root[data-motion="on"] .public-brand-napis b, :root[data-motion="on"] .public-brand-napis em { animation: evra-napis-wejscie .5s cubic-bezier(.2, .9, .3, 1) both; } :root[data-motion="on"] .public-brand-napis em { animation-delay: .12s; } @keyframes evra-napis-wejscie { from { transform: translateY(10px); } to { transform: translateY(0); } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 720px) { .public-brand-logotyp .brand-mark[data-znak-rynku] { width: 32px; height: 32px; } .public-brand-logotyp .public-brand-napis { font-size: 25px; } } @media (prefers-reduced-motion: reduce) { .public-brand-napis b, .public-brand-napis em { animation: none !important; } } .beta-znacznik { padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .chart-swiece-loader .swiece-scena { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); align-items: stretch; gap: 8px; width: 100%; max-width: 260px; height: 96px; margin: 6px auto 2px; } .chart-swiece-loader .swieca { position: relative; display: block; height: 100%; animation: swieca-wejscie .5s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i) * .1s); } .chart-swiece-loader .knot { position: absolute; left: 50%; width: 2px; height: calc(var(--wys) + 22%); top: calc(var(--gora) - 11%); transform: translateX(-50%); border-radius: 2px; background: currentColor; opacity: .5; } .chart-swiece-loader .korpus { position: absolute; left: 0; right: 0; top: var(--gora); height: var(--wys); border-radius: 3px; background: currentColor; } .chart-swiece-loader .swieca.up { color: var(--green); } .chart-swiece-loader .swieca.down { color: var(--red); } .chart-swiece-loader .swieca:last-child { animation: swieca-wejscie .5s cubic-bezier(.2, .9, .3, 1) both, swieca-puls 1.4s ease-in-out infinite .7s; } @keyframes swieca-wejscie { from { opacity: 0; transform: translateY(10px) scaleY(.4); } to { opacity: 1; transform: none; } } @keyframes swieca-puls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .chart-swiece-loader .swieca { animation: none !important; } } .landing-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 12px; margin: 0; padding: 0; list-style: none; } .podium-miejsce { display: grid; align-content: end; justify-items: center; gap: 0; cursor: pointer; } .podium-miejsce:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 16px; } .podium-miejsce.zloto { order: 2; } .podium-miejsce.srebro { order: 1; } .podium-miejsce.braz { order: 3; } .podium-karta { display: grid; justify-items: center; gap: 5px; width: 100%; padding: 14px 8px 12px; border: 1px solid var(--line); border-radius: 16px 16px 0 0; border-bottom: 0; background: var(--card); transition: transform .2s ease, border-color .2s ease; } .podium-miejsce:hover .podium-karta { transform: translateY(-3px); border-color: color-mix(in srgb, var(--green) 42%, var(--line)); } .podium-medal { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 900; line-height: 1; } .zloto .podium-medal { background: linear-gradient(160deg, #f7d774, #c9992f); color: #4a3200; font-size: 17px; } .srebro .podium-medal { background: linear-gradient(160deg, #e7ecef, #a8b4bd); color: #3a464f; } .braz .podium-medal { background: linear-gradient(160deg, #e0ab7d, #a9682f); color: #4a2a0d; } .podium-miejsce strong { font-size: 15px; letter-spacing: -.01em; } .podium-miejsce small { color: var(--muted); font-size: 11.5px; } .podium-miejsce b { font-size: 13px; font-variant-numeric: tabular-nums; } .podium-slupek { display: grid; place-items: start center; width: 100%; padding-top: 8px; border-radius: 0 0 6px 6px; transform-origin: bottom center; } .podium-slupek i { font-style: normal; font-size: 15px; font-weight: 900; opacity: .55; } .zloto .podium-slupek { height: 88px; background: linear-gradient(180deg, #f2cf72, #d3a53c); color: #4a3200; } .srebro .podium-slupek { height: 60px; background: linear-gradient(180deg, #dfe6ea, #b3bfc7); color: #3a464f; } .braz .podium-slupek { height: 40px; background: linear-gradient(180deg, #dda87c, #b57337); color: #4a2a0d; } :root[data-motion="on"] .podium-slupek { animation: podium-slupek-rosnie .55s cubic-bezier(.2, .85, .3, 1) both; } :root[data-motion="on"] .braz .podium-slupek { animation-delay: .05s; } :root[data-motion="on"] .srebro .podium-slupek { animation-delay: .2s; } :root[data-motion="on"] .zloto .podium-slupek { animation-delay: .35s; } :root[data-motion="on"] .podium-karta { animation: podium-karta-wjezdza .45s cubic-bezier(.2, .85, .3, 1) both; } :root[data-motion="on"] .braz .podium-karta { animation-delay: .2s; } :root[data-motion="on"] .srebro .podium-karta { animation-delay: .35s; } :root[data-motion="on"] .zloto .podium-karta { animation-delay: .5s; } @keyframes podium-slupek-rosnie { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes podium-karta-wjezdza { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } } .landing-hot-pusto { margin: 0; padding: 18px; color: var(--muted); font-size: 13px; text-align: center; } @media (max-width: 560px) { .landing-podium { gap: 7px; } .podium-karta { padding: 11px 5px 10px; } .podium-miejsce strong { font-size: 13.5px; } .podium-miejsce b { font-size: 12px; } .zloto .podium-slupek { height: 64px; } .srebro .podium-slupek { height: 44px; } .braz .podium-slupek { height: 30px; } } @media (prefers-reduced-motion: reduce) { .podium-slupek, .podium-karta { animation: none !important; } } .landing-terminal-reszta { opacity: .72; font-style: italic; } @media (max-width: 680px) { .landing-terminal-grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .landing-terminal-grid::-webkit-scrollbar { display: none; } .landing-terminal-grid > .landing-terminal-card { flex: 0 0 86%; scroll-snap-align: center; min-width: 0; } .landing-terminal-preview { min-width: 0; max-width: 100%; } .landing-terminal-grid { min-width: 0; } } .evra-ikona { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .evra-ikona.pelna { fill: currentColor; stroke: none; } .evra-ikona.duza { width: 1.5em; height: 1.5em; vertical-align: -0.28em; } .evra-ikona.mala { width: 1em; height: 1em; stroke-width: 1.9; } h1 > .evra-ikona, h2 > .evra-ikona, h3 > .evra-ikona { margin-right: .38em; vertical-align: -0.12em; color: var(--green); } .app-os-badge .evra-ikona { width: 14px; height: 14px; margin-right: 5px; vertical-align: -0.2em; } .landing-feature-icon .evra-ikona { color: var(--green); }