/* AUREX dashboard. System fonts, no images, no libraries: a few KB. */ :root { --bg: #f3f5f9; --surface: #ffffff; --surface-2: #f8f9fc; --line: #e3e7ee; --line-2: #eef1f6; --text: #0f1729; --muted: #5d6b82; --faint: #8a96a8; --accent: #4338ca; --accent-2: #eef0ff; --accent-text: #ffffff; --good: #0e8a5f; --good-bg: #e4f6ee; --bad: #d1293d; --bad-bg: #fdeaec; --warn: #a85b00; --warn-bg: #fff2dc; --info-bg: #eef0ff; --shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06); --radius: 12px; color-scheme: light; } /* "auto" follows the device; data-theme="light" or "dark" is the owner's explicit choice (Settings). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0a0e16; --surface: #121826; --surface-2: #0f1522; --line: #232c3e; --line-2: #1a2232; --text: #e8ebf3; --muted: #94a0b6; --faint: #6c7890; --accent: #8a8cff; --accent-2: #1d2140; --accent-text: #0a0e16; --good: #3ddc97; --good-bg: #11301f; --bad: #ff6b7a; --bad-bg: #3a1620; --warn: #f5b84b; --warn-bg: #36280d; --info-bg: #1d2140; --shadow: 0 1px 2px rgba(0,0,0,.4); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0a0e16; --surface: #121826; --surface-2: #0f1522; --line: #232c3e; --line-2: #1a2232; --text: #e8ebf3; --muted: #94a0b6; --faint: #6c7890; --accent: #8a8cff; --accent-2: #1d2140; --accent-text: #0a0e16; --good: #3ddc97; --good-bg: #11301f; --bad: #ff6b7a; --bad-bg: #3a1620; --warn: #f5b84b; --warn-bg: #36280d; --info-bg: #1d2140; --shadow: 0 1px 2px rgba(0,0,0,.4); } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 14.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; line-height: 1.25; } button, input, select { font: inherit; color: inherit; } svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* ---------- shell ---------- */ .app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; } .side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; background: var(--surface); border-right: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-weight: 750; letter-spacing: .14em; font-size: 17px; } .logo { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; font-size: 15px; letter-spacing: 0; } .navbtn { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; text-align: left; font-weight: 550; } .navbtn:hover { background: var(--surface-2); color: var(--text); } .navbtn.on { background: var(--accent-2); color: var(--accent); } .grow { flex: 1; } .userbox { display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--line); margin: 6px -12px -18px; padding: 14px 22px; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-2); color: var(--accent); display: grid; place-items: center; font-weight: 700; text-transform: uppercase; } .userbox .name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; } .iconbtn { border: 0; background: none; color: var(--muted); padding: 7px; border-radius: 8px; cursor: pointer; display: inline-grid; place-items: center; } .iconbtn:hover { background: var(--surface-2); color: var(--text); } .main { min-width: 0; } .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); flex-wrap: wrap; } .title { font-size: 19px; font-weight: 700; margin-right: 6px; } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .page { max-width: 1180px; padding: 22px 24px 90px; } .btn-estop { display: inline-flex; align-items: center; gap: 7px; background: var(--bad); color: #fff; border: 0; border-radius: 9px; padding: 8px 14px; font-weight: 700; cursor: pointer; } .btn-estop:hover { filter: brightness(1.08); } /* ---------- components ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); min-width: 0; } .card > h3, .card-head h3 { font-size: 14.5px; font-weight: 650; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .section { margin: 26px 0 10px; font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .grid { display: grid; gap: 14px; } .g4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .g2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .stack { display: grid; gap: 14px; } .kpi .label { color: var(--muted); font-size: 12.5px; font-weight: 550; } .kpi .value { font-size: 26px; font-weight: 720; margin-top: 4px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .kpi .sub { color: var(--faint); font-size: 12.5px; margin-top: 2px; } .kpi svg.spark { width: 100%; height: 34px; margin-top: 8px; } .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-2); white-space: nowrap; } .pill.good { background: var(--good-bg); color: var(--good); border-color: transparent; } .pill.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; } .pill.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; } .pill.info { background: var(--info-bg); color: var(--accent); border-color: transparent; } .up { color: var(--good); } .down { color: var(--bad); } .muted { color: var(--muted); } .faint { color: var(--faint); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; } .dot.good { background: var(--good); } .dot.bad { background: var(--bad); } .dot.warn { background: var(--warn); } .alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--info-bg); color: var(--text); border: 1px solid var(--line); } .alert.bad { background: var(--bad-bg); border-color: transparent; } .alert.warn { background: var(--warn-bg); border-color: transparent; } .alert.good { background: var(--good-bg); border-color: transparent; } .alert svg.i { margin-top: 2px; } .alert.bad svg.i { color: var(--bad); } .alert.warn svg.i { color: var(--warn); } .alert.good svg.i { color: var(--good); } .alert .grow { min-width: 0; } .alert b { font-weight: 650; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--accent); color: var(--accent-text); border: 0; border-radius: 9px; padding: 8px 15px; font-weight: 650; cursor: pointer; text-decoration: none; } .btn:hover { filter: brightness(1.07); } .btn.ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); } .btn.danger { background: var(--bad); color: #fff; } .btn.sm { padding: 5px 11px; font-size: 13px; } .btn:disabled { opacity: .5; cursor: not-allowed; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row.end { justify-content: flex-end; } .card .row:not(.card-head), dialog .row { margin-top: 14px; } .card .alert { margin-top: 12px; } label.lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 12px 0 5px; } input[type=text], input[type=password], input[type=number], input:not([type]), select { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; } input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; } .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-2); } .switch-row:last-child { border-bottom: 0; } .switch-row .t { font-weight: 600; } .switch-row .d { color: var(--muted); font-size: 12.5px; } .toggle { position: relative; width: 40px; height: 23px; flex: none; } .toggle input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .toggle span { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .15s; } .toggle span::after { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .toggle input:checked + span { background: var(--accent); } .toggle input:checked + span::after { transform: translateX(17px); } .toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; } .seg button { border: 0; background: none; padding: 6px 14px; border-radius: 8px; color: var(--muted); cursor: pointer; font-weight: 600; } .seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; word-break: break-all; } .steps { margin: 0; padding-left: 18px; color: var(--muted); } .steps li { margin: 6px 0; } .steps b { color: var(--text); } /* tables */ .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th { position: sticky; top: 0; text-align: left; padding: 10px 14px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); white-space: nowrap; } td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; } tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--surface-2); } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .empty { padding: 34px 16px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); } .empty b { display: block; color: var(--text); margin-bottom: 2px; } /* health list */ .health { display: grid; gap: 0; } .health > div { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); } .health > div:last-child { border-bottom: 0; } .health .k { flex: 1; } .health .v { color: var(--muted); font-size: 13px; text-align: right; } /* chart */ svg.chart { width: 100%; height: auto; display: block; } .chart-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .chart-area { fill: var(--accent); opacity: .1; } .chart-zero { stroke: var(--line); stroke-dasharray: 4 4; stroke-width: 1; vector-effect: non-scaling-stroke; } .chart-txt { fill: var(--faint); font-size: 11px; } .spark-line { fill: none; stroke: var(--accent); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; } /* feedback */ #toasts { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); } .toast { background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: pop .18s ease-out; font-weight: 550; } .toast.good { background: var(--good); color: #fff; } .toast.bad { background: var(--bad); color: #fff; } @keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); padding: 20px; width: min(400px, 92vw); box-shadow: 0 20px 50px rgba(0,0,0,.3); } dialog::backdrop { background: rgba(8,12,20,.55); } dialog h3 { font-size: 16px; margin-bottom: 6px; } .skel { height: 90px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: sh 1.2s infinite; border: 1px solid var(--line); } @keyframes sh { to { background-position: -200% 0; } } /* auth screens */ .authwrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; } .authcard { width: min(400px, 100%); } .authcard .brand { justify-content: center; padding-bottom: 6px; font-size: 22px; } .authcard .tag { text-align: center; color: var(--muted); margin-bottom: 18px; } /* ---------- phones ---------- */ .bottom { display: none; } @media (max-width: 860px) { .app { grid-template-columns: 1fr; } .side { display: none; } .topbar { padding: 10px 14px; } .title { font-size: 17px; } .page { padding: 16px 14px 96px; } .bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); } .bottom button { border: 0; background: none; color: var(--faint); display: grid; justify-items: center; gap: 2px; padding: 6px 0; font-size: 10.5px; font-weight: 600; cursor: pointer; } .bottom button.on { color: var(--accent); } .g2 { grid-template-columns: 1fr; } .btn-estop span { display: none; } #toasts { bottom: 78px; } .chips { order: 5; flex-basis: 100%; } } @media (max-width: 560px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .card { padding: 13px; } .kpi .value { font-size: 20px; } .form-grid { grid-template-columns: 1fr; } } dialog.wide { width: min(880px, 96vw); max-height: 92vh; overflow: auto; } /* project progress */ svg.pbar { width: 100%; height: 8px; display: block; margin-top: 6px; } svg.pbar.thin { height: 5px; } .pbar-bg { fill: var(--line); } .pbar-fg { fill: var(--accent); } .row.between { justify-content: space-between; width: 100%; } button.progress { width: calc(100% - 8px); margin: 8px 4px; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; cursor: pointer; font-size: 13px; color: var(--muted); } button.progress:hover { border-color: var(--accent); } button.progress b { color: var(--text); } button.card.progress-card { width: 100%; text-align: left; cursor: pointer; display: block; color: var(--text); } button.card.progress-card:hover { border-color: var(--accent); } /* agent chat */ .chat { display: grid; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 4px 2px 10px; min-height: 120px; } .bubble { max-width: 88%; padding: 9px 13px; border-radius: 14px; white-space: pre-wrap; word-break: break-word; } .bubble.user { justify-self: end; background: var(--accent); color: var(--accent-text); border-bottom-right-radius: 4px; } .bubble.assistant { justify-self: start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; } .steps-line { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; } .pbar.warn .pbar-fg { fill: var(--warn); } .pbar.bad .pbar-fg { fill: var(--bad); } /* Collapsible tiles (Settings) */ .fold-head { cursor: pointer; user-select: none; } .fold-head .chev { display: inline-block; width: 14px; font-size: 18px; line-height: 1; color: var(--muted, #888); transition: transform .15s; transform: rotate(90deg); margin-right: -2px; } .card.folded .fold-head .chev { transform: rotate(0deg); } .card.folded .fold-head { margin-bottom: 0; } .card.folded > .card-body { display: none; } /* AI provider tiles */ .sect { padding: 12px 0; border-top: 1px solid var(--line); } .sect:first-of-type { border-top: 0; padding-top: 0; } .sect-t { font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; } .row.between { justify-content: space-between; flex-wrap: wrap; } .btn.quiet-danger { background: transparent; color: var(--bad); border-color: var(--line); } .card-head .code { font-size: 11.5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Portfolio page */ .pbars { display: grid; gap: 8px; } .pbar-row { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; } .pbar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; } .pbar > i { display: block; height: 100%; background: var(--accent, #6c63ff); border-radius: 99px; } textarea { width: 100%; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical; } /* Folded tile headers: chevron and title on the left, status pills on the right */ .fold-head { justify-content: flex-start; } .fold-head > :last-child:not(.chev):not(h3) { margin-left: auto; } .fold-head h3 { margin-right: auto; } th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { color: var(--accent); } tr.total-row td { border-bottom: 2px solid var(--line); background: var(--accent-2); } .pre-wrap { white-space: pre-wrap; font-family: inherit; margin: 8px 0; } .clickable { cursor: pointer; } .clickable:hover { background: var(--surface-2); } .livesw { display: flex; align-items: center; gap: 8px; } .livelbl { font-weight: 700; font-size: 12px; letter-spacing: .05em; color: var(--muted); } .livelbl.on { color: var(--bad); } .livesw .toggle input:checked + span { background: var(--bad); } .pwwrap { position: relative; display: block; } .pwwrap input { width: 100%; padding-right: 64px; box-sizing: border-box; } .pwtoggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 12px; padding: 6px 8px; border-radius: 6px; cursor: pointer; } .pwtoggle:hover { background: var(--accent-2); } .logout { display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 560px) { .logout span { display: none; } } [hidden] { display: none !important; } .navlist { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; padding-right: 2px; } .navscroll { flex: none; border: 0; background: var(--surface-2); color: var(--muted); border-radius: 8px; padding: 3px 0; font-size: 11px; line-height: 1; cursor: pointer; } .navscroll:hover { color: var(--text); background: var(--accent-2); } #kill-switch + span { background: var(--line); } .livesw .toggle input#kill-switch:checked + span { background: var(--bad); } /* ===================================================================================================================== Colourful modern look (v2): violet, cyan and pink accents, gradient buttons and logo, rounder cards, tinted switches. Only colours, shapes and spacing change; nothing about how the pages work. Light and dark both covered. ===================================================================================================================== */ :root { --bg: #f5f3ff; --surface: #ffffff; --surface-2: #f7f5ff; --line: #e7e2fa; --line-2: #f1eefc; --text: #1b1638; --muted: #6a6592; --faint: #9a95b9; --accent: #6d4aff; --accent-2: #efeaff; --accent-text: #ffffff; --cyan: #00b8d9; --pink: #ff4d8d; --amber: #ffab00; --lime: #2ecf88; --good: #00a76f; --good-bg: #dff8ee; --bad: #ef3a52; --bad-bg: #ffe8ec; --warn: #c26a00; --warn-bg: #fff1d6; --info-bg: #efeaff; --grad: linear-gradient(135deg, #6d4aff 0%, #9b5cff 55%, #ff4d8d 130%); --grad-cool: linear-gradient(135deg, #6d4aff 0%, #00b8d9 100%); --grad-warm: linear-gradient(135deg, #ff4d8d 0%, #ffab00 100%); --grad-good: linear-gradient(135deg, #00a76f 0%, #00b8d9 100%); --grad-bad: linear-gradient(135deg, #ef3a52 0%, #ff4d8d 100%); --shadow: 0 1px 2px rgba(60, 40, 140, .06), 0 10px 28px rgba(60, 40, 140, .07); --glow: 0 8px 22px color-mix(in srgb, var(--accent) 32%, transparent); --radius: 16px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0a1a; --surface: #14122b; --surface-2: #1a1738; --line: #2b2752; --line-2: #1f1c42; --text: #efedff; --muted: #a5a2cb; --faint: #7a76a3; --accent: #8f78ff; --accent-2: #241f55; --accent-text: #ffffff; --cyan: #22d3ee; --pink: #ff6fa5; --amber: #ffbe4d; --lime: #34e0a1; --good: #34e0a1; --good-bg: #0e3326; --bad: #ff6b81; --bad-bg: #3d1427; --warn: #ffbe4d; --warn-bg: #3a2a0c; --info-bg: #241f55; --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 30px rgba(0, 0, 0, .35); } } :root[data-theme="dark"] { --bg: #0b0a1a; --surface: #14122b; --surface-2: #1a1738; --line: #2b2752; --line-2: #1f1c42; --text: #efedff; --muted: #a5a2cb; --faint: #7a76a3; --accent: #8f78ff; --accent-2: #241f55; --accent-text: #ffffff; --cyan: #22d3ee; --pink: #ff6fa5; --amber: #ffbe4d; --lime: #34e0a1; --good: #34e0a1; --good-bg: #0e3326; --bad: #ff6b81; --bad-bg: #3d1427; --warn: #ffbe4d; --warn-bg: #3a2a0c; --info-bg: #241f55; --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 30px rgba(0, 0, 0, .35); } body { background-color: var(--bg); background-image: radial-gradient(900px 500px at 8% -8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(800px 460px at 100% 0%, color-mix(in srgb, var(--pink) 11%, transparent), transparent 60%); background-attachment: fixed; letter-spacing: -.003em; } h1, h2, h3 { letter-spacing: -.012em; } ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); } * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent; } /* ---------- side menu ---------- */ .side { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); border-right: 1px solid var(--line); box-shadow: 4px 0 24px rgba(60, 40, 140, .04); } .brand { font-size: 17px; } .logo { width: 34px; height: 34px; border-radius: 11px; background: var(--grad); color: #fff; font-weight: 800; box-shadow: var(--glow); } .navbtn { padding: 7px 10px; border-radius: 12px; transition: background .15s, color .15s, transform .12s; } .navbtn svg.i { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--surface-2); transition: background .15s, color .15s; } .navbtn:hover { background: var(--surface-2); color: var(--text); transform: translateX(2px); } .navbtn.on { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); } .navlist .navbtn:nth-child(6n+1) svg.i { color: #6d4aff; background: color-mix(in srgb, #6d4aff 13%, transparent); } .navlist .navbtn:nth-child(6n+2) svg.i { color: #00a9c9; background: color-mix(in srgb, #00b8d9 14%, transparent); } .navlist .navbtn:nth-child(6n+3) svg.i { color: #ec4899; background: color-mix(in srgb, #ff4d8d 13%, transparent); } .navlist .navbtn:nth-child(6n+4) svg.i { color: #e08600; background: color-mix(in srgb, #ffab00 16%, transparent); } .navlist .navbtn:nth-child(6n+5) svg.i { color: #00a76f; background: color-mix(in srgb, #2ecf88 15%, transparent); } .navlist .navbtn:nth-child(6n) svg.i { color: #8b5cf6; background: color-mix(in srgb, #9b5cff 14%, transparent); } .navlist .navbtn.on svg.i { color: #fff; background: var(--grad); box-shadow: var(--glow); } .avatar { background: var(--grad); color: #fff; box-shadow: var(--glow); } .userbox { border-top-color: var(--line); } .navscroll { border-radius: 10px; } button.progress, button.card.progress-card { border-radius: 14px; } /* ---------- top bar ---------- */ .topbar { background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow: 0 6px 24px rgba(60, 40, 140, .05); } .title { font-size: 20px; font-weight: 780; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .iconbtn { border-radius: 12px; transition: background .15s, transform .12s; } .iconbtn:hover { background: var(--accent-2); color: var(--accent); transform: translateY(-1px); } /* the LIVE / PAPER and STOP switches become capsules that change colour with their state */ .livesw { padding: 5px 8px 5px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); transition: background .2s, border-color .2s, box-shadow .2s; } .livelbl { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; } .livesw:has(#live-switch:not(:checked)) { background: color-mix(in srgb, var(--good) 11%, var(--surface)); border-color: color-mix(in srgb, var(--good) 35%, transparent); } .livesw:has(#live-switch:not(:checked)) .livelbl { color: var(--good); } .livesw:has(#live-switch:checked) { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 14%, transparent); } .livesw:has(#kill-switch:checked) { background: var(--bad-bg); border-color: var(--bad); animation: stoppulse 1.6s ease-in-out infinite; } @keyframes stoppulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bad) 20%, transparent); } } .logout { border-radius: 999px; } /* ---------- cards and tiles ---------- */ .card { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .15s, box-shadow .2s, border-color .2s; } .card:hover { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); } .card-head h3::before { content: ""; display: inline-block; width: 4px; height: 15px; border-radius: 3px; background: var(--grad); margin-right: 9px; vertical-align: -2px; } .kpi { position: relative; overflow: hidden; padding-top: 19px; } .kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); } .g4 > .kpi:nth-child(4n+2)::before { background: var(--grad-cool); } .g4 > .kpi:nth-child(4n+3)::before { background: var(--grad-warm); } .g4 > .kpi:nth-child(4n)::before { background: var(--grad-good); } .kpi::after { content: ""; position: absolute; right: -28px; top: -28px; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%); pointer-events: none; } .kpi .value { font-size: 27px; font-weight: 780; } .kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow), var(--glow); } .section { display: flex; align-items: center; gap: 12px; color: var(--accent); font-weight: 750; letter-spacing: .09em; } .section::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, var(--line)), transparent); } .sect-t { color: var(--accent); } .empty { border-radius: var(--radius); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: linear-gradient(180deg, var(--surface), var(--surface-2)); } /* ---------- buttons, inputs, switches ---------- */ .btn { background: var(--grad); color: #fff; border-radius: 12px; padding: 9px 17px; box-shadow: var(--glow); transition: transform .12s, box-shadow .15s, filter .15s; } .btn:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: none; } .btn.ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-2); } .btn.danger { background: var(--grad-bad); box-shadow: 0 8px 22px color-mix(in srgb, var(--bad) 32%, transparent); } .btn.sm { padding: 5px 12px; border-radius: 10px; } .btn:disabled { box-shadow: none; filter: grayscale(.4); } input[type=text], input[type=password], input[type=number], input:not([type]), select { border-radius: 12px; background: var(--surface); transition: border-color .15s, box-shadow .15s; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } .toggle span { background: color-mix(in srgb, var(--faint) 40%, var(--line)); } .toggle input:checked + span { background: var(--grad); } .livesw .toggle input:checked + span, .livesw .toggle input#kill-switch:checked + span { background: var(--grad-bad); } .livesw .toggle input#live-switch:not(:checked) + span { background: color-mix(in srgb, var(--good) 45%, var(--line)); } .seg { border-radius: 12px; } .seg button.on { background: var(--grad); color: #fff; box-shadow: var(--glow); } /* ---------- badges, alerts ---------- */ .pill { padding: 3px 11px; border-radius: 999px; font-weight: 700; letter-spacing: .005em; } .pill.good { background: var(--good-bg); color: var(--good); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 22%, transparent); } .pill.bad { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 22%, transparent); } .pill.warn { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 24%, transparent); } .pill.info { background: var(--info-bg); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); } .alert { border-radius: 14px; border-left: 4px solid var(--accent); } .alert.bad { border-left-color: var(--bad); } .alert.warn { border-left-color: var(--warn); } .alert.good { border-left-color: var(--good); } .up { color: var(--good); font-weight: 650; } .down { color: var(--bad); font-weight: 650; } /* ---------- tables (ideas, trades, portfolio) ---------- */ .tablewrap { border-radius: var(--radius); } th { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface-2)), var(--surface-2)); color: color-mix(in srgb, var(--accent) 55%, var(--muted)); border-bottom-color: color-mix(in srgb, var(--accent) 18%, var(--line)); } tbody tr { transition: background .12s; } td b { font-weight: 700; } tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); } tbody tr:hover td { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } /* ---------- charts ---------- */ .chart-line { stroke: var(--accent); stroke-width: 2.6; filter: drop-shadow(0 5px 9px color-mix(in srgb, var(--accent) 38%, transparent)); } .chart-area { fill: var(--accent); opacity: .16; } .spark-line { stroke: var(--cyan); stroke-width: 2; } svg.pbar { height: 9px; } .pbar-bg { fill: color-mix(in srgb, var(--accent) 12%, var(--line)); } /* ---------- dialogs, toasts, chat ---------- */ dialog { border-radius: 22px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); box-shadow: 0 30px 70px rgba(30, 10, 90, .35); padding: 24px; } dialog::backdrop { background: rgba(14, 8, 40, .55); backdrop-filter: blur(5px); } dialog h3 { font-size: 17px; } .toast { border-radius: 14px; background: var(--grad); color: #fff; } .toast.good { background: var(--grad-good); } .toast.bad { background: var(--grad-bad); } .bubble.user { background: var(--grad); color: #fff; box-shadow: var(--glow); } .bubble.assistant { border-radius: 16px; border-bottom-left-radius: 5px; } .code { border-radius: 10px; } /* ---------- sign-in and phones ---------- */ .authwrap { background: radial-gradient(700px 420px at 15% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%), radial-gradient(640px 400px at 90% 90%, color-mix(in srgb, var(--pink) 18%, transparent), transparent 62%); } .authcard { border-radius: 24px; box-shadow: 0 24px 60px rgba(60, 40, 140, .2); } .authcard .brand { font-size: 24px; } .authcard .logo { width: 42px; height: 42px; font-size: 20px; } @media (max-width: 860px) { .bottom { background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(16px); border-top-color: var(--line); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 28px rgba(60, 40, 140, .1); } .bottom button.on svg.i { filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--accent) 45%, transparent)); } .title { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---------- round 2: one-line top bar, grouped menu, sortable headers ---------- */ .topbar { flex-wrap: nowrap; gap: 10px; } .topbar .title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 2px; } .topbar .chips, .topbar .livesw, .topbar .iconbtn, .topbar .logout { flex: none; } @media (max-width: 860px) { .chips { order: 0; flex-basis: auto; } .topbar { gap: 6px; padding: 10px 10px; } .livesw { padding: 4px 6px 4px 8px; gap: 5px; } .livelbl { font-size: 10px; letter-spacing: .04em; } .topbar .title { font-size: 16px; } } @media (max-width: 420px) { .topbar .chips { display: none; } } .navgroup { font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); padding: 14px 12px 4px; } .navgroup:first-child { padding-top: 2px; } .navlist .navbtn[data-tab="networth"] svg.i { color: #6d4aff; background: color-mix(in srgb, #6d4aff 14%, transparent); } .navlist .navbtn[data-tab="overview"] svg.i { color: #00a9c9; background: color-mix(in srgb, #00b8d9 15%, transparent); } .navlist .navbtn[data-tab="portfolio"] svg.i { color: #ec4899; background: color-mix(in srgb, #ff4d8d 14%, transparent); } .navlist .navbtn[data-tab="ideas"] svg.i { color: #e08600; background: color-mix(in srgb, #ffab00 17%, transparent); } .navlist .navbtn[data-tab="positions"] svg.i { color: #00a76f; background: color-mix(in srgb, #2ecf88 16%, transparent); } .navlist .navbtn[data-tab="orders"] svg.i { color: #0ea5e9; background: color-mix(in srgb, #0ea5e9 14%, transparent); } .navlist .navbtn[data-tab="research"] svg.i { color: #8b5cf6; background: color-mix(in srgb, #9b5cff 15%, transparent); } .navlist .navbtn[data-tab="agent"] svg.i { color: #d946ef; background: color-mix(in srgb, #d946ef 14%, transparent); } .navlist .navbtn[data-tab="risk"] svg.i { color: #ef3a52; background: color-mix(in srgb, #ef3a52 13%, transparent); } .navlist .navbtn[data-tab="system"] svg.i { color: #14b8a6; background: color-mix(in srgb, #14b8a6 15%, transparent); } .navlist .navbtn[data-tab="settings"] svg.i { color: #f59e0b; background: color-mix(in srgb, #f59e0b 15%, transparent); } .navlist .navbtn[data-tab="audit"] svg.i { color: #64748b; background: color-mix(in srgb, #64748b 15%, transparent); } .sorthead { border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 5px; } .sorthead:hover { color: var(--accent); } .sorthead.on { color: var(--accent); } .sortarrow { font-size: 9.5px; opacity: .55; } .sorthead.on .sortarrow { opacity: 1; } th.num { text-align: right; } th.num .sorthead { justify-content: flex-end; } /* ---------- holdings share donut, username ---------- */ .donutwrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .donut { width: 100%; max-width: 230px; flex: none; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--accent) 18%, transparent)); } .donut-big { font-size: 19px; font-weight: 800; fill: var(--text); } .donut-sub { font-size: 10px; fill: var(--muted); letter-spacing: .08em; text-transform: uppercase; } .legend { display: grid; gap: 9px; flex: 1; min-width: 190px; } .legend-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; font-size: 13.5px; } .legend-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .legend-pct { font-weight: 750; font-variant-numeric: tabular-nums; } .legend-val { font-size: 12.5px; font-variant-numeric: tabular-nums; } .swatch { width: 12px; height: 12px; } .userbox .name { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; } .kpi.clickable { cursor: pointer; transition: transform .15s, box-shadow .15s; } .kpi.clickable:hover, .kpi.clickable:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 24%, transparent); outline: none; } /* ---------- collapsible side menu ---------- */ .brand .collapsebtn { margin-left: auto; flex: none; } .app { transition: grid-template-columns .2s ease; } body.side-collapsed .app { grid-template-columns: 76px minmax(0, 1fr); } body.side-collapsed .side { padding-left: 10px; padding-right: 10px; align-items: center; overflow: hidden; } body.side-collapsed .brand { flex-direction: column; gap: 10px; padding: 4px 0 12px; } body.side-collapsed .brand .collapsebtn { margin-left: 0; } body.side-collapsed .brandname, body.side-collapsed .navbtn span, body.side-collapsed .userbox .name, body.side-collapsed #progress-box { display: none; } body.side-collapsed .navgroup { font-size: 0; padding: 8px 0 2px; width: 28px; border-top: 1px solid var(--line); margin-top: 6px; } body.side-collapsed .navbtn { justify-content: center; padding: 6px; width: auto; } body.side-collapsed .userbox { flex-direction: column; gap: 8px; } @media (max-width: 860px) { .collapsebtn { display: none; } } /* ---------- log-in picture ---------- */ .authwrap:has(.authhero) { display: flex; align-items: center; justify-content: center; gap: 48px; } .authhero { width: min(560px, 52vw); } @media (max-width: 960px) { .authhero { display: none; } } .hero-svg { width: 100%; height: auto; filter: drop-shadow(0 18px 34px color-mix(in srgb, var(--accent) 22%, transparent)); } .hero-node { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; } .hero-t { font-size: 13.5px; font-weight: 700; fill: var(--text); } .hero-s { font-size: 10.5px; fill: var(--muted); } .hero-up { font-size: 13px; font-weight: 800; fill: #12a566; } .hero-flow { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 5; opacity: .55; animation: hero-dash 1s linear infinite; } .hero-dot { animation: hero-down 2.4s ease-in-out infinite; } .hero-dot.d1 { animation-delay: .6s; } .hero-dot.d2 { animation-delay: 1.2s; } .hero-pulse { transform-box: fill-box; transform-origin: center; animation: hero-pulse 2.4s ease-in-out infinite; } .hero-pulse.p1 { animation-delay: .6s; } .hero-pulse.p2 { animation-delay: 1.2s; } .hero-pulse.p3 { animation-delay: 1.8s; } .hero-wick.up, .hero-candle.up { stroke: #12a566; fill: #2ecf88; } .hero-wick.dn, .hero-candle.dn { stroke: #e5484d; fill: #ff6b81; } .hero-wick { stroke-width: 1.5; } .hero-candle { transform-box: fill-box; transform-origin: bottom; animation: hero-grow .7s ease-out both; } .hero-candle.c1 { animation-delay: .08s; } .hero-candle.c2 { animation-delay: .16s; } .hero-candle.c3 { animation-delay: .24s; } .hero-candle.c4 { animation-delay: .32s; } .hero-candle.c5 { animation-delay: .4s; } .hero-candle.c6 { animation-delay: .48s; } .hero-candle.c7 { animation-delay: .56s; } .hero-candle.c8 { animation-delay: .64s; } .hero-candle.c9 { animation-delay: .72s; } .hero-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: hero-draw 2.6s ease-out .3s forwards; } .hero-chip { font-size: 12px; font-weight: 800; letter-spacing: .06em; animation: hero-blink 4.5s ease-in-out infinite; } .hero-chip.k1 { animation-delay: 1.5s; } .hero-chip.k2 { animation-delay: 3s; } .hero-bar { fill: var(--surface-2); } .hero-bar-fill { fill: var(--accent); animation: hero-fill 3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: left; } @keyframes hero-dash { to { stroke-dashoffset: -9; } } @keyframes hero-down { 0% { transform: translateY(-12px); opacity: 0; } 25%, 75% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } } @keyframes hero-pulse { 0%, 100% { transform: scale(1); opacity: .18; } 50% { transform: scale(1.7); opacity: .06; } } @keyframes hero-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } @keyframes hero-draw { to { stroke-dashoffset: 0; } } @keyframes hero-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @keyframes hero-fill { from { transform: scaleX(.55); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .hero-flow, .hero-dot, .hero-pulse, .hero-candle, .hero-chip, .hero-bar-fill, .app { animation: none; transition: none; } .hero-line { animation: none; stroke-dashoffset: 0; } } .nowrap { white-space: nowrap; } /* ---------- candle chart and its size dropdown ---------- */ .candles { width: 100%; height: auto; } .cn-axis { font-size: 9.5px; fill: var(--muted); } .ivsel { width: auto; min-width: 130px; padding: 6px 10px; } .candles { cursor: crosshair; touch-action: none; } .cn-read { font-size: 12.5px; font-weight: 600; min-height: 1.5em; margin-bottom: 4px; font-variant-numeric: tabular-nums; } .cn-tag { font-size: 10px; font-weight: 700; fill: #fff; } dialog.stock { width: min(820px, 96vw); max-height: 92vh; overflow: auto; } .btn.sell { background: linear-gradient(135deg, #ff4d8d, #e5484d); color: #fff; border-color: transparent; } .btn.sell:disabled { opacity: .5; } /* ---------- toggle switches you can recognise: a visible track, OFF or ON written inside, green when on ---------- */ .toggle { width: 50px; height: 26px; } .toggle span { background: color-mix(in srgb, var(--muted) 38%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 65%, transparent); } .toggle span::after { width: 20px; height: 20px; left: 3px; top: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } .toggle span::before { content: "OFF"; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-size: 8.5px; font-weight: 800; letter-spacing: .04em; color: color-mix(in srgb, var(--text) 80%, transparent); } .toggle input:checked + span { background: linear-gradient(135deg, #12a566, #2ecf88); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); } .toggle input:checked + span::before { content: "ON"; right: auto; left: 9px; color: #fff; } .toggle input:checked + span::after { transform: translateX(24px); } .livesw .toggle span::before { display: none; } .livesw .toggle input:checked + span { background: var(--grad-bad); } .livesw .toggle input#live-switch:not(:checked) + span { background: color-mix(in srgb, var(--good) 45%, var(--line)); } /* ---------- live cells and the idea cards ---------- */ .live { font-variant-numeric: tabular-nums; } .live.pill { display: inline-block; } .ideas { display: grid; gap: 14px; margin-top: 8px; } .idea { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--surface-2); display: grid; gap: 12px; } .idea-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .idea-id { display: flex; flex-direction: column; min-width: 130px; } .idea-sym { font-size: 17px; } .idea-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; flex: 1; } .idea-cmp { font-weight: 650; } .idea-decide { margin-left: auto; } .idea-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; } .stat-l { font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .stat-v { font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; } .idea-why { color: var(--muted); font-size: 13.5px; display: grid; gap: 4px; line-height: 1.45; max-width: 100ch; } .skill { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); } /* movable cards */ .drag-handle { border: 0; background: transparent; color: var(--muted, inherit); cursor: grab; padding: 2px 6px; margin-right: 4px; border-radius: 6px; font-size: 16px; line-height: 1; opacity: 0.45; touch-action: none; user-select: none; } .drag-handle:hover, .drag-handle:focus-visible { opacity: 1; background: var(--surface-2); } .drag-handle:active { cursor: grabbing; } .card.dragging { opacity: 0.45; outline: 2px dashed var(--accent, #7c5cff); outline-offset: 2px; } .dragging-active > .card:not(.dragging) { transition: transform 0.12s; } /* a switch inside a table cell: the label is inline there, which ignores its size and left the knob floating loose */ .toggle { display: inline-block; vertical-align: middle; } th.ctr, td.ctr { text-align: center; } body.card-moving, body.card-moving * { cursor: grabbing !important; user-select: none; } .suggest-wrap { position: relative; min-width: 180px; } .suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-top: 4px; overflow: hidden; } .suggest:empty { display: none; } .suggest-item { text-align: left; padding: 8px 12px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; } .suggest-item:hover { background: rgba(124, 92, 255, .18); } /* Line charts: a clip reveals the line and area from the left (SVG animate in lineChart); markers pop in with it; hovering a marker shows its value. */ .chart-wrap { position: relative; } .chart-pt { fill: var(--surface); stroke: var(--accent); stroke-width: 2.4; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; transition: r .12s; } .chart-pt-in { opacity: 0; animation: chart-pop .35s ease-out forwards; } .chart-pt.hot { fill: var(--accent); stroke-width: 3.5; } .chart-hit { fill: transparent; cursor: pointer; } .chart-tip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 10px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); font-size: 13px; white-space: nowrap; } .chart-tip[hidden] { display: none; } .chart-tip span { color: var(--muted); font-size: 11px; } @keyframes chart-pop { 0% { opacity: 0; transform: scale(.2); } 70% { opacity: 1; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .chart-pt-in { animation: none; opacity: 1; } } /* Page loading animation */ .loading-view { display: flex; flex-direction: column; gap: 14px; } .loader { position: relative; width: 64px; height: 64px; margin: 18px auto 0; } .loader-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 18%, transparent); border-top-color: var(--accent); border-right-color: var(--cyan, var(--accent)); animation: loader-spin .9s linear infinite; } .loader-logo { position: absolute; inset: 10px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 22px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--cyan, var(--accent))); animation: loader-pulse 1.4s ease-in-out infinite; } .loader-text { text-align: center; color: var(--muted, inherit); font-size: 14px; letter-spacing: .04em; } .dots i { font-style: normal; animation: loader-dot 1.2s infinite; opacity: .2; } .dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; } .page-in { animation: page-in .35s ease-out; } @keyframes loader-spin { to { transform: rotate(360deg); } } @keyframes loader-pulse { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.04); } } @keyframes loader-dot { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } } @keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .loader-ring, .loader-logo, .dots i, .page-in { animation: none; } .dots i { opacity: 1; } } /* Segment selector and the F&O panel */ .segment-bar { margin: 6px 0 14px; flex-wrap: wrap; gap: 8px; } tr.atm td { background: color-mix(in srgb, var(--accent) 14%, transparent); } .kpi-inline { font-weight: 700; font-size: 18px; padding-top: 4px; } /* Every dropdown is a type-to-search box (see the block in app.js; the real