/* ================================================================ reke-ui Design Tokens Usage: → Dark (default) → Dark (explicit) → Light → Follows OS preference Override tokens in your project: :root { --reke-color-primary: #6366F1; } ================================================================ */ /* ===== Shared tokens (theme-independent) ===== */ :root { /* Accent colors */ --reke-color-primary: #22C55E; --reke-color-secondary: #3B82F6; --reke-color-danger: #EF4444; --reke-color-warning: #F59E0B; /* Categorical chart palette (override to rebrand charts) */ --reke-chart-1: #22C55E; --reke-chart-2: #3B82F6; --reke-chart-3: #F59E0B; --reke-chart-4: #EF4444; --reke-chart-5: #A855F7; --reke-chart-6: #14B8A6; /* Typography */ --reke-font-mono: 'JetBrains Mono', ui-monospace, monospace; --reke-font-size-2xs: 11px; --reke-font-size-xs: 12px; --reke-font-size-sm: 13px; --reke-font-size-md: 14px; --reke-font-size-lg: 18px; --reke-font-size-xl: 36px; --reke-font-size-2xl: 48px; --reke-font-weight-normal: 400; --reke-font-weight-medium: 500; --reke-font-weight-semibold: 600; /* Spacing */ --reke-space-2xs: 6px; --reke-space-xs: 8px; --reke-space-sm: 12px; --reke-space-md: 16px; --reke-space-lg: 20px; --reke-space-xl: 24px; --reke-space-2xl: 28px; --reke-space-3xl: 48px; --reke-space-4xl: 64px; --reke-space-5xl: 80px; /* Radii */ --reke-radius: 4px; /* Form control surface (override to theme inputs/selects) */ --reke-color-input-bg: var(--reke-color-surface); --reke-shadow-input: none; /* Scrollbar */ --reke-scrollbar-thumb: var(--reke-color-text-muted); --reke-scrollbar-thumb-hover: var(--reke-color-text-ghost); --reke-scrollbar-track: color-mix(in srgb, var(--reke-color-surface) 50%, transparent); --reke-scrollbar-width: 8px; /* Transitions — consistent speeds across all components */ --reke-transition-fast: 0.12s ease; --reke-transition-normal: 0.2s ease; --reke-transition-slow: 0.35s ease; /* Animation durations */ --reke-animation-flash: 250ms; --reke-animation-scale-in: 200ms; /* Chip prefix size */ --reke-chip-prefix-size: 16px; /* Progress bar */ --reke-progress-height: 4px; --reke-progress-radius: 9999px; --reke-progress-color: var(--reke-color-primary); /* Glow shadows — themed per accent color */ --reke-shadow-glow-primary: 0 0 20px color-mix(in srgb, var(--reke-color-primary, #22C55E) 35%, transparent); --reke-shadow-glow-secondary: 0 0 20px color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 35%, transparent); --reke-shadow-glow-danger: 0 0 20px color-mix(in srgb, var(--reke-color-danger, #EF4444) 35%, transparent); /* Lift shadows — for hover card elevations */ --reke-shadow-lift: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2); --reke-shadow-lift-sm: 0 4px 16px rgba(0, 0, 0, 0.35); } /* ===== Dark theme (default) ===== */ :root, [data-reke-theme="dark"] { --reke-color-on-primary: #0A0A0B; --reke-color-bg: #0A0A0B; --reke-color-bg-section: #0F0F10; --reke-color-surface: #1A1A1A; --reke-color-surface-elevated: #151515; --reke-color-surface-hover: #202020; --reke-color-border: #252525; --reke-color-border-subtle: #1F1F1F; --reke-color-border-hover: #3A3A3A; --reke-color-text: #E5E5E5; --reke-color-text-muted: #525252; --reke-color-text-ghost: #737373; --reke-color-text-disabled: #3B3B3B; --reke-color-text-label: #8A8A8A; --reke-progress-track-color: #2A2A2A; --reke-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --reke-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); } /* ===== Light theme ===== */ [data-reke-theme="light"] { --reke-color-on-primary: #FFFFFF; --reke-color-bg: #FFFFFF; --reke-color-bg-section: #F8F8F8; --reke-color-surface: #FFFFFF; --reke-color-surface-elevated: #F0F0F0; --reke-color-surface-hover: #F5F5F5; --reke-color-border: #E0E0E0; --reke-color-border-subtle: #EBEBEB; --reke-color-border-hover: #CCCCCC; --reke-color-text: #1A1A1A; --reke-color-text-muted: #8A8A8A; --reke-color-text-ghost: #9A9A9A; --reke-color-text-disabled: #C0C0C0; --reke-color-text-label: #666666; --reke-progress-track-color: #E0E0E0; --reke-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --reke-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); } /* ===== Global scrollbar styling ===== */ /* Standard (Firefox, Chrome 121+) */ * { scrollbar-color: var(--reke-scrollbar-thumb) var(--reke-scrollbar-track); scrollbar-width: thin; } /* WebKit (Chrome, Safari, Edge) — more elaborate design */ ::-webkit-scrollbar { width: var(--reke-scrollbar-width); height: var(--reke-scrollbar-width); } ::-webkit-scrollbar-track { background: var(--reke-scrollbar-track); border-radius: 999px; } ::-webkit-scrollbar-thumb { background: var(--reke-scrollbar-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; transition: background 0.2s ease; } ::-webkit-scrollbar-thumb:hover { background: var(--reke-scrollbar-thumb-hover); border-color: transparent; background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ===== Auto-detect OS preference (opt-in) ===== */ @media (prefers-color-scheme: light) { [data-reke-theme="auto"] { --reke-color-on-primary: #FFFFFF; --reke-color-bg: #FFFFFF; --reke-color-bg-section: #F8F8F8; --reke-color-surface: #FFFFFF; --reke-color-surface-elevated: #F0F0F0; --reke-color-surface-hover: #F5F5F5; --reke-color-border: #E0E0E0; --reke-color-border-subtle: #EBEBEB; --reke-color-border-hover: #CCCCCC; --reke-color-text: #1A1A1A; --reke-color-text-muted: #8A8A8A; --reke-color-text-ghost: #9A9A9A; --reke-color-text-disabled: #C0C0C0; --reke-color-text-label: #666666; --reke-progress-track-color: #E0E0E0; --reke-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --reke-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); } } /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties { @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { *, :before, :after, ::backdrop { --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-border-style: solid; --tw-font-weight: initial; --tw-tracking: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; } } } :root { --reke-color-primary: #22c55e; --reke-color-secondary: #3b82f6; --reke-color-danger: #ef4444; --reke-color-warning: #f59e0b; --reke-chart-1: #22c55e; --reke-chart-2: #3b82f6; --reke-chart-3: #f59e0b; --reke-chart-4: #ef4444; --reke-chart-5: #a855f7; --reke-chart-6: #14b8a6; --reke-font-mono: "JetBrains Mono", ui-monospace, monospace; --reke-font-size-2xs: 11px; --reke-font-size-xs: 12px; --reke-font-size-sm: 13px; --reke-font-size-md: 14px; --reke-font-size-lg: 18px; --reke-font-size-xl: 36px; --reke-font-size-2xl: 48px; --reke-font-weight-normal: 400; --reke-font-weight-medium: 500; --reke-font-weight-semibold: 600; --reke-space-2xs: 6px; --reke-space-xs: 8px; --reke-space-sm: 12px; --reke-space-md: 16px; --reke-space-lg: 20px; --reke-space-xl: 24px; --reke-space-2xl: 28px; --reke-space-3xl: 48px; --reke-space-4xl: 64px; --reke-space-5xl: 80px; --reke-radius: 4px; --reke-color-input-bg: var(--reke-color-surface); --reke-shadow-input: none; --reke-scrollbar-thumb: var(--reke-color-text-muted); --reke-scrollbar-thumb-hover: var(--reke-color-text-ghost); --reke-scrollbar-track: var(--reke-color-surface); } @supports (color: color-mix(in lab, red, red)) { :root { --reke-scrollbar-track: color-mix(in srgb, var(--reke-color-surface) 50%, transparent); } } :root { --reke-scrollbar-width: 8px; --reke-transition-fast: .12s ease; --reke-transition-normal: .2s ease; --reke-transition-slow: .35s ease; --reke-animation-flash: .25s; --reke-animation-scale-in: .2s; --reke-chip-prefix-size: 16px; --reke-progress-height: 4px; --reke-progress-radius: 9999px; --reke-progress-color: var(--reke-color-primary); --reke-shadow-glow-primary: 0 0 20px var(--reke-color-primary, #22c55e); } @supports (color: color-mix(in lab, red, red)) { :root { --reke-shadow-glow-primary: 0 0 20px color-mix(in srgb, var(--reke-color-primary, #22c55e) 35%, transparent); } } :root { --reke-shadow-glow-secondary: 0 0 20px var(--reke-color-secondary, #3b82f6); } @supports (color: color-mix(in lab, red, red)) { :root { --reke-shadow-glow-secondary: 0 0 20px color-mix(in srgb, var(--reke-color-secondary, #3b82f6) 35%, transparent); } } :root { --reke-shadow-glow-danger: 0 0 20px var(--reke-color-danger, #ef4444); } @supports (color: color-mix(in lab, red, red)) { :root { --reke-shadow-glow-danger: 0 0 20px color-mix(in srgb, var(--reke-color-danger, #ef4444) 35%, transparent); } } :root { --reke-shadow-lift: 0 8px 32px #0006, 0 2px 8px #0003; --reke-shadow-lift-sm: 0 4px 16px #00000059; } :root, [data-reke-theme="dark"] { --reke-color-on-primary: #0a0a0b; --reke-color-bg: #0a0a0b; --reke-color-bg-section: #0f0f10; --reke-color-surface: #1a1a1a; --reke-color-surface-elevated: #151515; --reke-color-surface-hover: #202020; --reke-color-border: #252525; --reke-color-border-subtle: #1f1f1f; --reke-color-border-hover: #3a3a3a; --reke-color-text: #e5e5e5; --reke-color-text-muted: #525252; --reke-color-text-ghost: #737373; --reke-color-text-disabled: #3b3b3b; --reke-color-text-label: #8a8a8a; --reke-progress-track-color: #2a2a2a; --reke-shadow-sm: 0 1px 2px #0000004d; --reke-shadow-md: 0 4px 6px #0000004d; } [data-reke-theme="light"] { --reke-color-on-primary: #fff; --reke-color-bg: #fff; --reke-color-bg-section: #f8f8f8; --reke-color-surface: #fff; --reke-color-surface-elevated: #f0f0f0; --reke-color-surface-hover: #f5f5f5; --reke-color-border: #e0e0e0; --reke-color-border-subtle: #ebebeb; --reke-color-border-hover: #ccc; --reke-color-text: #1a1a1a; --reke-color-text-muted: #8a8a8a; --reke-color-text-ghost: #9a9a9a; --reke-color-text-disabled: silver; --reke-color-text-label: #666; --reke-progress-track-color: #e0e0e0; --reke-shadow-sm: 0 1px 2px #00000014; --reke-shadow-md: 0 4px 6px #0000001a; } * { scrollbar-color: var(--reke-scrollbar-thumb) var(--reke-scrollbar-track); scrollbar-width: thin; } ::-webkit-scrollbar { width: var(--reke-scrollbar-width); height: var(--reke-scrollbar-width); } ::-webkit-scrollbar-track { background: var(--reke-scrollbar-track); border-radius: 999px; } ::-webkit-scrollbar-thumb { background: var(--reke-scrollbar-thumb); background-clip: content-box; border: 2px solid #0000; border-radius: 999px; transition: background .2s; } ::-webkit-scrollbar-thumb:hover { background: var(--reke-scrollbar-thumb-hover); background-clip: content-box; border-color: #0000; } ::-webkit-scrollbar-corner { background: none; } @media (prefers-color-scheme: light) { [data-reke-theme="auto"] { --reke-color-on-primary: #fff; --reke-color-bg: #fff; --reke-color-bg-section: #f8f8f8; --reke-color-surface: #fff; --reke-color-surface-elevated: #f0f0f0; --reke-color-surface-hover: #f5f5f5; --reke-color-border: #e0e0e0; --reke-color-border-subtle: #ebebeb; --reke-color-border-hover: #ccc; --reke-color-text: #1a1a1a; --reke-color-text-muted: #8a8a8a; --reke-color-text-ghost: #9a9a9a; --reke-color-text-disabled: silver; --reke-color-text-label: #666; --reke-progress-track-color: #e0e0e0; --reke-shadow-sm: 0 1px 2px #00000014; --reke-shadow-md: 0 4px 6px #0000001a; } } @layer theme { :root, :host { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: var(--reke-font-mono); --spacing: .25rem; --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --tracking-widest: .1em; --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --color-app-bg: var(--reke-color-bg); --color-app-surface: var(--reke-color-surface); --color-app-border: var(--reke-color-border); --color-app-text: var(--reke-color-text); --color-app-text-muted: var(--reke-color-text-muted); --color-app-accent: var(--reke-color-primary); --color-app-accent-tint: var(--reke-color-primary); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-app-accent-tint: color-mix(in srgb, var(--reke-color-primary) 9%, transparent); } } :root, :host { --color-app-accent-border-strong: var(--reke-color-primary); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-app-accent-border-strong: color-mix(in srgb, var(--reke-color-primary) 31%, transparent); } } :root, :host { --color-app-profit: var(--pnl-profit); --color-app-loss: var(--pnl-loss); --color-app-profit-bg: var(--pnl-profit-bg); --color-app-loss-bg: var(--pnl-loss-bg); --color-app-secondary-tint: var(--reke-color-secondary); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-app-secondary-tint: color-mix(in srgb, var(--reke-color-secondary) 9%, transparent); } } :root, :host { --color-app-warning: var(--reke-color-warning); --color-app-warning-tint: var(--reke-color-warning); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-app-warning-tint: color-mix(in srgb, var(--reke-color-warning) 9%, transparent); } } :root, :host { --color-app-blue: var(--reke-color-blue); --color-app-bg-expand: #111112; } } @layer base { *, :after, :before, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sub { bottom: -.25em; } sup { top: -.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring:where(:not(iframe)) { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentColor; } @supports (color: color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit { padding-block: 0; } ::-webkit-datetime-edit-year-field { padding-block: 0; } ::-webkit-datetime-edit-month-field { padding-block: 0; } ::-webkit-datetime-edit-day-field { padding-block: 0; } ::-webkit-datetime-edit-hour-field { padding-block: 0; } ::-webkit-datetime-edit-minute-field { padding-block: 0; } ::-webkit-datetime-edit-second-field { padding-block: 0; } ::-webkit-datetime-edit-millisecond-field { padding-block: 0; } ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer components; @layer utilities { .collapse { visibility: collapse; } .visible { visibility: visible; } .sr-only { clip-path: inset(50%); white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } .fixed { position: fixed; } .static { position: static; } .container { width: 100%; } @media (min-width: 40rem) { .container { max-width: 40rem; } } @media (min-width: 48rem) { .container { max-width: 48rem; } } @media (min-width: 64rem) { .container { max-width: 64rem; } } @media (min-width: 80rem) { .container { max-width: 80rem; } } @media (min-width: 96rem) { .container { max-width: 96rem; } } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .contents { display: contents; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .table { display: table; } .w-\[140px\] { width: 140px; } .w-\[160px\] { width: 160px; } .transform { transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-0\.5 { gap: calc(var(--spacing) * .5); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-3 { gap: calc(var(--spacing) * 3); } .rounded { border-radius: .25rem; } .rounded-b { border-bottom-right-radius: .25rem; border-bottom-left-radius: .25rem; } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-app-border { border-color: var(--reke-color-border); } .border-app-border-subtle { border-color: var(--reke-color-border-subtle); } .bg-app-bg-expand { background-color: var(--color-app-bg-expand); } .bg-app-surface { background-color: var(--reke-color-surface); } .p-3 { padding: calc(var(--spacing) * 3); } .p-10 { padding: calc(var(--spacing) * 10); } .px-1 { padding-inline: var(--spacing); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-px { padding-block: 1px; } .text-center { text-align: center; } .font-mono { font-family: var(--font-mono); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-\[9px\] { font-size: 9px; } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-\[12px\] { font-size: 12px; } .text-\[13px\] { font-size: 13px; } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); } .text-app-accent { color: var(--reke-color-primary); } .text-app-danger { color: var(--reke-color-danger); } .text-app-loss { color: var(--pnl-loss); } .text-app-profit { color: var(--pnl-profit); } .text-app-purple { color: var(--reke-color-purple); } .text-app-text { color: var(--reke-color-text); } .text-app-text-ghost { color: var(--reke-color-text-ghost); } .text-app-text-muted { color: var(--reke-color-text-muted); } .text-app-warning { color: var(--reke-color-warning); } .uppercase { text-transform: uppercase; } .opacity-70 { opacity: .7; } .shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .pnl-expand { background: var(--reke-color-secondary); } @supports (color: color-mix(in lab, red, red)) { .pnl-expand { background: color-mix(in srgb, var(--reke-color-secondary) 5%, var(--reke-color-surface)); } } .pnl-expand { font-family: var(--reke-font-mono); padding: 12px 16px 20px; } .pnl-expand-grid { flex-direction: column; gap: 14px; display: flex; } .pnl-expand-col { flex-direction: column; gap: 12px; min-width: 0; display: flex; } @media (min-width: 768px) { .pnl-expand { padding: 4px 24px 26px; } .pnl-expand-grid { grid-template-columns: .7fr 1fr; align-items: start; gap: 18px; height: 385px; display: grid; } .pnl-expand-col { gap: 14px; } } .pnl-trades { background: var(--reke-color-surface); border: 1px solid var(--reke-color-border); overflow: overlay; border-radius: 10px; height: -webkit-fill-available; } .pnl-tabs { border-bottom: 1px solid var(--reke-color-border); align-items: center; gap: 4px; padding: 8px 10px; display: flex; } .pnl-tab { text-transform: uppercase; letter-spacing: .08em; color: var(--reke-color-text-muted); cursor: pointer; font-size: 10px; font-weight: 600; font-family: var(--reke-font-mono); background: none; border: 1px solid #0000; border-radius: 7px; padding: 5px 11px; transition: all .15s; } .pnl-tab:hover { color: var(--reke-color-text); } .pnl-tab--active { color: var(--reke-color-text); background: var(--reke-color-surface-hover); border-color: var(--reke-color-border); } .pnl-trades-scrollhint { color: var(--reke-color-text-muted); text-transform: none; letter-spacing: .04em; margin-left: auto; font-size: 9px; } .pnl-lots-body { padding: 12px 16px; } .pnl-strategy-body { flex-direction: column; gap: 8px; padding: 12px 16px; display: flex; } .pnl-trades-subhead, .pnl-trades-row { grid-template-columns: 1fr 50px 1fr 1fr 1fr; align-items: center; gap: 8px; padding: 8px 12px; display: grid; } .pnl-trades-subhead { color: var(--reke-color-text-muted); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--reke-color-border-subtle); padding: 8px 12px; font-size: 9px; } .pnl-trades-body { max-height: 200px; overflow-y: auto; } .pnl-trades-row { border-bottom: 1px solid var(--reke-color-border-subtle); font-size: 11px; } @media (min-width: 768px) { .pnl-trades-subhead, .pnl-trades-row { grid-template-columns: 1fr 56px 1.4fr 1fr 1fr; gap: 12px; padding: 10px 16px; } .pnl-trades-subhead { padding: 9px 16px; font-size: 10px; } .pnl-trades-body { max-height: none; } .pnl-trades-row { font-size: 12px; } } .pnl-trades-row:last-child { border-bottom: none; } .pnl-side { text-align: center; border-radius: 7px; justify-self: start; padding: 2px 7px; font-size: 10px; font-weight: 500; } .pnl-side--buy { color: var(--color-app-profit); background: var(--color-app-profit-bg); border: 1px solid var(--pnl-profit-border); } .pnl-side--sell { color: var(--color-app-loss); background: var(--color-app-loss-bg); border: 1px solid var(--pnl-loss-border); } .pnl-card { background: var(--reke-color-surface); border: 1px solid var(--reke-color-border); border-radius: 10px; padding: 14px; } .pnl-card-label { color: var(--reke-color-text-label); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; font-size: 10px; } .pnl-stats { grid-template-columns: 1fr; gap: 10px; display: grid; } .pnl-stat { background: var(--reke-color-surface); border: 1px solid var(--reke-color-border); border-radius: 8px; flex-direction: column; gap: 5px; padding: 12px; display: flex; } @media (min-width: 768px) { .pnl-stats { grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .pnl-stat { border-radius: 10px; gap: 6px; padding: 14px; } } .pnl-stat--profit { border-color: var(--pnl-profit-border); } .pnl-stat--loss { border-color: var(--pnl-loss-border); } .pnl-stat-label { color: var(--reke-color-text-label); text-transform: uppercase; letter-spacing: .07em; font-size: 10px; } .pnl-stat-value { color: var(--reke-color-text); font-size: 13px; font-weight: 500; } .pnl-stat-sub { color: var(--reke-color-text-ghost); font-size: 11px; } .pnl-lot { background: var(--reke-color-surface); border: 1px solid var(--reke-color-border); border-radius: 8px; padding: 8px 11px; font-size: 13px; } .pnl-lot--reachable { border-color: var(--pnl-profit-border); } .pnl-lot-row { flex-wrap: wrap; align-items: center; gap: 8px; display: flex; } .pnl-lot-sub { gap: 8px; margin-top: 3px; font-size: 12px; display: flex; } .pnl-lot--expandable { cursor: pointer; } .pnl-lot--expandable:hover { border-color: var(--reke-color-border-hover); } .pnl-lot-sublots { border-left: 1px solid var(--reke-color-border-subtle); margin-top: 4px; margin-left: 16px; padding-left: 8px; } .pnl-tag { border-radius: 5px; padding: 1px 6px; font-size: 9px; font-weight: 600; } .pnl-tag--warning { color: var(--reke-color-warning); background: var(--color-app-warning-tint); border: 1px solid var(--reke-color-warning); } @supports (color: color-mix(in lab, red, red)) { .pnl-tag--warning { border: 1px solid color-mix(in srgb, var(--reke-color-warning) 28%, transparent); } } .pnl-tag--cyan { color: var(--reke-color-cyan); background: var(--reke-color-cyan); } @supports (color: color-mix(in lab, red, red)) { .pnl-tag--cyan { background: color-mix(in srgb, var(--reke-color-cyan) 9%, transparent); } } .pnl-tag--cyan { border: 1px solid var(--reke-color-cyan); } @supports (color: color-mix(in lab, red, red)) { .pnl-tag--cyan { border: 1px solid color-mix(in srgb, var(--reke-color-cyan) 28%, transparent); } } .pnl-tag--profit { color: var(--color-app-profit); background: var(--color-app-profit-bg); border: 1px solid var(--pnl-profit-border); } .pnl-tag--loss { color: var(--color-app-loss); background: var(--color-app-loss-bg); border: 1px solid var(--pnl-loss-border); } .pnl-section { flex-direction: column; gap: 8px; display: flex; } .pnl-section-head { align-items: center; gap: 8px; display: flex; } .pnl-section-title { text-transform: uppercase; letter-spacing: .07em; font-size: 10px; font-weight: 600; } .pnl-strategy-toggle { border: 1px solid var(--reke-color-warning); font-size: 9px; font-weight: 500; } @supports (color: color-mix(in lab, red, red)) { .pnl-strategy-toggle { border: 1px solid color-mix(in srgb, var(--reke-color-warning) 28%, transparent); } } .pnl-strategy-toggle { cursor: pointer; font-family: var(--reke-font-mono); color: var(--reke-color-warning); background: var(--color-app-warning-tint); border-radius: 5px; padding: 1px 6px; } .row--expanded, .row--expanded .cell { background: var(--reke-color-secondary); } @supports (color: color-mix(in lab, red, red)) { .row--expanded, .row--expanded .cell { background: color-mix(in srgb, var(--reke-color-secondary) 5%, var(--reke-color-surface)); } } .expand-content { padding: 0; } .pnl-lots-list { flex-direction: column; gap: 6px; display: flex; } .pnl-cell { flex-direction: column; gap: 2px; display: flex; } .pnl-cell-title { color: var(--reke-color-text); font-size: 14px; font-weight: 500; } .pnl-cell-line { font-size: 12px; } .pnl-cell-sub { color: var(--reke-color-text-muted); font-size: 11px; } .pnl-price { font-size: 13px; font-weight: 500; } .pnl-cell-pnl { flex-direction: column; align-items: flex-start; gap: 4px; display: flex; } .pnl-pill { border: 1px solid #0000; border-radius: 9999px; align-items: center; gap: 5px; padding: 4px 10px; font-size: 13px; font-weight: 500; display: inline-flex; } .pnl-pill--profit { color: var(--color-app-profit); background: var(--color-app-profit-bg); border-color: var(--pnl-profit-border); } .pnl-pill--loss { color: var(--color-app-loss); background: var(--color-app-loss-bg); border-color: var(--pnl-loss-border); } .pnl-pill--flat { color: var(--reke-color-text-label); background: var(--reke-color-surface-hover); border-color: var(--reke-color-border); } .pnl-trend { align-items: center; display: flex; } .pnl-exchange-cell { justify-content: flex-end; align-items: center; gap: 12px; display: flex; } .pnl-exchange { color: var(--reke-color-text-muted); border-radius: 6px; padding: 4px 10px; font-size: 10px; font-weight: 500; } .pnl-exchange--binance { color: var(--color-app-profit); background: var(--color-app-profit-bg); border: 1px solid var(--pnl-profit-border); } .pnl-exchange--mexc { color: var(--reke-color-secondary); background: var(--color-app-secondary-tint); border: 1px solid var(--reke-color-secondary); } @supports (color: color-mix(in lab, red, red)) { .pnl-exchange--mexc { border: 1px solid color-mix(in srgb, var(--reke-color-secondary) 28%, transparent); } } .pnl-exchange--kraken { color: var(--reke-color-purple); background: var(--reke-color-purple); } @supports (color: color-mix(in lab, red, red)) { .pnl-exchange--kraken { background: color-mix(in srgb, var(--reke-color-purple) 9%, transparent); } } .pnl-exchange--kraken { border: 1px solid var(--reke-color-purple); } @supports (color: color-mix(in lab, red, red)) { .pnl-exchange--kraken { border: 1px solid color-mix(in srgb, var(--reke-color-purple) 28%, transparent); } } .pnl-expand-btn { color: var(--reke-color-text-muted); cursor: pointer; -webkit-user-select: none; user-select: none; font-size: 10px; } .pnl-actions-btn { width: 26px; height: 26px; color: var(--reke-color-text-muted); cursor: pointer; -webkit-user-select: none; user-select: none; border-radius: 6px; justify-content: center; align-items: center; transition: background .15s, color .15s; display: inline-flex; } .pnl-actions-btn:hover, .pnl-actions-btn:focus-visible { color: var(--reke-color-text); background: var(--reke-color-text); } @supports (color: color-mix(in lab, red, red)) { .pnl-actions-btn:hover, .pnl-actions-btn:focus-visible { background: color-mix(in srgb, var(--reke-color-text) 8%, transparent); } } .pnl-actions-btn:hover, .pnl-actions-btn:focus-visible { outline: none; } .table--hoverable .row { transition: background-color .2s cubic-bezier(.25, 1, .5, 1); } .table--hoverable .row:hover { background-color: var(--reke-color-primary); } @supports (color: color-mix(in lab, red, red)) { .table--hoverable .row:hover { background-color: color-mix(in srgb, var(--reke-color-primary) 8%, var(--reke-color-surface)); } } .row--expanded:hover, .row--expanded:hover .cell { background: var(--reke-color-secondary); } @supports (color: color-mix(in lab, red, red)) { .row--expanded:hover, .row--expanded:hover .cell { background: color-mix(in srgb, var(--reke-color-secondary) 5%, var(--reke-color-surface)); } } @media (prefers-reduced-motion: reduce) { .table--hoverable .row { transition: none; } } .spot-tab-toolbar-rows { flex-direction: column; gap: 6px; display: flex; } .spot-tab-row { flex-wrap: wrap; align-items: center; gap: 6px; display: flex; } .spot-tab-view-btn-group { border: 1px solid var(--reke-color-border); background: var(--reke-color-surface); cursor: pointer; border-radius: 9999px; align-items: center; padding: 0; transition: all .2s; display: inline-flex; overflow: hidden; } .spot-tab-view-btn-group:hover { border-color: var(--reke-color-border-hover); } .spot-tab-view-btn-group:focus-within { border-color: var(--reke-color-primary); box-shadow: 0 0 0 1.5px var(--reke-color-primary); } .spot-tab-view-btn-group.spot-tab-view-btn-group--active { border-color: var(--reke-color-primary); background: var(--color-app-accent-tint); box-shadow: 0 0 0 1.5px var(--reke-color-primary); } .spot-tab-view-btn { color: var(--reke-color-text); cursor: pointer; background: none; border: none; border-radius: 9999px 0 0 9999px; align-items: center; gap: 4px; padding: 6px 16px; font-size: 13px; font-weight: 500; transition: color .2s; display: flex; } .spot-tab-view-btn--active { color: var(--reke-color-primary); font-weight: 700; } .spot-tab-view-delete { color: var(--reke-color-text-muted); cursor: pointer; background: none; border: none; border-radius: 0 9999px 9999px 0; padding: 6px 10px; font-size: 14px; font-weight: 600; line-height: 1; transition: color .15s, background .15s; } .spot-tab-view-delete:hover { color: var(--reke-color-danger); background: var(--reke-color-danger); } @supports (color: color-mix(in lab, red, red)) { .spot-tab-view-delete:hover { background: color-mix(in srgb, var(--reke-color-danger) 12%, transparent); } } .spot-tab-add-view { border: 1px dashed var(--reke-color-border); color: var(--reke-color-text-muted); cursor: pointer; background: none; border-radius: 9999px; padding: 6px 16px; font-size: 12px; font-weight: 500; transition: all .15s; } .spot-tab-add-view:hover { border-color: var(--reke-color-primary); color: var(--reke-color-primary); } .spot-tab-rename-input { width: 110px; } .spot-tab-rename-input::part(field) { box-shadow: none; background: none; border-color: #0000; border-radius: 9999px; outline: none; padding: 6px 12px; font-size: 12px; transition: none; } .spot-tab-add-view-slot { align-items: center; display: inline-flex; position: relative; } .spot-tab-add-view-slot > .spot-tab-add-view { position: absolute; inset-block: 0; inset-inline-start: 0; } .spot-tab-add-view-slot > .spot-tab-add-view, .spot-tab-add-view-slot > .spot-tab-view-btn-group { white-space: nowrap; transition: opacity .24s ease-out, visibility; } .spot-tab-add-view-slot[data-adding="true"] > .spot-tab-add-view, .spot-tab-add-view-slot[data-adding="false"] > .spot-tab-view-btn-group { opacity: 0; visibility: hidden; transition: opacity .16s ease-in, visibility 0s .24s; } @media (prefers-reduced-motion: reduce) { .spot-tab-add-view-slot > .spot-tab-add-view, .spot-tab-add-view-slot > .spot-tab-view-btn-group, .spot-tab-add-view-slot[data-adding="true"] > .spot-tab-add-view, .spot-tab-add-view-slot[data-adding="false"] > .spot-tab-view-btn-group { transition: none; } } .spot-tab-save-btn { border: 1px solid var(--color-app-accent-border-strong); background: var(--color-app-accent-tint); color: var(--reke-color-primary); cursor: pointer; border-radius: 9999px; justify-content: center; align-items: center; padding: 4px 8px; font-size: 10px; font-weight: 600; display: inline-flex; } .spot-tab-save-btn:hover { background: var(--reke-color-primary); color: var(--reke-color-surface); } .spot-tab-row-label { color: var(--reke-color-text-muted); text-transform: uppercase; letter-spacing: .05em; padding-right: 4px; font-size: 11px; font-weight: 600; } .filter-btn--pill { background: var(--reke-color-surface); border: 1px solid var(--reke-color-border); color: var(--reke-color-text); cursor: pointer; border-radius: 10px; align-items: center; gap: 6px; padding: 8px 18px; font-size: 13px; font-weight: 600; transition: all .15s; display: inline-flex; } .filter-btn--pill:hover { border-color: var(--reke-color-primary); background: var(--reke-color-primary); color: #fff; } .pnl-fg-text { color: var(--reke-color-text); } .pnl-fg-muted { color: var(--reke-color-text-muted); } .pnl-fg-ghost { color: var(--reke-color-text-ghost); } .pnl-fg-label { color: var(--reke-color-text-label); } .pnl-fg-profit { color: var(--color-app-profit); } .pnl-fg-loss { color: var(--color-app-loss); } .pnl-fg-secondary { color: var(--reke-color-secondary); } .pnl-fg-warning { color: var(--reke-color-warning); } .pnl-fg-cyan { color: var(--reke-color-cyan); } .pnl-fg-purple { color: var(--reke-color-purple); } .pnl-fg-blue { color: var(--reke-color-blue); } .pnl-track { --reke-color-primary: #22c55e; } :root { --pnl-profit: var(--reke-color-primary); --pnl-loss: #f2585e; --pnl-profit-bg: var(--pnl-profit); } @supports (color: color-mix(in lab, red, red)) { :root { --pnl-profit-bg: color-mix(in srgb, var(--pnl-profit) 13%, transparent); } } :root { --pnl-loss-bg: var(--pnl-loss); } @supports (color: color-mix(in lab, red, red)) { :root { --pnl-loss-bg: color-mix(in srgb, var(--pnl-loss) 13%, transparent); } } :root { --pnl-profit-border: var(--pnl-profit); } @supports (color: color-mix(in lab, red, red)) { :root { --pnl-profit-border: color-mix(in srgb, var(--pnl-profit) 28%, transparent); } } :root { --pnl-loss-border: var(--pnl-loss); } @supports (color: color-mix(in lab, red, red)) { :root { --pnl-loss-border: color-mix(in srgb, var(--pnl-loss) 28%, transparent); } } :root { --pnl-shadow: #000; } [data-reke-theme="light"] { --pnl-profit: #16a34a; --pnl-loss: #dc2626; --pnl-profit-bg: var(--pnl-profit); } @supports (color: color-mix(in lab, red, red)) { [data-reke-theme="light"] { --pnl-profit-bg: color-mix(in srgb, var(--pnl-profit) 9%, transparent); } } [data-reke-theme="light"] { --pnl-loss-bg: var(--pnl-loss); } @supports (color: color-mix(in lab, red, red)) { [data-reke-theme="light"] { --pnl-loss-bg: color-mix(in srgb, var(--pnl-loss) 8%, transparent); } } [data-reke-theme="light"] { --pnl-shadow: #94a3b8; } .sr-only { clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } .stats-section { background: var(--reke-color-bg); padding: 0 16px 32px; } .stats-row { grid-template-columns: 1fr; gap: 16px; display: grid; } .section { flex-direction: column; gap: 32px; padding: 32px 16px; display: flex; } @media (min-width: 768px) { .stats-section { padding: 0 64px 52px; } .stats-row { grid-template-columns: repeat(3, 1fr); gap: 20px; } .section { gap: 48px; padding: 60px 64px; } } .section--bordered { border-top: 1px solid var(--reke-color-border-subtle); } .section--centered { text-align: center; padding: 64px 24px; } .auth-spinner { border: 3px solid var(--reke-color-border); border-top-color: var(--reke-color-primary); border-radius: 50%; width: 28px; height: 28px; margin: 0 auto 16px; animation: .7s linear infinite auth-spin; } @keyframes auth-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .auth-spinner { animation: none; } } .section-header { flex-direction: column; gap: 16px; display: flex; } .section-breadcrumb { color: var(--reke-color-text-muted); font-size: 12px; } .section-title { color: var(--reke-color-text); margin: 0; font-size: 36px; font-weight: 600; } .section-description { color: var(--reke-color-text-muted); margin: 0; font-size: 14px; } .table-card { background: var(--reke-color-surface); border: 1px solid var(--reke-color-border); border-radius: 8px; width: 100%; overflow: hidden; } .table-toolbar { border-bottom: 1px solid var(--reke-color-border); justify-content: space-between; align-items: center; padding: 12px 16px; display: flex; } .table-toolbar-left { align-items: center; gap: 10px; display: flex; } .table-toolbar-right { align-items: center; gap: 6px; display: flex; } .table-toolbar-title { color: var(--reke-color-text); font-size: 12px; font-weight: 500; } .table-footer { background: var(--reke-color-surface-elevated); justify-content: space-between; align-items: center; padding: 10px 16px; display: flex; } .table-footer-text { color: var(--reke-color-text-disabled); font-size: 10px; } @media (min-width: 768px) { .table-card { border-radius: 4px; } .table-toolbar { padding: 16px 20px; } .table-toolbar-left { gap: 12px; } .table-toolbar-right { gap: 8px; } .table-toolbar-title { font-size: 13px; } .table-footer { padding: 14px 20px; } .table-footer-text { font-size: 11px; } } .table-empty { text-align: center; padding: 24px 16px; font-size: 11px; } .table-empty--loading { color: var(--reke-color-text-muted); } .table-empty--none { color: var(--reke-color-text-disabled); } .table-empty--error { color: var(--reke-color-danger); flex-direction: column; align-items: center; gap: 10px; display: flex; } .table-empty--error button { border: 1px solid var(--reke-color-danger); color: var(--reke-color-danger); cursor: pointer; font-size: 9px; font-weight: 500; font-family: var(--reke-font-mono); background: none; border-radius: 4px; padding: 3px 10px; transition: all .15s; } @media (min-width: 768px) { .table-empty { padding: 40px 20px; font-size: 12px; } .table-empty--error { gap: 12px; } .table-empty--error button { padding: 4px 12px; font-size: 10px; } } .table-empty--error button:hover { background: var(--reke-color-danger); } @supports (color: color-mix(in lab, red, red)) { .table-empty--error button:hover { background: color-mix(in srgb, var(--reke-color-danger) 10%, transparent); } } .pagination-row { gap: 4px; display: flex; } .pagination-dots { color: var(--reke-color-text-disabled); padding: 6px 4px; font-size: 11px; } .filter-btn { border: 1px solid var(--reke-color-border); background: var(--reke-color-surface); color: #fff; cursor: pointer; border-radius: 10px; align-items: center; gap: 6px; padding: 8px 18px; font-size: 13px; font-weight: 600; transition: all .15s; display: inline-flex; } .filter-btn svg { color: #fff; } .filter-btn--active-green { border-color: var(--reke-color-primary); background: var(--color-app-accent-tint); color: var(--reke-color-primary); } .filter-btn--active-blue { border-color: var(--reke-color-secondary); background: var(--reke-color-secondary); color: #fff; } .filter-btn--active-blue svg { color: #fff; } .filter-btn--active-amber { border-color: var(--reke-color-warning); background: var(--color-app-warning-tint); color: var(--reke-color-warning); } .dashboard-page { flex-direction: column; width: 100%; max-width: 1200px; margin-inline: auto; display: flex; } .dashboard-tab-section { flex-wrap: wrap; align-items: center; gap: 12px; padding: 0 16px 16px; display: flex; } @media (min-width: 768px) { .dashboard-tab-section { gap: 16px; padding: 0 64px 24px; } } .earn-tab { box-sizing: border-box; background: var(--reke-color-bg); width: 100%; max-width: 960px; color: var(--reke-color-text); margin-inline: auto; padding: 24px 16px 32px; font-family: JetBrains Mono, ui-monospace, monospace; font-size: 13px; line-height: 1.6; } @media (min-width: 768px) { .earn-tab { padding: 28px 64px 40px; } } .earn-tab-header { justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; display: flex; } .earn-tab-title { color: var(--reke-color-text); font-size: 20px; font-weight: 600; } .earn-tab-description { color: var(--reke-color-text-ghost); margin-top: 4px; font-size: 13.5px; } .earn-tab-content { flex-direction: column; gap: 16px; display: flex; } .earn-summary { border-bottom: 1px solid var(--reke-color-border); flex-direction: column; gap: 12px; padding: 6px 4px 22px; display: flex; } @media (min-width: 768px) { .earn-summary { flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; } } .earn-summary-header { justify-content: space-between; align-items: center; gap: 16px; display: flex; } @media (min-width: 768px) { .earn-summary-header { flex-shrink: 0; } } .earn-summary-title { align-items: baseline; gap: 8px; display: flex; } .earn-summary-title-icon { color: var(--reke-color-primary); font-size: 14px; } .earn-summary-title-text { color: var(--reke-color-text); font-size: 17px; font-weight: 600; } .earn-summary-subtitle { color: var(--reke-color-text-ghost); margin-top: 4px; font-size: 12.5px; } .earn-summary-metrics { grid-template-columns: 1fr 1fr; gap: 12px; display: grid; } @media (min-width: 768px) { .earn-summary-metrics { align-items: center; gap: 28px; display: flex; } } .earn-summary-metric { text-align: left; } .earn-summary-metric:last-child { text-align: right; } @media (min-width: 768px) { .earn-summary-metric { text-align: right; border-left: 1px solid var(--reke-color-border); padding-left: 28px; } .earn-summary-metric:first-child { text-align: right; border-left: none; padding-left: 0; } } .earn-summary-label { color: var(--reke-color-text-muted); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; } .earn-summary-value { color: var(--reke-color-text); font-variant-numeric: tabular-nums; margin-top: 4px; font-size: 21px; font-weight: 600; } .earn-summary-gain { justify-content: flex-end; align-items: baseline; gap: 8px; display: flex; } .earn-summary-gain-value { color: var(--pnl-profit); } .earn-summary-gain-value--annualized { color: #3b82f6; } .earn-summary-toggle { color: var(--pnl-profit); background: var(--color-app-profit-bg); border: 1px solid var(--pnl-profit-border); font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 999px; align-items: center; gap: 4px; padding: 1px 8px; font-family: inherit; font-size: 12px; font-weight: 500; transition: all .15s; display: flex; } .earn-summary-toggle--annualized { color: #3b82f6; background: #3b82f61f; border-color: #3b82f64d; } .earn-skeleton { background: linear-gradient(90deg, var(--reke-color-surface) 25%, var(--reke-color-border) 50%, var(--reke-color-surface) 75%); background-size: 200% 100%; border-radius: 4px; width: 110px; height: 21px; margin-top: 4px; margin-left: auto; animation: 1.5s infinite earn-skeleton-shimmer; } @keyframes earn-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .earn-group { border: 1px solid var(--reke-color-border); background: var(--reke-color-bg-section); border-radius: 6px; overflow: hidden; } .earn-group-header { background: var(--reke-color-surface-elevated); border: none; border-bottom: 1px solid var(--reke-color-border); width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; display: flex; overflow: hidden; } @media (min-width: 768px) { .earn-group-header { gap: 16px; padding: 16px 20px; overflow: visible; } } .earn-group-header:hover { background: var(--reke-color-surface); } .earn-group-header--collapsed { border-bottom: none; } .earn-group-header-left { flex-shrink: 1; align-items: center; gap: 6px; min-width: 0; display: flex; } @media (min-width: 768px) { .earn-group-header-left { gap: 12px; } } .earn-group-header-right { flex-shrink: 0; align-items: center; gap: 8px; display: flex; } @media (min-width: 768px) { .earn-group-header-right { gap: 0; } } .earn-group-chevron { color: var(--reke-color-text-ghost); justify-content: center; align-items: center; padding: 4px; display: flex; } .earn-group-chevron svg { transition: transform .15s; } .earn-group-chevron--collapsed svg { transform: rotate(-90deg); } .earn-token-icon { border-radius: 4px; flex-shrink: 0; justify-content: center; align-items: center; width: 28px; height: 28px; font-size: 12px; font-weight: 600; display: inline-flex; } @media (min-width: 768px) { .earn-token-icon { width: 40px; height: 40px; font-size: 14px; } } .earn-token-icon[data-icon-theme="warning"] { background: var(--reke-color-warning); } @supports (color: color-mix(in lab, red, red)) { .earn-token-icon[data-icon-theme="warning"] { background: color-mix(in srgb, var(--reke-color-warning) 15%, transparent); } } .earn-token-icon[data-icon-theme="warning"] { color: var(--reke-color-warning); border: 1px solid var(--reke-color-warning); } @supports (color: color-mix(in lab, red, red)) { .earn-token-icon[data-icon-theme="warning"] { border: 1px solid color-mix(in srgb, var(--reke-color-warning) 30%, transparent); } } .earn-token-icon[data-icon-theme="secondary"] { background: var(--reke-color-secondary); } @supports (color: color-mix(in lab, red, red)) { .earn-token-icon[data-icon-theme="secondary"] { background: color-mix(in srgb, var(--reke-color-secondary) 15%, transparent); } } .earn-token-icon[data-icon-theme="secondary"] { color: var(--reke-color-secondary); border: 1px solid var(--reke-color-secondary); } @supports (color: color-mix(in lab, red, red)) { .earn-token-icon[data-icon-theme="secondary"] { border: 1px solid color-mix(in srgb, var(--reke-color-secondary) 30%, transparent); } } .earn-token-icon[data-icon-theme="primary"] { background: var(--reke-color-primary); } @supports (color: color-mix(in lab, red, red)) { .earn-token-icon[data-icon-theme="primary"] { background: color-mix(in srgb, var(--reke-color-primary) 15%, transparent); } } .earn-token-icon[data-icon-theme="primary"] { color: var(--reke-color-primary); border: 1px solid var(--reke-color-primary); } @supports (color: color-mix(in lab, red, red)) { .earn-token-icon[data-icon-theme="primary"] { border: 1px solid color-mix(in srgb, var(--reke-color-primary) 30%, transparent); } } .earn-token-icon[data-icon-theme="violet"] { background: var(--reke-color-violet); } @supports (color: color-mix(in lab, red, red)) { .earn-token-icon[data-icon-theme="violet"] { background: color-mix(in srgb, var(--reke-color-violet) 15%, transparent); } } .earn-token-icon[data-icon-theme="violet"] { color: var(--reke-color-violet); border: 1px solid var(--reke-color-violet); } @supports (color: color-mix(in lab, red, red)) { .earn-token-icon[data-icon-theme="violet"] { border: 1px solid color-mix(in srgb, var(--reke-color-violet) 30%, transparent); } } .earn-token-icon[data-icon-theme="neutral"] { background: var(--reke-color-text); } @supports (color: color-mix(in lab, red, red)) { .earn-token-icon[data-icon-theme="neutral"] { background: color-mix(in srgb, var(--reke-color-text) 6%, transparent); } } .earn-token-icon[data-icon-theme="neutral"] { color: var(--reke-color-text-label); border: 1px solid var(--reke-color-border); } .earn-token-icon-img { object-fit: cover; border-radius: 50%; width: 100%; height: 100%; } .earn-token-select { min-width: 80px; max-width: 100px; } @media (min-width: 768px) { .earn-token-select { min-width: 160px; max-width: 240px; } } .earn-add-row { border-top: 1px solid var(--reke-color-border-subtle); padding: 12px 20px; } .earn-confirm-text { color: var(--reke-color-text-muted); margin: 0; line-height: 1.5; } .earn-confirm-actions { justify-content: flex-end; gap: 8px; display: flex; } .earn-group-stat { text-align: right; min-width: 0; } @media (min-width: 768px) { .earn-group-stat { min-width: 120px; } } .earn-group-stat--divider { border-left: 1px solid var(--reke-color-border); margin-left: 8px; padding-left: 8px; } @media (min-width: 768px) { .earn-group-stat--divider { margin-left: 24px; padding-left: 24px; } } .earn-group-stat-label { color: var(--reke-color-text-muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; font-size: 9px; } @media (min-width: 768px) { .earn-group-stat-label { letter-spacing: .08em; font-size: 11px; } } .earn-group-stat-value { color: var(--reke-color-text); font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 1px; font-size: 12px; font-weight: 600; } @media (min-width: 768px) { .earn-group-stat-value { margin-top: 3px; font-size: 16px; } } .earn-group-stat-value--profit { color: var(--pnl-profit); } .earn-group-delete { border: 1px solid var(--reke-color-border); width: 24px; height: 24px; color: var(--reke-color-text-muted); cursor: pointer; background: none; border-radius: 4px; flex-shrink: 0; justify-content: center; align-items: center; padding: 0; display: flex; } @media (min-width: 768px) { .earn-group-delete { border-radius: 8px; width: 34px; height: 34px; margin-left: 24px; } } .earn-group-delete:hover { color: var(--pnl-loss); border-color: var(--pnl-loss); } @supports (color: color-mix(in lab, red, red)) { .earn-group-delete:hover { border-color: color-mix(in srgb, var(--pnl-loss) 40%, transparent); } } .earn-row { border-bottom: 1px solid var(--reke-color-border); align-items: center; gap: 6px; padding: 8px 12px; display: flex; } .earn-row-exchange { flex-shrink: 0; min-width: 60px; } .earn-exchange-input[data-exchange-theme="binance"] { --reke-color-input-bg: var(--reke-color-warning); } @supports (color: color-mix(in lab, red, red)) { .earn-exchange-input[data-exchange-theme="binance"] { --reke-color-input-bg: color-mix(in srgb, var(--reke-color-warning) 12%, transparent); } } .earn-exchange-input[data-exchange-theme="binance"] { --reke-color-text: var(--reke-color-warning); --reke-color-border: var(--reke-color-warning); } @supports (color: color-mix(in lab, red, red)) { .earn-exchange-input[data-exchange-theme="binance"] { --reke-color-border: color-mix(in srgb, var(--reke-color-warning) 25%, transparent); } } .earn-exchange-input[data-exchange-theme="mexc"] { --reke-color-input-bg: var(--reke-color-secondary); } @supports (color: color-mix(in lab, red, red)) { .earn-exchange-input[data-exchange-theme="mexc"] { --reke-color-input-bg: color-mix(in srgb, var(--reke-color-secondary) 12%, transparent); } } .earn-exchange-input[data-exchange-theme="mexc"] { --reke-color-text: var(--reke-color-secondary); --reke-color-border: var(--reke-color-secondary); } @supports (color: color-mix(in lab, red, red)) { .earn-exchange-input[data-exchange-theme="mexc"] { --reke-color-border: color-mix(in srgb, var(--reke-color-secondary) 25%, transparent); } } .earn-exchange-input[data-exchange-theme="neutral"] { --reke-color-input-bg: var(--reke-color-text); } @supports (color: color-mix(in lab, red, red)) { .earn-exchange-input[data-exchange-theme="neutral"] { --reke-color-input-bg: color-mix(in srgb, var(--reke-color-text) 6%, transparent); } } .earn-exchange-input[data-exchange-theme="neutral"] { --reke-color-text: var(--reke-color-text-label); --reke-color-border: var(--reke-color-border); } .earn-row-desktop-only { display: none; } @media (min-width: 640px) { .earn-row { grid-template-columns: 1.1fr 1fr .8fr .7fr 1.2fr 1fr 36px; gap: 14px; padding: 14px 20px; display: grid; } .earn-row-exchange { min-width: initial; } .earn-row-desktop-only { display: block; } } .earn-row-gain { flex-direction: column; flex: 1; align-items: flex-end; gap: 2px; display: flex; } @media (min-width: 640px) { .earn-row-gain { align-items: flex-start; } } .earn-gain-value { color: var(--pnl-profit); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; } .earn-gain-value--annualized { color: #3b82f6; } .earn-gain-toggle { color: var(--pnl-profit); background: var(--pnl-profit); align-items: center; gap: 2px; font-size: 10px; font-weight: 500; display: inline-flex; } @supports (color: color-mix(in lab, red, red)) { .earn-gain-toggle { background: color-mix(in srgb, var(--pnl-profit) 12%, transparent); } } .earn-gain-toggle { border: 1px solid var(--pnl-profit); } @supports (color: color-mix(in lab, red, red)) { .earn-gain-toggle { border: 1px solid color-mix(in srgb, var(--pnl-profit) 25%, transparent); } } .earn-gain-toggle { font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 999px; padding: 0 6px; font-family: inherit; transition: all .15s; } .earn-gain-toggle--annualized { color: #3b82f6; background: #3b82f61f; border-color: #3b82f640; } @supports (color: color-mix(in lab, red, red)) { .earn-row:hover { background-color: color-mix(in srgb, var(--reke-color-primary) 5%, var(--reke-color-bg-section)); } } .earn-row:last-child { border-bottom: none; } .earn-gain-pill { color: var(--pnl-profit); background: var(--color-app-profit-bg); border: 1px solid var(--pnl-profit-border); font-variant-numeric: tabular-nums; border-radius: 999px; padding: 3px 10px; font-size: 13.5px; font-weight: 500; display: inline-block; } .earn-value { color: var(--reke-color-text-muted); font-variant-numeric: tabular-nums; font-size: 14px; } .earn-total { text-align: right; color: var(--reke-color-text); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; } .earn-row-delete { width: 24px; height: 24px; color: var(--reke-color-text-muted); cursor: pointer; background: none; border: 1px solid #0000; border-radius: 4px; flex-shrink: 0; justify-content: center; align-items: center; padding: 0; display: flex; } @media (min-width: 640px) { .earn-row-delete { opacity: 0; border-radius: 6px; width: 36px; height: 36px; } .earn-row:hover .earn-row-delete { opacity: 1; } } .earn-row-delete:hover { color: var(--pnl-loss); background: var(--pnl-loss); } @supports (color: color-mix(in lab, red, red)) { .earn-row-delete:hover { background: color-mix(in srgb, var(--pnl-loss) 12%, transparent); } } .earn-row-delete:hover { border-color: var(--pnl-loss); } @supports (color: color-mix(in lab, red, red)) { .earn-row-delete:hover { border-color: color-mix(in srgb, var(--pnl-loss) 30%, transparent); } } .earn-header-row { border-bottom: 1px solid var(--reke-color-border); gap: 6px; padding: 8px 12px; display: flex; } .earn-header-cell { color: var(--reke-color-text-muted); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; flex: 1; font-size: 11px; font-weight: 600; } @media (min-width: 640px) { .earn-header-row { grid-template-columns: 1.1fr 1fr .8fr .7fr 1.2fr 1fr 36px; gap: 14px; padding: 12px 20px; display: grid; } .earn-header-cell { flex: initial; } } .earn-header-cell { color: var(--reke-color-text-muted); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; font-size: 11px; font-weight: 600; } .earn-header-cell--right { text-align: right; } .earn-add-btn { border: 1px solid var(--reke-color-border); color: var(--reke-color-text-muted); cursor: pointer; background: none; border-radius: 4px; align-items: center; gap: 7px; padding: 10px 14px; font-family: inherit; font-size: 13px; display: flex; } .earn-add-btn:hover { color: var(--reke-color-text); border-color: var(--reke-color-border-hover); background: var(--reke-color-surface); } .earn-add-token-btn { border: 1px dashed var(--reke-color-border); color: #8a8a8a; cursor: pointer; background: none; border-radius: 4px; justify-content: center; align-items: center; gap: 7px; padding: 12px; font-family: inherit; font-size: 13.5px; display: flex; } .earn-add-token-btn:hover { color: var(--reke-color-text); border-color: var(--reke-color-border-hover); } .earn-save-btn { border: 1px solid var(--reke-color-border); background: var(--reke-color-bg-section); color: var(--reke-color-text); cursor: pointer; border-radius: 4px; flex-shrink: 0; align-items: center; gap: 7px; padding: 8px 14px; font-family: inherit; font-size: 13.5px; display: flex; } .earn-save-btn:hover:not(:disabled) { border-color: var(--reke-color-primary); } @supports (color: color-mix(in lab, red, red)) { .earn-save-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--reke-color-primary) 40%, var(--reke-color-border)); } } .earn-save-btn:hover:not(:disabled) { color: var(--reke-color-primary); } .earn-save-btn:disabled { opacity: .5; cursor: default; } .earn-save-btn--saved { background: var(--color-app-profit-bg); border-color: var(--pnl-profit-border); color: var(--reke-color-primary); opacity: 1; } .hero-section { flex-direction: column; gap: 32px; padding: 32px 16px 24px; display: flex; } .hero-content { flex-direction: column; gap: 12px; display: flex; } .hero-breadcrumb { color: var(--reke-color-text-ghost); letter-spacing: .02em; font-size: 11px; } .hero-title { letter-spacing: -.035em; color: var(--reke-color-text); margin: 0; font-size: 32px; font-weight: 600; line-height: 1.1; } .hero-title-accent { color: var(--reke-color-primary); } .hero-description { color: var(--reke-color-text-ghost); max-width: 100%; margin: 0; font-size: 13px; line-height: 1.6; } .hero-meta { color: var(--reke-color-text-ghost); flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; display: flex; } .hero-version { background: var(--pnl-profit-bg); color: var(--reke-color-primary); border: 1px solid var(--pnl-profit-border); border-radius: 9999px; padding: 3px 9px; font-size: 10px; font-weight: 500; } .hero-dot { color: var(--reke-color-text-muted); font-size: 11px; } .hero-tag { color: var(--reke-color-text-ghost); font-size: 11px; } .hero-status { align-items: center; gap: 6px; display: inline-flex; } .hero-status-dot { background: var(--reke-color-primary); width: 6px; height: 6px; box-shadow: 0 0 8px var(--reke-color-primary); border-radius: 50%; } @media (min-width: 768px) { .hero-section { grid-template-columns: 1fr 520px; align-items: start; gap: 56px; padding: 52px 64px 40px; display: grid; } .hero-content { gap: 16px; } .hero-breadcrumb { font-size: 12px; } .hero-title { font-size: 52px; line-height: 1.02; } .hero-description { max-width: 460px; font-size: 14.5px; line-height: 1.75; } .hero-meta { gap: 14px; margin-top: 10px; font-size: 12px; } .hero-version { padding: 4px 11px; font-size: 11px; } .hero-dot, .hero-tag, .hero-status { font-size: 12px; } .hero-status-dot { width: 7px; height: 7px; } } .nav { border-bottom: 1px solid var(--reke-color-border-subtle); justify-content: space-between; align-items: center; width: 100%; height: 56px; padding: 0 16px; display: flex; } .nav-logo { align-items: center; gap: 6px; display: flex; } .nav-logo-tilde { color: var(--reke-color-primary); font-size: 16px; font-weight: 500; } .nav-logo-text { color: var(--reke-color-text); font-size: 16px; font-weight: 500; } .nav-logo-cursor { background: var(--reke-color-primary); width: 8px; height: 16px; display: inline-block; } .nav-links { gap: 8px; display: none; } .nav-link { color: var(--reke-color-text-ghost); background: none; border-radius: 4px; padding: 8px 12px; font-size: 12px; font-weight: normal; } .nav-link--active { color: var(--reke-color-text); background: var(--reke-color-surface); border-radius: 4px; padding: 8px 12px; font-size: 12px; font-weight: normal; } @media (min-width: 768px) { .nav { height: 72px; padding: 0 64px; } .nav-logo { gap: 8px; } .nav-logo-tilde, .nav-logo-text { font-size: 18px; } .nav-logo-cursor { width: 10px; height: 20px; } .nav-links { display: flex; } .nav-link, .nav-link--active { padding: 10px 16px; font-size: 13px; } } .footer { border-top: 1px solid var(--reke-color-border-subtle); text-align: center; flex-direction: column; justify-content: center; align-items: center; gap: 16px; margin-top: auto; padding: 24px 16px; display: flex; } .footer-left { align-items: center; gap: 16px; display: flex; } .footer-brand { align-items: center; gap: 6px; display: flex; } .footer-tilde { color: var(--reke-color-primary); font-size: 12px; font-weight: 500; } .footer-brand-name { color: var(--reke-color-text-disabled); font-size: 12px; font-weight: 500; } .footer-copyright { color: var(--reke-color-text-disabled); font-size: 10px; } .footer-right { align-items: center; gap: 16px; display: flex; } .footer-link { color: var(--reke-color-text-disabled); font-size: 10px; } @media (min-width: 768px) { .footer { text-align: left; flex-direction: row; justify-content: space-between; padding: 32px 64px; } .footer-left { gap: 24px; } .footer-brand { gap: 8px; } .footer-tilde, .footer-brand-name { font-size: 13px; } .footer-copyright { font-size: 11px; } .footer-right { gap: 24px; } .footer-link { font-size: 11px; } } .stat-card { border: 1px solid var(--reke-color-border); background: linear-gradient(180deg, var(--reke-color-surface), var(--reke-color-surface)); border-radius: 14px; flex-direction: column; flex: 1; gap: 14px; padding: 20px; display: flex; } @supports (color: color-mix(in lab, red, red)) { .stat-card { background: linear-gradient(180deg, var(--reke-color-surface), color-mix(in srgb, var(--reke-color-surface) 94%, #000)); } } .stat-card { box-shadow: inset 0 1px 0 #ffffff0f, 0 14px 30px -20px var(--pnl-shadow); } @supports (color: color-mix(in lab, red, red)) { .stat-card { box-shadow: inset 0 1px 0 #ffffff0f, 0 14px 30px -20px color-mix(in srgb, var(--pnl-shadow) 55%, transparent); } } .stat-card { transition: transform .25s, box-shadow .25s, border-color .25s; animation: .5s both cardRise; } .stat-card:hover { border-color: var(--reke-color-border-hover); box-shadow: inset 0 1px 0 #ffffff14, 0 22px 44px -22px var(--pnl-shadow); transform: translateY(-2px); } @supports (color: color-mix(in lab, red, red)) { .stat-card:hover { box-shadow: inset 0 1px 0 #ffffff14, 0 22px 44px -22px color-mix(in srgb, var(--pnl-shadow) 65%, transparent); } } .stat-card-header { justify-content: space-between; align-items: center; gap: 10px; display: flex; } .stat-card-label { color: var(--reke-color-text-label); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: normal; } .stat-card-pill { white-space: nowrap; border-radius: 9999px; padding: 2px 8px; font-size: 10px; font-weight: 500; } .stat-card-pill--profit { background: var(--pnl-profit-bg); color: var(--pnl-profit); border: 1px solid var(--pnl-profit-border); } .stat-card-pill--loss { background: var(--pnl-loss-bg); color: var(--pnl-loss); border: 1px solid var(--pnl-loss-border); } .stat-card-pill--neutral { background: var(--reke-color-surface-hover); color: var(--reke-color-text-muted); border: 1px solid var(--reke-color-border); } .stat-card-value { color: var(--reke-color-text); letter-spacing: -.02em; font-size: 28px; font-weight: 600; line-height: 1; } .stat-card-detail { color: var(--reke-color-text-ghost); font-size: 11px; font-weight: 500; } @media (min-width: 768px) { .stat-card { border-radius: 18px; gap: 18px; padding: 26px; } .stat-card:hover { transform: translateY(-3px); } .stat-card-header { gap: 12px; } .stat-card-label { font-size: 11px; } .stat-card-pill { padding: 3px 10px; font-size: 11px; } .stat-card-value { font-size: 38px; } .stat-card-detail { font-size: 12px; } } .tab-nav { flex-wrap: wrap; align-items: center; gap: 4px; display: flex; } .tab-nav-btn { border: 1px solid var(--reke-color-border); color: var(--reke-color-text-muted); cursor: pointer; background: none; border-radius: 6px; padding: 5px 12px; font-size: 11px; font-weight: 500; transition: all .15s; } .tab-nav-btn--active { border: 1px solid var(--reke-color-primary); background: var(--color-app-accent-tint); color: var(--reke-color-primary); cursor: pointer; border-radius: 6px; padding: 5px 12px; font-size: 11px; font-weight: 500; transition: all .15s; } @media (min-width: 768px) { .tab-nav { gap: 6px; } .tab-nav-btn, .tab-nav-btn--active { padding: 6px 16px; font-size: 12px; } } .pnl-table-wrapper { background: var(--reke-color-surface); border: 1px solid var(--reke-color-border); width: 100%; box-shadow: 0 1px 2px #0000000a, 0 8px 28px var(--pnl-shadow); border-radius: 10px; overflow: hidden; } @supports (color: color-mix(in lab, red, red)) { .pnl-table-wrapper { box-shadow: 0 1px 2px #0000000a, 0 8px 28px color-mix(in srgb, var(--pnl-shadow) 18%, transparent); } } .pnl-table-toolbar { border-bottom: 1px solid var(--reke-color-border); background: var(--reke-color-bg-section); flex-direction: column; gap: 10px; padding: 12px 16px; display: flex; } @media (min-width: 768px) { .pnl-table-wrapper { border-radius: 14px; } .pnl-table-toolbar { gap: 12px; padding: 16px 22px; } } .pnl-filter-btn { color: var(--reke-color-text); border: 1px solid var(--reke-color-border-hover); background: var(--reke-color-surface); cursor: pointer; font-size: 12px; font-weight: 500; font-family: var(--reke-font-mono); border-radius: 10px; align-items: center; gap: 8px; padding: 8px 14px; transition: all .15s; display: inline-flex; } .pnl-filter-btn:hover { border-color: var(--reke-color-primary); } .pnl-filter-btn-count { background: var(--reke-color-primary); min-width: 16px; height: 16px; color: var(--reke-color-on-primary); border-radius: 9999px; justify-content: center; align-items: center; padding: 0 4px; font-size: 10px; font-weight: 600; display: inline-flex; } .pnl-table-toolbar-row { align-items: center; gap: 10px; display: flex; } .pnl-table-toolbar-icon { color: var(--reke-color-primary); font-size: 16px; } .pnl-table-toolbar-title { color: var(--reke-color-text); font-size: 13px; font-weight: 500; } .pnl-table-toolbar-actions { align-items: center; gap: 10px; margin-left: auto; display: flex; } .pnl-table-toolbar-extra { justify-content: flex-end; align-items: center; gap: 6px; display: flex; } .pnl-table-toolbar-filters { flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; display: flex; } .pnl-table-toolbar-exchanges { align-items: center; gap: 6px; display: flex; } .pnl-table-empty { text-align: center; color: var(--reke-color-text-disabled); min-height: 200px; padding: 24px 16px; font-size: 11px; } .pnl-table-wrap { -webkit-overflow-scrolling: touch; min-height: 200px; overflow-x: auto; } .pnl-table-footer { background: var(--reke-color-surface-elevated); justify-content: space-between; align-items: center; padding: 10px 16px; display: flex; } .pnl-table-footer-text { color: var(--reke-color-text-disabled); font-size: 10px; } @media (min-width: 768px) { .pnl-table-empty { min-height: 300px; padding: 40px 20px; font-size: 12px; } .pnl-table-wrap { min-height: 300px; } .pnl-table-footer { padding: 14px 20px; } .pnl-table-footer-text { font-size: 11px; } } @keyframes viewFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @keyframes cardRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .stat-card, .upload-card { transition: none; animation: none; } } .spot-tab-separator { color: var(--reke-color-border); font-size: 10px; } .spot-tab-section-label { color: var(--reke-color-primary); letter-spacing: 2px; font-size: 10px; font-weight: 500; } @media (min-width: 768px) { .spot-tab-separator { font-size: 11px; } .spot-tab-view-btn { gap: 5px; padding: 3px 10px; font-size: 10px; } .spot-tab-view-delete { font-size: 8px; } .spot-tab-save-input { width: 90px; padding: 3px 8px; font-size: 10px; } .spot-tab-save-btn { padding: 3px 8px; font-size: 9px; } .spot-tab-section-label { font-size: 11px; } } .margin-ops-icon { color: var(--reke-color-warning); font-size: 14px; } .margin-ops-type-filter { border: 1px solid var(--reke-color-border-subtle); color: var(--reke-color-text-muted); cursor: pointer; background: none; border-radius: 4px; padding: 2px 6px; font-size: 8px; font-weight: 500; } .margin-ops-type-filter--active { border-color: var(--reke-color-warning); background: var(--color-app-warning-tint); color: var(--reke-color-warning); } @media (min-width: 768px) { .margin-ops-icon { font-size: 16px; } .margin-ops-type-filter { padding: 3px 8px; font-size: 9px; } } .trades-table-icon { color: var(--reke-color-primary); font-size: 14px; } @media (min-width: 768px) { .trades-table-icon { font-size: 16px; } } .coin-grid { background: var(--reke-color-surface); border: 1px solid var(--reke-color-border); border-radius: 8px; width: 100%; overflow: hidden; } .coin-grid--accent { --coin-accent: var(--color-app-accent); } .coin-grid--purple { --coin-accent: var(--reke-color-purple); } .coin-grid-header { border-bottom: 1px solid var(--reke-color-border); justify-content: space-between; align-items: center; padding: 12px 16px; display: flex; } .coin-grid-header-left { align-items: center; gap: 10px; display: flex; } .coin-grid-header-icon { color: var(--coin-accent); font-size: 14px; font-weight: 600; } .coin-grid-header-title { color: var(--reke-color-text); font-size: 12px; font-weight: 500; } .coin-grid-header-badge { color: var(--coin-accent); background: var(--coin-accent); border-radius: 4px; padding: 2px 6px; font-size: 9px; font-weight: 500; } @supports (color: color-mix(in lab, red, red)) { .coin-grid-header-badge { background: color-mix(in srgb, var(--coin-accent) 9%, transparent); } } .coin-grid-header-right { align-items: center; gap: 10px; display: flex; } .coin-grid-header-label { color: var(--reke-color-text-muted); font-size: 10px; } .coin-grid-header-value { font-size: 12px; font-weight: 600; } .coin-grid-header-value--accent { color: var(--coin-accent); } .coin-grid-header-value--muted { color: var(--reke-color-text-disabled); } .coin-grid-grid { background: var(--reke-color-border); grid-template-columns: 1fr; gap: 1px; display: grid; } .coin-grid-card { background: var(--reke-color-surface); flex-direction: column; gap: 6px; padding: 12px 14px; display: flex; position: relative; overflow: hidden; } .coin-grid-value-bar { opacity: .4; background: var(--coin-accent); width: 0; height: 2px; position: absolute; bottom: 0; left: 0; } .coin-grid-value-bar--10 { width: 10%; } .coin-grid-value-bar--20 { width: 20%; } .coin-grid-value-bar--30 { width: 30%; } .coin-grid-value-bar--40 { width: 40%; } .coin-grid-value-bar--50 { width: 50%; } .coin-grid-value-bar--60 { width: 60%; } .coin-grid-value-bar--70 { width: 70%; } .coin-grid-value-bar--80 { width: 80%; } .coin-grid-value-bar--90 { width: 90%; } .coin-grid-value-bar--100 { width: 100%; } .coin-grid-card-row { justify-content: space-between; align-items: center; display: flex; } .coin-grid-coin-name { color: var(--reke-color-text); font-size: 12px; font-weight: 600; } .coin-grid-coin-ops { color: var(--reke-color-text-disabled); font-size: 9px; } .coin-grid-amount-row { align-items: baseline; gap: 6px; display: flex; } .coin-grid-amount { color: var(--reke-color-text); font-size: 11px; } .coin-grid-price { color: var(--reke-color-text-muted); font-size: 9px; } .coin-grid-no-price { color: var(--reke-color-text-disabled); font-size: 11px; font-weight: 500; } .coin-grid-value-text { color: var(--coin-accent); font-size: 11px; font-weight: 500; } .coin-grid-value-pct { color: var(--reke-color-text-muted); font-size: 8px; } .coin-grid-footer { background: var(--reke-color-surface-elevated); justify-content: space-between; align-items: center; padding: 10px 16px; display: flex; } .coin-grid-footer-text { color: var(--reke-color-text-disabled); font-size: 10px; } @media (min-width: 768px) { .coin-grid { border-radius: 4px; } .coin-grid-header { padding: 16px 20px; } .coin-grid-header-left { gap: 12px; } .coin-grid-header-icon { font-size: 16px; } .coin-grid-header-title { font-size: 13px; } .coin-grid-header-badge { padding: 2px 8px; font-size: 10px; } .coin-grid-header-right { gap: 12px; } .coin-grid-header-label { font-size: 11px; } .coin-grid-header-value { font-size: 14px; } .coin-grid-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .coin-grid-card { gap: 8px; padding: 14px 16px; } .coin-grid-coin-name { font-size: 13px; } .coin-grid-coin-ops { font-size: 10px; } .coin-grid-amount { font-size: 12px; } .coin-grid-price { font-size: 10px; } .coin-grid-no-price, .coin-grid-value-text { font-size: 12px; } .coin-grid-value-pct { font-size: 9px; } .coin-grid-footer { padding: 12px 20px; } .coin-grid-footer-text { font-size: 11px; } } @keyframes auroraSlide { 0% { transform: translateX(-25%) scaleX(1); } 50% { transform: translateX(25%) scaleX(1.2); } 100% { transform: translateX(-25%) scaleX(1); } } @keyframes auroraPulse { 0%, 100% { opacity: .8; transform: translateX(20%) scaleX(1.1); } 50% { opacity: 1; transform: translateX(-20%) scaleX(1); } } .upload-card { background: radial-gradient(135% 95% at 50% 135%, var(--reke-color-primary) 0%, transparent 56%), linear-gradient(180deg, var(--reke-color-surface-elevated), var(--reke-color-bg)); } @supports (color: color-mix(in lab, red, red)) { .upload-card { background: radial-gradient(135% 95% at 50% 135%, color-mix(in srgb, var(--reke-color-primary) 15%, transparent) 0%, transparent 56%), linear-gradient(180deg, color-mix(in srgb, var(--reke-color-surface-elevated) 90%, var(--reke-color-primary) 3%), var(--reke-color-bg)); } } .upload-card { border: 1px solid var(--reke-color-border); border-radius: 16px; } @supports (color: color-mix(in lab, red, red)) { .upload-card { border: 1px solid color-mix(in srgb, var(--reke-color-border) 80%, var(--reke-color-primary) 8%); } } .upload-card { box-shadow: inset 0 1px 0 #ffffff17, 0 26px 50px -26px var(--pnl-shadow), 0 0 48px -14px var(--reke-color-primary); } @supports (color: color-mix(in lab, red, red)) { .upload-card { box-shadow: inset 0 1px 0 #ffffff17, 0 26px 50px -26px color-mix(in srgb, var(--pnl-shadow) 62%, transparent), 0 0 48px -14px color-mix(in srgb, var(--reke-color-primary) 26%, transparent); } } .upload-card { --reke-radius: 10px; --reke-color-input-bg: linear-gradient(180deg, var(--reke-color-surface), var(--reke-color-surface)); flex-shrink: 0; width: 100%; position: relative; } @supports (color: color-mix(in lab, red, red)) { .upload-card { --reke-color-input-bg: linear-gradient(180deg, var(--reke-color-surface), color-mix(in srgb, var(--reke-color-surface) 92%, #000)); } } .upload-card { --reke-shadow-input: inset 0 1px 0 #ffffff0d; transition: transform .25s, box-shadow .25s, border-color .25s; animation: .5s both cardRise; } .upload-card:hover { border-color: var(--reke-color-border); transform: translateY(-2px); } @supports (color: color-mix(in lab, red, red)) { .upload-card:hover { border-color: color-mix(in srgb, var(--reke-color-border) 60%, var(--reke-color-primary) 22%); } } .upload-card:hover { box-shadow: inset 0 1px 0 #ffffff1a, 0 32px 56px -26px var(--pnl-shadow), 0 0 60px -12px var(--reke-color-primary); } @supports (color: color-mix(in lab, red, red)) { .upload-card:hover { box-shadow: inset 0 1px 0 #ffffff1a, 0 32px 56px -26px color-mix(in srgb, var(--pnl-shadow) 66%, transparent), 0 0 60px -12px color-mix(in srgb, var(--reke-color-primary) 32%, transparent); } } .upload-card-glow-wrapper { border-radius: inherit; pointer-events: none; position: absolute; inset: 0; overflow: hidden; } .upload-card-glow-green { background: radial-gradient(ellipse 50% 70% at 50% 100%, var(--reke-color-primary), transparent 60%); width: 130%; height: 90%; position: absolute; bottom: -30%; left: -15%; } @supports (color: color-mix(in lab, red, red)) { .upload-card-glow-green { background: radial-gradient(ellipse 50% 70% at 50% 100%, color-mix(in srgb, var(--reke-color-primary) 18%, transparent), transparent 60%); } } .upload-card-glow-blue { display: none; } .upload-card-content { z-index: 1; flex-direction: column; gap: 16px; padding: 20px; display: flex; position: relative; } .upload-card-top-row { justify-content: space-between; align-items: center; display: flex; } .upload-card-top-row-left { align-items: center; gap: 8px; display: flex; } .upload-card-icon-box { background: linear-gradient(180deg, #fff, var(--reke-color-primary)); width: 30px; height: 30px; } @supports (color: color-mix(in lab, red, red)) { .upload-card-icon-box { background: linear-gradient(180deg, color-mix(in srgb, #fff 20%, var(--reke-color-primary)), var(--reke-color-primary)); } } .upload-card-icon-box { color: var(--reke-color-on-primary); box-shadow: 0 5px 14px -4px var(--reke-color-primary), inset 0 1px 0 #ffffff73; border-radius: 9px; justify-content: center; align-items: center; font-size: 14px; display: flex; } @supports (color: color-mix(in lab, red, red)) { .upload-card-icon-box { box-shadow: 0 5px 14px -4px color-mix(in srgb, var(--reke-color-primary) 60%, transparent), inset 0 1px 0 #ffffff73; } } .upload-card-title { letter-spacing: -.01em; color: var(--reke-color-text); font-size: 14px; font-weight: 600; } .upload-card-badges { flex-wrap: wrap; gap: 6px; display: flex; } .upload-card-bottom-row { flex-direction: column; align-items: stretch; gap: 10px; display: flex; } .upload-card-field-group { flex-direction: column; flex: 1; gap: 4px; display: flex; } .upload-card-field-label { letter-spacing: .06em; text-transform: uppercase; color: var(--reke-color-text-label); font-size: 10px; font-weight: 500; } .upload-card-actions { flex-direction: column; gap: 8px; display: flex; } @media (min-width: 768px) { .upload-card { --reke-radius: 12px; border-radius: 24px; } .upload-card-content { gap: 20px; padding: 28px 32px; } .upload-card-icon-box { border-radius: 11px; width: 34px; height: 34px; font-size: 16px; } .upload-card-title { font-size: 16px; } .upload-card-bottom-row { flex-direction: row; align-items: flex-end; } .upload-card-field-label { font-size: 11px; } } .tax-tab { flex-direction: column; gap: 12px; display: flex; } .tax-tab-controls { flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; display: flex; } .tax-tab-empty { text-align: center; color: var(--reke-color-text-muted); background: var(--reke-color-surface); border: 1px solid var(--reke-color-border); border-radius: 8px; padding: 32px 16px; font-size: 12px; line-height: 1.6; } .tax-controls { flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; display: flex; } .tax-controls-field { flex-direction: column; gap: 4px; display: flex; } .tax-controls-label { letter-spacing: 2px; color: var(--reke-color-text-disabled); font-size: 8px; font-weight: 600; } .tax-currency-toggle { border: 1px solid var(--reke-color-border-subtle); border-radius: 4px; align-items: center; display: inline-flex; overflow: hidden; } .tax-currency-btn { color: var(--reke-color-text-muted); cursor: pointer; background: none; border: none; padding: 3px 10px; font-size: 10px; font-weight: 500; transition: all .15s; } .tax-currency-btn--active { background: var(--color-app-accent-tint); color: var(--reke-color-primary); } .tax-hero { background: linear-gradient(180deg, #ffffff10 0%, #ffffff05 100%), var(--reke-color-surface); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); border: .5px solid #ffffff15; border-radius: 8px; margin-bottom: 16px; padding: 16px; box-shadow: 0 12px 60px -2px #00000040; } .tax-hero-grid { grid-template-columns: 1fr; gap: 12px; display: grid; } .tax-hero-primary { font-size: 24px; font-weight: 600; } .tax-hero-positive { color: var(--reke-color-primary); } .tax-hero-negative { color: var(--reke-color-danger); } .tax-hero-neutral { color: var(--reke-color-text); } .tax-hero-label { color: var(--reke-color-text-muted); letter-spacing: 1px; font-size: 10px; font-weight: normal; } @media (min-width: 768px) { .tax-tab, .tax-tab-controls { gap: 16px; } .tax-tab-empty { padding: 48px 24px; font-size: 13px; } .tax-controls { gap: 16px; margin-bottom: 20px; } .tax-controls-label { font-size: 9px; } .tax-currency-btn { padding: 4px 12px; font-size: 11px; } .tax-hero { margin-bottom: 24px; padding: 24px; } .tax-hero-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } .tax-hero-primary { font-size: 32px; } .tax-hero-label { font-size: 11px; } } .tax-table-wrapper { background: var(--reke-color-surface); border: 1px solid var(--reke-color-border); border-radius: 8px; width: 100%; overflow: hidden; } .tax-warnings-header { align-items: center; gap: 6px; margin-bottom: 10px; display: flex; } .tax-warnings-title { color: var(--reke-color-warning); letter-spacing: 1px; font-size: 11px; font-weight: 600; } .tax-warning-item { border-bottom: 1px solid var(--reke-color-border-subtle); flex-direction: column; gap: 3px; padding: 6px 0; display: flex; } .tax-warning-item:last-child { border-bottom: none; } .tax-warning-meta { align-items: center; gap: 6px; font-size: 9px; display: flex; } .tax-warning-coin { color: var(--reke-color-text); font-weight: 600; } .tax-warning-date { color: var(--reke-color-text-disabled); } .tax-warning-message { color: var(--reke-color-text-muted); font-size: 10px; } .tax-hero-header { justify-content: space-between; align-items: center; margin-bottom: 12px; display: flex; } .tax-hero-title { letter-spacing: 1px; color: var(--reke-color-text); font-size: 11px; font-weight: 600; } .tax-hero-stat { background: var(--reke-color-surface); border: 1px solid var(--reke-color-border-subtle); border-radius: 4px; flex-direction: column; gap: 3px; padding: 10px; display: flex; } .tax-hero-stat--primary { background: linear-gradient(135deg, var(--reke-color-surface) 0%, var(--reke-color-bg) 100%); border-color: var(--reke-color-border); } .tax-hero-value { color: var(--reke-color-text); font-size: 14px; font-weight: 500; font-family: var(--reke-font-mono); } .tax-hero-skeleton { background: linear-gradient(90deg, var(--reke-color-surface) 25%, var(--reke-color-border) 50%, var(--reke-color-surface) 75%); background-size: 200% 100%; border-radius: 4px; height: 50px; animation: 1.5s infinite tax-skeleton-shimmer; } @keyframes tax-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .tax-table-header { background: var(--reke-color-surface); border-bottom: 1px solid var(--reke-color-border); justify-content: space-between; align-items: center; padding: 10px 14px; display: flex; } .tax-table-title { letter-spacing: 1px; color: var(--reke-color-text); font-size: 11px; font-weight: 600; } .tax-table-count { color: var(--reke-color-text-muted); font-size: 10px; } @media (min-width: 768px) { .tax-table-wrapper { border-radius: 4px; } .tax-warnings-header { gap: 8px; margin-bottom: 12px; } .tax-warnings-title { font-size: 12px; } .tax-warning-item { gap: 4px; padding: 8px 0; } .tax-warning-meta { gap: 8px; font-size: 10px; } .tax-warning-message { font-size: 11px; } .tax-hero-header { margin-bottom: 16px; } .tax-hero-title { font-size: 12px; } .tax-hero-stat { gap: 4px; padding: 12px; } .tax-hero-value { font-size: 16px; } .tax-hero-skeleton { height: 60px; } .tax-table-header { padding: 12px 16px; } .tax-table-title { font-size: 12px; } .tax-table-count { font-size: 11px; } } .pnl-track { --reke-color-violet: #a855f7; --reke-color-purple: #8b5cf6; --reke-color-cyan: #06b6d4; --reke-color-blue: #3b82f6; } *, :before, :after { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--reke-color-bg); color: var(--reke-color-text); font-family: var(--reke-font-mono); -webkit-font-smoothing: antialiased; line-height: 1.5; overflow-x: hidden; } #root { flex-direction: column; min-height: 100dvh; display: flex; } a { color: inherit; text-decoration: none; } input, select, button { font-family: var(--reke-font-mono); } .free-user-banner { background: var(--reke-color-warning-tint); border-bottom: 1px solid var(--reke-color-warning); color: var(--reke-color-warning); text-align: center; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; padding: .5rem 1rem; font-size: .8125rem; display: flex; } .free-user-banner-icon { flex-shrink: 0; font-size: 1.125rem; } .free-user-banner-text { margin: 0; line-height: 1.4; } .free-user-banner-text strong { font-weight: 600; } @media (min-width: 768px) { .free-user-banner { gap: .75rem; padding: .75rem 1.5rem; font-size: .875rem; } .free-user-banner-icon { font-size: 1.25rem; } } .toast-container { z-index: 9999; flex-direction: column; gap: .375rem; display: flex; position: fixed; top: .5rem; left: .5rem; right: .5rem; } .toast-wrapper { transition: opacity .3s, transform .3s; } .toast-hiding { opacity: 0; transform: translateX(100%); } @media (min-width: 768px) { .toast-container { gap: .5rem; top: 1rem; left: auto; right: 1rem; } } .upload-card-eye-btn { border: 1px solid var(--reke-color-border); border-radius: var(--reke-radius); color: var(--reke-color-text-muted); cursor: pointer; background: none; padding: .1875rem .375rem; font-size: .875rem; transition: color .2s, border-color .2s; } .upload-card-eye-btn:hover:not(:disabled) { color: var(--reke-color-text); border-color: var(--reke-color-text-muted); } .upload-card-eye-btn:disabled { opacity: .5; cursor: not-allowed; } @media (min-width: 768px) { .upload-card-eye-btn { padding: .25rem .5rem; font-size: 1rem; } } .drawer-content { padding: .75rem 0; } .drawer-description { color: var(--reke-color-text-muted); margin-bottom: 1rem; font-size: .8125rem; } .drawer-filters { flex-direction: column; gap: .75rem; display: flex; } .drawer-field { flex-direction: column; gap: .1875rem; display: flex; } .drawer-field-label { color: var(--reke-color-text-muted); text-transform: uppercase; font-size: .6875rem; } .drawer-footer, .confirm-modal-footer { justify-content: flex-end; gap: .375rem; display: flex; } .confirm-modal-content { color: var(--reke-color-text-muted); padding: .75rem 0; } @media (min-width: 768px) { .drawer-content { padding: 1rem 0; } .drawer-description { margin-bottom: 1.5rem; font-size: .875rem; } .drawer-filters { gap: 1rem; } .drawer-field { gap: .25rem; } .drawer-field-label { font-size: .75rem; } .drawer-footer, .confirm-modal-footer { gap: .5rem; } .confirm-modal-content { padding: 1rem 0; } } .row-actions-menu { z-index: 1000; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); background: linear-gradient(#ffffff10 0%, #ffffff05 100%), #1a1a1a; border: .5px solid #ffffff15; border-radius: 10px; flex-direction: column; gap: .125rem; min-width: 180px; padding: .375rem; display: flex; position: fixed; transform: translateX(-100%); box-shadow: 0 12px 60px -2px #00000040; } .row-actions-menu-label { text-transform: uppercase; letter-spacing: .04em; color: var(--reke-color-text-muted); padding: .375rem .5rem .25rem; font-size: .625rem; } .row-actions-menu-item { width: 100%; color: var(--reke-color-text); text-align: left; cursor: pointer; background: none; border: none; border-radius: 6px; align-items: center; gap: .625rem; padding: .5rem; font-size: .8125rem; transition: background .15s; display: flex; } .row-actions-menu-item:hover:not(:disabled), .row-actions-menu-item:focus-visible:not(:disabled) { background: var(--reke-color-text); } @supports (color: color-mix(in lab, red, red)) { .row-actions-menu-item:hover:not(:disabled), .row-actions-menu-item:focus-visible:not(:disabled) { background: color-mix(in srgb, var(--reke-color-text) 8%, transparent); } } .row-actions-menu-item:hover:not(:disabled), .row-actions-menu-item:focus-visible:not(:disabled) { outline: none; } .row-actions-menu-item:disabled { color: var(--reke-color-text-muted); cursor: not-allowed; opacity: .6; } .row-actions-menu-item svg { color: var(--color-app-accent); flex-shrink: 0; } .row-actions-menu-item:disabled svg { color: var(--reke-color-text-muted); } .alert-drawer { flex-direction: column; display: flex; } .alert-drawer-header { border-bottom: 1px solid var(--reke-color-border); justify-content: space-between; align-items: flex-start; gap: .75rem; margin: -20px -20px 1.25rem; padding: 1.375rem 1.5rem 1.125rem; display: flex; } .alert-drawer-heading { align-items: center; gap: .6875rem; display: flex; } .alert-drawer-badge { width: 34px; height: 34px; color: var(--reke-color-warning); background: var(--reke-color-warning); border-radius: 9px; flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; } @supports (color: color-mix(in lab, red, red)) { .alert-drawer-badge { background: color-mix(in srgb, var(--reke-color-warning) 15%, transparent); } } .alert-drawer-badge { border: 1px solid var(--reke-color-warning); } @supports (color: color-mix(in lab, red, red)) { .alert-drawer-badge { border: 1px solid color-mix(in srgb, var(--reke-color-warning) 34%, transparent); } } .alert-drawer-title { color: var(--reke-color-text); font-size: .875rem; font-weight: 600; } .alert-drawer-sub { color: var(--reke-color-text-ghost); margin-top: 2px; font-size: .71875rem; } .alert-drawer-sub span { color: var(--reke-color-text-label); } .alert-drawer-close { border: 1px solid var(--reke-color-border); width: 30px; height: 30px; color: var(--reke-color-text-label); cursor: pointer; background: none; border-radius: 8px; flex-shrink: 0; justify-content: center; align-items: center; transition: background .12s, color .12s; display: inline-flex; } .alert-drawer-close:hover { background: var(--reke-color-surface-hover); color: var(--reke-color-text); } .token-drawer-badge { color: var(--reke-color-primary); background: var(--reke-color-primary); } @supports (color: color-mix(in lab, red, red)) { .token-drawer-badge { background: color-mix(in srgb, var(--reke-color-primary) 15%, transparent); } } .token-drawer-badge { border-color: var(--reke-color-primary); } @supports (color: color-mix(in lab, red, red)) { .token-drawer-badge { border-color: color-mix(in srgb, var(--reke-color-primary) 34%, transparent); } } .token-drawer-chips { flex-wrap: wrap; gap: .5rem; max-height: 55vh; display: flex; overflow-y: auto; } .alert-drawer-body { flex-direction: column; gap: 1rem; display: flex; } .alert-threshold { border: 1px solid var(--reke-color-border); background: none; border-radius: 12px; padding: .9375rem 1rem; transition: border-color .15s, background .15s; } .alert-threshold--profit reke-toggle { --reke-color-primary: var(--color-app-profit); } .alert-threshold--loss reke-toggle { --reke-color-primary: var(--color-app-loss); } .alert-threshold--profit[data-on="true"] { border-color: var(--color-app-profit); } @supports (color: color-mix(in lab, red, red)) { .alert-threshold--profit[data-on="true"] { border-color: color-mix(in srgb, var(--color-app-profit) 40%, transparent); } } .alert-threshold--profit[data-on="true"] { background: var(--color-app-profit); } @supports (color: color-mix(in lab, red, red)) { .alert-threshold--profit[data-on="true"] { background: color-mix(in srgb, var(--color-app-profit) 7%, transparent); } } .alert-threshold--loss[data-on="true"] { border-color: var(--color-app-loss); } @supports (color: color-mix(in lab, red, red)) { .alert-threshold--loss[data-on="true"] { border-color: color-mix(in srgb, var(--color-app-loss) 40%, transparent); } } .alert-threshold--loss[data-on="true"] { background: var(--color-app-loss); } @supports (color: color-mix(in lab, red, red)) { .alert-threshold--loss[data-on="true"] { background: color-mix(in srgb, var(--color-app-loss) 7%, transparent); } } .alert-threshold-head { justify-content: space-between; align-items: center; gap: .625rem; margin-bottom: .8125rem; display: flex; } .alert-threshold-title { color: var(--reke-color-text); align-items: center; gap: .5625rem; font-size: .78125rem; font-weight: 500; display: flex; } .alert-threshold--profit .alert-threshold-title svg { color: var(--color-app-profit); } .alert-threshold--loss .alert-threshold-title svg { color: var(--color-app-loss); } .alert-threshold--profit .alert-threshold-emphasis { color: var(--color-app-profit); } .alert-threshold--loss .alert-threshold-emphasis { color: var(--color-app-loss); } .alert-threshold-input { width: 100%; display: block; } .alert-threshold-currency { font-size: .875rem; } .alert-trigger { border: 1px solid var(--reke-color-border); background: var(--reke-color-bg-section); border-radius: 12px; flex-direction: column; gap: .625rem; min-width: 0; padding: .875rem; display: flex; } .alert-trigger-legend { color: var(--reke-color-text-muted); text-transform: uppercase; letter-spacing: .09em; padding: 0; font-size: .625rem; font-weight: 600; } .alert-notify { flex-direction: column; gap: .5rem; display: flex; } .alert-notify-label { color: var(--reke-color-text-muted); text-transform: uppercase; letter-spacing: .09em; margin-bottom: .5625rem; font-size: .625rem; font-weight: 600; display: block; } .alert-notify > .alert-notify-label { margin-bottom: 0; } .alert-notify-chips { flex-wrap: wrap; gap: .5rem; display: flex; } .alert-chip { cursor: pointer; background: var(--reke-color-surface-hover); color: var(--reke-color-text-label); border: 1px solid var(--reke-color-border); border-radius: 8px; align-items: center; gap: .375rem; padding: .375rem .6875rem; font-family: inherit; font-size: .71875rem; transition: background .12s, color .12s, border-color .12s; display: inline-flex; } .alert-chip[data-active="true"] { background: var(--color-app-accent); } @supports (color: color-mix(in lab, red, red)) { .alert-chip[data-active="true"] { background: color-mix(in srgb, var(--color-app-accent) 12%, transparent); } } .alert-chip[data-active="true"] { color: var(--color-app-accent); border-color: var(--color-app-accent); } @supports (color: color-mix(in lab, red, red)) { .alert-chip[data-active="true"] { border-color: color-mix(in srgb, var(--color-app-accent) 30%, transparent); } } .alert-chip[data-disabled="true"] { opacity: .4; cursor: not-allowed; } .alert-telegram-field { flex-direction: column; gap: .25rem; padding-top: .375rem; display: flex; } .alert-telegram-label { color: var(--reke-color-text-muted); text-transform: uppercase; letter-spacing: .09em; font-size: .625rem; font-weight: 600; } .alert-telegram-input { width: 100%; display: block; } .alert-optional { text-transform: none; letter-spacing: 0; color: var(--reke-color-text-ghost); font-weight: 400; } .alert-telegram-error { color: var(--color-loss); font-size: .625rem; } .alert-price-error { color: var(--color-loss); text-align: center; padding: .125rem 0; font-size: .625rem; } .alert-list { flex-direction: column; gap: .5rem; padding-top: .25rem; display: flex; } .alert-list-label { color: var(--reke-color-text-muted); text-transform: uppercase; letter-spacing: .09em; margin-bottom: .1875rem; font-size: .625rem; font-weight: 600; display: block; } .alert-list-row { border: 1px solid var(--reke-color-border); background: var(--reke-color-bg); border-radius: 10px; justify-content: space-between; align-items: center; gap: .625rem; padding: .5625rem .75rem; display: flex; } .alert-list-row[data-status="triggered"] { border-color: var(--reke-color-warning); } @supports (color: color-mix(in lab, red, red)) { .alert-list-row[data-status="triggered"] { border-color: color-mix(in srgb, var(--reke-color-warning) 40%, transparent); } } .alert-list-row[data-status="triggered"] { background: var(--reke-color-warning); } @supports (color: color-mix(in lab, red, red)) { .alert-list-row[data-status="triggered"] { background: color-mix(in srgb, var(--reke-color-warning) 7%, transparent); } } .alert-list-row[data-status="disabled"] { opacity: .55; } .alert-list-main { flex-direction: column; gap: .25rem; min-width: 0; display: flex; } .alert-list-thresholds { flex-wrap: wrap; gap: .625rem; display: flex; } .alert-list-threshold { font-size: .78125rem; font-weight: 600; } .alert-list-threshold--profit { color: var(--color-app-profit); } .alert-list-threshold--loss { color: var(--color-app-loss); } .alert-list-meta { color: var(--reke-color-text-muted); align-items: center; gap: .5rem; font-size: .65625rem; display: flex; } .alert-list-status { color: var(--reke-color-warning); font-weight: 600; } .alert-list-status--muted { color: var(--reke-color-text-muted); } .alert-list-actions { flex-shrink: 0; gap: .375rem; display: flex; } .alert-list-action { cursor: pointer; background: var(--reke-color-surface-hover); color: var(--reke-color-text-label); border: 1px solid var(--reke-color-border); border-radius: 7px; padding: .25rem .5625rem; font-family: inherit; font-size: .65625rem; transition: background .12s, color .12s, border-color .12s; } .alert-list-action:hover:not(:disabled) { color: var(--reke-color-text); background: var(--reke-color-surface); } .alert-list-action:disabled { opacity: .5; cursor: default; } .alert-list-action--danger:hover:not(:disabled) { color: var(--color-app-loss); border-color: var(--color-app-loss); } @supports (color: color-mix(in lab, red, red)) { .alert-list-action--danger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--color-app-loss) 40%, transparent); } } .alert-list-empty { color: var(--reke-color-text-muted); margin: 0; font-size: .71875rem; } .alert-panel { border: 1px solid var(--reke-color-border); background: var(--reke-color-bg-section); --reke-color-input-bg: var(--reke-color-bg); border-radius: 12px; flex-direction: column; gap: 1rem; padding: 1.25rem; display: flex; } .alert-panel-block { flex-direction: column; gap: .5rem; display: flex; } .alert-panel-toolbar { align-items: center; gap: .75rem; display: flex; } .alert-panel-filter { flex: 1; min-width: 0; } .alert-panel-count { color: var(--reke-color-text-muted); flex-shrink: 0; font-size: .6875rem; } .alert-search { flex-direction: column; gap: .5rem; display: flex; } .alert-search-results { background: var(--reke-color-border-subtle); border: 1px solid var(--reke-color-border); border-radius: 8px; flex-direction: column; gap: 1px; max-height: 19rem; display: flex; overflow-y: auto; } .alert-search-row { background: var(--reke-color-surface-elevated); align-items: center; gap: .875rem; padding: .75rem .875rem; transition: background .12s; display: flex; } .alert-search-row:hover { background: var(--reke-color-surface); } .alert-search-avatar { border-radius: 50%; flex-shrink: 0; width: 1.75rem; height: 1.75rem; } .alert-search-avatar--fallback { border: 1px solid var(--reke-color-border); background: var(--reke-color-surface); color: var(--reke-color-text-muted); justify-content: center; align-items: center; font-size: .625rem; font-weight: 600; display: inline-flex; } .alert-search-ident { flex-direction: column; flex: 1; gap: .0625rem; min-width: 0; display: flex; } .alert-search-symbol { color: var(--reke-color-text); align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; display: flex; } .alert-search-rank { color: var(--reke-color-text-ghost); font-size: .65625rem; font-weight: 400; } .alert-search-name { color: var(--reke-color-text-muted); text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; overflow: hidden; } .alert-list-action[data-active="true"] { background: var(--color-app-profit); } @supports (color: color-mix(in lab, red, red)) { .alert-list-action[data-active="true"] { background: color-mix(in srgb, var(--color-app-profit) 14%, transparent); } } .alert-list-action[data-active="true"] { border-color: var(--color-app-profit); } @supports (color: color-mix(in lab, red, red)) { .alert-list-action[data-active="true"] { border-color: color-mix(in srgb, var(--color-app-profit) 35%, transparent); } } .alert-list-action[data-active="true"] { color: var(--color-app-profit); opacity: 1; cursor: default; } .alert-pills { flex-wrap: wrap; gap: .5rem; display: flex; } .alert-pill-avatar { border-radius: 50%; width: 1rem; height: 1rem; } .alert-pill-initials { background: var(--reke-color-surface-hover); width: 1rem; height: 1rem; color: var(--reke-color-text-muted); border-radius: 50%; justify-content: center; align-items: center; font-size: .5rem; font-weight: 600; display: inline-flex; } .alert-pill-count { opacity: .75; margin-left: .375rem; font-size: .625rem; font-weight: 600; } .alert-groups { flex-direction: column; gap: .75rem; display: flex; } .alert-group, .alert-row { --alert-tone: var(--reke-color-text-muted); } .alert-group[data-tone="active"], .alert-row[data-status="active"] { --alert-tone: var(--color-app-profit); } .alert-group[data-tone="near"], .alert-row[data-status="near"] { --alert-tone: var(--color-app-warning); } .alert-group[data-tone="triggered"], .alert-row[data-status="triggered"] { --alert-tone: var(--color-app-blue); } .alert-group { border: 1px solid var(--reke-color-border); background: var(--reke-color-surface-elevated); border-radius: 10px; overflow: hidden; } .alert-group-head { background: var(--alert-tone); justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem 1rem; display: flex; } @supports (color: color-mix(in lab, red, red)) { .alert-group-head { background: color-mix(in srgb, var(--alert-tone) 9%, transparent); } } .alert-group-head { border-bottom: 1px solid var(--reke-color-border); } .alert-group-ident { align-items: center; gap: .6875rem; min-width: 0; display: flex; } .alert-group-dot { background: var(--alert-tone); width: .5rem; height: .5rem; box-shadow: 0 0 8px var(--alert-tone); border-radius: 50%; flex-shrink: 0; } .alert-group-ticker { color: var(--reke-color-text); font-size: .875rem; font-weight: 700; } .alert-group-count { color: var(--reke-color-text-muted); font-size: .6875rem; } .alert-group-price { flex-shrink: 0; } .alert-price-tag { align-items: baseline; gap: .4375rem; display: inline-flex; } .alert-price-tag-value { color: var(--reke-color-text); font-size: .8125rem; font-weight: 700; } .alert-price-tag-change { font-variant-numeric: tabular-nums; font-size: .6875rem; font-weight: 600; } .alert-price-tag-change[data-direction="up"] { color: var(--color-app-profit); } .alert-price-tag-change[data-direction="down"] { color: var(--color-app-loss); } .alert-price-tag-empty { color: var(--reke-color-text-muted); font-size: .71875rem; } .alert-group-rows { flex-direction: column; display: flex; container-type: inline-size; } .alert-compact-list { border: 1px solid var(--reke-color-border); background: var(--reke-color-surface-elevated); border-radius: 10px; flex-direction: column; display: flex; overflow: hidden; } .alert-compact { --alert-tone: var(--reke-color-text-muted); align-items: center; gap: .75rem; padding: .5rem .6875rem; transition: background .12s; display: flex; } .alert-compact + .alert-compact { border-top: 1px solid var(--reke-color-border-subtle); } .alert-compact:hover { background: var(--reke-color-surface); } .alert-compact[data-status="active"] { --alert-tone: var(--color-app-profit); } .alert-compact[data-status="near"] { --alert-tone: var(--color-app-warning); } .alert-compact[data-status="triggered"] { --alert-tone: var(--color-app-blue); } .alert-compact[data-status="disabled"] { opacity: .55; } .alert-compact-dot { background: var(--alert-tone); width: .4375rem; height: .4375rem; box-shadow: 0 0 6px var(--alert-tone); border-radius: 50%; flex-shrink: 0; } .alert-compact-lines { flex-direction: column; flex: 1; gap: .3125rem; min-width: 0; display: flex; } .alert-compact-line { align-items: center; gap: .5rem; display: flex; } .alert-compact-threshold { white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; width: 5.625rem; font-size: .75rem; font-weight: 600; } .alert-compact-threshold[data-direction="above"] { color: var(--color-app-profit); } .alert-compact-threshold[data-direction="below"] { color: var(--color-app-loss); } .alert-compact-note { color: var(--reke-color-text-muted); text-overflow: ellipsis; white-space: nowrap; font-size: .65625rem; overflow: hidden; } .alert-compact-actions { flex-shrink: 0; align-items: center; gap: .3125rem; display: flex; } .alert-row { align-items: center; gap: .875rem; padding: .6875rem 1rem; transition: background .12s; display: flex; } .alert-row + .alert-row { border-top: 1px solid var(--reke-color-border-subtle); } .alert-row:hover { background: var(--reke-color-surface); } .alert-row[data-status="disabled"] { opacity: .55; } .alert-row-thresholds { flex-direction: column; flex: 1; gap: .375rem; min-width: 0; display: flex; } .alert-row-line { align-items: center; gap: .75rem; display: flex; } .alert-row-dir { text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; width: 4.5rem; font-size: .71875rem; font-weight: 700; } .alert-row-dir[data-direction="above"] { color: var(--color-app-profit); } .alert-row-dir[data-direction="below"] { color: var(--color-app-loss); } .alert-row-target { width: 6.875rem; color: var(--reke-color-text); flex-shrink: 0; font-size: .8125rem; font-weight: 500; } .alert-row-progress { --reke-progress-height: 5px; --reke-progress-track-color: var(--reke-color-surface-hover); flex: 1; min-width: 2.5rem; } .alert-row-progress[data-direction="above"] { --reke-progress-color: var(--color-app-profit); } .alert-row-progress[data-direction="below"] { --reke-progress-color: var(--color-app-loss); } .alert-row-progress-unknown { background: repeating-linear-gradient(90deg, var(--reke-color-border) 0 4px, transparent 4px 8px); border-radius: 9999px; flex: 1; min-width: 2.5rem; height: 5px; display: block; } .alert-row-side { flex-direction: column; flex-shrink: 0; align-items: flex-end; gap: .125rem; width: 8.75rem; display: flex; } .alert-row-controls { flex-direction: column; align-items: flex-start; gap: .125rem; display: flex; } .alert-row-status { text-transform: uppercase; letter-spacing: .06em; color: var(--alert-tone); font-size: .65625rem; font-weight: 700; } .alert-row-channels { color: var(--reke-color-text-muted); white-space: nowrap; text-overflow: ellipsis; max-width: 100%; font-size: .625rem; overflow: hidden; } @container (max-width: 30rem) { .alert-row { flex-wrap: wrap; } .alert-row-thresholds { flex-basis: 100%; } .alert-row-side { flex-direction: row; flex: 1; align-items: center; gap: .5rem; width: auto; min-width: 0; } .alert-row-controls { flex-direction: row; order: 1; align-items: center; gap: .5rem; } .alert-row-side .alert-row-channels { flex: 1; min-width: 0; } } .alert-drawer-footer { gap: .625rem; width: 100%; display: flex; } .alert-drawer-footer > * { flex: 1; } .earn-row { transition: background-color .12s; } .earn-row:hover { background-color: var(--reke-color-primary); } @supports (color: color-mix(in lab, red, red)) { .earn-row:hover { background-color: color-mix(in srgb, var(--reke-color-primary) 5%, var(--reke-color-surface)); } } .earn-group { transition: border-color .15s; } .earn-group:hover { border-color: var(--reke-color-border-hover); } @keyframes earn-row-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .earn-row { animation: .18s ease-out earn-row-in; } .earn-row-delete { color: var(--reke-color-text-muted); border: 1px solid var(--reke-color-border); } .earn-row .earn-row-delete { opacity: .35; transition: opacity .12s, color .12s, border-color .12s; } .earn-row:hover .earn-row-delete, .earn-row:focus-within .earn-row-delete { opacity: 1; } .earn-row-delete:hover { color: var(--color-app-loss); border-color: var(--color-app-loss); } @supports (color: color-mix(in lab, red, red)) { .earn-row-delete:hover { border-color: color-mix(in srgb, var(--color-app-loss) 40%, transparent); } } @media (prefers-reduced-motion: reduce) { .earn-row { animation: none; } } @property --tw-rotate-x { syntax: "*"; inherits: false } @property --tw-rotate-y { syntax: "*"; inherits: false } @property --tw-rotate-z { syntax: "*"; inherits: false } @property --tw-skew-x { syntax: "*"; inherits: false } @property --tw-skew-y { syntax: "*"; inherits: false } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-font-weight { syntax: "*"; inherits: false } @property --tw-tracking { syntax: "*"; inherits: false } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }