@charset "UTF-8";
/**
 * Main SCSS Entry Point
 * 
 * Enterprise-level design system for the Stock Analyzer application.
 * 
 * This file imports all SCSS modules in the correct order to build
 * a comprehensive, maintainable, and scalable styling system.
 * 
 * Architecture follows the 7-1 pattern:
 * - abstracts/  -> Variables, functions, mixins, placeholders
 * - base/       -> Reset, typography, base styles
 * - components/ -> Individual component styles
 * - layout/     -> Layout-related styles
 * - themes/     -> Theme configurations
 * - utilities/  -> Utility classes
 * - main.scss   -> This file that imports everything
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
/**
 * Base Index
 * 
 * Import all base styles in the correct order
 */
/**
 * Reset & Normalize
 * 
 * Modern CSS reset based on Josh Comeau's CSS reset
 * with additional normalize styles for consistency
 */
/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/*
  3. Allow percentage-based heights in the application
*/
html,
body {
  height: 100%;
}

/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 320px;
  min-height: 100vh;
}

/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}

/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
  9. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

/*
  Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/*
  Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/*
  Remove the additional `:invalid` styles in Firefox.
*/
:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
  vertical-align: baseline;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/*
  1. Correct the odd appearance in Chrome and Safari.
  2. Correct the outline style in Safari.
*/
[type=search] {
  appearance: textfield; /* 1 */
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
  appearance: none;
  -webkit-appearance: none;
}

/*
  1. Correct the inability to style clickable types in iOS and Safari.
  2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  appearance: button; /* 1 */
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
  Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

/*
  Remove list styles on ul, ol elements with a list role,
  which suggests default styling will be removed
*/
ul[role=list],
ol[role=list] {
  list-style: none;
}

/*
  Set shorter line heights on headings and interactive elements
*/
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/*
  Balance text wrapping on headings
*/
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/*
  A elements that don't have a class get default styles
*/
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/*
  Make sure textareas without a rows attribute are not tiny
*/
textarea:not([rows]) {
  min-height: 10em;
}

/*
  Anything that has been anchored to should have extra scroll margin
*/
:target {
  scroll-margin-block: 5ex;
}

/**
 * Main SCSS Entry Point
 * 
 * Enterprise-level design system for the Stock Analyzer application.
 * 
 * This file imports all SCSS modules in the correct order to build
 * a comprehensive, maintainable, and scalable styling system.
 * 
 * Architecture follows the 7-1 pattern:
 * - abstracts/  -> Variables, functions, mixins, placeholders
 * - base/       -> Reset, typography, base styles
 * - components/ -> Individual component styles
 * - layout/     -> Layout-related styles
 * - themes/     -> Theme configurations
 * - utilities/  -> Utility classes
 * - main.scss   -> This file that imports everything
 */
/**
 * Base Typography
 * 
 * Foundational typography styles using design tokens
 */
html {
  font-size: 16px !important;
}

body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
}

h1 {
  font-size: var(--font-size-4xl, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
}
@media (max-width: 1023px) {
  h1 {
    font-size: var(--font-size-5xl, 3rem);
    font-weight: 700;
    line-height: 1.25;
  }
}

h2 {
  font-size: var(--font-size-3xl, 1.7143rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
}
@media (max-width: 1023px) {
  h2 {
    font-size: var(--font-size-4xl, 2.25rem);
    font-weight: 700;
    line-height: 1.25;
  }
}

h3 {
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
}
@media (max-width: 1023px) {
  h3 {
    font-size: var(--font-size-3xl, 1.7143rem);
    font-weight: 600;
    line-height: 1.375;
  }
}

h4 {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
}

h5 {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
}

h6 {
  font-size: var(--font-size-base, 1rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1rem;
  color: var(--color-text-secondary);
}
p:last-child {
  margin-bottom: 0;
}
p.lead {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 400;
  line-height: 1.625;
  color: var(--color-text-primary);
  margin-bottom: 1.5rem;
}
p.small {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.125em;
  transition: color text-decoration-color cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover {
  color: var(--color-text-link-hover);
  text-decoration-color: currentColor;
}
a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
a:focus-visible:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
a:focus-visible {
  text-decoration: none;
  border-radius: 0.125rem;
}
a[href^=http]:not([href*=localhost]):not([href*="127.0.0.1"]):not([href*="your-domain.com"])::after {
  content: " ↗";
  font-size: 0.875em;
  opacity: 0.7;
}

strong,
b {
  font-weight: 600;
  color: var(--color-text-primary);
}

em,
i {
  font-style: italic;
}

small {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

mark {
  background-color: var(--color-warning-light);
  color: var(--color-text-primary);
  padding: 0.125em 0.25em;
  border-radius: 0.125rem;
}

code {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 0.875em;
  background-color: var(--color-background-light);
  color: var(--color-text-primary);
  padding: 0.125em 0.375em;
  border-radius: 0.125rem;
  border: 1px solid var(--color-border);
}

kbd {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 0.75em;
  background-color: var(--color-surface-tertiary);
  color: var(--color-text-primary);
  padding: 0.25em 0.5em;
  border-radius: 0.375rem;
  border: 1px solid var(--color-border-medium);
  box-shadow: 0 1px 3px var(--color-shadow-light);
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

sub,
sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-background-light);
  border-radius: 0 0.375rem 0.375rem 0;
}
blockquote p {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 400;
  line-height: 1.625;
  color: var(--color-text-primary);
  font-style: italic;
  margin-bottom: 0.75rem;
}
blockquote p:last-child {
  margin-bottom: 0;
}
blockquote footer,
blockquote cite {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  margin-top: 0.75rem;
}
blockquote footer::before,
blockquote cite::before {
  content: "— ";
}

ul,
ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  color: var(--color-text-secondary);
}
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}
ul li,
ol li {
  margin-bottom: 0.5rem;
}
ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}
ul li ul,
ul li ol,
ol li ul,
ol li ol {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

ul {
  list-style-type: disc;
}
ul ul {
  list-style-type: circle;
}
ul ul ul {
  list-style-type: square;
}

ol {
  list-style-type: decimal;
}
ol ol {
  list-style-type: lower-alpha;
}
ol ol ol {
  list-style-type: lower-roman;
}

dl {
  margin-bottom: 1rem;
}
dl dt {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}
dl dd {
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
  margin-left: 1rem;
}
dl dd:last-child {
  margin-bottom: 0;
}

hr {
  border: none;
  height: 1px;
  background-color: var(--color-border);
  margin: 2rem 0;
}

pre {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.625;
  background-color: var(--color-background-light);
  color: var(--color-text-primary);
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  overflow-x: auto;
  margin-bottom: 1rem;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.font-thin {
  font-weight: 100;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-tertiary {
  color: var(--color-text-tertiary);
}

.text-success {
  color: var(--color-success);
}

.text-warning {
  color: var(--color-warning);
}

.text-error {
  color: var(--color-error);
}

.text-info {
  color: var(--color-info);
}

.text-theme-primary {
  color: var(--color-text-primary) !important;
}

.text-theme-secondary {
  color: var(--color-text-secondary) !important;
}

.text-theme-inherit {
  color: inherit !important;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.truncate-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.truncate-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/**
 * Layout Index
 * 
 * Import all layout styles
 */
/**
 * Main SCSS Entry Point
 * 
 * Enterprise-level design system for the Stock Analyzer application.
 * 
 * This file imports all SCSS modules in the correct order to build
 * a comprehensive, maintainable, and scalable styling system.
 * 
 * Architecture follows the 7-1 pattern:
 * - abstracts/  -> Variables, functions, mixins, placeholders
 * - base/       -> Reset, typography, base styles
 * - components/ -> Individual component styles
 * - layout/     -> Layout-related styles
 * - themes/     -> Theme configurations
 * - utilities/  -> Utility classes
 * - main.scss   -> This file that imports everything
 */
/**
 * Layout Styles
 * 
 * Page layout, containers, and structural elements
 */
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
}

.layout__header {
  flex-shrink: 0;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
  position: sticky;
  top: 0;
  z-index: 1020;
}

.layout__main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.layout__footer {
  flex-shrink: 0;
  background-color: var(--color-background-light);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (max-width: 1023px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.container--sm {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (max-width: 1023px) {
  .container--sm {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .container--sm {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.container--md {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (max-width: 1023px) {
  .container--md {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .container--md {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.container--lg {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (max-width: 1023px) {
  .container--lg {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .container--lg {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.container--xl {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (max-width: 1023px) {
  .container--xl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .container--xl {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.container--2xl {
  max-width: 1536px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (max-width: 1023px) {
  .container--2xl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .container--2xl {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.container--fluid {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (max-width: 1023px) {
  .container--fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .container--fluid {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.grid {
  display: grid;
  gap: 1rem;
}
.grid.grid--1 {
  grid-template-columns: 1fr;
}
.grid.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid.grid--5 {
  grid-template-columns: repeat(5, 1fr);
}
.grid.grid--6 {
  grid-template-columns: repeat(6, 1fr);
}
.grid.grid--gap-sm {
  gap: 0.5rem;
}
.grid.grid--gap-md {
  gap: 1rem;
}
.grid.grid--gap-lg {
  gap: 1.5rem;
}
.grid.grid--gap-xl {
  gap: 2rem;
}

.grid--responsive {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid--responsive {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1023px) {
  .grid--responsive {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid--responsive {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid-item--span-2 {
  grid-column: span 2;
}
.grid-item--span-3 {
  grid-column: span 3;
}
.grid-item--span-4 {
  grid-column: span 4;
}
.grid-item--span-full {
  grid-column: 1/-1;
}

.flex {
  display: flex;
}
.flex.flex--column {
  flex-direction: column;
}
.flex.flex--row-reverse {
  flex-direction: row-reverse;
}
.flex.flex--column-reverse {
  flex-direction: column-reverse;
}
.flex.flex--justify-start {
  justify-content: flex-start;
}
.flex.flex--justify-center {
  justify-content: center;
}
.flex.flex--justify-end {
  justify-content: flex-end;
}
.flex.flex--justify-between {
  justify-content: space-between;
}
.flex.flex--justify-around {
  justify-content: space-around;
}
.flex.flex--justify-evenly {
  justify-content: space-evenly;
}
.flex.flex--items-start {
  align-items: flex-start;
}
.flex.flex--items-center {
  align-items: center;
}
.flex.flex--items-end {
  align-items: flex-end;
}
.flex.flex--items-baseline {
  align-items: baseline;
}
.flex.flex--items-stretch {
  align-items: stretch;
}
.flex.flex--wrap {
  flex-wrap: wrap;
}
.flex.flex--nowrap {
  flex-wrap: nowrap;
}
.flex.flex--wrap-reverse {
  flex-wrap: wrap-reverse;
}
.flex.flex--gap-sm {
  gap: 0.5rem;
}
.flex.flex--gap-md {
  gap: 1rem;
}
.flex.flex--gap-lg {
  gap: 1.5rem;
}
.flex.flex--gap-xl {
  gap: 2rem;
}

.sidebar-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}
@media (max-width: 1023px) {
  .sidebar-layout {
    grid-template-columns: 1fr;
  }
}

.sidebar {
  background-color: var(--color-background-light);
  border-right: 1px solid var(--color-border);
  padding: 1.5rem;
  overflow-y: auto;
}
@media (max-width: 1023px) {
  .sidebar {
    display: none;
  }
  .sidebar.sidebar--mobile-open {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    z-index: 1040;
    box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
  }
}

.sidebar__overlay {
  display: none;
}
@media (max-width: 1023px) {
  .sidebar__overlay.active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-background-overlay);
    z-index: 1039;
  }
}

.main-content {
  padding: 1.5rem;
  overflow-x: hidden;
}
@media (max-width: 1023px) {
  .main-content {
    padding: 2rem;
  }
}

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  min-height: 100vh;
}
@media (max-width: 767px) {
  .split-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.split-pane {
  padding: 1.5rem;
}
.split-pane.split-pane--primary {
  background-color: var(--color-background);
}
.split-pane.split-pane--secondary {
  background-color: var(--color-background-light);
}

.section {
  padding: 2rem 0;
}
.section.section--sm {
  padding: 1.5rem 0;
}
.section.section--lg {
  padding: 3rem 0;
}
.section.section--xl {
  padding: 4rem 0;
}
.section.section--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.section.section--secondary {
  background-color: var(--color-background-light);
}
.section.section--accent {
  background-color: var(--color-background-accent);
}

.section__header {
  text-align: center;
  margin-bottom: 2rem;
}
.section__header .section__title {
  font-size: var(--font-size-3xl, 1.7143rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  margin-bottom: 1rem;
}
.section__header .section__subtitle {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.page-header {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 1.5rem 0;
  margin-bottom: 2rem;
}
.page-header .page-header__content {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (max-width: 1023px) {
  .page-header .page-header__content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .page-header .page-header__content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.page-header .page-header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}
.page-header .page-header__text {
  flex: 1;
}
.page-header .page-header__title {
  font-size: var(--font-size-4xl, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  margin-bottom: 0.5rem;
}
.page-header .page-header__subtitle {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}
.page-header .page-header__actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
@media (max-width: 767px) {
  .page-header .page-header__content {
    flex-direction: column;
    align-items: stretch;
  }
  .page-header .page-header__actions {
    justify-content: flex-start;
  }
}

.content-area {
  max-width: 65ch;
}
.content-area.content-area--wide {
  max-width: 80ch;
}
.content-area.content-area--narrow {
  max-width: 50ch;
}
.content-area.content-area--full {
  max-width: none;
}

.hidden {
  display: none !important;
}

@media (max-width: 639px) {
  .hidden-xs-up {
    display: none !important;
  }
}

@media (max-width: 479px) {
  .hidden-xs-down {
    display: none !important;
  }
}

@media (min-width: 640px) {
  .hidden-sm-up {
    display: none !important;
  }
}

@media (max-width: 639px) {
  .hidden-sm-down {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .hidden-md-up {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-md-down {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .hidden-lg-up {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .hidden-lg-down {
    display: none !important;
  }
}

@media (max-width: 1279px) {
  .hidden-xl-up {
    display: none !important;
  }
}

@media (max-width: 1279px) {
  .hidden-xl-down {
    display: none !important;
  }
}

@media (min-width: 1536px) {
  .hidden-2xl-up {
    display: none !important;
  }
}

@media (max-width: 1535px) {
  .hidden-2xl-down {
    display: none !important;
  }
}

@media print {
  .layout__header,
  .layout__footer,
  .sidebar {
    display: none;
  }
  .main-content {
    padding: 0;
  }
  .page-header {
    border-bottom: 2px solid #000;
    margin-bottom: 1rem;
  }
  .section {
    padding: 1rem 0;
  }
}
/**
 * Components Index
 * 
 * Import all component styles
 */
/**
 * Main SCSS Entry Point
 * 
 * Enterprise-level design system for the Stock Analyzer application.
 * 
 * This file imports all SCSS modules in the correct order to build
 * a comprehensive, maintainable, and scalable styling system.
 * 
 * Architecture follows the 7-1 pattern:
 * - abstracts/  -> Variables, functions, mixins, placeholders
 * - base/       -> Reset, typography, base styles
 * - components/ -> Individual component styles
 * - layout/     -> Layout-related styles
 * - themes/     -> Theme configurations
 * - utilities/  -> Utility classes
 * - main.scss   -> This file that imports everything
 */
/**
 * Button Component Styles
 * 
 * Comprehensive button system with variants, sizes, and states
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.btn:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.btn {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.btn:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.btn {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
}
.btn:disabled {
  transform: none;
}

.btn--xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.btn--xs:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.btn--xs {
  height: 1.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm, 0.125rem);
}
.btn--xs:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn--sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.btn--sm:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.btn--sm {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
.btn--sm:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn--md {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.btn--md:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.btn--md {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
.btn--md:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn--lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.btn--lg:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.btn--lg {
  height: 3rem;
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  border-radius: var(--radius-lg, 0.5rem);
}
.btn--lg:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn--xl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.btn--xl:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.btn--xl {
  height: 3.5rem;
  padding: 1rem 2rem;
  font-size: 1.25rem;
  border-radius: var(--radius-lg, 0.5rem);
}
.btn--xl:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-primary);
}
.btn--primary:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
}
.btn--primary:active:not(:disabled) {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
}
.btn--primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.btn--secondary {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-medium);
}
.btn--secondary:hover:not(:disabled) {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}
.btn--secondary:active:not(:disabled) {
  background-color: var(--color-surface-active);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.btn--outline:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn--outline:active:not(:disabled) {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid transparent;
}
.btn--ghost:hover:not(:disabled) {
  background-color: var(--color-interactive-hover);
  border-color: var(--color-border-light);
}
.btn--ghost:active:not(:disabled) {
  background-color: var(--color-interactive-active);
}

.btn--link {
  background-color: transparent;
  color: var(--color-text-link);
  border: none;
  text-decoration: underline;
  text-underline-offset: 0.125em;
  height: auto;
  padding: 0;
}
.btn--link:hover:not(:disabled) {
  color: var(--color-text-link-hover);
  text-decoration-color: currentColor;
  transform: none;
}
.btn--link:active:not(:disabled) {
  transform: none;
}

.btn--success {
  background-color: var(--color-success);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-success);
}
.btn--success:hover:not(:disabled) {
  background-color: var(--color-success-hover);
  border-color: var(--color-success-hover);
}
.btn--success:focus-visible {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.btn--warning {
  background-color: var(--color-warning);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-warning);
}
.btn--warning:hover:not(:disabled) {
  background-color: var(--color-warning-hover);
  border-color: var(--color-warning-hover);
}

.btn--error {
  background-color: var(--color-error);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-error);
}
.btn--error:hover:not(:disabled) {
  background-color: var(--color-error-hover);
  border-color: var(--color-error-hover);
}
.btn--error:focus-visible {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.btn--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.btn--loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: button-spinner 0.8s linear infinite;
}

@keyframes button-spinner {
  to {
    transform: rotate(360deg);
  }
}
.btn-group {
  display: inline-flex;
  border-radius: 0.375rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}
.btn-group .btn {
  border-radius: 0;
  border-right: none;
  position: relative;
}
.btn-group .btn:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.btn-group .btn:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border-right: 1px solid var(--color-border-medium);
}
.btn-group .btn:hover {
  z-index: 1;
}
.btn-group .btn:focus {
  z-index: 2;
}

.btn--icon-only {
  width: 2.5rem;
  padding: 0;
}
.btn--icon-only.btn--xs {
  width: 1.5rem;
}
.btn--icon-only.btn--sm {
  width: 2rem;
}
.btn--icon-only.btn--lg {
  width: 3rem;
}
.btn--icon-only.btn--xl {
  width: 3.5rem;
}

.btn--icon-left .btn__icon {
  margin-right: 0.5rem;
}

.btn--icon-right .btn__icon {
  margin-left: 0.5rem;
}

.btn__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.btn__icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

@media (min-width: 640px) {
  .btn--responsive .btn__text--mobile-hidden {
    display: inline;
  }
  .btn--responsive .btn__text--desktop-only {
    display: none;
  }
}
.btn--responsive .btn__text--mobile-hidden {
  display: none;
}
.btn--responsive .btn__text--desktop-only {
  display: inline;
}

.btn--profit {
  background-color: var(--color-financial-profit);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-financial-profit);
}
.btn--profit:hover:not(:disabled) {
  background-color: var(--color-financial-growth);
  border-color: var(--color-financial-growth);
}

.btn--loss {
  background-color: var(--color-financial-loss);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-financial-loss);
}
.btn--loss:hover:not(:disabled) {
  background-color: var(--color-financial-decline);
  border-color: var(--color-financial-decline);
}

/**
 * Main SCSS Entry Point
 * 
 * Enterprise-level design system for the Stock Analyzer application.
 * 
 * This file imports all SCSS modules in the correct order to build
 * a comprehensive, maintainable, and scalable styling system.
 * 
 * Architecture follows the 7-1 pattern:
 * - abstracts/  -> Variables, functions, mixins, placeholders
 * - base/       -> Reset, typography, base styles
 * - components/ -> Individual component styles
 * - layout/     -> Layout-related styles
 * - themes/     -> Theme configurations
 * - utilities/  -> Utility classes
 * - main.scss   -> This file that imports everything
 */
/**
 * Card Component Styles
 * 
 * Card components for content organization and layout
 */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: var(--shadow-base, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06));
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card.card--interactive {
  cursor: pointer;
}
.card.card--interactive:hover {
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
  transform: translateY(-2px);
  border-color: var(--color-primary-light);
}
.card.card--interactive:active {
  transform: translateY(-1px);
}
.card:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.card:focus-visible:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.card--outlined {
  border: 2px solid var(--color-border);
  box-shadow: none;
}
.card--outlined:hover {
  border-color: var(--color-primary);
}

.card--elevated {
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
  border: none;
}
.card--elevated:hover {
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
}

.card--flat {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.card--compact {
  padding: 1rem;
}

.card--comfortable {
  padding: 2rem;
}

.card--spacious {
  padding: 3rem;
}

.card__header {
  margin: -1.5rem -1.5rem 1.5rem -1.5rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-background-light);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.card--compact .card__header {
  margin: -1rem -1rem 1rem -1rem;
  padding: 1rem;
}
.card--comfortable .card__header {
  margin: -2rem -2rem 2rem -2rem;
  padding: 2rem;
}
.card--spacious .card__header {
  margin: -3rem -3rem 3rem -3rem;
  padding: 3rem;
}

.card__title {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-primary);
  margin: 0;
}
.card__title:not(:last-child) {
  margin-bottom: 0.5rem;
}

.card__subtitle {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  margin: 0;
}

.card__content {
  color: var(--color-text-secondary);
}
.card__content > *:last-child {
  margin-bottom: 0;
}

.card__footer {
  margin: 1.5rem -1.5rem -1.5rem -1.5rem;
  padding: 1.5rem;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-background-light);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card--compact .card__footer {
  margin: 1rem -1rem -1rem -1rem;
  padding: 1rem;
}
.card--comfortable .card__footer {
  margin: 2rem -2rem -2rem -2rem;
  padding: 2rem;
}
.card--spacious .card__footer {
  margin: 3rem -3rem -3rem -3rem;
  padding: 3rem;
}

.card__media {
  margin: -1.5rem -1.5rem 1.5rem -1.5rem;
  overflow: hidden;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.card__media img,
.card__media video {
  width: 100%;
  height: auto;
  display: block;
}
.card--compact .card__media {
  margin: -1rem -1rem 1rem -1rem;
}
.card--comfortable .card__media {
  margin: -2rem -2rem 2rem -2rem;
}
.card--spacious .card__media {
  margin: -3rem -3rem 3rem -3rem;
}

.card__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.card__actions.card__actions--center {
  justify-content: center;
}
.card__actions.card__actions--end {
  justify-content: flex-end;
}
.card__actions.card__actions--between {
  justify-content: space-between;
}

.card--profit {
  border-left: 4px solid var(--color-financial-profit);
}
.card--profit .card__title {
  color: var(--color-financial-profit);
}

.card--loss {
  border-left: 4px solid var(--color-financial-loss);
}
.card--loss .card__title {
  color: var(--color-financial-loss);
}

.card--neutral {
  border-left: 4px solid var(--color-financial-neutral);
}
.card--neutral .card__title {
  color: var(--color-text-primary);
}

.card--stats {
  text-align: center;
}
.card--stats .card__value {
  font-size: var(--font-size-3xl, 1.7143rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  display: block;
  margin-bottom: 0.5rem;
}
.card--stats .card__label {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.card--stats .card__change {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0.5rem;
}
.card--stats .card__change.positive {
  color: var(--color-financial-profit);
}
.card--stats .card__change.positive::before {
  content: "↗ ";
}
.card--stats .card__change.negative {
  color: var(--color-financial-loss);
}
.card--stats .card__change.negative::before {
  content: "↘ ";
}

.card--loading {
  position: relative;
  overflow: hidden;
}
.card--loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: card-shimmer 2s infinite;
}

@keyframes card-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1023px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1279px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.card-grid.card-grid--2-col {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
  .card-grid.card-grid--2-col {
    grid-template-columns: repeat(2, 1fr);
  }
}
.card-grid.card-grid--3-col {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
  .card-grid.card-grid--3-col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1023px) {
  .card-grid.card-grid--3-col {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card-grid.card-grid--4-col {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
  .card-grid.card-grid--4-col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1023px) {
  .card-grid.card-grid--4-col {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .card-grid.card-grid--4-col {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 639px) {
  .card {
    padding: 1rem;
    border-radius: 0.375rem;
  }
  .card__header,
  .card__footer {
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 1rem;
  }
  .card__header {
    margin-bottom: 1rem;
    margin-top: -1rem;
  }
  .card__footer {
    margin-top: 1rem;
    margin-bottom: -1rem;
  }
  .card__media {
    margin-left: -1rem;
    margin-right: -1rem;
    margin-top: -1rem;
    margin-bottom: 1rem;
  }
}
/**
 * Main SCSS Entry Point
 * 
 * Enterprise-level design system for the Stock Analyzer application.
 * 
 * This file imports all SCSS modules in the correct order to build
 * a comprehensive, maintainable, and scalable styling system.
 * 
 * Architecture follows the 7-1 pattern:
 * - abstracts/  -> Variables, functions, mixins, placeholders
 * - base/       -> Reset, typography, base styles
 * - components/ -> Individual component styles
 * - layout/     -> Layout-related styles
 * - themes/     -> Theme configurations
 * - utilities/  -> Utility classes
 * - main.scss   -> This file that imports everything
 */
/**
 * Form Component Styles
 * 
 * Comprehensive form system with inputs, labels, validation states
 */
.form-group {
  margin-bottom: 1.5rem;
}
.form-group:last-child {
  margin-bottom: 0;
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

fieldset {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
fieldset legend {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-primary);
  padding: 0 0.75rem;
}

.form-label {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
  display: block;
  margin-bottom: 0.5rem;
}
.form-label.required::after {
  content: " *";
  color: var(--color-error);
}
.form-label.optional::after {
  content: " (optional)";
  color: var(--color-text-tertiary);
  font-weight: 400;
}

.form-input {
  display: block;
  width: 100%;
  background-color: var(--color-background);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
  font-family: inherit;
  border-radius: 0.375rem;
  transition: all 100ms ease;
}
.form-input::placeholder {
  color: var(--color-text-tertiary);
}
.form-input:hover {
  border-color: var(--color-border-dark);
}
.form-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.form-input:disabled {
  background-color: var(--color-surface-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
.form-input {
  display: block;
  width: 100%;
  background-color: var(--color-background);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
  font-family: inherit;
  border-radius: 0.375rem;
  transition: all 100ms ease;
  height: 2.5rem;
  padding: 0 1rem;
  font-size: 1rem;
}
.form-input::placeholder {
  color: var(--color-text-tertiary);
}
.form-input:hover {
  border-color: var(--color-border-dark);
}
.form-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.form-input:disabled {
  background-color: var(--color-surface-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
.form-input::placeholder {
  color: var(--color-text-quaternary);
}

.form-input--sm {
  display: block;
  width: 100%;
  background-color: var(--color-background);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
  font-family: inherit;
  border-radius: 0.375rem;
  transition: all 100ms ease;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
}
.form-input--sm::placeholder {
  color: var(--color-text-tertiary);
}
.form-input--sm:hover {
  border-color: var(--color-border-dark);
}
.form-input--sm:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.form-input--sm:disabled {
  background-color: var(--color-surface-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

.form-input--md {
  display: block;
  width: 100%;
  background-color: var(--color-background);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
  font-family: inherit;
  border-radius: 0.375rem;
  transition: all 100ms ease;
  height: 2.5rem;
  padding: 0 1rem;
  font-size: 1rem;
}
.form-input--md::placeholder {
  color: var(--color-text-tertiary);
}
.form-input--md:hover {
  border-color: var(--color-border-dark);
}
.form-input--md:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.form-input--md:disabled {
  background-color: var(--color-surface-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

.form-input--lg {
  display: block;
  width: 100%;
  background-color: var(--color-background);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
  font-family: inherit;
  border-radius: 0.375rem;
  transition: all 100ms ease;
  height: 3rem;
  padding: 0 1.5rem;
  font-size: 1.125rem;
}
.form-input--lg::placeholder {
  color: var(--color-text-tertiary);
}
.form-input--lg:hover {
  border-color: var(--color-border-dark);
}
.form-input--lg:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.form-input--lg:disabled {
  background-color: var(--color-surface-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

.form-input--search {
  padding-left: 2.5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z'/%3e%3c/svg%3e");
  background-position: left 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

.form-input--number {
  text-align: right;
}
.form-input--number::-webkit-outer-spin-button, .form-input--number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-input--number[type=number] {
  -moz-appearance: textfield;
}

.form-textarea {
  display: block;
  width: 100%;
  background-color: var(--color-background);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
  font-family: inherit;
  border-radius: 0.375rem;
  transition: all 100ms ease;
}
.form-textarea::placeholder {
  color: var(--color-text-tertiary);
}
.form-textarea:hover {
  border-color: var(--color-border-dark);
}
.form-textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.form-textarea:disabled {
  background-color: var(--color-surface-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
.form-textarea {
  min-height: 6rem;
  resize: vertical;
  padding: 0.75rem 1rem;
  line-height: 1.625;
}
.form-textarea.form-textarea--sm {
  min-height: 4rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}
.form-textarea.form-textarea--lg {
  min-height: 8rem;
  padding: 1rem 1rem;
  font-size: 1.125rem;
}

.form-select {
  display: block;
  width: 100%;
  background-color: var(--color-background);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
  font-family: inherit;
  border-radius: 0.375rem;
  transition: all 100ms ease;
}
.form-select::placeholder {
  color: var(--color-text-tertiary);
}
.form-select:hover {
  border-color: var(--color-border-dark);
}
.form-select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.form-select:disabled {
  background-color: var(--color-surface-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  padding-right: 2.5rem;
  appearance: none;
}
.form-select::-ms-expand {
  display: none;
}
.form-select[multiple] {
  background-image: none;
  padding-right: 1rem;
  height: auto;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.form-select[multiple] option {
  padding: 0.25rem 0;
}

.form-checkbox,
.form-radio {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
}
.form-checkbox input[type=checkbox],
.form-checkbox input[type=radio],
.form-radio input[type=checkbox],
.form-radio input[type=radio] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex-shrink: 0;
  appearance: none;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-medium);
  position: relative;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.form-checkbox input[type=checkbox]:focus-visible,
.form-checkbox input[type=radio]:focus-visible,
.form-radio input[type=checkbox]:focus-visible,
.form-radio input[type=radio]:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.form-checkbox input[type=checkbox]:checked,
.form-checkbox input[type=radio]:checked,
.form-radio input[type=checkbox]:checked,
.form-radio input[type=radio]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.form-checkbox input[type=checkbox]:disabled,
.form-checkbox input[type=radio]:disabled,
.form-radio input[type=checkbox]:disabled,
.form-radio input[type=radio]:disabled {
  background-color: var(--color-interactive-disabled);
  cursor: not-allowed;
}
.form-checkbox input[type=checkbox],
.form-radio input[type=checkbox] {
  border-radius: 0.125rem;
}
.form-checkbox input[type=checkbox]:checked::after,
.form-radio input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 6px;
  height: 10px;
  border: 2px solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-checkbox input[type=checkbox]:indeterminate,
.form-radio input[type=checkbox]:indeterminate {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.form-checkbox input[type=checkbox]:indeterminate::after,
.form-radio input[type=checkbox]:indeterminate::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 2px;
  width: 10px;
  height: 2px;
  background-color: white;
  transform: none;
  border: none;
}
.form-checkbox input[type=radio],
.form-radio input[type=radio] {
  border-radius: 50%;
}
.form-checkbox input[type=radio]:checked::after,
.form-radio input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
}
.form-checkbox .form-checkbox__label,
.form-checkbox .form-radio__label,
.form-radio .form-checkbox__label,
.form-radio .form-radio__label {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-primary);
  line-height: 1rem;
  margin-top: 0.125rem;
}
.form-checkbox:hover input:not(:disabled),
.form-radio:hover input:not(:disabled) {
  border-color: var(--color-border-strong);
}
.form-checkbox.disabled,
.form-radio.disabled {
  cursor: not-allowed;
}
.form-checkbox.disabled .form-checkbox__label,
.form-checkbox.disabled .form-radio__label,
.form-radio.disabled .form-checkbox__label,
.form-radio.disabled .form-radio__label {
  color: var(--color-text-disabled);
}

.form-group--error .form-label {
  color: var(--color-error);
}
.form-group--error .form-input,
.form-group--error .form-textarea,
.form-group--error .form-select {
  border-color: var(--color-error);
}
.form-group--error .form-input:focus,
.form-group--error .form-textarea:focus,
.form-group--error .form-select:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.form-group--success .form-label {
  color: var(--color-success);
}
.form-group--success .form-input,
.form-group--success .form-textarea,
.form-group--success .form-select {
  border-color: var(--color-success);
}
.form-group--success .form-input:focus,
.form-group--success .form-textarea:focus,
.form-group--success .form-select:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.form-group--warning .form-label {
  color: var(--color-warning-dark);
}
.form-group--warning .form-input,
.form-group--warning .form-textarea,
.form-group--warning .form-select {
  border-color: var(--color-warning);
}
.form-group--warning .form-input:focus,
.form-group--warning .form-textarea:focus,
.form-group--warning .form-select:focus {
  border-color: var(--color-warning);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.form-help {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  margin-top: 0.5rem;
  display: block;
}

.form-error {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-error);
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.form-error::before {
  content: "⚠";
  flex-shrink: 0;
}

.form-success {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-success);
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.form-success::before {
  content: "✓";
  flex-shrink: 0;
}

.input-group {
  display: flex;
  width: 100%;
}
.input-group .form-input {
  border-radius: 0;
  border-right: none;
  flex: 1;
}
.input-group .form-input:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.input-group .form-input:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border-right: 1px solid var(--color-border);
}
.input-group .form-input:focus {
  z-index: 1;
  border-right: 1px solid var(--color-border-focus);
}

.input-addon {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  background-color: var(--color-background-light);
  border: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
  white-space: nowrap;
}
.input-addon:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  border-right: none;
}
.input-addon:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border-left: none;
}

.form-file {
  position: relative;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
}
.form-file input[type=file] {
  position: absolute;
  left: -9999px;
  opacity: 0;
}
.form-file .form-file__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.form-file .form-file__label:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.form-file .form-file__label {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
.form-file .form-file__label:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.form-file .form-file__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.form-file .form-file__label:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.form-file .form-file__label {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
.form-file .form-file__label:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.form-file .form-file__label {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-medium);
}
.form-file .form-file__label:hover {
  background-color: var(--color-surface-hover);
  transform: none;
}
.form-file.form-file--drag-over .form-file__label {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.form-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
}
.form-switch input[type=checkbox] {
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  appearance: none;
  background-color: var(--color-border-medium);
  border: none;
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.form-switch input[type=checkbox]:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.form-switch input[type=checkbox]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  background-color: white;
  border-radius: 50%;
  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
}
.form-switch input[type=checkbox]:checked {
  background-color: var(--color-primary);
}
.form-switch input[type=checkbox]:checked::after {
  transform: translateX(1.25rem);
}
.form-switch input[type=checkbox]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.form-switch .form-switch__label {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-primary);
}
.form-switch.disabled {
  cursor: not-allowed;
}
.form-switch.disabled .form-switch__label {
  color: var(--color-text-disabled);
}

@media (max-width: 1023px) {
  .form-row--responsive {
    flex-direction: row;
  }
  .form-row--responsive .form-group {
    margin-bottom: 0;
  }
}
@media (max-width: 767px) {
  .form-row--responsive {
    flex-direction: column;
    gap: 0;
  }
  .form-row--responsive .form-group {
    margin-bottom: 1.5rem;
  }
  .form-row--responsive .form-group:last-child {
    margin-bottom: 0;
  }
}
/**
 * Utilities Index
 * 
 * Import all utility classes
 */
/**
 * Main SCSS Entry Point
 * 
 * Enterprise-level design system for the Stock Analyzer application.
 * 
 * This file imports all SCSS modules in the correct order to build
 * a comprehensive, maintainable, and scalable styling system.
 * 
 * Architecture follows the 7-1 pattern:
 * - abstracts/  -> Variables, functions, mixins, placeholders
 * - base/       -> Reset, typography, base styles
 * - components/ -> Individual component styles
 * - layout/     -> Layout-related styles
 * - themes/     -> Theme configurations
 * - utilities/  -> Utility classes
 * - main.scss   -> This file that imports everything
 */
/**
 * Utility Classes
 * 
 * Single-purpose utility classes for rapid development
 */
.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mr-1 {
  margin-right: 0.25rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1 {
  margin-left: 0.25rem !important;
}

.mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.m-3 {
  margin: 0.75rem !important;
}

.mt-3 {
  margin-top: 0.75rem !important;
}

.mr-3 {
  margin-right: 0.75rem !important;
}

.mb-3 {
  margin-bottom: 0.75rem !important;
}

.ml-3 {
  margin-left: 0.75rem !important;
}

.mx-3 {
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}

.my-3 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.m-4 {
  margin: 1rem !important;
}

.mt-4 {
  margin-top: 1rem !important;
}

.mr-4 {
  margin-right: 1rem !important;
}

.mb-4 {
  margin-bottom: 1rem !important;
}

.ml-4 {
  margin-left: 1rem !important;
}

.mx-4 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.my-4 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.m-5 {
  margin: 1.25rem !important;
}

.mt-5 {
  margin-top: 1.25rem !important;
}

.mr-5 {
  margin-right: 1.25rem !important;
}

.mb-5 {
  margin-bottom: 1.25rem !important;
}

.ml-5 {
  margin-left: 1.25rem !important;
}

.mx-5 {
  margin-left: 1.25rem !important;
  margin-right: 1.25rem !important;
}

.my-5 {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

.m-6 {
  margin: 1.5rem !important;
}

.mt-6 {
  margin-top: 1.5rem !important;
}

.mr-6 {
  margin-right: 1.5rem !important;
}

.mb-6 {
  margin-bottom: 1.5rem !important;
}

.ml-6 {
  margin-left: 1.5rem !important;
}

.mx-6 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.my-6 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.m-8 {
  margin: 2rem !important;
}

.mt-8 {
  margin-top: 2rem !important;
}

.mr-8 {
  margin-right: 2rem !important;
}

.mb-8 {
  margin-bottom: 2rem !important;
}

.ml-8 {
  margin-left: 2rem !important;
}

.mx-8 {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}

.my-8 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.m-10 {
  margin: 2.5rem !important;
}

.mt-10 {
  margin-top: 2.5rem !important;
}

.mr-10 {
  margin-right: 2.5rem !important;
}

.mb-10 {
  margin-bottom: 2.5rem !important;
}

.ml-10 {
  margin-left: 2.5rem !important;
}

.mx-10 {
  margin-left: 2.5rem !important;
  margin-right: 2.5rem !important;
}

.my-10 {
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
}

.m-12 {
  margin: 3rem !important;
}

.mt-12 {
  margin-top: 3rem !important;
}

.mr-12 {
  margin-right: 3rem !important;
}

.mb-12 {
  margin-bottom: 3rem !important;
}

.ml-12 {
  margin-left: 3rem !important;
}

.mx-12 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.my-12 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.m-16 {
  margin: 4rem !important;
}

.mt-16 {
  margin-top: 4rem !important;
}

.mr-16 {
  margin-right: 4rem !important;
}

.mb-16 {
  margin-bottom: 4rem !important;
}

.ml-16 {
  margin-left: 4rem !important;
}

.mx-16 {
  margin-left: 4rem !important;
  margin-right: 4rem !important;
}

.my-16 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

.m-20 {
  margin: 5rem !important;
}

.mt-20 {
  margin-top: 5rem !important;
}

.mr-20 {
  margin-right: 5rem !important;
}

.mb-20 {
  margin-bottom: 5rem !important;
}

.ml-20 {
  margin-left: 5rem !important;
}

.mx-20 {
  margin-left: 5rem !important;
  margin-right: 5rem !important;
}

.my-20 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}

.m-24 {
  margin: 6rem !important;
}

.mt-24 {
  margin-top: 6rem !important;
}

.mr-24 {
  margin-right: 6rem !important;
}

.mb-24 {
  margin-bottom: 6rem !important;
}

.ml-24 {
  margin-left: 6rem !important;
}

.mx-24 {
  margin-left: 6rem !important;
  margin-right: 6rem !important;
}

.my-24 {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pr-1 {
  padding-right: 0.25rem !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1 {
  padding-left: 0.25rem !important;
}

.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pr-2 {
  padding-right: 0.5rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2 {
  padding-left: 0.5rem !important;
}

.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.p-3 {
  padding: 0.75rem !important;
}

.pt-3 {
  padding-top: 0.75rem !important;
}

.pr-3 {
  padding-right: 0.75rem !important;
}

.pb-3 {
  padding-bottom: 0.75rem !important;
}

.pl-3 {
  padding-left: 0.75rem !important;
}

.px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.p-4 {
  padding: 1rem !important;
}

.pt-4 {
  padding-top: 1rem !important;
}

.pr-4 {
  padding-right: 1rem !important;
}

.pb-4 {
  padding-bottom: 1rem !important;
}

.pl-4 {
  padding-left: 1rem !important;
}

.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.p-5 {
  padding: 1.25rem !important;
}

.pt-5 {
  padding-top: 1.25rem !important;
}

.pr-5 {
  padding-right: 1.25rem !important;
}

.pb-5 {
  padding-bottom: 1.25rem !important;
}

.pl-5 {
  padding-left: 1.25rem !important;
}

.px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.py-5 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.p-6 {
  padding: 1.5rem !important;
}

.pt-6 {
  padding-top: 1.5rem !important;
}

.pr-6 {
  padding-right: 1.5rem !important;
}

.pb-6 {
  padding-bottom: 1.5rem !important;
}

.pl-6 {
  padding-left: 1.5rem !important;
}

.px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.py-6 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.p-8 {
  padding: 2rem !important;
}

.pt-8 {
  padding-top: 2rem !important;
}

.pr-8 {
  padding-right: 2rem !important;
}

.pb-8 {
  padding-bottom: 2rem !important;
}

.pl-8 {
  padding-left: 2rem !important;
}

.px-8 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.py-8 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.p-10 {
  padding: 2.5rem !important;
}

.pt-10 {
  padding-top: 2.5rem !important;
}

.pr-10 {
  padding-right: 2.5rem !important;
}

.pb-10 {
  padding-bottom: 2.5rem !important;
}

.pl-10 {
  padding-left: 2.5rem !important;
}

.px-10 {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

.py-10 {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

.p-12 {
  padding: 3rem !important;
}

.pt-12 {
  padding-top: 3rem !important;
}

.pr-12 {
  padding-right: 3rem !important;
}

.pb-12 {
  padding-bottom: 3rem !important;
}

.pl-12 {
  padding-left: 3rem !important;
}

.px-12 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.py-12 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.p-16 {
  padding: 4rem !important;
}

.pt-16 {
  padding-top: 4rem !important;
}

.pr-16 {
  padding-right: 4rem !important;
}

.pb-16 {
  padding-bottom: 4rem !important;
}

.pl-16 {
  padding-left: 4rem !important;
}

.px-16 {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}

.py-16 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.p-20 {
  padding: 5rem !important;
}

.pt-20 {
  padding-top: 5rem !important;
}

.pr-20 {
  padding-right: 5rem !important;
}

.pb-20 {
  padding-bottom: 5rem !important;
}

.pl-20 {
  padding-left: 5rem !important;
}

.px-20 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.py-20 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.p-24 {
  padding: 6rem !important;
}

.pt-24 {
  padding-top: 6rem !important;
}

.pr-24 {
  padding-right: 6rem !important;
}

.pb-24 {
  padding-bottom: 6rem !important;
}

.pl-24 {
  padding-left: 6rem !important;
}

.px-24 {
  padding-left: 6rem !important;
  padding-right: 6rem !important;
}

.py-24 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-grid {
  display: grid !important;
}

.d-inline-grid {
  display: inline-grid !important;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

.top-0 {
  top: 0 !important;
}

.right-0 {
  right: 0 !important;
}

.bottom-0 {
  bottom: 0 !important;
}

.left-0 {
  left: 0 !important;
}

.top-1 {
  top: 0.25rem !important;
}

.right-1 {
  right: 0.25rem !important;
}

.bottom-1 {
  bottom: 0.25rem !important;
}

.left-1 {
  left: 0.25rem !important;
}

.top-2 {
  top: 0.5rem !important;
}

.right-2 {
  right: 0.5rem !important;
}

.bottom-2 {
  bottom: 0.5rem !important;
}

.left-2 {
  left: 0.5rem !important;
}

.top-3 {
  top: 0.75rem !important;
}

.right-3 {
  right: 0.75rem !important;
}

.bottom-3 {
  bottom: 0.75rem !important;
}

.left-3 {
  left: 0.75rem !important;
}

.top-4 {
  top: 1rem !important;
}

.right-4 {
  right: 1rem !important;
}

.bottom-4 {
  bottom: 1rem !important;
}

.left-4 {
  left: 1rem !important;
}

.top-5 {
  top: 1.25rem !important;
}

.right-5 {
  right: 1.25rem !important;
}

.bottom-5 {
  bottom: 1.25rem !important;
}

.left-5 {
  left: 1.25rem !important;
}

.top-6 {
  top: 1.5rem !important;
}

.right-6 {
  right: 1.5rem !important;
}

.bottom-6 {
  bottom: 1.5rem !important;
}

.left-6 {
  left: 1.5rem !important;
}

.top-8 {
  top: 2rem !important;
}

.right-8 {
  right: 2rem !important;
}

.bottom-8 {
  bottom: 2rem !important;
}

.left-8 {
  left: 2rem !important;
}

.top-10 {
  top: 2.5rem !important;
}

.right-10 {
  right: 2.5rem !important;
}

.bottom-10 {
  bottom: 2.5rem !important;
}

.left-10 {
  left: 2.5rem !important;
}

.top-12 {
  top: 3rem !important;
}

.right-12 {
  right: 3rem !important;
}

.bottom-12 {
  bottom: 3rem !important;
}

.left-12 {
  left: 3rem !important;
}

.top-16 {
  top: 4rem !important;
}

.right-16 {
  right: 4rem !important;
}

.bottom-16 {
  bottom: 4rem !important;
}

.left-16 {
  left: 4rem !important;
}

.top-auto {
  top: auto !important;
}

.right-auto {
  right: auto !important;
}

.bottom-auto {
  bottom: auto !important;
}

.left-auto {
  left: auto !important;
}

.w-auto {
  width: auto !important;
}

.w-full {
  width: 100% !important;
}

.w-screen {
  width: 100vw !important;
}

.w-min {
  width: min-content !important;
}

.w-max {
  width: max-content !important;
}

.w-1\/2 {
  width: 50% !important;
}

.w-1\/3 {
  width: 33.333333% !important;
}

.w-2\/3 {
  width: 66.666667% !important;
}

.w-1\/4 {
  width: 25% !important;
}

.w-3\/4 {
  width: 75% !important;
}

.w-1\/5 {
  width: 20% !important;
}

.w-2\/5 {
  width: 40% !important;
}

.w-3\/5 {
  width: 60% !important;
}

.w-4\/5 {
  width: 80% !important;
}

.h-auto {
  height: auto !important;
}

.h-full {
  height: 100% !important;
}

.h-screen {
  height: 100vh !important;
}

.h-min {
  height: min-content !important;
}

.h-max {
  height: max-content !important;
}

.h-1\/2 {
  height: 50% !important;
}

.h-1\/3 {
  height: 33.333333% !important;
}

.h-2\/3 {
  height: 66.666667% !important;
}

.h-1\/4 {
  height: 25% !important;
}

.h-3\/4 {
  height: 75% !important;
}

.h-1\/5 {
  height: 20% !important;
}

.h-2\/5 {
  height: 40% !important;
}

.h-3\/5 {
  height: 60% !important;
}

.h-4\/5 {
  height: 80% !important;
}

.min-w-0 {
  min-width: 0 !important;
}

.min-w-full {
  min-width: 100% !important;
}

.min-h-0 {
  min-height: 0 !important;
}

.min-h-full {
  min-height: 100% !important;
}

.min-h-screen {
  min-height: 100vh !important;
}

.max-w-none {
  max-width: none !important;
}

.max-w-full {
  max-width: 100% !important;
}

.max-h-none {
  max-height: none !important;
}

.max-h-full {
  max-height: 100% !important;
}

.max-h-screen {
  max-height: 100vh !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-col {
  flex-direction: column !important;
}

.flex-col-reverse {
  flex-direction: column-reverse !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-1 {
  flex: 1 1 0% !important;
}

.flex-auto {
  flex: 1 1 auto !important;
}

.flex-initial {
  flex: 0 1 auto !important;
}

.flex-none {
  flex: none !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink {
  flex-shrink: 1 !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

.justify-evenly {
  justify-content: space-evenly !important;
}

.items-start {
  align-items: flex-start !important;
}

.items-end {
  align-items: flex-end !important;
}

.items-center {
  align-items: center !important;
}

.items-baseline {
  align-items: baseline !important;
}

.items-stretch {
  align-items: stretch !important;
}

.self-auto {
  align-self: auto !important;
}

.self-start {
  align-self: flex-start !important;
}

.self-end {
  align-self: flex-end !important;
}

.self-center {
  align-self: center !important;
}

.self-stretch {
  align-self: stretch !important;
}

.self-baseline {
  align-self: baseline !important;
}

.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}

.uppercase {
  text-transform: uppercase !important;
}

.lowercase {
  text-transform: lowercase !important;
}

.capitalize {
  text-transform: capitalize !important;
}

.normal-case {
  text-transform: none !important;
}

.underline {
  text-decoration: underline !important;
}

.line-through {
  text-decoration: line-through !important;
}

.no-underline {
  text-decoration: none !important;
}

.font-thin {
  font-weight: 100 !important;
}

.font-extralight {
  font-weight: 200 !important;
}

.font-light {
  font-weight: 300 !important;
}

.font-normal {
  font-weight: 400 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-bold {
  font-weight: 700 !important;
}

.font-extrabold {
  font-weight: 800 !important;
}

.font-black {
  font-weight: 900 !important;
}

.italic {
  font-style: italic !important;
}

.not-italic {
  font-style: normal !important;
}

.text-xs {
  font-size: 0.75rem !important;
}

.text-sm {
  font-size: 0.875rem !important;
}

.text-base {
  font-size: 1rem !important;
}

.text-lg {
  font-size: 1.125rem !important;
}

.text-xl {
  font-size: 1.25rem !important;
}

.text-2xl {
  font-size: 1.5rem !important;
}

.text-3xl {
  font-size: 1.7143rem !important;
}

.text-4xl {
  font-size: 2.25rem !important;
}

.text-5xl {
  font-size: 3rem !important;
}

.text-6xl {
  font-size: 3.75rem !important;
}

.leading-none {
  line-height: 1 !important;
}

.leading-tight {
  line-height: 1.25 !important;
}

.leading-snug {
  line-height: 1.375 !important;
}

.leading-normal {
  line-height: 1.5 !important;
}

.leading-relaxed {
  line-height: 1.625 !important;
}

.leading-loose {
  line-height: 2 !important;
}

.text-primary {
  color: var(--color-text-primary) !important;
}

.text-secondary {
  color: var(--color-text-secondary) !important;
}

.text-tertiary {
  color: var(--color-text-tertiary) !important;
}

.text-quaternary {
  color: var(--color-text-quaternary) !important;
}

.text-disabled {
  color: var(--color-text-disabled) !important;
}

.text-inverse {
  color: var(--color-text-inverse) !important;
}

.text-link {
  color: var(--color-text-link) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-warning {
  color: var(--color-warning) !important;
}

.text-error {
  color: var(--color-error) !important;
}

.text-info {
  color: var(--color-info) !important;
}

.text-profit {
  color: var(--color-financial-profit) !important;
}

.text-loss {
  color: var(--color-financial-loss) !important;
}

.text-neutral {
  color: var(--color-financial-neutral) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-surface {
  background-color: var(--color-surface) !important;
}

.bg-surface-secondary {
  background-color: var(--color-background-light) !important;
}

.bg-surface-tertiary {
  background-color: var(--color-surface-tertiary) !important;
}

.bg-background {
  background-color: var(--color-background) !important;
}

.bg-background-secondary {
  background-color: var(--color-background-light) !important;
}

.bg-success {
  background-color: var(--color-success) !important;
}

.bg-success-light {
  background-color: var(--color-success-light) !important;
}

.bg-warning {
  background-color: var(--color-warning) !important;
}

.bg-warning-light {
  background-color: var(--color-warning-light) !important;
}

.bg-error {
  background-color: var(--color-error) !important;
}

.bg-error-light {
  background-color: var(--color-error-light) !important;
}

.bg-info {
  background-color: var(--color-info) !important;
}

.bg-info-light {
  background-color: var(--color-info-light) !important;
}

.border-0 {
  border-width: 0 !important;
}

.border {
  border-width: 1px !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-4 {
  border-width: 4px !important;
}

.border-8 {
  border-width: 8px !important;
}

.border-t {
  border-top-width: 1px !important;
}

.border-r {
  border-right-width: 1px !important;
}

.border-b {
  border-bottom-width: 1px !important;
}

.border-l {
  border-left-width: 1px !important;
}

.border-transparent {
  border-color: transparent !important;
}

.border-current {
  border-color: currentColor !important;
}

.border-primary {
  border-color: var(--color-primary) !important;
}

.border-secondary {
  border-color: var(--color-secondary) !important;
}

.border-success {
  border-color: var(--color-success) !important;
}

.border-warning {
  border-color: var(--color-warning) !important;
}

.border-error {
  border-color: var(--color-error) !important;
}

.border-info {
  border-color: var(--color-info) !important;
}

.rounded-none {
  border-radius: 0 !important;
}

.rounded-sm {
  border-radius: 0.125rem !important;
}

.rounded {
  border-radius: 0.25rem !important;
}

.rounded-md {
  border-radius: 0.375rem !important;
}

.rounded-lg {
  border-radius: 0.5rem !important;
}

.rounded-xl {
  border-radius: 0.75rem !important;
}

.rounded-2xl {
  border-radius: 1rem !important;
}

.rounded-3xl {
  border-radius: 1.5rem !important;
}

.rounded-full {
  border-radius: 9999px !important;
}

.rounded-t-none {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.rounded-t-sm {
  border-top-left-radius: 0.125rem !important;
  border-top-right-radius: 0.125rem !important;
}

.rounded-t {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.rounded-t-md {
  border-top-left-radius: 0.375rem !important;
  border-top-right-radius: 0.375rem !important;
}

.rounded-t-lg {
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
}

.rounded-b-none {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.rounded-b-sm {
  border-bottom-left-radius: 0.125rem !important;
  border-bottom-right-radius: 0.125rem !important;
}

.rounded-b {
  border-bottom-left-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.rounded-b-md {
  border-bottom-left-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}

.rounded-b-lg {
  border-bottom-left-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

.shadow-none {
  box-shadow: none !important;
}

.shadow-sm {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
}

.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

.z-auto {
  z-index: auto !important;
}

.z-0 {
  z-index: 0 !important;
}

.z-10 {
  z-index: 10 !important;
}

.z-20 {
  z-index: 20 !important;
}

.z-30 {
  z-index: 30 !important;
}

.z-40 {
  z-index: 40 !important;
}

.z-50 {
  z-index: 50 !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
}

.overflow-x-visible {
  overflow-x: visible !important;
}

.overflow-x-scroll {
  overflow-x: scroll !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

.overflow-y-hidden {
  overflow-y: hidden !important;
}

.overflow-y-visible {
  overflow-y: visible !important;
}

.overflow-y-scroll {
  overflow-y: scroll !important;
}

.cursor-auto {
  cursor: auto !important;
}

.cursor-default {
  cursor: default !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-wait {
  cursor: wait !important;
}

.cursor-text {
  cursor: text !important;
}

.cursor-move {
  cursor: move !important;
}

.cursor-help {
  cursor: help !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.select-none {
  user-select: none !important;
}

.select-text {
  user-select: text !important;
}

.select-all {
  user-select: all !important;
}

.select-auto {
  user-select: auto !important;
}

.pointer-events-none {
  pointer-events: none !important;
}

.pointer-events-auto {
  pointer-events: auto !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.not-sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

:root {
  --color-primary: #667eea;
  --color-primary-dark: #764ba2;
  --color-primary-light: #ede9fe;
  --color-primary-contrast: #ffffff;
  --color-background: #ffffff;
  --color-background-primary: #ffffff;
  --color-background-secondary: #f8fafc;
  --color-background-light: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-primary: #ffffff;
  --color-surface-secondary: #f8fafc;
  --color-text-primary: #171717;
  --color-text-secondary: #404040;
  --color-text-tertiary: #737373;
  --color-border: #e5e5e5;
  --color-border-light: #f5f5f5;
  --color-success: #22c55e;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-financial-profit: #22c55e;
  --color-financial-loss: #ef4444;
  --color-white-alpha-5: rgba(255, 255, 255, 0.05);
  --color-white-alpha-10: rgba(255, 255, 255, 0.1);
  --color-white-alpha-15: rgba(255, 255, 255, 0.15);
  --color-white-alpha-20: rgba(255, 255, 255, 0.2);
  --color-white-alpha-30: rgba(255, 255, 255, 0.3);
  --color-white-alpha-40: rgba(255, 255, 255, 0.4);
  --color-white-alpha-50: rgba(255, 255, 255, 0.5);
  --color-white-alpha-60: rgba(255, 255, 255, 0.6);
  --color-white-alpha-70: rgba(255, 255, 255, 0.7);
  --color-white-alpha-80: rgba(255, 255, 255, 0.8);
  --color-white-alpha-85: rgba(255, 255, 255, 0.85);
  --color-white-alpha-95: rgba(255, 255, 255, 0.95);
  --color-black-alpha-10: rgba(0, 0, 0, 0.1);
  --color-black-alpha-15: rgba(0, 0, 0, 0.15);
  --color-black-alpha-20: rgba(0, 0, 0, 0.2);
  --color-black-alpha-25: rgba(0, 0, 0, 0.25);
  --color-black-alpha-30: rgba(0, 0, 0, 0.3);
  --color-black-alpha-35: rgba(0, 0, 0, 0.35);
  --color-black-alpha-40: rgba(0, 0, 0, 0.4);
  --color-black-alpha-50: rgba(0, 0, 0, 0.5);
  --color-black-alpha-55: rgba(0, 0, 0, 0.55);
  --color-black-alpha-60: rgba(0, 0, 0, 0.6);
}

:root[data-theme=dark] {
  --color-primary: #a78bfa;
  --color-primary-dark: #ddd6fe;
  --color-primary-light: #581c87;
  --color-primary-contrast: #0d1117;
  --color-background: #0d1117;
  --color-background-primary: #0d1117;
  --color-background-secondary: #1e2538;
  --color-background-light: #1e2538;
  --color-surface: #161b27;
  --color-surface-primary: #161b27;
  --color-surface-secondary: #1e2538;
  --color-text-primary: #fafafa;
  --color-text-secondary: #d4d4d4;
  --color-text-tertiary: #a3a3a3;
  --color-border: #2d3a52;
  --color-border-light: #1e2538;
  --color-success: #4ade80;
  --color-error: #f87171;
  --color-warning: #fbbf24;
  --color-financial-profit: #4ade80;
  --color-financial-loss: #f87171;
  --color-white-alpha-5: rgba(255, 255, 255, 0.05);
  --color-white-alpha-10: rgba(255, 255, 255, 0.1);
  --color-white-alpha-15: rgba(255, 255, 255, 0.15);
  --color-white-alpha-20: rgba(255, 255, 255, 0.2);
  --color-white-alpha-30: rgba(255, 255, 255, 0.3);
  --color-white-alpha-40: rgba(255, 255, 255, 0.4);
  --color-white-alpha-50: rgba(255, 255, 255, 0.5);
  --color-white-alpha-60: rgba(255, 255, 255, 0.6);
  --color-white-alpha-70: rgba(255, 255, 255, 0.7);
  --color-white-alpha-80: rgba(255, 255, 255, 0.8);
  --color-white-alpha-85: rgba(255, 255, 255, 0.85);
  --color-white-alpha-95: rgba(255, 255, 255, 0.95);
  --color-black-alpha-10: rgba(0, 0, 0, 0.1);
  --color-black-alpha-15: rgba(0, 0, 0, 0.15);
  --color-black-alpha-20: rgba(0, 0, 0, 0.2);
  --color-black-alpha-25: rgba(0, 0, 0, 0.25);
  --color-black-alpha-30: rgba(0, 0, 0, 0.3);
  --color-black-alpha-35: rgba(0, 0, 0, 0.35);
  --color-black-alpha-40: rgba(0, 0, 0, 0.4);
  --color-black-alpha-50: rgba(0, 0, 0, 0.5);
  --color-black-alpha-55: rgba(0, 0, 0, 0.55);
  --color-black-alpha-60: rgba(0, 0, 0, 0.6);
}

.financial-positive {
  color: var(--color-financial-profit) !important;
}
.financial-positive::before {
  content: "+";
}

.financial-negative {
  color: var(--color-financial-loss) !important;
}

.financial-neutral {
  color: var(--color-financial-neutral) !important;
}

.stock-table {
  width: 100%;
  border-collapse: collapse;
}
.stock-table th,
.stock-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.stock-table th {
  background-color: var(--color-background-light);
  font-weight: 600;
  color: var(--color-text-primary);
  position: sticky;
  top: 0;
  z-index: 1020;
}
.stock-table tbody tr {
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.stock-table tbody tr:hover {
  background-color: var(--color-surface-hover);
}
.stock-table .col-profit-loss {
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.stock-table .col-percentage {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.stock-table .col-currency {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.chart-container {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-base, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06));
}
.chart-container .chart-title {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  text-align: center;
}
.chart-container .chart-subtitle {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  text-align: center;
  margin-bottom: 1.5rem;
}
.chart-container canvas {
  max-height: 400px;
}

.summary-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1023px) {
  .summary-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .summary-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}
.summary-cards .summary-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: var(--shadow-base, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06));
  text-align: center;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.summary-cards .summary-card:hover {
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
  transform: translateY(-2px);
}
.summary-cards .summary-card .summary-value {
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  display: block;
  margin-bottom: 0.5rem;
}
.summary-cards .summary-card .summary-label {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.summary-cards .summary-card .summary-change {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.summary-cards .summary-card .summary-change.positive {
  color: var(--color-financial-profit);
}
.summary-cards .summary-card .summary-change.positive::before {
  content: "↗";
}
.summary-cards .summary-card .summary-change.negative {
  color: var(--color-financial-loss);
}
.summary-cards .summary-card .summary-change.negative::before {
  content: "↘";
}

.file-upload-area {
  border: 2px dashed var(--color-border-medium);
  border-radius: 0.5rem;
  padding: 2rem;
  text-align: center;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--color-background-light);
}
.file-upload-area:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}
.file-upload-area.drag-over {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-style: solid;
}
.file-upload-area .upload-icon {
  font-size: 3rem;
  color: var(--color-text-tertiary);
  margin-bottom: 1rem;
}
.file-upload-area .upload-text {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}
.file-upload-area .upload-subtext {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

.loading-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--color-border-light);
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.error-message {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1rem;
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: var(--shadow-base, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06));
  background-color: var(--color-error-light);
  border-left: 4px solid var(--color-error);
  color: var(--color-error-dark);
}
.error-message .error-title {
  font-size: var(--font-size-base, 1rem);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.error-message .error-details {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.success-message {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1rem;
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: var(--shadow-base, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06));
  background-color: var(--color-success-light);
  border-left: 4px solid var(--color-success);
  color: var(--color-success-dark);
}
.success-message .success-title {
  font-size: var(--font-size-base, 1rem);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.success-message .success-details {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 767px) {
  .chart-container {
    padding: 1rem;
  }
  .chart-container canvas {
    max-height: 300px;
  }
  .summary-cards {
    gap: 0.75rem;
  }
  .stock-table {
    font-size: 0.875rem;
  }
  .stock-table th,
  .stock-table td {
    padding: 0.5rem 0.75rem;
  }
}
@media print {
  .chart-container {
    box-shadow: none;
    border: 1px solid #000;
  }
  .summary-cards .summary-card {
    box-shadow: none;
    border: 1px solid #000;
  }
  .financial-positive {
    color: #000 !important;
  }
  .financial-positive::before {
    content: "(+) ";
  }
  .financial-negative {
    color: #000 !important;
  }
  .financial-negative::before {
    content: "(-) ";
  }
}:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
  align-items: end;
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  width: var(--toastify-toast-width);
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: var(--toastify-toast-padding);
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: var(--toastify-toast-shadow);
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}

.Toastify__toast-container[data-stacked='true'] {
  width: var(--toastify-toast-width);
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}

.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: unset;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._overlay_1memf_329 {
  position: fixed;
  inset: 0;
  background: var(--color-black-alpha-60);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

._modal_1memf_339 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  background: var(--color-background);
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 2rem;
  max-width: 440px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

._message_1memf_355 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-primary);
  text-align: center;
  line-height: 1.5;
}

._actions_1memf_363 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

._reconnectButton_1memf_371 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._reconnectButton_1memf_371:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._reconnectButton_1memf_371 {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
._reconnectButton_1memf_371:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._reconnectButton_1memf_371 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
}
._reconnectButton_1memf_371:hover {
  opacity: 0.9;
}

._dismissButton_1memf_413 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._dismissButton_1memf_413:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._dismissButton_1memf_413 {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
._dismissButton_1memf_413:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._dismissButton_1memf_413 {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 100ms cubic-bezier(0.4, 0, 0.2, 1);
}
._dismissButton_1memf_413:hover {
  background: var(--color-background-light);
}
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
/**
 * HomePage — public marketing landing page.
 * Theme-aware (light + dark) via design-system tokens and theme-color().
 * No hardcoded hex / rgb — colored accents use the alpha() token helper.
 */
._homePage_1vjeu_335 {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

._eyebrow_1vjeu_342 {
  display: inline-block;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

._sectionHeader_1vjeu_351 {
  max-width: 42rem;
  margin: 0 auto 3rem;
  text-align: center;
}
._sectionHeader_1vjeu_351 h2 {
  font-size: var(--font-size-3xl, 1.7143rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  margin-bottom: 0.75rem;
}
._sectionHeader_1vjeu_351 p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  line-height: 1.625;
}

._cta_1vjeu_372, ._security_1vjeu_372, ._steps_1vjeu_372, ._tiers_1vjeu_372, ._schwab_1vjeu_372, ._showcase_1vjeu_372, ._pillars_1vjeu_372 {
  padding: 6rem 1.5rem;
}
@media (max-width: 1023px) {
  ._cta_1vjeu_372, ._security_1vjeu_372, ._steps_1vjeu_372, ._tiers_1vjeu_372, ._schwab_1vjeu_372, ._showcase_1vjeu_372, ._pillars_1vjeu_372 {
    padding: 4rem 1.25rem;
  }
}
@media (max-width: 639px) {
  ._cta_1vjeu_372, ._security_1vjeu_372, ._steps_1vjeu_372, ._tiers_1vjeu_372, ._schwab_1vjeu_372, ._showcase_1vjeu_372, ._pillars_1vjeu_372 {
    padding: 3rem 1rem;
  }
}

._heroFrame_1vjeu_386 {
  padding: 0.5rem;
  background-color: var(--color-white-alpha-5);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

._heroImage_1vjeu_395 {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

._nav_1vjeu_402 {
  position: sticky;
  top: 0;
  z-index: 1020;
  height: 4.5rem;
  background-color: var(--color-white-alpha-5);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
}

._navInner_1vjeu_412 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (max-width: 639px) {
  ._navInner_1vjeu_412 {
    padding: 0 1rem;
  }
}

._brand_1vjeu_427 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._brandMark_1vjeu_433 {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

._brandName_1vjeu_439 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
}

._navActions_1vjeu_446 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._navSignIn_1vjeu_452 {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  padding: 0.5rem 0.75rem;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.375rem;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._navSignIn_1vjeu_452:hover {
  color: var(--color-text-primary);
}
@media (max-width: 639px) {
  ._navSignIn_1vjeu_452 {
    display: none;
  }
}

._navCta_1vjeu_477 {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: #fafafa;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._navCta_1vjeu_477:hover {
  transform: translateY(-1px);
}

._primaryButton_1vjeu_498,
._secondaryButton_1vjeu_499 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.75rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

._primaryButton_1vjeu_498 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: #fafafa;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
._primaryButton_1vjeu_498:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

._secondaryButton_1vjeu_499 {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
._secondaryButton_1vjeu_499:hover {
  border-color: var(--color-primary);
  background-color: var(--color-background-secondary);
}

._buttonIcon_1vjeu_533 {
  width: 1.125rem;
  height: 1.125rem;
}

._hero_1vjeu_386 {
  position: relative;
  padding: 5rem 1.5rem 6rem;
  overflow: hidden;
}
@media (max-width: 639px) {
  ._hero_1vjeu_386 {
    padding: 3rem 1rem 4rem;
  }
}

._heroGlow_1vjeu_549 {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 60rem;
  max-width: 120%;
  height: 40rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(102, 126, 234, 0.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

._heroInner_1vjeu_562 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 4rem;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  ._heroInner_1vjeu_562 {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
}

._heroText_1vjeu_580 {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (max-width: 1023px) {
  ._heroText_1vjeu_580 {
    align-items: center;
  }
}

._heroTitle_1vjeu_591 {
  margin: 0;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
}
@media (max-width: 639px) {
  ._heroTitle_1vjeu_591 {
    font-size: 2.25rem;
  }
}

._heroSubtitle_1vjeu_605 {
  margin: 0;
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--color-text-secondary);
}

._heroButtons_1vjeu_613 {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
@media (max-width: 639px) {
  ._heroButtons_1vjeu_613 {
    flex-direction: column;
    width: 100%;
  }
}

._trustLine_1vjeu_625 {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

._heroVisual_1vjeu_631 {
  min-width: 0;
}

._pillars_1vjeu_372 {
  background-color: var(--color-background-secondary);
}

._pillarGrid_1vjeu_639 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  ._pillarGrid_1vjeu_639 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 639px) {
  ._pillarGrid_1vjeu_639 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

._pillarCard_1vjeu_658 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._pillarCard_1vjeu_658:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
._pillarCard_1vjeu_658 h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
._pillarCard_1vjeu_658 p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--color-text-secondary);
}

._pillarIcon_1vjeu_686 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}
._pillarIcon_1vjeu_686 svg {
  width: 1.5rem;
  height: 1.5rem;
}

._showcase_1vjeu_372 {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  ._showcase_1vjeu_372 {
    gap: 4rem;
  }
}

._showcaseRow_1vjeu_714 {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 4rem;
}
@media (max-width: 1023px) {
  ._showcaseRow_1vjeu_714 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

._showcaseReverse_1vjeu_727 ._showcaseText_1vjeu_727 {
  order: 2;
}
._showcaseReverse_1vjeu_727 ._showcaseVisual_1vjeu_730 {
  order: 1;
}
@media (max-width: 1023px) {
  ._showcaseReverse_1vjeu_727 ._showcaseText_1vjeu_727 {
    order: 1;
  }
  ._showcaseReverse_1vjeu_727 ._showcaseVisual_1vjeu_730 {
    order: 2;
  }
}

._showcaseText_1vjeu_727 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
._showcaseText_1vjeu_727 h3 {
  margin: 0;
  font-size: 1.7143rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
}
._showcaseText_1vjeu_727 p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--color-text-secondary);
}

._showcaseVisual_1vjeu_730 {
  min-width: 0;
}

._schwab_1vjeu_372 {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(102, 126, 234, 0.06) 100%);
}

._schwabBadge_1vjeu_769 {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  border-radius: 9999px;
  background-color: #0d9488;
  color: #fafafa;
}

._schwabGrid_1vjeu_782 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  ._schwabGrid_1vjeu_782 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 639px) {
  ._schwabGrid_1vjeu_782 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

._schwabCard_1vjeu_801 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._schwabCard_1vjeu_801:hover {
  transform: translateY(-4px);
  border-color: #14b8a6;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
._schwabCard_1vjeu_801 h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
._schwabCard_1vjeu_801 p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--color-text-secondary);
}

._schwabIcon_1vjeu_829 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background-color: rgba(20, 184, 166, 0.12);
  color: #14b8a6;
}
._schwabIcon_1vjeu_829 svg {
  width: 1.5rem;
  height: 1.5rem;
}

._schwabNote_1vjeu_844 {
  max-width: 52rem;
  margin: 2.5rem auto 0;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.625;
  color: var(--color-text-tertiary);
}

._tiers_1vjeu_372 {
  background-color: var(--color-background-secondary);
}

._tierGrid_1vjeu_857 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 1.5rem;
  max-width: 1024px;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  ._tierGrid_1vjeu_857 {
    grid-template-columns: 1fr;
    max-width: 30rem;
  }
}

._tierCard_1vjeu_872 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._tierCard_1vjeu_872:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

._tierFeatured_1vjeu_887 {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), 0 12px 40px rgba(102, 126, 234, 0.22);
}

._tier-schwab_1vjeu_892 {
  border-color: #14b8a6;
}

._tierBadge_1vjeu_896 {
  position: absolute;
  top: 0;
  right: 1.5rem;
  transform: translateY(-50%);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  border-radius: 9999px;
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: #fafafa;
}
._tier-schwab_1vjeu_892 ._tierBadge_1vjeu_896 {
  background: #14b8a6;
}

._tierHead_1vjeu_914 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
._tierHead_1vjeu_914 h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._tierEyebrow_1vjeu_926 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
._tierFeatured_1vjeu_887 ._tierEyebrow_1vjeu_926 {
  color: var(--color-primary);
}
._tier-schwab_1vjeu_892 ._tierEyebrow_1vjeu_926 {
  color: #14b8a6;
}

._tierTagline_1vjeu_940 {
  margin: 0;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.625;
  color: var(--color-text-secondary);
}

._tierFeatures_1vjeu_948 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
}
._tierFeatures_1vjeu_948 li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._checkIcon_1vjeu_965 {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  color: var(--color-success);
}

._tierButton_1vjeu_973 {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._tierButton_1vjeu_973:hover {
  border-color: var(--color-primary);
}
._tierFeatured_1vjeu_887 ._tierButton_1vjeu_973 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  border-color: transparent;
  color: #fafafa;
}
._tierFeatured_1vjeu_887 ._tierButton_1vjeu_973:hover {
  transform: translateY(-2px);
}
._tier-schwab_1vjeu_892 ._tierButton_1vjeu_973 {
  background: #14b8a6;
  border-color: transparent;
  color: #fafafa;
}
._tier-schwab_1vjeu_892 ._tierButton_1vjeu_973:hover {
  transform: translateY(-2px);
}

._stepGrid_1vjeu_1012 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1024px;
  margin: 0 auto;
}
@media (max-width: 639px) {
  ._stepGrid_1vjeu_1012 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

._step_1vjeu_372 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
  align-items: center;
}
._step_1vjeu_372 h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
._step_1vjeu_372 p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--color-text-secondary);
}

._stepNumber_1vjeu_1046 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 1.25rem;
  font-weight: 700;
}

._security_1vjeu_372 {
  background-color: var(--color-background-secondary);
}

._securityGrid_1vjeu_1063 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1024px;
  margin: 0 auto;
}
@media (max-width: 639px) {
  ._securityGrid_1vjeu_1063 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

._securityItem_1vjeu_1077 {
  display: flex;
  gap: 1rem;
}
._securityItem_1vjeu_1077 h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
._securityItem_1vjeu_1077 p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--color-text-secondary);
}

._securityIcon_1vjeu_1094 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}
._securityIcon_1vjeu_1094 svg {
  width: 1.375rem;
  height: 1.375rem;
}

._cta_1vjeu_372 {
  text-align: center;
}

._ctaInner_1vjeu_1114 {
  max-width: 40rem;
  margin: 0 auto;
  padding: 4rem 2rem;
  border-radius: 1.5rem;
  border: 1px solid var(--color-border);
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, var(--color-surface) 60%);
}
@media (max-width: 639px) {
  ._ctaInner_1vjeu_1114 {
    padding: 2.5rem 1.25rem;
  }
}
._ctaInner_1vjeu_1114 h2 {
  font-size: var(--font-size-3xl, 1.7143rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  margin-bottom: 0.75rem;
}
._ctaInner_1vjeu_1114 p {
  margin: 0 0 2rem;
  font-size: 1.125rem;
  color: var(--color-text-secondary);
}

._footer_1vjeu_1142 {
  padding: 4rem 1.5rem 2rem;
  background-color: var(--color-background);
  border-top: 1px solid var(--color-border);
}

._footerInner_1vjeu_1148 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1280px;
  margin: 0 auto;
  gap: 2rem;
}
@media (max-width: 639px) {
  ._footerInner_1vjeu_1148 {
    flex-direction: column;
    gap: 1.5rem;
  }
}

._footerBrand_1vjeu_1164 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 22rem;
}
._footerBrand_1vjeu_1164 p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._footerSupport_1vjeu_1176 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
._footerSupport_1vjeu_1176 h4 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
._footerSupport_1vjeu_1176 a {
  font-size: 0.875rem;
  color: var(--color-primary);
  text-decoration: none;
}
._footerSupport_1vjeu_1176 a:hover {
  text-decoration: underline;
}

._footerBottom_1vjeu_1198 {
  max-width: 1280px;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
._footerBottom_1vjeu_1198 p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._hub_7fhcb_329 {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 4rem 1.5rem 5rem;
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  position: relative;
  overflow: hidden;
}
._hub_7fhcb_329::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(196, 181, 253, 0.18) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(118, 75, 162, 0.25) 0%, transparent 60%);
  pointer-events: none;
}

._header_7fhcb_347 {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}

._title_7fhcb_354 {
  font-size: var(--font-size-4xl, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-inverse);
  margin-bottom: 0.75rem;
  font-size: 3rem;
  text-shadow: 0 2px 12px var(--color-black-alpha-20);
}
@media (max-width: 639px) {
  ._title_7fhcb_354 {
    font-size: 1.7143rem;
  }
}

._brand_7fhcb_372 {
  color: #fcd34d;
  -webkit-text-fill-color: #fcd34d;
}

._subtitle_7fhcb_377 {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-white-alpha-80);
  margin: 0;
  letter-spacing: 0.025em;
}

._tileGrid_7fhcb_386 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
  max-width: 980px;
  position: relative;
  z-index: 1;
}
@media (max-width: 639px) {
  ._tileGrid_7fhcb_386 {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

._tile_7fhcb_386 {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-2xl, 1rem);
  box-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
  transition: "all" "normal" cubic-bezier(0.4, 0, 0.2, 1);
  appearance: none;
  border: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  padding: 2rem;
  background: var(--color-surface);
  backdrop-filter: blur(16px);
  color: var(--color-text-primary);
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
}
._tile_7fhcb_386::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 1rem 1rem 0 0;
}
._tile_7fhcb_386:hover:not(:disabled) {
  transform: translateY(-6px);
  box-shadow: 0 32px 64px var(--color-black-alpha-20), 0 8px 24px rgba(102, 126, 234, 0.2);
  border-color: var(--color-border-focus);
}
._tile_7fhcb_386:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._tile_7fhcb_386:focus-visible:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._tile_7fhcb_386:focus-visible {
  outline-offset: 4px;
}

._tileDisabled_7fhcb_446 {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(30%);
}
._tileDisabled_7fhcb_446:hover {
  transform: none !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

._accentPortfolio_7fhcb_456::before {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
}

._accentTrading_7fhcb_460::before {
  background: linear-gradient(90deg, #0d9488 0%, #22c55e 100%);
}

._accentInsights_7fhcb_464::before {
  background: linear-gradient(90deg, #16a34a 0%, #2dd4bf 100%);
}

._betaBadge_7fhcb_468 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "semibold";
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(251, 191, 36, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(251, 191, 36, 0.4);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  align-self: flex-start;
}

._activeBadge_7fhcb_483 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "semibold";
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(20, 184, 166, 0.15);
  color: #2dd4bf;
  border: 1px solid rgba(45, 212, 191, 0.4);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  align-self: flex-start;
}

._tileIcon_7fhcb_498 {
  font-size: 2.25rem;
  line-height: 1;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  flex-shrink: 0;
}
._accentPortfolio_7fhcb_456 ._tileIcon_7fhcb_498 {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(167, 139, 250, 0.2) 100%);
}
._accentTrading_7fhcb_460 ._tileIcon_7fhcb_498 {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, rgba(34, 197, 94, 0.2) 100%);
}
._accentInsights_7fhcb_464 ._tileIcon_7fhcb_498 {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(45, 212, 191, 0.2) 100%);
}

._tileTitle_7fhcb_519 {
  font-size: var(--font-size-3xl, 1.7143rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  margin: 0;
  font-size: 1.5rem;
}

._tileDescription_7fhcb_531 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.625;
}

._importOptions_7fhcb_540 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

._importOption_7fhcb_540 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-background-light);
  transition: "all" "fast" cubic-bezier(0.4, 0, 0.2, 1);
}

._importOptionPremium_7fhcb_558 {
  border-color: rgba(45, 212, 191, 0.45);
  background: rgba(20, 184, 166, 0.1);
}

._importOptionLocked_7fhcb_563 {
  border-color: rgba(251, 191, 36, 0.25);
  background: rgba(245, 158, 11, 0.07);
  opacity: 0.72;
  cursor: default;
}
._importOptionLocked_7fhcb_563 ._importLabel_7fhcb_569 {
  color: var(--color-text-secondary);
}

._importIcon_7fhcb_573 {
  font-size: 1.25rem;
  flex-shrink: 0;
}

._importLabel_7fhcb_569 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "semibold";
  line-height: 1.5;
  color: var(--color-text-primary);
  display: block;
}

._importNote_7fhcb_586 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-secondary);
  display: block;
}

._premiumBadge_7fhcb_594 {
  font-size: var(--font-size-2xs, );
  font-weight: "bold";
  line-height: 1.5;
  background: #0f766e;
  color: var(--color-text-inverse);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

._featureList_7fhcb_608 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._featureItem_7fhcb_617 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "medium";
  line-height: 1.5;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._checkmark_7fhcb_627 {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._tileCta_7fhcb_641 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._tileCta_7fhcb_641:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._tileCta_7fhcb_641 {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
._tileCta_7fhcb_641:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._tileCta_7fhcb_641 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: "all" "fast" cubic-bezier(0.4, 0, 0.2, 1);
  align-self: flex-start;
}
._accentPortfolio_7fhcb_456 ._tileCta_7fhcb_641 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: var(--color-text-inverse);
  box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35);
}
._accentTrading_7fhcb_460 ._tileCta_7fhcb_641 {
  background: linear-gradient(135deg, #0d9488 0%, #22c55e 100%);
  color: var(--color-text-inverse);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}
._accentInsights_7fhcb_464 ._tileCta_7fhcb_641 {
  background: linear-gradient(135deg, #16a34a 0%, #2dd4bf 100%);
  color: var(--color-text-inverse);
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
}
._tile_7fhcb_386:hover:not(:disabled) ._tileCta_7fhcb_641 {
  transform: translateX(4px);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
/**
 * FileUploader Component Styles
 * Converted from CSS to enterprise SCSS with design tokens
 */
._container_5xpd8_333 {
  width: 100%;
  margin-bottom: 1rem;
}

._dropzone_5xpd8_338 {
  border: 2px dashed var(--color-border);
  border-radius: 0.375rem;
  padding: 1rem;
  text-align: center;
  transition: all 200ms ease;
  cursor: pointer;
  position: relative;
  background-color: var(--color-background-light);
}
._dropzone_5xpd8_338:hover {
  border-color: var(--color-primary);
  background-color: var(--color-surface-hover);
  transform: translateY(-1px);
}
._dropzone_5xpd8_338._active_5xpd8_353 {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}
._dropzone_5xpd8_338._processing_5xpd8_358 {
  cursor: default;
  pointer-events: none;
}
._dropzone_5xpd8_338._processing_5xpd8_358:hover {
  transform: none;
}

._fileInput_5xpd8_366 {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
._fileInput_5xpd8_366:focus + ._content_5xpd8_372 {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

._content_5xpd8_372 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

._uploadIcon_5xpd8_385 {
  width: 48px;
  height: 48px;
  color: var(--color-primary);
  opacity: 0.8;
  transition: all 100ms ease;
}
._dropzone_5xpd8_338:hover ._uploadIcon_5xpd8_385 {
  transform: scale(1.1);
  opacity: 1;
}

._instructions_5xpd8_397 {
  margin: 0.5rem 0 0.25rem;
  font-size: 1rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

._noteText_5xpd8_404 {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  font-style: italic;
}

._fileList_5xpd8_411 {
  width: 100%;
  max-width: 500px;
  margin-top: 0.75rem;
  text-align: left;
  padding: 0.5rem;
  border-radius: 0.125rem;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
}
._fileList_5xpd8_411 ul {
  margin: 0.25rem 0;
  padding-left: 1rem;
  list-style-type: disc;
}
._fileList_5xpd8_411 li {
  margin: 0.25rem 0;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  word-break: break-all;
  line-height: 1.625;
}

._clearButton_5xpd8_434 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._clearButton_5xpd8_434:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._clearButton_5xpd8_434 {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
._clearButton_5xpd8_434:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._clearButton_5xpd8_434 {
  background-color: var(--color-error);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 0.125rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: all 100ms ease;
}
._clearButton_5xpd8_434:hover {
  background-color: var(--color-error-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
._clearButton_5xpd8_434:active {
  transform: translateY(0);
}
._clearButton_5xpd8_434:disabled {
  background-color: var(--color-disabled);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

._helpSection_5xpd8_489 {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--color-background);
  text-align: left;
  border: 1px solid var(--color-border);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

._bankSection_5xpd8_501 {
  margin-bottom: 0.75rem;
}
._bankSection_5xpd8_501:last-child {
  margin-bottom: 0;
}

._helpTitle_5xpd8_508 {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
}

._helpText_5xpd8_515 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
  line-height: 1.625;
}

._helpList_5xpd8_522 {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.625;
}
._helpList_5xpd8_522 li {
  margin-bottom: 0.25rem;
  color: var(--color-text-primary);
}

._otherBrokerageSection_5xpd8_533 {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border-light);
}

._requestText_5xpd8_539 {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.625;
}

._emailLink_5xpd8_546 {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
._emailLink_5xpd8_546:hover {
  text-decoration: underline;
  color: var(--color-primary-dark);
}

@media (max-width: 1023px) {
  ._container_5xpd8_333 {
    margin-bottom: 0.75rem;
  }
  ._dropzone_5xpd8_338 {
    padding: 0.75rem;
  }
  ._uploadIcon_5xpd8_385 {
    width: 40px;
    height: 40px;
  }
  ._instructions_5xpd8_397 {
    font-size: 0.875rem;
  }
  ._noteText_5xpd8_404 {
    font-size: 0.75rem;
  }
  ._helpSection_5xpd8_489 {
    margin-top: 0.5rem;
    padding: 0.5rem;
    max-width: 100%;
  }
}
@media (max-width: 639px) {
  ._dropzone_5xpd8_338 {
    padding: 0.5rem;
  }
  ._uploadIcon_5xpd8_385 {
    width: 32px;
    height: 32px;
  }
  ._instructions_5xpd8_397 {
    font-size: 0.75rem;
    margin: 0.25rem 0;
  }
  ._noteText_5xpd8_404 {
    font-size: 0.625rem;
  }
  ._fileList_5xpd8_411 {
    padding: 0.25rem;
  }
  ._fileList_5xpd8_411 li {
    font-size: 0.75rem;
  }
  ._clearButton_5xpd8_434 {
    padding: 0.25rem;
    font-size: 0.75rem;
  }
  ._helpSection_5xpd8_489 {
    padding: 0.5rem;
  }
  ._helpTitle_5xpd8_508,
  ._helpText_5xpd8_515,
  ._helpList_5xpd8_522 {
    font-size: 0.75rem;
  }
}
._spinner_5xpd8_613 {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-border-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: _spin_5xpd8_613 1s linear infinite;
}

@keyframes _spin_5xpd8_613 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
._privacyNotice_5xpd8_630 {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--color-info-light);
  border-left: 3px solid var(--color-info);
  border-radius: 0.125rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
._privacyNotice_5xpd8_630 p {
  margin: 0;
  line-height: 1.5;
}

._privacyIcon_5xpd8_647 {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-info);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._chartWrapper_ceq1d_329 {
  position: relative;
  height: 300px;
  width: 100%;
}
@media (max-width: 639px) {
  ._chartWrapper_ceq1d_329 {
    height: 220px;
  }
}

._noData_ceq1d_340 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_gcfwj_329 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

._title_gcfwj_340 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

._list_gcfwj_347 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._item_gcfwj_353 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._itemRow_gcfwj_359 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
}

._itemLabel_gcfwj_366 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

._itemValue_gcfwj_372 {
  font-size: 0.875rem;
  font-weight: 600;
}

._profit_gcfwj_377 {
  color: var(--color-financial-profit);
}

._loss_gcfwj_381 {
  color: var(--color-financial-loss);
}

._barTrack_gcfwj_385 {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: var(--color-white-alpha-8);
  border-radius: 9999px;
  overflow: hidden;
}

._bar_gcfwj_385 {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 9999px;
  min-width: 4px;
}

._barProfit_gcfwj_403 {
  background-color: #22c55e;
}

._barLoss_gcfwj_407 {
  background-color: #ef4444;
}

._noData_gcfwj_411 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
}

._toggleBtn_gcfwj_420 {
  align-self: center;
  margin-top: 0.25rem;
  padding: 0.375rem 1rem;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 150ms ease;
}
._toggleBtn_gcfwj_420:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
/**
 * UploadPage Component Styles
 * Converted from CSS to enterprise SCSS with design tokens
 */
._container_u3owb_333 {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

._uploadSection_u3owb_342 {
  margin-bottom: 2rem;
  margin-top: 1.5rem;
}

._helpSection_u3owb_347 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  background: var(--color-background-light);
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
}
._helpSection_u3owb_347 h3 {
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 600;
}
._helpSection_u3owb_347 > p {
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.625;
}

._features_u3owb_370 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

._supportNote_u3owb_376 {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--color-background);
  border-radius: 0.375rem;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
}
._supportNote_u3owb_376 p {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.625;
  margin: 0;
}
._supportNote_u3owb_376 ._emailLink_u3owb_390 {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 100ms ease;
}
._supportNote_u3owb_376 ._emailLink_u3owb_390:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

._feature_u3owb_370 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  background: var(--color-background);
  padding: 1rem;
  border-radius: 0.375rem;
  border: 1px solid var(--color-border);
  transition: all 100ms ease;
}
._feature_u3owb_370:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-color: var(--color-border-primary);
}
._feature_u3owb_370 h4 {
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 500;
}
._feature_u3owb_370 p {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.625;
  margin: 0;
}

._divider_u3owb_430 {
  display: flex;
  align-items: center;
  margin: 1rem 0;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._divider_u3owb_430::before, ._divider_u3owb_430::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
._divider_u3owb_430 span {
  padding: 0 0.75rem;
}

._schwabImportSection_u3owb_450 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  background: var(--color-background-light);
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  margin-bottom: 2rem;
}
._schwabImportSection_u3owb_450 h3 {
  color: var(--color-text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
._schwabImportSection_u3owb_450 > p {
  color: var(--color-text-secondary);
  font-size: 1rem;
  margin-bottom: 1rem;
}

._dateRange_u3owb_473 {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

._dateLabel_u3owb_480 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

._dateInput_u3owb_489 {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-size: 1rem;
  transition: border-color 100ms ease;
}
._dateInput_u3owb_489:focus {
  outline: none;
  border-color: var(--color-border-focus);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._dateInput_u3owb_489:focus:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._dateInput_u3owb_489:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._importButton_u3owb_513 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._importButton_u3owb_513:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._importButton_u3owb_513 {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
._importButton_u3owb_513:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._importButton_u3owb_513 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 100ms ease, transform 100ms ease;
  white-space: nowrap;
}
._importButton_u3owb_513:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
._importButton_u3owb_513:active:not(:disabled) {
  transform: translateY(0);
}
._importButton_u3owb_513:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 1023px) {
  ._container_u3owb_333 {
    padding: 0.75rem;
  }
  ._features_u3owb_370 {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}
@media (max-width: 639px) {
  ._container_u3owb_333 {
    padding: 0.5rem;
  }
  ._helpSection_u3owb_347 {
    padding: 1rem;
  }
  ._helpSection_u3owb_347 h3 {
    font-size: 1.25rem;
  }
  ._helpSection_u3owb_347 > p {
    font-size: 1rem;
  }
  ._feature_u3owb_370 {
    padding: 0.75rem;
  }
  ._feature_u3owb_370 h4 {
    font-size: 1rem;
  }
  ._feature_u3owb_370 p {
    font-size: 0.75rem;
  }
}
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
/**
 * LoginPage — branded auth entry, styled to match the marketing home page.
 * Theme-aware (light + dark) via design-system tokens and theme-color().
 */
._page_sd1oa_334 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: var(--color-background);
  overflow: hidden;
}

._glow_sd1oa_345 {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 50rem;
  max-width: 130%;
  height: 40rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(102, 126, 234, 0.18) 0%, transparent 65%);
  pointer-events: none;
}

._backHome_sd1oa_357 {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._backHome_sd1oa_357:hover {
  color: var(--color-text-primary);
}

._backIcon_sd1oa_375 {
  width: 1rem;
  height: 1rem;
}

._card_sd1oa_380 {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  padding: 2.5rem 2rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
@media (max-width: 639px) {
  ._card_sd1oa_380 {
    padding: 2rem 1.25rem;
  }
}

._brand_sd1oa_397 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

._logo_sd1oa_404 {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

._brandName_sd1oa_410 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
}

._tagline_sd1oa_417 {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._title_sd1oa_424 {
  margin: 2rem 0 0.5rem;
  text-align: center;
  font-size: 1.7143rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._subtitle_sd1oa_432 {
  margin: 0 0 2rem;
  text-align: center;
  font-size: 1rem;
  color: var(--color-text-secondary);
}

._buttons_sd1oa_439 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._primaryButton_sd1oa_445,
._secondaryButton_sd1oa_446 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.75rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

._primaryButton_sd1oa_445 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: #fafafa;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
._primaryButton_sd1oa_445:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
._primaryButton_sd1oa_445:active {
  transform: translateY(0);
}

._secondaryButton_sd1oa_446 {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
._secondaryButton_sd1oa_446:hover {
  border-color: var(--color-primary);
  background-color: var(--color-background-secondary);
}

._errorAlert_sd1oa_482 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 0.5rem;
  color: var(--color-error);
}
._errorAlert_sd1oa_482 p {
  margin: 0;
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
}

._clearError_sd1oa_501 {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-error);
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._clearError_sd1oa_501 svg {
  width: 1.125rem;
  height: 1.125rem;
}
._clearError_sd1oa_501:hover {
  opacity: 0.7;
}

._features_sd1oa_525 {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
._features_sd1oa_525 h2 {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
._features_sd1oa_525 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
._features_sd1oa_525 li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--color-text-secondary);
}

._checkIcon_sd1oa_555 {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  color: var(--color-success);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
/**
 * AuthCallback Component Styles
 * Converted from CSS to enterprise SCSS with design tokens
 */
._container_wf5oa_333 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--color-background);
  padding: 1.5rem;
}

._loadingCard_wf5oa_342,
._errorCard_wf5oa_343 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  background: var(--color-background);
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  text-align: center;
  max-width: 400px;
  width: 100%;
}
._loadingCard_wf5oa_342 h2,
._errorCard_wf5oa_343 h2 {
  color: var(--color-text-primary);
  margin: 0 0 0.75rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}
._loadingCard_wf5oa_342 p,
._errorCard_wf5oa_343 p {
  color: var(--color-text-secondary);
  margin: 0 0 1.5rem 0;
  line-height: 1.625;
}

._spinner_wf5oa_370 {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border-light);
  border-top: 4px solid var(--color-primary);
  border-radius: 50%;
  animation: _spin_wf5oa_370 300ms linear infinite;
  margin: 0 auto 1rem auto;
}

@keyframes _spin_wf5oa_370 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
._button_wf5oa_388 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._button_wf5oa_388:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._button_wf5oa_388 {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
._button_wf5oa_388:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._button_wf5oa_388 {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 100ms ease;
}
._button_wf5oa_388:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
._button_wf5oa_388:active {
  transform: translateY(0);
}

._errorCard_wf5oa_343 {
  border-left: 4px solid var(--color-error);
}
._errorCard_wf5oa_343 h2 {
  color: var(--color-error);
}

@media (max-width: 639px) {
  ._container_wf5oa_333 {
    padding: 0.75rem;
  }
  ._loadingCard_wf5oa_342,
  ._errorCard_wf5oa_343 {
    padding: 1.5rem;
  }
  ._loadingCard_wf5oa_342 h2,
  ._errorCard_wf5oa_343 h2 {
    font-size: 1.25rem;
  }
  ._loadingCard_wf5oa_342 p,
  ._errorCard_wf5oa_343 p {
    font-size: 0.875rem;
  }
  ._spinner_wf5oa_370 {
    width: 32px;
    height: 32px;
    border-width: 3px;
  }
  ._button_wf5oa_388 {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._card_gl5cz_329 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 240px;
  flex-shrink: 0;
  padding: 1rem;
}

._cardTop_gl5cz_342 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

._symbolBlock_gl5cz_350 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._symbol_gl5cz_350 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

._avgCost_gl5cz_363 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin: 0;
}

._badge_gl5cz_369 {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._dataGrid_gl5cz_381 {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  row-gap: 0.25rem;
  font-size: 0.875rem;
}

._label_gl5cz_389 {
  color: var(--color-text-secondary);
}

._value_gl5cz_393 {
  font-weight: 500;
  color: var(--color-text-primary);
}

._valuePositive_gl5cz_398 {
  font-weight: 600;
  color: var(--color-financial-profit);
}

._placeBtn_gl5cz_403 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._placeBtn_gl5cz_403:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._placeBtn_gl5cz_403 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._placeBtn_gl5cz_403:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._placeBtn_gl5cz_403 {
  width: 100%;
  background: var(--color-financial-profit);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  justify-content: center;
}
._placeBtn_gl5cz_403:hover {
  opacity: 0.88;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
@keyframes _spin_1yfvy_345 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._wrapper_1yfvy_337 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

._spinner_1yfvy_345 {
  border-radius: 9999px;
  border-style: solid;
  border-color: var(--color-border);
  border-top-color: #667eea;
  animation: _spin_1yfvy_345 0.8s linear infinite;
}
._spinner--sm_1yfvy_352 {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
._spinner--md_1yfvy_357 {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
._spinner--lg_1yfvy_362 {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

._label_1yfvy_368 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-secondary);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._banner_1hehm_329 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

._header_1hehm_336 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

._title_1hehm_345 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

._timestamp_1hehm_352 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

._cardList_1hehm_359 {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
._cardList_1hehm_359::-webkit-scrollbar {
  height: 4px;
}
._cardList_1hehm_359::-webkit-scrollbar-track {
  background: transparent;
}
._cardList_1hehm_359::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 9999px;
}

._loading_1hehm_376 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

._loadingText_1hehm_386 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}/**
 * CriteriaChecklist Component Styles
 * 
 * Theme-aware styles for eligibility criteria display
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._grid_10sne_334 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 0.75rem;
}

._item_10sne_340 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 11px;
  font-weight: 500;
}

._icon_10sne_348 {
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

._itemPassed_10sne_355 {
  color: var(--color-success-dark);
}

._iconPassed_10sne_359 {
  color: var(--color-success);
}

._itemWarning_10sne_363 {
  color: var(--color-warning-dark);
}

._iconWarning_10sne_367 {
  color: var(--color-warning);
}

._itemFailed_10sne_371 {
  color: var(--color-error);
}

._iconFailed_10sne_375 {
  color: var(--color-error);
}

._itemNeutral_10sne_379 {
  color: var(--color-text-secondary);
}

._iconNeutral_10sne_383 {
  color: var(--color-text-tertiary);
  font-size: 8px;
}/**
 * OptionLegRow Component Styles
 * 
 * Theme-aware styles for individual option strike rows
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._row_129xk_334 {
  border-bottom: 1px solid var(--color-border-light);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._row_129xk_334:hover {
  background: var(--color-surface-hover);
}

._rowRecommended_129xk_342 {
  background: rgba(59, 130, 246, 0.04);
}
._rowRecommended_129xk_342:hover {
  background: rgba(59, 130, 246, 0.08);
}

._td_129xk_349 {
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
}
@media (max-width: 639px) {
  ._td_129xk_349 {
    padding: 0.5rem 0.75rem;
  }
}

._tdStrike_129xk_359 {
  font-weight: 600;
  color: var(--color-text-primary);
}

._tdSecondary_129xk_364 {
  color: var(--color-text-tertiary);
}

._tdMid_129xk_368 {
  font-weight: 700;
  color: var(--color-primary);
}

._tdYield_129xk_373 {
  font-weight: 600;
  color: var(--color-text-primary);
}

._tdProfit_129xk_378 {
  font-weight: 500;
  color: var(--color-text-secondary);
}

._star_129xk_383 {
  margin-right: 0.5rem;
  font-size: 1rem;
}

._placeButton_129xk_388 {
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

._placeButtonActive_129xk_396 {
  background: #22c55e;
  color: #fff;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}
._placeButtonActive_129xk_396:hover {
  background: #16a34a;
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
}
._placeButtonActive_129xk_396:active {
  transform: scale(0.95);
}

._placeButtonWarning_129xk_409 {
  background: var(--color-warning-light);
  border: 2px solid var(--color-warning);
  color: var(--color-warning-dark);
}
._placeButtonWarning_129xk_409:hover {
  background: var(--color-warning);
  color: var(--color-text-inverse);
}

._placeButtonDisabled_129xk_419 {
  cursor: not-allowed;
  background: var(--color-surface-secondary);
  color: var(--color-text-disabled);
}

._tdQuality_129xk_425 {
  white-space: nowrap;
}

._tierBadge_129xk_429 {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: default;
}

._tierPremium_129xk_439 {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

._tierGood_129xk_444 {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

._tierAcceptable_129xk_449 {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

._tierThin_129xk_454 {
  background: var(--color-surface);
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border);
}

@media (max-width: 639px) {
  ._tdOtmPct_129xk_461,
  ._tdDelta_129xk_462,
  ._tdBidAsk_129xk_463,
  ._tdOi_129xk_464,
  ._tdQuality_129xk_425,
  ._tdIfAssigned_129xk_466 {
    display: none;
  }
}/**
 * OptionChainTable Component Styles
 * 
 * Theme-aware styles for the option strikes table
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._tableContainer_1kujk_334 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

._table_1kujk_334 {
  min-width: 100%;
  border-collapse: collapse;
}

._tableHeader_1kujk_345 {
  border-bottom: 2px solid var(--color-border-medium);
}

._th_1kujk_349 {
  padding: 0.75rem 1.5rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
@media (max-width: 639px) {
  ._th_1kujk_349 {
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 639px) {
  ._tableHeader_1kujk_345 tr th:nth-child(2),
  ._tableHeader_1kujk_345 tr th:nth-child(3),
  ._tableHeader_1kujk_345 tr th:nth-child(4),
  ._tableHeader_1kujk_345 tr th:nth-child(6) {
    display: none;
  }
}

@media (max-width: 639px) {
  ._thQuality_1kujk_375,
  ._thIfAssigned_1kujk_376 {
    display: none;
  }
}/**
 * OptionChainPanel Component Styles
 * 
 * Theme-aware styles for expiry tabs
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._panel_1p1p4_334 {
  overflow: hidden;
  width: 100%;
}

._tabsContainer_1p1p4_339 {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}
@media (max-width: 639px) {
  ._tabsContainer_1p1p4_339 {
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
}

._tab_1p1p4_339 {
  position: relative;
  border-radius: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 1px solid transparent;
}
._tab_1p1p4_339:hover:not(._tabActive_1p1p4_364) {
  background: var(--color-surface-hover);
  border-color: var(--color-border);
}

._tabActive_1p1p4_364 {
  background: rgba(34, 197, 94, 0.12);
  color: var(--color-text-primary);
  border-color: #22c55e;
  font-weight: 700;
}

._tabInactive_1p1p4_376 {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

._tabContent_1p1p4_382 {
  display: flex;
  flex-direction: column;
}

._tabLabel_1p1p4_387 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1px;
}

._tabDate_1p1p4_395 {
  font-weight: 600;
}

._tabDays_1p1p4_399 {
  font-size: 0.75rem;
  margin-top: 2px;
}

._tabDaysActive_1p1p4_404 {
  color: #22c55e;
}

._tabDaysInactive_1p1p4_408 {
  color: var(--color-text-tertiary);
}

._earningsBadge_1p1p4_412 {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 1.125rem;
}

._ivStrip_1p1p4_419 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 639px) {
  ._ivStrip_1p1p4_419 {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
  }
}

._ivStripRich_1p1p4_442 {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #15803d;
}

._ivStripNormal_1p1p4_448 {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #1d4ed8;
}

._ivStripThin_1p1p4_454 {
  background: var(--color-warning-light);
  border: 1px solid var(--color-warning);
  color: var(--color-warning-dark);
}

._ivStripUnknown_1p1p4_460 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
}

._ivStripLeft_1p1p4_466 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

._ivStripLabel_1p1p4_473 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._ivStripStat_1p1p4_479 {
  font-weight: 500;
  opacity: 0.85;
}

._ivStripHint_1p1p4_484 {
  font-size: 0.75rem;
  opacity: 0.7;
  font-style: italic;
}
@media (max-width: 639px) {
  ._ivStripHint_1p1p4_484 {
    display: none;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._overlay_ommtl_329 {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: var(--color-black-alpha-60);
  backdrop-filter: blur(2px);
}

._modal_ommtl_341 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 420px;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

._header_ommtl_353 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
}

._content_ommtl_360 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

._row_ommtl_368 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._label_ommtl_374 {
  color: var(--color-text-secondary);
}

._value_ommtl_378 {
  font-weight: 500;
  color: var(--color-text-primary);
}

._valueHighlight_ommtl_383 {
  font-weight: 600;
  color: var(--color-success);
}

._input_ommtl_388 {
  width: 96px;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  text-align: right;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: var(--color-surface);
  color: var(--color-text-primary);
  transition: border-color 0.2s;
}
._input_ommtl_388:focus {
  outline: none;
  border-color: var(--color-primary);
}
._input_ommtl_388:hover {
  border-color: var(--color-border);
}

._error_ommtl_407 {
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-error);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.375rem;
}

._actions_ommtl_417 {
  display: flex;
  gap: 0.75rem;
}

._btnCancel_ommtl_422 {
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
._btnCancel_ommtl_422:hover:not(:disabled) {
  background: var(--color-border-light);
}
._btnCancel_ommtl_422:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._btnConfirm_ommtl_442 {
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  background: var(--color-primary);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
._btnConfirm_ommtl_442:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
._btnConfirm_ommtl_442:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

._btnClose_ommtl_464 {
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  background: var(--color-error);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
._btnClose_ommtl_464:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
._btnClose_ommtl_464:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

._valueNegative_ommtl_486 {
  font-weight: 600;
  color: var(--color-error);
}

._warningText_ommtl_491 {
  color: var(--color-warning);
  font-weight: 500;
}/**
 * PositionRow Component Styles
 * 
 * Theme-aware styles for individual position cards
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._card_au39h_334 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 2.5rem;
}
._card_au39h_334:hover {
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
  transform: translateY(-2px);
}

._accentEligible_au39h_348 {
  border-left: 4px solid var(--color-success);
}

._accentLoss_au39h_352 {
  border-left: 4px solid var(--color-warning);
}

._accentHasCall_au39h_356 {
  border-left: 4px solid var(--color-warning);
}

._accentIneligible_au39h_360 {
  border-left: 4px solid var(--color-error);
}

._accentDefault_au39h_364 {
  border-left: 4px solid var(--color-border);
}

._header_au39h_368 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border-light);
}

._headerEligible_au39h_376 {
  background: rgba(34, 197, 94, 0.05);
}

._headerLoss_au39h_380 {
  background: rgba(245, 158, 11, 0.05);
}

._headerHasCall_au39h_384 {
  background: rgba(245, 158, 11, 0.05);
}

._headerIneligible_au39h_388 {
  background: rgba(239, 68, 68, 0.05);
}

._headerLeft_au39h_392 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._symbol_au39h_398 {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
}

._pmccBadge_au39h_405 {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  padding: 2px 6px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._lossBadge_au39h_417 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  padding: 2px 8px;
  border-radius: 9999px;
}

._earningsWarnBadge_au39h_427 {
  font-size: 11px;
  font-weight: 600;
  color: #5b21b6;
  background: #ede9fe;
  border: 1px solid #a78bfa;
  padding: 2px 8px;
  border-radius: 9999px;
}

._earningsBadge_au39h_437 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-warning-dark);
  background: var(--color-warning-light);
  border: 1px solid var(--color-warning);
  padding: 2px 0.5rem;
  border-radius: 9999px;
}

@media (max-width: 639px) {
  ._earningsBadgeLabel_au39h_451 {
    display: none;
  }
}

._body_au39h_456 {
  display: flex;
  align-items: center;
}
@media (max-width: 639px) {
  ._body_au39h_456 {
    flex-direction: column;
    align-items: stretch;
  }
}

._divider_au39h_467 {
  align-self: stretch;
  width: 1px;
  background: var(--color-border-light);
  margin: 0.5rem 0;
}
@media (max-width: 639px) {
  ._divider_au39h_467 {
    width: auto;
    height: 1px;
    margin: 0;
    align-self: auto;
  }
}

._priceCol_au39h_482 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem 1rem;
  min-width: 160px;
}
@media (max-width: 639px) {
  ._priceCol_au39h_482 {
    min-width: unset;
  }
}

._sharesInfo_au39h_495 {
  font-size: 11px;
  color: var(--color-text-tertiary);
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

._underlyingPrice_au39h_502 {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

._priceRow_au39h_508 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._currentPrice_au39h_514 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._pnl_au39h_520 {
  font-size: 11px;
  font-weight: 700;
}

._pnlPositive_au39h_525 {
  color: var(--color-success) !important;
}

._pnlNegative_au39h_529 {
  color: var(--color-error) !important;
}

._dailyPnlRow_au39h_533 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

._dailyPnlLabel_au39h_541 {
  font-size: 11px;
  color: var(--color-text-tertiary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._dailyPnlValue_au39h_549 {
  font-size: 11px;
  font-weight: 700;
}

._criteriaCol_au39h_554 {
  flex: 1;
  min-width: 220px;
  padding: 0.75rem 1rem;
}
@media (max-width: 639px) {
  ._criteriaCol_au39h_554 {
    min-width: unset;
    flex: none;
  }
}

._bestTradeCol_au39h_566 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  width: 340px;
  flex-shrink: 0;
}
@media (max-width: 639px) {
  ._bestTradeCol_au39h_566 {
    width: 100%;
    flex-shrink: 1;
  }
}

._tradeHeader_au39h_581 {
  margin-bottom: 0.25rem;
}

._tradeTitle_au39h_585 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._tradeGrid_au39h_593 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

._tradeLabel_au39h_600 {
  color: var(--color-text-secondary);
}

._tradeValue_au39h_604 {
  font-weight: 500;
  color: var(--color-text-primary);
  text-align: right;
  white-space: nowrap;
}
._tradeValue_au39h_604._highlight_au39h_610 {
  color: var(--color-success);
  font-weight: 600;
}

._emptyTrade_au39h_615 {
  min-height: 120px;
}

._scanningLoader_au39h_619 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  min-height: 120px;
}

._scanningText_au39h_629 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

._yieldCol_au39h_634 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  min-width: 110px;
  text-align: center;
}

._yieldValue_au39h_644 {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-success);
  line-height: 1;
}

._yieldLabel_au39h_651 {
  font-size: 9px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

._yieldEmpty_au39h_659 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-disabled);
}

._strikePrice_au39h_665 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-top: 0.5rem;
}

._tradeDetails_au39h_672 {
  font-size: 11px;
  color: var(--color-text-tertiary);
}

._actionsCol_au39h_677 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  min-width: 128px;
}
@media (max-width: 639px) {
  ._actionsCol_au39h_677 {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: unset;
    padding: 0.75rem 1rem 1rem;
  }
}

._btnCreateOrder_au39h_693 {
  border-radius: 0.5rem;
  background: #22c55e;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.025em;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._btnCreateOrder_au39h_693:hover {
  background: #16a34a;
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
}
._btnCreateOrder_au39h_693:active {
  transform: scale(0.95);
}

._btnBestTrade_au39h_712 {
  border-radius: 0.5rem;
  border: 2px solid var(--color-primary);
  padding: 0.25rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._btnBestTrade_au39h_712:hover {
  background: var(--color-primary-light);
}

._btnCloseCall_au39h_725 {
  border-radius: 0.5rem;
  background: var(--color-error);
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  letter-spacing: 0.025em;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._btnCloseCall_au39h_725:hover {
  opacity: 0.88;
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
}
._btnCloseCall_au39h_725:active {
  transform: scale(0.95);
}

._btnViewChain_au39h_744 {
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  padding: 0.25rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._btnViewChain_au39h_744:hover {
  border-color: var(--color-border-medium);
  color: var(--color-text-secondary);
}

._btnViewChainActive_au39h_758 {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
}

._chainPanel_au39h_764 {
  border-top: 1px solid var(--color-border-light);
  padding: 1rem;
  background: var(--color-background-subtle);
}

._chainError_au39h_770 {
  font-size: 0.875rem;
  color: var(--color-error);
  padding: 0.5rem 0;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_1wx2k_329 {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

._chip_1wx2k_335 {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
._chip_1wx2k_335:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}
._chip_1wx2k_335:active {
  transform: translateY(0);
}

._chipActive_1wx2k_353 {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  font-weight: 600;
}
._chipActive_1wx2k_353:hover {
  opacity: 0.9;
}

._chipInactive_1wx2k_363 {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
._chipInactive_1wx2k_363:hover {
  background: var(--color-border-light);
  border-color: var(--color-text-secondary);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_3dj6h_329 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._filterGroup_3dj6h_340 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

._filterLabel_3dj6h_347 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  min-width: 60px;
}

._filterButtons_3dj6h_354 {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

._filterButton_3dj6h_354 {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
._filterButton_3dj6h_354:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}
._filterButton_3dj6h_354:active {
  transform: translateY(0);
}

._filterButtonActive_3dj6h_378 {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  font-weight: 600;
}
._filterButtonActive_3dj6h_378:hover {
  opacity: 0.9;
}

._filterButtonInactive_3dj6h_388 {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
._filterButtonInactive_3dj6h_388:hover {
  background: var(--color-border-light);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
@keyframes _shimmer_1pwht_1 {
  0% {
    background-position: -600px 0;
  }
  100% {
    background-position: 600px 0;
  }
}
._skeleton_1pwht_337, ._skeletonCircle_1pwht_337, ._skeletonText_1pwht_337 {
  display: block;
  border-radius: 0.375rem;
  background: linear-gradient(90deg, var(--color-border) 25%, var(--color-background-light) 50%, var(--color-border) 75%);
  background-size: 600px 100%;
  animation: _shimmer_1pwht_1 1.6s infinite linear;
}

._skeletonText_1pwht_337 {
  height: 1em;
  border-radius: 0.125rem;
}

._skeletonCircle_1pwht_337 {
  border-radius: 9999px;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._skeleton_13jhm_329 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._row_13jhm_335 {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr 1fr 120px;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: var(--color-surface);
}
@media (max-width: 639px) {
  ._row_13jhm_335 {
    grid-template-columns: 80px 1fr 1fr;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_zdfxm_329 {
  width: 100%;
  padding: 2rem 1rem;
}
@media (max-width: 639px) {
  ._container_zdfxm_329 {
    padding: 1rem 0.75rem;
  }
}

._content_zdfxm_339 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (max-width: 639px) {
  ._content_zdfxm_339 {
    gap: 1rem;
  }
}

._header_zdfxm_350 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 639px) {
  ._header_zdfxm_350 {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

._headerText_zdfxm_363 {
  display: flex;
  flex-direction: column;
}

._title_zdfxm_368 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.025em;
}

._subtitle_zdfxm_375 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

._notConnectedContainer_zdfxm_381 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 1rem;
  text-align: center;
}

._notConnectedContent_zdfxm_391 {
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

._icon_zdfxm_398 {
  font-size: 3rem;
}

._notConnectedTitle_zdfxm_402 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._notConnectedDescription_zdfxm_408 {
  color: var(--color-text-secondary);
}

._connectButton_zdfxm_412 {
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background: var(--color-primary);
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._connectButton_zdfxm_412:hover:not(:disabled) {
  opacity: 0.9;
}
._connectButton_zdfxm_412:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._disclaimer_zdfxm_432 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

._error_zdfxm_437, ._errorSmall_zdfxm_437 {
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--color-error);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.5rem;
}

._errorSmall_zdfxm_437 {
  padding: 0.75rem 1rem;
}

._ccRecommendationsBanner_zdfxm_450 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  min-height: 2.5rem;
}

._ccRecommendationsButton_zdfxm_458 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._ccRecommendationsButton_zdfxm_458:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._ccRecommendationsButton_zdfxm_458 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._ccRecommendationsButton_zdfxm_458:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._ccRecommendationsButton_zdfxm_458 {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  cursor: pointer;
}
._ccRecommendationsButton_zdfxm_458:hover {
  opacity: 0.88;
}

._ccRecommendationsLoading_zdfxm_497 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._ccRecommendationsError_zdfxm_502 {
  font-size: 0.875rem;
  color: #ef4444;
}

._ccRecommendationsRetry_zdfxm_507 {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.875rem;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._skeleton_1d7ss_329 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 100vh;
  padding: 2rem;
  background: radial-gradient(circle at 15% 20%, rgba(102, 126, 234, 0.16) 0, rgba(102, 126, 234, 0) 40%), radial-gradient(circle at 90% 8%, rgba(34, 197, 94, 0.16) 0, rgba(34, 197, 94, 0) 38%), var(--color-background);
}
@media (max-width: 639px) {
  ._skeleton_1d7ss_329 {
    padding: 1rem;
    gap: 1rem;
  }
}

._hero_1d7ss_344 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid rgba(102, 126, 234, 0.24);
  border-radius: 1rem;
  background: linear-gradient(140deg, rgba(102, 126, 234, 0.14) 0%, rgba(34, 197, 94, 0.08) 55%, rgba(102, 126, 234, 0.06) 100%), var(--color-surface);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
}
@media (max-width: 639px) {
  ._hero_1d7ss_344 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

._heroLeft_1d7ss_363 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

._heroRight_1d7ss_370 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
  min-width: 160px;
}
@media (max-width: 639px) {
  ._heroRight_1d7ss_370 {
    align-items: flex-start;
  }
}

._positionGroups_1d7ss_383 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 1024px) {
  ._positionGroups_1d7ss_383 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  ._positionGroups_1d7ss_383 {
    grid-template-columns: 1fr;
  }
}

._positionGroup_1d7ss_383 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-xl, 0.75rem);
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 1rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

._groupGrid_1d7ss_413 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

._metricCard_1d7ss_419 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl, 0.75rem);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 1rem;
  gap: 0.75rem;
}

._highlightStrip_1d7ss_433 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 1023px) {
  ._highlightStrip_1d7ss_433 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  ._highlightStrip_1d7ss_433 {
    grid-template-columns: 1fr;
  }
}

._highlightCard_1d7ss_449 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-xl, 0.75rem);
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 0.75rem;
  border: 1px solid var(--color-border);
  background: linear-gradient(145deg, var(--color-surface) 20%, var(--color-background) 100%);
}

._mainGrid_1d7ss_463 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1023px) {
  ._mainGrid_1d7ss_463 {
    grid-template-columns: 1fr;
  }
}

._sectionCard_1d7ss_474 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-xl, 0.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

._tableRows_1d7ss_488 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._bottomGrid_1d7ss_494 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1023px) {
  ._bottomGrid_1d7ss_494 {
    grid-template-columns: 1fr;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._page_g1kam_329 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 100vh;
  padding: 2rem;
  background: radial-gradient(circle at 15% 20%, rgba(102, 126, 234, 0.16) 0, rgba(102, 126, 234, 0) 40%), radial-gradient(circle at 90% 8%, rgba(34, 197, 94, 0.16) 0, rgba(34, 197, 94, 0) 38%), var(--color-background);
}
@media (max-width: 639px) {
  ._page_g1kam_329 {
    padding: 1rem;
    gap: 1rem;
  }
}

._hero_g1kam_344 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid rgba(102, 126, 234, 0.24);
  border-radius: 1rem;
  background: linear-gradient(140deg, rgba(102, 126, 234, 0.14) 0%, rgba(34, 197, 94, 0.08) 55%, rgba(102, 126, 234, 0.06) 100%), var(--color-surface);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
}
._hero_g1kam_344 h1 {
  margin: 0;
  font-size: var(--font-size-3xl, 1.7143rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
}
@media (max-width: 639px) {
  ._hero_g1kam_344 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

._kicker_g1kam_372 {
  margin: 0 0 0.5rem 0;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

._heroSubtitle_g1kam_382 {
  margin: 0.5rem 0 0 0;
  max-width: 62ch;
  color: var(--color-text-secondary);
}

._heroMeta_g1kam_388 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 180px;
  text-align: right;
}
@media (max-width: 639px) {
  ._heroMeta_g1kam_388 {
    text-align: left;
    min-width: auto;
  }
}

._metaLabel_g1kam_402 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

._metaValue_g1kam_409 {
  font-size: var(--font-size-4xl, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
}

._metricsGrid_g1kam_416 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
@media (max-width: 1023px) {
  ._metricsGrid_g1kam_416 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  ._metricsGrid_g1kam_416 {
    grid-template-columns: 1fr;
  }
}

._positionGroups_g1kam_432 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 1024px) {
  ._positionGroups_g1kam_432 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  ._positionGroups_g1kam_432 {
    grid-template-columns: 1fr;
  }
}

._positionGroup_g1kam_432 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-xl, 0.75rem);
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 1rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

._groupTitle_g1kam_462 {
  margin: 0;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

._groupGrid_g1kam_472 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}
@media (max-width: 639px) {
  ._groupGrid_g1kam_472 {
    grid-template-columns: repeat(2, 1fr);
  }
}

._metricCard_g1kam_483 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl, 0.75rem);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 1rem;
  gap: 0.5rem;
}

._metricLabel_g1kam_497 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

._metricValue_g1kam_504 {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
}

._highlightStrip_g1kam_513 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
@media (max-width: 1023px) {
  ._highlightStrip_g1kam_513 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  ._highlightStrip_g1kam_513 {
    grid-template-columns: 1fr;
  }
}

._highlightCard_g1kam_529 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-xl, 0.75rem);
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  background: linear-gradient(145deg, var(--color-surface) 20%, var(--color-background) 100%);
}
._highlightCard_g1kam_529 p {
  margin: 0;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
._highlightCard_g1kam_529 strong {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-primary);
}

._mainGrid_g1kam_555 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 1023px) {
  ._mainGrid_g1kam_555 {
    grid-template-columns: 1fr;
  }
}

._bottomGrid_g1kam_566 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 1023px) {
  ._bottomGrid_g1kam_566 {
    grid-template-columns: 1fr;
  }
}

._sectionCard_g1kam_577 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-2xl, 1rem);
  border: 1px solid var(--color-border);
  padding: 1.25rem;
  background: var(--color-surface);
}

._sectionHeader_g1kam_588 {
  margin-bottom: 1rem;
}
._sectionHeader_g1kam_588 h2 {
  margin: 0;
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-primary);
}
._sectionHeader_g1kam_588 p {
  margin: 0.25rem 0 0 0;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

._tableWrap_g1kam_606 {
  overflow-x: auto;
}

._table_g1kam_606 {
  width: 100%;
  border-collapse: collapse;
}
._table_g1kam_606 th,
._table_g1kam_606 td {
  padding: 0.5rem 0.25rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
}
._table_g1kam_606 th {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._symbol_g1kam_632 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-primary);
}

._positive_g1kam_639 {
  color: var(--color-financial-profit);
}

._negative_g1kam_643 {
  color: var(--color-financial-loss);
}

._earningsList_g1kam_647,
._riskList_g1kam_648 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._earningsRow_g1kam_657,
._riskList_g1kam_648 li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--color-border);
  background: var(--color-background);
}
._earningsRow_g1kam_657 span,
._riskList_g1kam_648 li span {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

._daysBadge_g1kam_676 {
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-text-primary);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.5;
}

._actionsGrid_g1kam_686 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._actionButton_g1kam_692,
._primaryButton_g1kam_693 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._actionButton_g1kam_692:focus-visible,
._primaryButton_g1kam_693:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._actionButton_g1kam_692,
._primaryButton_g1kam_693 {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
._actionButton_g1kam_692:disabled,
._primaryButton_g1kam_693:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._actionButton_g1kam_692,
._primaryButton_g1kam_693 {
  width: 100%;
  justify-content: center;
  border: 1px solid rgba(102, 126, 234, 0.25);
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(76, 29, 149, 0.95) 100%);
  color: var(--color-text-inverse);
}
._actionButton_g1kam_692:hover,
._primaryButton_g1kam_693:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

._notConnectedContainer_g1kam_740 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 1.5rem;
}

._notConnectedCard_g1kam_748 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-2xl, 1rem);
  max-width: 680px;
  border: 1px solid var(--color-border);
  padding: 2rem;
  text-align: center;
}
._notConnectedCard_g1kam_748 h1 {
  margin: 0;
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
}
._notConnectedCard_g1kam_748 p {
  margin: 0.75rem 0 1.25rem 0;
  color: var(--color-text-secondary);
}

._emptyText_g1kam_773 {
  margin: 0;
  color: var(--color-text-secondary);
}

._error_g1kam_778 {
  margin: 1.5rem;
  padding: 1rem;
  border-radius: 0.375rem;
  border: 1px solid var(--color-error-border);
  color: var(--color-error);
  background: var(--color-error-light);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._panel_syjcp_329 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 1rem 1.25rem;
}

._toggle_syjcp_337 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-text-primary);
  text-align: left;
}

._toggleLeft_syjcp_350 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._toggleLabel_syjcp_356 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

._toggleSummary_syjcp_362 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

._chevron_syjcp_367 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

._chevronOpen_syjcp_373 {
  transform: rotate(180deg);
}

._body_syjcp_377 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

._fieldRow_syjcp_386 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

._fieldLabel_syjcp_393 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  min-width: 110px;
}

._chips_syjcp_400 {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

._chip_syjcp_400 {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
._chip_syjcp_400:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}

._chipActive_syjcp_421 {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  font-weight: 600;
}
._chipActive_syjcp_421:hover {
  opacity: 0.9;
}

._chipInactive_syjcp_431 {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

._rangeInputs_syjcp_437 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._rangeLabel_syjcp_443 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

._input_syjcp_448 {
  width: 72px;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  text-align: right;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: var(--color-surface);
  color: var(--color-text-primary);
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._input_syjcp_448:focus {
  outline: none;
  border-color: var(--color-primary);
}

._resetRow_syjcp_464 {
  display: flex;
  justify-content: flex-end;
}

._resetBtn_syjcp_469 {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  padding: 0;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._resetBtn_syjcp_469:hover {
  color: var(--color-primary);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_1aiuy_329 {
  width: 100%;
  padding: 2rem 1rem;
}
@media (max-width: 639px) {
  ._container_1aiuy_329 {
    padding: 1rem 0.75rem;
  }
}

._content_1aiuy_339 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}
._content_1aiuy_339 > * {
  min-width: 0;
}
@media (max-width: 639px) {
  ._content_1aiuy_339 {
    gap: 1rem;
  }
}

._hero_1aiuy_354 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  border-radius: 0.75rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
}
@media (max-width: 639px) {
  ._hero_1aiuy_354 {
    padding: 1.5rem 1rem;
  }
}

._heroBody_1aiuy_368 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
@media (max-width: 639px) {
  ._heroBody_1aiuy_368 {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

._heroText_1aiuy_383 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._heroTitle_1aiuy_389 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0;
}
@media (max-width: 639px) {
  ._heroTitle_1aiuy_389 {
    font-size: 1.7143rem;
  }
}

._heroSubtitle_1aiuy_403 {
  font-size: 0.875rem;
  color: var(--color-white-alpha-80);
  margin: 0;
}

._refreshButton_1aiuy_409 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-white-alpha-95);
  color: #581c87;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._refreshButton_1aiuy_409:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
}
._refreshButton_1aiuy_409:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
@media (max-width: 639px) {
  ._refreshButton_1aiuy_409 {
    width: 100%;
    justify-content: center;
  }
}

._statsStrip_1aiuy_443 {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-white-alpha-20);
}
@media (max-width: 639px) {
  ._statsStrip_1aiuy_443 {
    margin-top: 1.5rem;
    padding-top: 1rem;
  }
}

._statItem_1aiuy_458 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._statValue_1aiuy_464 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  line-height: 1;
}
@media (max-width: 639px) {
  ._statValue_1aiuy_464 {
    font-size: 1.7143rem;
  }
}

._statLabel_1aiuy_476 {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-white-alpha-60);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

._statDivider_1aiuy_485 {
  width: 1px;
  height: 3rem;
  background: var(--color-white-alpha-25);
  flex-shrink: 0;
  margin: 0 2rem;
}
@media (max-width: 639px) {
  ._statDivider_1aiuy_485 {
    height: 2.5rem;
    margin: 0 1rem;
  }
}

._bentoGrid_1aiuy_499 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 639px) {
  ._bentoGrid_1aiuy_499 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

._bentoCard_1aiuy_511 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

._bentoCardLabel_1aiuy_520 {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

._bentoValueRow_1aiuy_529 {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

._bentoCardValue_1aiuy_536 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
}

._bentoCardSubvalue_1aiuy_543 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #22c55e;
  padding-bottom: 0.25rem;
}

._bentoCardSubvalueWarn_1aiuy_550 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #f59e0b;
  padding-bottom: 0.25rem;
}

._bentoCardDesc_1aiuy_557 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

._bentoGaugeBar_1aiuy_563 {
  width: 100%;
  height: 8px;
  background: var(--color-surface-active);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 1rem;
}

._bentoGaugeFill_1aiuy_572 {
  height: 100%;
  background: #22c55e;
  border-radius: 9999px;
  transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

._bentoHealthLabel_1aiuy_579 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #22c55e;
  padding-bottom: 0.25rem;
}

._notConnectedContainer_1aiuy_586 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 1rem;
}

._notConnectedContent_1aiuy_594 {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 28rem;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 2rem 1.5rem;
}

._notConnectedIcon_1aiuy_606 {
  font-size: 3rem;
  line-height: 1;
}

._notConnectedTitle_1aiuy_611 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

._notConnectedDescription_1aiuy_618 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

._connectButton_1aiuy_625 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._connectButton_1aiuy_625:hover:not(:disabled) {
  opacity: 0.9;
}
._connectButton_1aiuy_625:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._disclaimer_1aiuy_649 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin: 0;
}

._error_1aiuy_655 {
  padding: 1rem;
  font-size: 0.875rem;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.5rem;
}

._errorSmall_1aiuy_664 {
  font-size: 0.875rem;
  color: #ef4444;
}

._ccRecommendationsBanner_1aiuy_669 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  min-height: 2.5rem;
}

._ccRecommendationsButton_1aiuy_677 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._ccRecommendationsButton_1aiuy_677:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._ccRecommendationsButton_1aiuy_677 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._ccRecommendationsButton_1aiuy_677:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._ccRecommendationsButton_1aiuy_677 {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  cursor: pointer;
}
._ccRecommendationsButton_1aiuy_677:hover {
  opacity: 0.88;
}

._ccRecommendationsLoading_1aiuy_716 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._ccRecommendationsError_1aiuy_721 {
  font-size: 0.875rem;
  color: #ef4444;
}

._ccRecommendationsRetry_1aiuy_726 {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.875rem;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_1cbj1_329 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
@media (max-width: 639px) {
  ._container_1cbj1_329 {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }
  ._container_1cbj1_329::-webkit-scrollbar {
    display: none;
  }
}

._card_1cbj1_347 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  transition: border-color color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._card_1cbj1_347:hover {
  border-color: #667eea;
  box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.15), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
@media (max-width: 639px) {
  ._card_1cbj1_347 {
    min-width: 160px;
    flex-shrink: 0;
  }
}

._header_1cbj1_369 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

._label_1cbj1_376 {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 1;
}

._tooltip_1cbj1_385 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: help;
  flex-shrink: 0;
  opacity: 0.5;
  transition: all color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._tooltip_1cbj1_385:hover {
  background: #667eea;
  color: white;
  opacity: 1;
}

._value_1cbj1_407 {
  color: var(--color-text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  line-height: 1.2;
}

._utilizationBar_1cbj1_415 {
  height: 3px;
  background: var(--color-border);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 0.25rem;
}
._utilizationBar_1cbj1_415::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--bar-value, 0%);
  max-width: 100%;
  background: #f59e0b;
  border-radius: 9999px;
}

._tooltipContent_1cbj1_432 {
  position: fixed;
  background: var(--color-text-primary);
  color: var(--color-background);
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 99999;
  box-shadow: 0 12px 32px var(--color-black-alpha-25);
  animation: _tooltipSlideUp_1cbj1_1 200ms ease-out;
  transform: translateX(-50%);
}
._tooltipContent_1cbj1_432::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-text-primary);
}

@keyframes _tooltipSlideUp_1cbj1_1 {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
._utilizationWarn_1cbj1_465 {
  border-color: rgba(245, 158, 11, 0.4) !important;
}
._utilizationWarn_1cbj1_465 ._value_1cbj1_407 {
  color: #f59e0b;
}

._utilizationHigh_1cbj1_472 {
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.15) !important;
}
._utilizationHigh_1cbj1_472 ._value_1cbj1_407 {
  color: #f59e0b;
}
._utilizationHigh_1cbj1_472:hover {
  border-color: rgba(245, 158, 11, 0.7) !important;
}

._stressTest_1cbj1_483 ._value_1cbj1_407 {
  color: #ef4444;
}

._emptyState_1cbj1_487 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  color: var(--color-text-secondary);
  padding: 1.5rem;
  grid-column: 1/-1;
  text-align: center;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._overlay_iwnuz_329 {
  position: fixed;
  inset: 0;
  background: var(--color-black-alpha-35);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

._modal_iwnuz_340 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 520px;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
}

._title_iwnuz_351 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.25rem;
}

._subtitle_iwnuz_357 {
  margin: 0.5rem 0 1rem 0;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

._metrics_iwnuz_363 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
._metrics_iwnuz_363 div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 0.75rem;
}
._metrics_iwnuz_363 div span {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
}
._metrics_iwnuz_363 div strong {
  color: var(--color-text-primary);
  font-size: 1rem;
}

._editableValue_iwnuz_386 {
  background: var(--color-background);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-focus);
  border-radius: 0.125rem;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
  font-family: inherit;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 100ms cubic-bezier(0.4, 0, 0.2, 1);
}
._editableValue_iwnuz_386:hover {
  border-color: var(--color-border);
}
._editableValue_iwnuz_386:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

._error_iwnuz_407 {
  font-size: 0.875rem;
  color: var(--color-error);
  margin-bottom: 1rem;
}

._actions_iwnuz_413 {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

._secondaryButton_iwnuz_419,
._primaryButton_iwnuz_420 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._secondaryButton_iwnuz_419:focus-visible,
._primaryButton_iwnuz_420:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._secondaryButton_iwnuz_419,
._primaryButton_iwnuz_420 {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
._secondaryButton_iwnuz_419:disabled,
._primaryButton_iwnuz_420:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._secondaryButton_iwnuz_419,
._primaryButton_iwnuz_420 {
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 600;
}

._secondaryButton_iwnuz_419 {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

._primaryButton_iwnuz_420 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: var(--color-text-inverse);
  border: none;
}

@media (min-width: 640px) {
  ._metrics_iwnuz_363 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.75rem;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_1q855_329 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

._titleRow_1q855_336 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

._title_1q855_336 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.25rem;
  font-weight: 600;
}

._count_1q855_352 {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  opacity: 0.6;
}

._tableWrap_1q855_358 {
  overflow-x: auto;
}
@media (max-width: 639px) {
  ._tableWrap_1q855_358 {
    display: none;
  }
}

._table_1q855_358 {
  width: 100%;
  border-collapse: collapse;
}

._tableHead_1q855_372 th {
  padding: 1rem 1.5rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

._thRight_1q855_385 {
  text-align: right !important;
}

._tableRow_1q855_389 {
  border-bottom: 1px solid var(--color-border);
  transition: background color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._tableRow_1q855_389 td {
  padding: 1.5rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  vertical-align: middle;
}
._tableRow_1q855_389:hover {
  background: var(--color-surface-hover);
}
._tableRow_1q855_389:hover ._tickerBadge_1q855_402 {
  transform: scale(1.05);
}

._rowActive_1q855_406 {
  background: rgba(239, 68, 68, 0.03);
}

._positionTd_1q855_410 {
  white-space: nowrap;
}

._positionCell_1q855_414 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._tickerBadge_1q855_402 {
  background: var(--color-border-light);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  transition: transform transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

._symbol_1q855_429 {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

._positionMeta_1q855_435 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._expiryStrike_1q855_441 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

._dteUrgent_1q855_447, ._dteWarn_1q855_447, ._dteNormal_1q855_447 {
  display: inline-block;
  align-self: flex-start;
  padding: 1px 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.025em;
}

._dteNormal_1q855_447 {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

._dteWarn_1q855_447 {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

._dteUrgent_1q855_447 {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

._stackedCell_1q855_474 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.375;
}

._stackedPrimary_1q855_481 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

._capAwayRow_1q855_488 {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

._priceValue_1q855_494 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

._creditValue_1q855_501 {
  font-size: 0.75rem;
  color: #22c55e;
  font-weight: 500;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

._captureHigh_1q855_508 {
  font-size: 0.75rem;
  color: #22c55e;
  font-weight: 500;
}

._captureMid_1q855_514 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

._captureLow_1q855_519 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

._distanceSafe_1q855_524 {
  font-size: 0.75rem;
  color: #22c55e;
}

._distanceWarn_1q855_529 {
  font-size: 0.75rem;
  color: #f59e0b;
  font-weight: 500;
}

._distanceDanger_1q855_535 {
  font-size: 0.75rem;
  color: #ef4444;
  font-weight: 600;
}

._distanceNeutral_1q855_541 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

._assignValue_1q855_546 {
  font-size: 0.875rem;
  font-weight: 500;
  color: #f59e0b;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

._netCashValue_1q855_553 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ef4444;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

._alertsTd_1q855_560 {
  text-align: right;
}

._actionGroup_1q855_564 {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

._noTrigger_1q855_570 {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
}

._actionButton_1q855_575 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._actionButton_1q855_575:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._actionButton_1q855_575 {
  height: 1.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm, 0.125rem);
}
._actionButton_1q855_575:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._actionButton_1q855_575 {
  border: 1px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
  transition: all color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

._actionHarvest_1q855_614 {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}
._actionHarvest_1q855_614:hover {
  background: rgba(34, 197, 94, 0.22);
}

._actionDefensive_1q855_623 {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}
._actionDefensive_1q855_623:hover {
  background: rgba(239, 68, 68, 0.18);
}

._groupHeader_1q855_632 {
  background: var(--color-surface);
  border-top: 2px solid var(--color-border);
}
._groupHeader_1q855_632:first-of-type {
  border-top: none;
}
._groupHeader_1q855_632 td {
  padding: 0.5rem 1.5rem;
  border-bottom: none;
}

._groupLabel_1q855_644 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #667eea;
  margin-right: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
:root[data-theme=dark] ._groupLabel_1q855_644 {
  color: #a78bfa;
}

._groupRange_1q855_656 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 400;
}

._totalsRow_1q855_662 {
  background: rgba(102, 126, 234, 0.04);
  border-top: 1px solid var(--color-border);
}
._totalsRow_1q855_662 td {
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

._totalsLabel_1q855_673 {
  font-weight: 600;
  color: var(--color-text-secondary) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._assignCostTotal_1q855_681 {
  font-weight: 600;
  color: #f59e0b !important;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

._netCashTotal_1q855_687 {
  font-weight: 700;
  color: #ef4444 !important;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

._emptyState_1q855_693 {
  color: var(--color-text-secondary);
  padding: 1.5rem;
  text-align: center;
}

._cardGrid_1q855_699 {
  display: none;
}
@media (max-width: 639px) {
  ._cardGrid_1q855_699 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
}

._cardGroupLabel_1q855_711 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

._card_1q855_699 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
}

._cardRisk_1q855_729 {
  border-color: rgba(239, 68, 68, 0.3) !important;
}

._cardHeader_1q855_733 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

._cardHeaderLeft_1q855_741 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

._cardSymbolGroup_1q855_749 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._cardSymbol_1q855_749 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._cardDateBadge_1q855_761 {
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 0.25rem;
  padding: 2px 0.5rem;
  font-size: 0.75rem;
  color: #667eea;
  font-weight: 500;
}
:root[data-theme=dark] ._cardDateBadge_1q855_761 {
  color: #a78bfa;
}

._cardStrikeLine_1q855_774 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
._cardStrikeLine_1q855_774 strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

._cardDteBadge_1q855_787 {
  margin-left: 0.25rem;
}

._cardPriceBlock_1q855_791 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

._cardMidGrid_1q855_799 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

._cardMidItem_1q855_808 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._cardMidItemRight_1q855_814 {
  text-align: right;
  align-items: flex-end;
}

._cardMidValue_1q855_819 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

._cardMetricLabel_1q855_826 {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._cardBottom_1q855_834 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

._cardPnlBlock_1q855_842 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

._cardPnlPositive_1q855_850 {
  font-size: 1rem;
  font-weight: 700;
  color: #22c55e;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

._cardPnlNegative_1q855_857 {
  font-size: 1rem;
  font-weight: 700;
  color: #ef4444;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

._cardCapAway_1q855_864 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

._cardActions_1q855_869 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}

._mobileActionHarvest_1q855_876 {
  background: #22c55e;
  color: #003824;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._mobileActionHarvest_1q855_876:active {
  transform: scale(0.95);
  opacity: 0.9;
}

._mobileActionDefensive_1q855_893 {
  background: transparent;
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform transform 150ms cubic-bezier(0.4, 0, 0.2, 1), background color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._mobileActionDefensive_1q855_893:active {
  transform: scale(0.95);
  background: rgba(239, 68, 68, 0.1);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_1wnqn_329 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

._hero_1wnqn_335 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  border-radius: 0.75rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
:root[data-theme=dark] ._hero_1wnqn_335 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
@media (max-width: 639px) {
  ._hero_1wnqn_335 {
    padding: 1.5rem;
    border-radius: 0.75rem;
  }
  :root[data-theme=dark] ._hero_1wnqn_335 {
    background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
    border: none;
  }
}

._heroBody_1wnqn_357 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
@media (max-width: 639px) {
  ._heroBody_1wnqn_357 {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

._heroText_1wnqn_372 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
}

._heroTitle_1wnqn_379 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0;
}
:root[data-theme=dark] ._heroTitle_1wnqn_379 {
  color: #a78bfa;
}
@media (max-width: 639px) {
  ._heroTitle_1wnqn_379 {
    font-size: 1.7143rem;
    color: var(--color-text-inverse);
  }
  :root[data-theme=dark] ._heroTitle_1wnqn_379 {
    color: var(--color-text-inverse);
  }
}

._heroSubtitle_1wnqn_400 {
  font-size: 0.875rem;
  color: var(--color-white-alpha-80);
  margin: 0;
}
:root[data-theme=dark] ._heroSubtitle_1wnqn_400 {
  color: var(--color-text-secondary);
}
@media (max-width: 639px) {
  ._heroSubtitle_1wnqn_400 {
    color: var(--color-white-alpha-80);
  }
  :root[data-theme=dark] ._heroSubtitle_1wnqn_400 {
    color: var(--color-white-alpha-75);
  }
}

._statsStrip_1wnqn_417 {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-shrink: 0;
}
@media (max-width: 639px) {
  ._statsStrip_1wnqn_417 {
    width: 100%;
    gap: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--color-white-alpha-20);
  }
}

._statItem_1wnqn_435 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
}
@media (max-width: 639px) {
  ._statItem_1wnqn_435 {
    text-align: left;
  }
}

._statLabel_1wnqn_447 {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-white-alpha-75);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
:root[data-theme=dark] ._statLabel_1wnqn_447 {
  color: var(--color-text-secondary);
}
@media (max-width: 639px) {
  ._statLabel_1wnqn_447 {
    color: var(--color-white-alpha-70);
  }
  :root[data-theme=dark] ._statLabel_1wnqn_447 {
    color: var(--color-white-alpha-70);
  }
}

._statValue_1wnqn_467 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  line-height: 1;
}
:root[data-theme=dark] ._statValue_1wnqn_467 {
  color: var(--color-text-primary);
}
@media (max-width: 639px) {
  ._statValue_1wnqn_467 {
    font-size: 1.7143rem;
    color: var(--color-text-inverse);
  }
  :root[data-theme=dark] ._statValue_1wnqn_467 {
    color: var(--color-text-inverse);
  }
}

:root[data-theme=dark] ._statValueSuccess_1wnqn_486 {
  color: #22c55e;
}

:root[data-theme=dark] ._statValuePrimary_1wnqn_490 {
  color: #a78bfa;
}
@media (max-width: 639px) {
  ._statValuePrimary_1wnqn_490 {
    font-size: 1.25rem;
  }
  :root[data-theme=dark] ._statValuePrimary_1wnqn_490 {
    color: var(--color-text-inverse);
  }
}

._statDivider_1wnqn_502 {
  width: 1px;
  height: 3rem;
  background: var(--color-white-alpha-25);
  flex-shrink: 0;
}
:root[data-theme=dark] ._statDivider_1wnqn_502 {
  background: var(--color-border);
}
@media (max-width: 639px) {
  ._statDivider_1wnqn_502 {
    height: 2.5rem;
    background: var(--color-white-alpha-20);
  }
  :root[data-theme=dark] ._statDivider_1wnqn_502 {
    background: var(--color-white-alpha-20);
  }
}

._notConnectedContainer_1wnqn_521 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

._notConnectedCard_1wnqn_528 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 560px;
  border: 1px solid var(--color-border);
  padding: 1.5rem;
}
._notConnectedCard_1wnqn_528 h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.5rem;
}
._notConnectedCard_1wnqn_528 p {
  margin: 0;
  color: var(--color-text-secondary);
}

._connectButton_1wnqn_550 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._connectButton_1wnqn_550:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._connectButton_1wnqn_550 {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
._connectButton_1wnqn_550:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._connectButton_1wnqn_550 {
  border: none;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: var(--color-text-inverse);
  cursor: pointer;
  font-weight: 600;
}

._errorText_1wnqn_588 {
  color: #ef4444;
  font-size: 0.875rem;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._panel_l5ovl_329 {
  padding: 1rem;
  background: var(--color-background);
  border-top: 1px solid var(--color-border);
}

._panelLoading_l5ovl_335,
._panelEmpty_l5ovl_336,
._panelError_l5ovl_337 {
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._panelError_l5ovl_337 {
  color: #ef4444;
}

._tabs_l5ovl_348 {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}

._tab_l5ovl_348 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 639px) {
  ._tab_l5ovl_348 {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border-radius: 0.5rem;
  }
}
._tab_l5ovl_348:hover {
  border-color: #667eea;
  color: #667eea;
}

._tabActive_l5ovl_385 {
  background: rgba(34, 197, 94, 0.12);
  border-color: #22c55e;
  color: var(--color-text-primary);
  font-weight: 600;
}
._tabActive_l5ovl_385 ._tabMeta_l5ovl_391 {
  color: #22c55e;
}

._tabMeta_l5ovl_391 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

._recommendedCard_l5ovl_400 {
  background: rgba(34, 197, 94, 0.04);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.5rem;
}

._earningsWarning_l5ovl_408 {
  font-size: 0.875rem;
  color: #f59e0b;
  margin-bottom: 0.5rem;
}

._recRow_l5ovl_414 {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
@media (max-width: 639px) {
  ._recRow_l5ovl_414 {
    gap: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

._recStat_l5ovl_429 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._recLabel_l5ovl_435 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._recValue_l5ovl_442 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

._recMid_l5ovl_448 {
  color: #22c55e;
}

._recYield_l5ovl_452 {
  color: #667eea;
}

._recActions_l5ovl_456 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 639px) {
  ._recActions_l5ovl_456 {
    flex-direction: column;
    align-items: stretch;
  }
}

._placeTradeBtn_l5ovl_468 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._placeTradeBtn_l5ovl_468:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._placeTradeBtn_l5ovl_468 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._placeTradeBtn_l5ovl_468:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._placeTradeBtn_l5ovl_468 {
  background: #22c55e;
  color: var(--color-text-inverse);
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
}
._placeTradeBtn_l5ovl_468:hover {
  background: rgb(27.9948051948, 162.2051948052, 77.3974025974);
}

._chainToggleBtn_l5ovl_509 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._chainToggleBtn_l5ovl_509:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._chainToggleBtn_l5ovl_509 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._chainToggleBtn_l5ovl_509:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._chainToggleBtn_l5ovl_509 {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
}
._chainToggleBtn_l5ovl_509:hover {
  border-color: #667eea;
  color: #667eea;
}

._chainTable_l5ovl_551 {
  margin-top: 0.5rem;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
}
._chainTable_l5ovl_551 table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
._chainTable_l5ovl_551 thead tr {
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}
._chainTable_l5ovl_551 th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
._chainTable_l5ovl_551 td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text-primary);
}
._chainTable_l5ovl_551 tbody tr:last-child td {
  border-bottom: none;
}
@media (max-width: 639px) {
  ._chainTable_l5ovl_551 th:nth-child(2),
  ._chainTable_l5ovl_551 th:nth-child(3),
  ._chainTable_l5ovl_551 th:nth-child(6) {
    display: none;
  }
}

._legRow_l5ovl_593 {
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._legRow_l5ovl_593:hover td {
  background: var(--color-background);
}

._legRowRecommended_l5ovl_600 {
  background: rgba(34, 197, 94, 0.05);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._legRowRecommended_l5ovl_600:hover td {
  background: rgba(34, 197, 94, 0.1);
}

._legStrike_l5ovl_608 {
  font-weight: 600;
  white-space: nowrap;
}

._recBadge_l5ovl_613 {
  color: #22c55e;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

._legDelta_l5ovl_619,
._legBidAsk_l5ovl_620,
._legMid_l5ovl_621,
._legYield_l5ovl_622,
._legOI_l5ovl_623 {
  color: var(--color-text-secondary);
  white-space: nowrap;
}

@media (max-width: 639px) {
  ._legDelta_l5ovl_619,
  ._legBidAsk_l5ovl_620,
  ._legOI_l5ovl_623 {
    display: none;
  }
}

._legMid_l5ovl_621 {
  color: #22c55e;
  font-weight: 500;
}

._legYield_l5ovl_622 {
  color: #667eea;
  font-weight: 500;
}

._placeBtn_l5ovl_646 {
  padding: 2px 0.5rem;
  border-radius: 0.125rem;
  border: 1px solid #22c55e;
  background: transparent;
  color: #22c55e;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._placeBtn_l5ovl_646:hover:not(:disabled) {
  background: #22c55e;
  color: var(--color-text-inverse);
}
._placeBtn_l5ovl_646:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._panel_13bqo_329 {
  padding: 1rem;
  background: var(--color-background);
  border-top: 1px solid var(--color-border);
}

._panelLoading_13bqo_335,
._panelEmpty_13bqo_336,
._panelError_13bqo_337 {
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._panelError_13bqo_337 {
  color: #ef4444;
}

._strategyTabs_13bqo_348 {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

._strategyTab_13bqo_348 {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._strategyTab_13bqo_348:hover {
  border-color: #667eea;
  color: #667eea;
}

._strategyTabActive_13bqo_370 {
  background: #667eea;
  border-color: #667eea;
  color: var(--color-text-inverse);
}

._widthFilters_13bqo_376 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

._widthLabel_13bqo_383 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._widthPill_13bqo_388 {
  padding: 2px 0.5rem;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._widthPill_13bqo_388:hover {
  border-color: #c4b5fd;
  color: #667eea;
}

._widthPillActive_13bqo_404 {
  background: #ede9fe;
  border-color: #a78bfa;
  color: #4c1d95;
}

._tabs_13bqo_410 {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}

._tab_13bqo_410 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 639px) {
  ._tab_13bqo_410 {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border-radius: 0.5rem;
  }
}
._tab_13bqo_410:hover {
  border-color: #667eea;
  color: #667eea;
}

._tabActive_13bqo_447 {
  background: #667eea;
  border-color: #667eea;
  color: var(--color-text-inverse);
}
._tabActive_13bqo_447 ._tabMeta_13bqo_452 {
  color: var(--color-white-alpha-70);
}

._tabMeta_13bqo_452 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

._recommendedCard_13bqo_461 {
  background: rgba(34, 197, 94, 0.04);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.5rem;
}

._earningsWarning_13bqo_469 {
  font-size: 0.875rem;
  color: #f59e0b;
  margin-bottom: 0.5rem;
}

._recRow_13bqo_475 {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
@media (max-width: 639px) {
  ._recRow_13bqo_475 {
    gap: 0.75rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

._recStat_13bqo_490 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._recLabel_13bqo_496 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._recValue_13bqo_503 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

._recYield_13bqo_509 {
  color: #667eea;
}

._recActions_13bqo_513 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 639px) {
  ._recActions_13bqo_513 {
    flex-direction: column;
    align-items: stretch;
  }
}

._netCredit_13bqo_525 {
  color: #22c55e;
  font-weight: 600;
}

._netDebit_13bqo_530 {
  color: #f59e0b;
  font-weight: 600;
}

._riskReward_13bqo_535 {
  color: #667eea;
  font-weight: 500;
}

._placeTradeBtn_13bqo_540 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._placeTradeBtn_13bqo_540:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._placeTradeBtn_13bqo_540 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._placeTradeBtn_13bqo_540:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._placeTradeBtn_13bqo_540 {
  background: #22c55e;
  color: var(--color-text-inverse);
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
}
._placeTradeBtn_13bqo_540:hover {
  background: rgb(27.9948051948, 162.2051948052, 77.3974025974);
}

._chainToggleBtn_13bqo_581 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._chainToggleBtn_13bqo_581:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._chainToggleBtn_13bqo_581 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._chainToggleBtn_13bqo_581:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._chainToggleBtn_13bqo_581 {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
}
._chainToggleBtn_13bqo_581:hover {
  border-color: #667eea;
  color: #667eea;
}

._spreadTable_13bqo_623 {
  margin-top: 0.5rem;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
}
._spreadTable_13bqo_623 table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
._spreadTable_13bqo_623 thead tr {
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}
._spreadTable_13bqo_623 th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
._spreadTable_13bqo_623 td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text-primary);
  white-space: nowrap;
}
._spreadTable_13bqo_623 tbody tr:last-child td {
  border-bottom: none;
}
@media (max-width: 639px) {
  ._spreadTable_13bqo_623 th:nth-child(2),
  ._spreadTable_13bqo_623 th:nth-child(4),
  ._spreadTable_13bqo_623 th:nth-child(6) {
    display: none;
  }
  ._spreadTable_13bqo_623 td:nth-child(2),
  ._spreadTable_13bqo_623 td:nth-child(4),
  ._spreadTable_13bqo_623 td:nth-child(6) {
    display: none;
  }
}

._legRow_13bqo_671 {
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._legRow_13bqo_671:hover td {
  background: var(--color-background-light);
}

._legRowRecommended_13bqo_678 {
  background: rgba(34, 197, 94, 0.05);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._legRowRecommended_13bqo_678:hover td {
  background: rgba(34, 197, 94, 0.1);
}

._legStrike_13bqo_686 {
  font-weight: 600;
  white-space: nowrap;
}

._legWidth_13bqo_691 {
  color: var(--color-text-secondary);
}

._recBadge_13bqo_695 {
  color: #22c55e;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

._placeBtn_13bqo_701 {
  padding: 2px 0.5rem;
  border-radius: 0.125rem;
  border: 1px solid #22c55e;
  background: transparent;
  color: #22c55e;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._placeBtn_13bqo_701:hover:not(:disabled) {
  background: #22c55e;
  color: var(--color-text-inverse);
}
._placeBtn_13bqo_701:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._panel_1rj9x_329 {
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
  white-space: normal;
  word-break: normal;
}
@media (max-width: 639px) {
  ._panel_1rj9x_329 {
    padding: 1rem;
  }
}

._header_1rj9x_344 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}
@media (max-width: 639px) {
  ._header_1rj9x_344 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

._scoreBlock_1rj9x_360 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

._scoreGauge_1rj9x_367 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}
._scoreGauge_1rj9x_367._tier-strong_1rj9x_379 {
  border-color: #22c55e;
  background: linear-gradient(135deg, var(--color-white-alpha-4), var(--color-white-alpha-0));
}
._scoreGauge_1rj9x_367._tier-moderate_1rj9x_383 {
  border-color: #f59e0b;
}
._scoreGauge_1rj9x_367._tier-weak_1rj9x_386 {
  border-color: #b45309;
}
._scoreGauge_1rj9x_367._tier-caution_1rj9x_389 {
  border-color: #ef4444;
}
._scoreGauge_1rj9x_367._tier-no-signal_1rj9x_392 {
  border-color: var(--color-text-tertiary);
}

._scoreNumber_1rj9x_396 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
}

._scoreSuffix_1rj9x_403 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin-top: 0.25rem;
}

._tierLabel_1rj9x_409 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "semibold";
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._tierLabel_1rj9x_409._tier-strong_1rj9x_379 {
  color: #22c55e;
}
._tierLabel_1rj9x_409._tier-moderate_1rj9x_383 {
  color: #b45309;
}
._tierLabel_1rj9x_409._tier-weak_1rj9x_386 {
  color: #b45309;
}
._tierLabel_1rj9x_409._tier-caution_1rj9x_389 {
  color: #ef4444;
}
._tierLabel_1rj9x_409._tier-no-signal_1rj9x_392 {
  color: var(--color-text-tertiary);
}

._fibFreshness_1rj9x_432 {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid currentColor;
}
._fibFreshness_1rj9x_432._freshFresh_1rj9x_439 {
  color: #22c55e;
}
._fibFreshness_1rj9x_432._freshGood_1rj9x_442 {
  color: var(--color-text-secondary);
}
._fibFreshness_1rj9x_432._freshWarn_1rj9x_445 {
  color: #b45309;
}
._fibFreshness_1rj9x_432._freshStale_1rj9x_448 {
  color: var(--color-text-tertiary);
}

._headerText_1rj9x_452 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

._headline_1rj9x_459 {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: "semibold";
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

._summary_1rj9x_469 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}

._tally_1rj9x_480 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

._tallyPass_1rj9x_489 {
  color: #22c55e;
}

._tallyWarn_1rj9x_493 {
  color: #b45309;
}

._tallyFail_1rj9x_497 {
  color: #ef4444;
}

._rulesGrid_1rj9x_501 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 639px) {
  ._rulesGrid_1rj9x_501 {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

._ruleCard_1rj9x_513 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
}
._ruleCard_1rj9x_513._status-pass_1rj9x_524 {
  border-left: 4px solid #22c55e;
}
._ruleCard_1rj9x_513._status-warn_1rj9x_527 {
  border-left: 4px solid #f59e0b;
}
._ruleCard_1rj9x_513._status-fail_1rj9x_530 {
  border-left: 4px solid #ef4444;
}
._ruleCard_1rj9x_513._status-unknown_1rj9x_533 {
  border-left: 4px solid var(--color-text-tertiary);
  opacity: 0.75;
}

._ruleHeader_1rj9x_538 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._ruleIcon_1rj9x_544 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-inverse);
}
._ruleIcon_1rj9x_544._status-pass_1rj9x_524 {
  background: #22c55e;
}
._ruleIcon_1rj9x_544._status-warn_1rj9x_527 {
  background: #f59e0b;
}
._ruleIcon_1rj9x_544._status-fail_1rj9x_530 {
  background: #ef4444;
}
._ruleIcon_1rj9x_544._status-unknown_1rj9x_533 {
  background: var(--color-text-tertiary);
}

._ruleLabels_1rj9x_568 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

._ruleLabel_1rj9x_568 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "semibold";
  line-height: 1.5;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
  word-break: break-word;
}

._ruleStatus_1rj9x_585 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "medium";
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
._ruleStatus_1rj9x_585._status-pass_1rj9x_524 {
  color: #22c55e;
}
._ruleStatus_1rj9x_585._status-warn_1rj9x_527 {
  color: #b45309;
}
._ruleStatus_1rj9x_585._status-fail_1rj9x_530 {
  color: #ef4444;
}
._ruleStatus_1rj9x_585._status-unknown_1rj9x_533 {
  color: var(--color-text-tertiary);
}

._ruleWeight_1rj9x_605 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "semibold";
  line-height: 1.5;
  padding: 2px 0.5rem;
  border-radius: 0.125rem;
  background: var(--color-background-light);
  color: var(--color-text-secondary);
}

._ruleHeadline_1rj9x_615 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "medium";
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0.25rem 0 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

._ruleDetail_1rj9x_626 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._tableWrapper_14s5y_329 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 639px) {
  ._tableWrapper_14s5y_329 {
    display: none;
  }
}

._table_14s5y_329 {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--color-surface);
}
._table_14s5y_329 thead tr {
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
}
._table_14s5y_329 th,
._table_14s5y_329 td {
  white-space: nowrap;
  vertical-align: middle;
  color: var(--color-text-primary);
  padding: 0.75rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 639px) {
  ._table_14s5y_329 th,
  ._table_14s5y_329 td {
    padding: 0.5rem 0.5rem;
    font-size: 0.75rem;
  }
}
._table_14s5y_329 th {
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._table_14s5y_329 tbody tr:last-child td {
  border-bottom: none;
}

._row_14s5y_376 {
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._row_14s5y_376:hover td {
  background: var(--color-surface-hover);
}

._rowSignal_14s5y_383 {
  background: rgba(34, 197, 94, 0.04);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._rowSignal_14s5y_383:hover td {
  background: rgba(34, 197, 94, 0.08);
}
._rowSignal_14s5y_383 td:first-child {
  border-left: 3px solid #22c55e;
  padding-left: calc(1rem - 3px);
}

._symbolCell_14s5y_395 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

._symbolText_14s5y_402 {
  font-weight: 600;
  color: var(--color-text-primary);
}

._watchlistStar_14s5y_407 {
  display: inline-flex;
  align-items: center;
  color: #f59e0b;
  font-size: 0.875rem;
  line-height: 1;
  flex-shrink: 0;
}

._price_14s5y_416 {
  font-weight: 500;
  color: var(--color-text-primary);
}

._categoryWeekly_14s5y_421 {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
  white-space: nowrap;
}

._categoryTier1_14s5y_433 {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
  white-space: nowrap;
}

._categoryStandard_14s5y_445 {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--color-background);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

._level_14s5y_457 {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

._levelActive_14s5y_462 {
  color: #22c55e;
  font-weight: 600;
  font-size: 0.875rem;
}

._positive_14s5y_468 {
  color: var(--color-financial-profit);
  font-weight: 600;
}

._negative_14s5y_473 {
  color: var(--color-financial-loss);
  font-weight: 600;
}

._neutral_14s5y_478 {
  color: var(--color-text-primary);
}

._badgeSignal_14s5y_482 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
}

._badgeNone_14s5y_496 {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

._earningsUrgent_14s5y_501, ._earningsSoon_14s5y_501 {
  display: inline-block;
  padding: 1px 0.5rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

._earningsSoon_14s5y_501 {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

._earningsUrgent_14s5y_501 {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

._openPutsBadge_14s5y_522 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.25rem;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(102, 126, 234, 0.12);
  color: #667eea;
  border: 1px solid rgba(102, 126, 234, 0.3);
  flex-shrink: 0;
}

._expandBtn_14s5y_538 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.06);
  color: #22c55e;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._expandBtn_14s5y_538 ._expandChevron_14s5y_553 {
  display: inline-block;
  width: 12px;
  height: 12px;
  transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
._expandBtn_14s5y_538:hover {
  background: rgba(34, 197, 94, 0.14);
  border-color: #22c55e;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}

._expandBtnActive_14s5y_566 {
  background: rgba(34, 197, 94, 0.14);
  border-color: #22c55e;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}
._expandBtnActive_14s5y_566 ._expandChevron_14s5y_553 {
  transform: rotate(180deg);
}

._tradeRow_14s5y_575 {
  background: var(--color-background);
}

._tradePanelCell_14s5y_579 {
  padding: 0 !important;
  border-left: 4px solid #22c55e;
  white-space: normal;
}

._colHeader_14s5y_585 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

._infoIcon_14s5y_591 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: var(--color-border);
  color: var(--color-text-secondary);
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  cursor: default;
  line-height: 1;
  position: relative;
  flex-shrink: 0;
}
._infoIcon_14s5y_591::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #f1f5f9;
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  white-space: normal;
  width: 220px;
  line-height: 1.4;
  box-shadow: 0 4px 12px var(--color-black-alpha-30);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}
._infoIcon_14s5y_591::before {
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: #1e293b;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}
._infoIcon_14s5y_591:hover::after, ._infoIcon_14s5y_591:hover::before {
  opacity: 1;
  visibility: visible;
}

._stackedCell_14s5y_651 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.375;
}

._stackedPrimary_14s5y_658 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

._stackedSecondary_14s5y_664 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

._cardGrid_14s5y_669 {
  display: none;
}
@media (max-width: 639px) {
  ._cardGrid_14s5y_669 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

._card_14s5y_669 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}

._cardSignal_14s5y_688 {
  background: rgba(34, 197, 94, 0.04);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-left: 3px solid #22c55e;
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}

._cardHeader_14s5y_697 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

._cardSymbolGroup_14s5y_705 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

._cardPrice_14s5y_712 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.75rem;
}

._cardPriceMain_14s5y_720 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._cardFibs_14s5y_726 {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._cardFibsLabel_14s5y_733 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 0.25rem;
}

._cardFibRow_14s5y_742 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
}

._cardFibKey_14s5y_749 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

._cardRange_14s5y_755 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

._cardRangeLabel_14s5y_763 {
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

._cardRangeSep_14s5y_770 {
  color: var(--color-text-secondary);
}

._cardFooter_14s5y_774 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

._cardTradePanel_14s5y_784 {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

._panelStrategyToggle_14s5y_790 {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background);
}

._panelStrategyBtn_14s5y_798 {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  background: none;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._panelStrategyBtn_14s5y_798:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-hover);
}

._panelStrategyBtnActive_14s5y_814 {
  background: rgba(102, 126, 234, 0.12);
  color: var(--color-text-primary);
  font-weight: 600;
}

._convictionBadge_14s5y_820 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  border: 2px solid var(--color-border);
  background: var(--color-background-light);
}
._convictionBadge_14s5y_820._tier-strong_14s5y_831 {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
}
._convictionBadge_14s5y_820._tier-moderate_14s5y_835 {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}
._convictionBadge_14s5y_820._tier-weak_14s5y_839 {
  border-color: #b45309;
  background: rgba(180, 83, 9, 0.06);
}
._convictionBadge_14s5y_820._tier-caution_14s5y_843 {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}
._convictionBadge_14s5y_820._tier-no-signal_14s5y_847 {
  opacity: 0.55;
}

._convictionScore_14s5y_851 {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: "bold";
  line-height: 1.5;
  color: var(--color-text-primary);
  line-height: 1;
}

._convictionTier_14s5y_859 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "semibold";
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

._scoreMuted_14s5y_868 {
  color: var(--color-text-tertiary);
  font-weight: 500;
}

._extendedBadge_14s5y_873 {
  margin-top: 2px;
  padding: 1px 0.25rem;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "semibold";
  line-height: 1.5;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b45309;
  background: var(--color-black-alpha-0.04);
  border: 1px solid #f59e0b;
  border-radius: 0.125rem;
  white-space: nowrap;
}

._noSignalReason_14s5y_889 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "semibold";
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  text-align: center;
}

._cardHeadline_14s5y_899 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "medium";
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0.25rem 0;
  line-height: 1.4;
}
@media (max-width: 639px) {
  ._cardHeadline_14s5y_899 {
    display: none;
  }
}

._indexPill_14s5y_913 {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 1px 0.25rem;
  border-radius: 0.125rem;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
  line-height: 1.6;
}
@media (max-width: 639px) {
  ._indexPill_14s5y_913 {
    display: none;
  }
}

._pill-sp500_14s5y_930 {
  background: rgba(102, 126, 234, 0.15);
  color: #5b21b6;
}
:root[data-theme=dark] ._pill-sp500_14s5y_930 {
  background: rgba(167, 139, 250, 0.2);
  color: #c4b5fd;
}

._pill-nasdaq100_14s5y_939 {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}
:root[data-theme=dark] ._pill-nasdaq100_14s5y_939 {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

._pill-russell1000_14s5y_948 {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}
:root[data-theme=dark] ._pill-russell1000_14s5y_948 {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_jor8h_329 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._header_jor8h_335 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

._title_jor8h_343 {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: "semibold";
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._tickerCount_jor8h_354 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  padding: 1px 0.5rem;
  min-width: 1.5rem;
}

._actions_jor8h_367 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

._seedButton_jor8h_374 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._seedButton_jor8h_374:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._seedButton_jor8h_374 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._seedButton_jor8h_374:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._seedButton_jor8h_374 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: #667eea;
  border: 1px solid #667eea;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--color-text-inverse);
}
._seedButton_jor8h_374:hover:not(:disabled) {
  opacity: 0.85;
}
._seedButton_jor8h_374:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._addForm_jor8h_420 {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

._addInput_jor8h_427 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._addInput_jor8h_427:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._addInput_jor8h_427 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._addInput_jor8h_427:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._addInput_jor8h_427 {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  color: var(--color-text-primary);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  width: 10rem;
  text-transform: uppercase;
}
._addInput_jor8h_427:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._addInput_jor8h_427:focus:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._addInput_jor8h_427:focus {
  outline-color: var(--color-border-focus);
}

._categorySelect_jor8h_478 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._categorySelect_jor8h_478:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._categorySelect_jor8h_478 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._categorySelect_jor8h_478:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._categorySelect_jor8h_478 {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  color: var(--color-text-primary);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
}

._addButton_jor8h_517 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._addButton_jor8h_517:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._addButton_jor8h_517 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._addButton_jor8h_517:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._addButton_jor8h_517 {
  background: #22c55e;
  color: var(--color-text-inverse);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._addButton_jor8h_517:hover:not(:disabled) {
  opacity: 0.85;
}
._addButton_jor8h_517:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._tickerList_jor8h_562 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 80px;
  max-height: 360px;
  overflow-y: auto;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-background);
  align-content: flex-start;
}

._tickerChip_jor8h_576 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-primary);
  white-space: nowrap;
}

._chipStandard_jor8h_590 {
  border-left: 3px solid var(--color-border);
}

._chipWeekly_jor8h_594 {
  border-left: 3px solid #667eea;
}

._chipTier1_jor8h_598 {
  border-left: 3px solid #f59e0b;
}

._chipRemove_jor8h_602 {
  background: none;
  border: none;
  cursor: pointer;
  color: #ef4444;
  padding: 0;
  margin-left: 0.25rem;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
}
._chipRemove_jor8h_602:hover {
  opacity: 0.75;
}

._empty_jor8h_618 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
  font-style: italic;
}

._seededBadge_jor8h_626 {
  font-size: 0.875rem;
  color: #22c55e;
  font-weight: 500;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_srtmf_329 {
  width: 100%;
  padding: 2rem 1.5rem;
}
@media (max-width: 639px) {
  ._container_srtmf_329 {
    padding: 1rem 0.75rem;
  }
}

._content_srtmf_339 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (max-width: 639px) {
  ._content_srtmf_339 {
    gap: 1rem;
  }
}

._hero_srtmf_350 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  border-radius: 0.75rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
}
@media (max-width: 639px) {
  ._hero_srtmf_350 {
    padding: 1.5rem 1rem;
  }
}

._heroBody_srtmf_364 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
@media (max-width: 639px) {
  ._heroBody_srtmf_364 {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

._heroText_srtmf_379 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 36rem;
}

._heroTitle_srtmf_386 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0;
}
@media (max-width: 639px) {
  ._heroTitle_srtmf_386 {
    font-size: 1.7143rem;
  }
}

._heroSubtitle_srtmf_400 {
  font-size: 0.875rem;
  color: var(--color-white-alpha-80);
  margin: 0;
}

._scanButton_srtmf_406 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-white-alpha-95);
  color: #581c87;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._scanButton_srtmf_406:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
}
._scanButton_srtmf_406:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
@media (max-width: 639px) {
  ._scanButton_srtmf_406 {
    width: 100%;
    justify-content: center;
  }
}

._scanControls_srtmf_440 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
@media (max-width: 639px) {
  ._scanControls_srtmf_440 {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }
}

._universeToggle_srtmf_454 {
  display: inline-flex;
  padding: 3px;
  background: var(--color-white-alpha-18);
  border: 1px solid var(--color-white-alpha-25);
  border-radius: 0.5rem;
}
@media (max-width: 639px) {
  ._universeToggle_srtmf_454 {
    width: 100%;
  }
}

._universeBtn_srtmf_467 {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: none;
  background: transparent;
  color: var(--color-white-alpha-80);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._universeBtn_srtmf_467:hover:not(._universeBtnActive_srtmf_479) {
  color: #fff;
  background: var(--color-white-alpha-12);
}
@media (max-width: 639px) {
  ._universeBtn_srtmf_467 {
    flex: 1;
  }
}

._universeBtnActive_srtmf_479 {
  background: #fff;
  color: #581c87;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}

._heroFilters_srtmf_495 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
}

._heroIndexChipGroup_srtmf_503 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

._heroIndexChip_srtmf_503 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._heroIndexChip_srtmf_503:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._heroIndexChip_srtmf_503 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._heroIndexChip_srtmf_503:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._heroIndexChip_srtmf_503 {
  min-width: 7.5rem;
  background: var(--color-white-alpha-15);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-white-alpha-30);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._heroIndexChip_srtmf_503:hover {
  background: var(--color-white-alpha-25);
  border-color: var(--color-white-alpha-50);
}

._heroIndexChipActive_srtmf_553 {
  background: var(--color-white-alpha-90);
  color: #581c87;
  border-color: transparent;
}
._heroIndexChipActive_srtmf_553:hover {
  background: #fff;
  border-color: transparent;
}

._statsStrip_srtmf_563 {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-white-alpha-20);
}
@media (max-width: 639px) {
  ._statsStrip_srtmf_563 {
    margin-top: 1.5rem;
    padding-top: 1rem;
  }
}

._statItem_srtmf_578 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._statValue_srtmf_584 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  line-height: 1;
}
@media (max-width: 639px) {
  ._statValue_srtmf_584 {
    font-size: 1.7143rem;
  }
}

._statValueDate_srtmf_596 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  line-height: 1.25;
}
@media (max-width: 639px) {
  ._statValueDate_srtmf_596 {
    font-size: 1.125rem;
  }
}

._statLabel_srtmf_608 {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-white-alpha-60);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

._statDivider_srtmf_617 {
  width: 1px;
  height: 3rem;
  background: var(--color-white-alpha-25);
  flex-shrink: 0;
  margin: 0 2rem;
}
@media (max-width: 639px) {
  ._statDivider_srtmf_617 {
    height: 2.5rem;
    margin: 0 1rem;
  }
}

._searchRow_srtmf_631 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 0.5rem;
}

._searchInputWrap_srtmf_641 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-background);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  flex: 1;
  cursor: pointer;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._searchInputWrap_srtmf_641:hover {
  background: var(--color-surface-hover);
}

._searchIcon_srtmf_656 {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

._searchLabel_srtmf_661 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  flex: 1;
}

._searchCount_srtmf_667 {
  background: var(--color-surface-active);
  color: var(--color-text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.25rem;
}

._searchMoreBtn_srtmf_676 {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
._searchMoreBtn_srtmf_676:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

._watchlistExpand_srtmf_694 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
}
@media (max-width: 639px) {
  ._watchlistExpand_srtmf_694 {
    padding: 1rem;
  }
}

._signalsCard_srtmf_706 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

._tabBar_srtmf_713 {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

._tab_srtmf_713 {
  padding: 1rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  bottom: -1px;
}
._tab_srtmf_713:hover {
  color: var(--color-text-primary);
}
@media (max-width: 639px) {
  ._tab_srtmf_713 {
    padding: 0.75rem 1rem;
    flex: 1;
    min-width: 0;
    text-align: center;
  }
}

._tabActive_srtmf_746 {
  color: var(--color-text-primary);
  font-weight: 700;
  border-bottom: 2px solid #22c55e;
}

._tierFilterGroup_srtmf_752 {
  display: flex;
  margin-left: auto;
  border-left: 1px solid var(--color-border);
}
@media (max-width: 639px) {
  ._tierFilterGroup_srtmf_752 {
    margin-left: 0;
    border-left: none;
    border-top: 1px solid var(--color-border);
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

._precomputedBanner_srtmf_768 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-black-alpha-4);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}

._precomputedBannerText_srtmf_780 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._connectBanner_srtmf_785 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(102, 126, 234, 0.06);
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 0.5rem;
}

._connectBannerText_srtmf_797 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._connectButton_srtmf_802 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._connectButton_srtmf_802:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._connectButton_srtmf_802 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._connectButton_srtmf_802:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._connectButton_srtmf_802 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._connectButton_srtmf_802:hover {
  opacity: 0.88;
}

._bentoGrid_srtmf_844 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 639px) {
  ._bentoGrid_srtmf_844 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

._bentoCard_srtmf_856 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

._bentoCardLabel_srtmf_865 {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

._bentoValueRow_srtmf_874 {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

._bentoCardValue_srtmf_881 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
}

._bentoCardSubvalue_srtmf_888 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #22c55e;
  padding-bottom: 0.25rem;
}

._bentoCardDesc_srtmf_895 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

._bentoGaugeBar_srtmf_901 {
  width: 100%;
  height: 8px;
  background: var(--color-surface-active);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 1rem;
}

._bentoGaugeFill_srtmf_910 {
  height: 100%;
  background: #22c55e;
  border-radius: 9999px;
  transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

._bentoHealthLabel_srtmf_917 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #22c55e;
  padding-bottom: 0.25rem;
}

._topPicksList_srtmf_924 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._topPickRow_srtmf_930 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
._topPickRow_srtmf_930:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

._topPickSymbolGroup_srtmf_942 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._topPickAvatar_srtmf_948 {
  width: 32px;
  height: 32px;
  border-radius: 0.25rem;
  background: rgba(102, 126, 234, 0.12);
  color: #a78bfa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

._topPickSymbol_srtmf_942 {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._topPickScore_srtmf_968 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #22c55e;
}

._emptySignals_srtmf_974 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-align: center;
  padding: 2rem;
}

._error_srtmf_981 {
  padding: 1rem;
  font-size: 0.875rem;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.5rem;
  margin: 1rem;
}

._errorSmall_srtmf_991 {
  font-size: 0.875rem;
  color: #ef4444;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_1h457_329 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
}
@media (max-width: 639px) {
  ._container_1h457_329 {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
  }
}

._inputs_1h457_348 {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 639px) {
  ._inputs_1h457_348 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
}

._field_1h457_361 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

@media (max-width: 639px) {
  ._fieldVolume_1h457_368 {
    grid-column: 1/-1;
  }
}

._label_1h457_373 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

._input_1h457_348 {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: var(--color-background-light);
  color: var(--color-text-primary);
  font-size: 0.875rem;
  width: 10rem;
  transition: border-color 150ms ease;
}
._input_1h457_348:focus {
  outline: none;
  border-color: var(--color-border-focus);
}
@media (max-width: 639px) {
  ._input_1h457_348 {
    width: 100%;
  }
}

._scanButton_1h457_402 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._scanButton_1h457_402:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._scanButton_1h457_402 {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
._scanButton_1h457_402:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._scanButton_1h457_402 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 150ms ease;
}
._scanButton_1h457_402:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (max-width: 639px) {
  ._scanButton_1h457_402 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  ._scanButton_1h457_402:focus-visible {
    outline-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  }
  ._scanButton_1h457_402 {
    height: 2rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: var(--radius-md, 0.375rem);
  }
  ._scanButton_1h457_402:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
  ._scanButton_1h457_402 {
    background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
    color: var(--color-text-inverse);
    border: none;
    border-radius: 0.375rem;
    font-weight: 600;
    align-self: flex-end;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._wrapper_u2az7_329 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._toolbar_u2az7_335 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.5rem;
}

._count_u2az7_343 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._sortControls_u2az7_348 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._sortLabel_u2az7_354 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-text-tertiary);
}

._sortButton_u2az7_361 {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: var(--color-background-light);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms ease;
}
._sortButton_u2az7_361:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-focus);
}

._sortButtonActive_u2az7_378 {
  background: var(--color-primary-light);
  border-color: #667eea;
  color: #667eea;
}

._thSort_u2az7_384 {
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease;
}
._thSort_u2az7_384:hover {
  color: var(--color-text-primary);
}

._thSortActive_u2az7_400 {
  color: #667eea;
}

._tableWrap_u2az7_404 {
  overflow-x: auto;
}
@media (max-width: 639px) {
  ._tableWrap_u2az7_404 {
    display: none;
  }
}

._table_u2az7_404 {
  width: 100%;
  border-collapse: collapse;
}

._tableHead_u2az7_418 th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

._thRight_u2az7_431 {
  text-align: right !important;
}

._tableRow_u2az7_435 {
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 150ms ease;
}
._tableRow_u2az7_435 td {
  padding: 1rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  vertical-align: middle;
}
._tableRow_u2az7_435:hover {
  background: var(--color-background-light);
}

._tdRight_u2az7_450 {
  text-align: right;
}

._symbolCell_u2az7_454 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._tickerBadge_u2az7_460 {
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
}

._symbol_u2az7_454 {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

._deepDiveLink_u2az7_473 {
  display: inline-flex;
  align-items: center;
  padding: 1px 0.5rem;
  border: none;
  background: transparent;
  color: #667eea;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0.25rem;
  opacity: 0;
  transition: opacity 150ms ease;
}
._tableRow_u2az7_435:hover ._deepDiveLink_u2az7_473 {
  opacity: 1;
}

._activeBadge_u2az7_491 {
  display: inline-block;
  padding: 1px 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

._companyCell_u2az7_503 {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-secondary) !important;
}

._dteUrgent_u2az7_511, ._dteWarn_u2az7_511, ._dteNormal_u2az7_511 {
  display: inline-block;
  padding: 1px 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.025em;
}

._dteNormal_u2az7_511 {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

._dteWarn_u2az7_511 {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

._dteUrgent_u2az7_511 {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

._cachedInfo_u2az7_537 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._entryDate_u2az7_543 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #667eea;
}

._strikes_u2az7_549 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

._analyzedAt_u2az7_554 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

._noAnalysis_u2az7_559 {
  color: var(--color-text-tertiary);
}

._cardList_u2az7_563 {
  display: none;
}
@media (max-width: 639px) {
  ._cardList_u2az7_563 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

._tickerCard_u2az7_574 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  border-left: 3px solid #667eea;
  cursor: pointer;
  transition: background 150ms ease;
}
._tickerCard_u2az7_574:active {
  background: var(--color-background-light);
}

._cardRow_u2az7_590 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

._cardLeft_u2az7_598 {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}

._cardTickerBadge_u2az7_606 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

._cardInfo_u2az7_621 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._cardCompany_u2az7_628 {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._cardEarningsDate_u2az7_637 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

._cardVolume_u2az7_642 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

._cardRight_u2az7_647 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}

._cardPrice_u2az7_655 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._cardDeepDiveLink_u2az7_661 {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: transparent;
  color: #667eea;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

._cardAnalysis_u2az7_672 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_1u9qx_329 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

._hero_1u9qx_335 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  border-radius: 0.75rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
:root[data-theme=dark] ._hero_1u9qx_335 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
@media (max-width: 639px) {
  ._hero_1u9qx_335 {
    padding: 1.5rem;
  }
  :root[data-theme=dark] ._hero_1u9qx_335 {
    background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
    border: none;
  }
}

._heroBody_1u9qx_356 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
@media (max-width: 639px) {
  ._heroBody_1u9qx_356 {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
}

._heroText_1u9qx_371 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-shrink: 0;
}
@media (max-width: 639px) {
  ._heroText_1u9qx_371 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

._heroTopRow_1u9qx_388 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
@media (max-width: 639px) {
  ._heroTopRow_1u9qx_388 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

._heroTitleGroup_1u9qx_403 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._heroTitle_1u9qx_403 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0;
}
:root[data-theme=dark] ._heroTitle_1u9qx_403 {
  color: #a78bfa;
}
@media (max-width: 639px) {
  ._heroTitle_1u9qx_403 {
    font-size: 1.7143rem;
    color: var(--color-text-inverse);
  }
  :root[data-theme=dark] ._heroTitle_1u9qx_403 {
    color: var(--color-text-inverse);
  }
}

._heroSubtitle_1u9qx_430 {
  font-size: 0.875rem;
  color: var(--color-white-alpha-80);
  margin: 0;
}
:root[data-theme=dark] ._heroSubtitle_1u9qx_430 {
  color: var(--color-text-secondary);
}
@media (max-width: 639px) {
  ._heroSubtitle_1u9qx_430 {
    color: var(--color-white-alpha-80);
  }
  :root[data-theme=dark] ._heroSubtitle_1u9qx_430 {
    color: var(--color-white-alpha-75);
  }
}

._statsStrip_1u9qx_447 {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-shrink: 0;
}
@media (max-width: 639px) {
  ._statsStrip_1u9qx_447 {
    gap: 1rem;
    padding: 0;
    border-top: none;
    display: flex;
    flex-shrink: 0;
  }
}

._statItem_1u9qx_463 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
}
@media (max-width: 639px) {
  ._statItem_1u9qx_463 {
    text-align: right;
  }
}

._statLabel_1u9qx_475 {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-white-alpha-75);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
:root[data-theme=dark] ._statLabel_1u9qx_475 {
  color: var(--color-text-secondary);
}
@media (max-width: 639px) {
  ._statLabel_1u9qx_475 {
    color: var(--color-white-alpha-70);
  }
  :root[data-theme=dark] ._statLabel_1u9qx_475 {
    color: var(--color-white-alpha-70);
  }
}

._statValue_1u9qx_495 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  line-height: 1;
}
:root[data-theme=dark] ._statValue_1u9qx_495 {
  color: var(--color-text-primary);
}
@media (max-width: 639px) {
  ._statValue_1u9qx_495 {
    font-size: 1.5rem;
    color: var(--color-text-inverse);
  }
  :root[data-theme=dark] ._statValue_1u9qx_495 {
    color: var(--color-text-inverse);
  }
}

:root[data-theme=dark] ._statValueSuccess_1u9qx_514 {
  color: #22c55e;
}

:root[data-theme=dark] ._statValuePrimary_1u9qx_518 {
  color: #a78bfa;
}
@media (max-width: 639px) {
  ._statValuePrimary_1u9qx_518 {
    font-size: 1.25rem;
  }
  :root[data-theme=dark] ._statValuePrimary_1u9qx_518 {
    color: var(--color-text-inverse);
  }
}

._statDivider_1u9qx_530 {
  width: 1px;
  height: 3rem;
  background: var(--color-white-alpha-25);
  flex-shrink: 0;
}
:root[data-theme=dark] ._statDivider_1u9qx_530 {
  background: var(--color-border);
}
@media (max-width: 639px) {
  ._statDivider_1u9qx_530 {
    height: 2rem;
    background: var(--color-white-alpha-20);
  }
  :root[data-theme=dark] ._statDivider_1u9qx_530 {
    background: var(--color-white-alpha-20);
  }
}

._pushPrompt_1u9qx_549 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
@media (max-width: 639px) {
  ._pushPrompt_1u9qx_549 {
    flex-direction: column;
    align-items: flex-start;
  }
}

._pushBtn_1u9qx_569 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._pushBtn_1u9qx_569:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._pushBtn_1u9qx_569 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._pushBtn_1u9qx_569:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._pushBtn_1u9qx_569 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
._pushBtn_1u9qx_569:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._pushDismiss_1u9qx_612 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._pushDismiss_1u9qx_612:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._pushDismiss_1u9qx_612 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._pushDismiss_1u9qx_612:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._pushDismiss_1u9qx_612 {
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  white-space: nowrap;
}
._pushDismiss_1u9qx_612:hover {
  color: var(--color-text-secondary);
}

._pushSettings_1u9qx_652 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-background-light);
}
@media (max-width: 639px) {
  ._pushSettings_1u9qx_652 {
    flex-direction: column;
    align-items: flex-start;
  }
}

._pushSettingsInline_1u9qx_670 {
  max-width: 32rem;
  background: var(--color-white-alpha-12);
  border-color: var(--color-white-alpha-28);
}
:root[data-theme=dark] ._pushSettingsInline_1u9qx_670 {
  background: var(--color-background-light);
  border-color: var(--color-border);
}
._pushSettingsInline_1u9qx_670 ._pushSettingsText_1u9qx_679 {
  color: var(--color-text-inverse);
}
:root[data-theme=dark] ._pushSettingsInline_1u9qx_670 ._pushSettingsText_1u9qx_679 {
  color: var(--color-text-secondary);
}
._pushSettingsInline_1u9qx_670 ._pushGhostBtn_1u9qx_685 {
  background: var(--color-white-alpha-12);
  border-color: var(--color-white-alpha-30);
  color: var(--color-text-inverse);
}
:root[data-theme=dark] ._pushSettingsInline_1u9qx_670 ._pushGhostBtn_1u9qx_685 {
  background: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
._pushSettingsInline_1u9qx_670 ._pushGhostBtn_1u9qx_685:hover {
  border-color: var(--color-white-alpha-45);
}
:root[data-theme=dark] ._pushSettingsInline_1u9qx_670 ._pushGhostBtn_1u9qx_685:hover {
  border-color: var(--color-border-focus);
  color: var(--color-text-primary);
}
@media (max-width: 639px) {
  ._pushSettingsInline_1u9qx_670 {
    max-width: 100%;
    width: 100%;
  }
}

._pushSettingsCompact_1u9qx_709 {
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  padding: 0.5rem 0.75rem;
}

._pushSettingsText_1u9qx_679 {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

._pushSettingsActions_1u9qx_721 {
  display: flex;
  gap: 0.5rem;
}

._pushGhostBtn_1u9qx_685 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._pushGhostBtn_1u9qx_685:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._pushGhostBtn_1u9qx_685 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._pushGhostBtn_1u9qx_685:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._pushGhostBtn_1u9qx_685 {
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: var(--color-background);
  color: var(--color-text-secondary);
  cursor: pointer;
}
._pushGhostBtn_1u9qx_685:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-focus);
}

._pushHelp_1u9qx_767 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-background);
}
._pushHelp_1u9qx_767 p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

._notConnectedContainer_1u9qx_782 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

._notConnectedCard_1u9qx_789 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 560px;
  border: 1px solid var(--color-border);
  padding: 1.5rem;
}
._notConnectedCard_1u9qx_789 h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.5rem;
}
._notConnectedCard_1u9qx_789 p {
  margin: 0;
  color: var(--color-text-secondary);
}

._connectButton_1u9qx_811 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._connectButton_1u9qx_811:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._connectButton_1u9qx_811 {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
._connectButton_1u9qx_811:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._connectButton_1u9qx_811 {
  border: none;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: var(--color-text-inverse);
  cursor: pointer;
  font-weight: 600;
}
._connectButton_1u9qx_811:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._errorText_1u9qx_853 {
  color: #ef4444;
  font-size: 0.875rem;
}

._empty_1u9qx_858 {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  padding: 2rem 0;
}

._cards_1u9qx_865 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._activeTrade_1sg9b_329 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--color-background-light);
  border: 1px solid #22c55e;
  border-radius: 0.5rem;
}
@media (max-width: 639px) {
  ._activeTrade_1sg9b_329 {
    padding: 0.75rem 1rem;
  }
}

._activeTradeHeader_1sg9b_344 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

._activeTradeBadge_1sg9b_351 {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background: #22c55e;
  color: var(--color-text-inverse);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 9999px;
  white-space: nowrap;
}

._activeTradeType_1sg9b_365 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

._activeTradePlacedAt_1sg9b_371 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin-left: auto;
}

._removeBtn_1sg9b_377 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._removeBtn_1sg9b_377:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._removeBtn_1sg9b_377 {
  height: 1.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm, 0.125rem);
}
._removeBtn_1sg9b_377:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._removeBtn_1sg9b_377 {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-financial-loss);
  cursor: pointer;
  transition: all 150ms ease;
}
._removeBtn_1sg9b_377:hover:not(:disabled) {
  background: var(--color-black-alpha-4);
  border-color: var(--color-financial-loss);
}
._removeBtn_1sg9b_377:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._removeConfirm_1sg9b_422 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

._removePrompt_1sg9b_428 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

._removeYes_1sg9b_433 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._removeYes_1sg9b_433:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._removeYes_1sg9b_433 {
  height: 1.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm, 0.125rem);
}
._removeYes_1sg9b_433:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._removeYes_1sg9b_433 {
  background: var(--color-financial-loss);
  color: var(--color-text-inverse);
  border: none;
  cursor: pointer;
}
._removeYes_1sg9b_433:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._removeNo_1sg9b_473 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._removeNo_1sg9b_473:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._removeNo_1sg9b_473 {
  height: 1.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm, 0.125rem);
}
._removeNo_1sg9b_473:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._removeNo_1sg9b_473 {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
}
._removeNo_1sg9b_473:hover:not(:disabled) {
  color: var(--color-text-primary);
}
._removeNo_1sg9b_473:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._activeTradeStrikes_1sg9b_516 {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 639px) {
  ._activeTradeStrikes_1sg9b_516 {
    gap: 0.75rem;
  }
}

._activeTradeStrike_1sg9b_516 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._activeTradeStrikeDivider_1sg9b_534 {
  width: 1px;
  height: 2.5rem;
  background: var(--color-border);
  flex-shrink: 0;
}
@media (max-width: 639px) {
  ._activeTradeStrikeDivider_1sg9b_534 {
    display: none;
  }
}

._activeStrikeLabel_1sg9b_546 {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

._activeStrikeValue_1sg9b_554 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._activeStrikeCall_1sg9b_560 {
  color: #667eea;
}

._activeStrikePut_1sg9b_564 {
  color: #f59e0b;
}

._activeTradeLegs_1sg9b_568 {
  margin-top: 0.25rem;
}

._activeTradeLegsSummary_1sg9b_572 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
}
._activeTradeLegsSummary_1sg9b_572:hover {
  color: var(--color-text-primary);
}

._activeLegsTable_1sg9b_582 {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
._activeLegsTable_1sg9b_582 th,
._activeLegsTable_1sg9b_582 td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}
._activeLegsTable_1sg9b_582 th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

._thRight_1sg9b_602 {
  text-align: right !important;
}

._tdRight_1sg9b_606 {
  text-align: right;
}

._legSell_1sg9b_610 {
  background: rgba(239, 68, 68, 0.03);
}

._legBuy_1sg9b_614 {
  background: rgba(34, 197, 94, 0.03);
}

._actionSell_1sg9b_618 {
  display: inline-block;
  padding: 1px 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

._actionBuy_1sg9b_628 {
  display: inline-block;
  padding: 1px 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

._sideCall_1sg9b_638 {
  font-weight: 600;
  color: #667eea;
}

._sidePut_1sg9b_643 {
  font-weight: 600;
  color: #f59e0b;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._card_53kpd_329 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  position: relative;
}
._card_53kpd_329._cardActive_53kpd_341 {
  border-color: #22c55e;
}
@media (max-width: 639px) {
  ._card_53kpd_329 {
    padding: 1rem;
    gap: 1rem;
  }
}

._cardHeader_53kpd_351 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
@media (max-width: 639px) {
  ._cardHeader_53kpd_351 {
    flex-direction: column;
  }
}

._headerLeft_53kpd_364 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._cardSymbol_53kpd_370 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._cardCompany_53kpd_376 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._headerRight_53kpd_381 {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
@media (max-width: 639px) {
  ._headerRight_53kpd_381 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width: 100%;
  }
}

._headerMeta_53kpd_396 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: right;
}
@media (max-width: 639px) {
  ._headerMeta_53kpd_396 {
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: var(--color-background-light);
    border-radius: 0.375rem;
    border: 1px solid var(--color-border);
  }
}

._metaLabel_53kpd_412 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

._metaValue_53kpd_420 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

._metaValueHighlight_53kpd_426 {
  font-size: 0.875rem;
  font-weight: 700;
  color: #667eea;
}

._entryHighlight_53kpd_432 {
  font-size: 0.875rem;
  font-weight: 700;
  color: #22c55e;
}

._closeHighlight_53kpd_438 {
  font-size: 0.875rem;
  font-weight: 700;
  color: #f59e0b;
}

._timeOfDayRow_53kpd_444 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
@media (max-width: 639px) {
  ._timeOfDayRow_53kpd_444 {
    gap: 0.5rem;
  }
}

._timeLabel_53kpd_456 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
@media (max-width: 639px) {
  ._timeLabel_53kpd_456 {
    width: 100%;
    margin-bottom: 0.25rem;
  }
}

._timeBtn_53kpd_468 {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 150ms ease;
}
._timeBtn_53kpd_468:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

._timeBtnActive_53kpd_483 {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

._metricsPanel_53kpd_490 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}

._metricsPriceRow_53kpd_500 {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 639px) {
  ._metricsPriceRow_53kpd_500 {
    gap: 0.5rem;
  }
}

._metricsCurrentPrice_53kpd_512 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
@media (max-width: 639px) {
  ._metricsCurrentPrice_53kpd_512 {
    font-size: 1.125rem;
  }
}

._metricsDayChange_53kpd_523 {
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

._metricsDayChangeUp_53kpd_530 {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

._metricsDayChangeDown_53kpd_535 {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

._metricsVolume_53kpd_540 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-left: auto;
}
@media (max-width: 639px) {
  ._metricsVolume_53kpd_540 {
    margin-left: 0;
  }
}

._metricsVix_53kpd_551 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #f59e0b;
  padding: 0.25rem 0.5rem;
  background: rgba(245, 158, 11, 0.12);
  border-radius: 0.25rem;
}

._metricsRanges_53kpd_560 {
  display: flex;
  gap: 1.5rem;
}
@media (max-width: 639px) {
  ._metricsRanges_53kpd_560 {
    flex-direction: column;
    gap: 0.75rem;
  }
}

._rangeItem_53kpd_571 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._rangeHeader_53kpd_578 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
}

._rangeLabel_53kpd_585 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

._rangeValues_53kpd_593 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

._rangeTrack_53kpd_598 {
  position: relative;
  height: 6px;
  background: var(--color-border);
  border-radius: 9999px;
}

._rangeFill_53kpd_605 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  border-radius: 9999px;
}

._rangeMarker_53kpd_614 {
  position: absolute;
  top: -3px;
  width: 12px;
  height: 12px;
  background: #667eea;
  border: 2px solid var(--color-background);
  border-radius: 50%;
  transform: translateX(-50%);
}

._setups_53kpd_625 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 639px) {
  ._setups_53kpd_625 {
    grid-template-columns: 1fr;
  }
}

._setupWrapper_53kpd_636 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._setupPanel_53kpd_642 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}
@media (max-width: 639px) {
  ._setupPanel_53kpd_642 {
    padding: 0.75rem;
    gap: 0.75rem;
  }
}

._setupHeader_53kpd_658 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@media (max-width: 639px) {
  ._setupHeader_53kpd_658 {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

._setupTitle_53kpd_674 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._badges_53kpd_680 {
  display: flex;
  gap: 0.5rem;
}

._badgePass_53kpd_685 {
  display: inline-block;
  padding: 1px 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

._badgeFail_53kpd_695 {
  display: inline-block;
  padding: 1px 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

._legsTable_53kpd_705 {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
._legsTable_53kpd_705 th {
  padding: 0.25rem 0.5rem;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-bottom: 1px solid var(--color-border);
}
._legsTable_53kpd_705 td {
  padding: 0.5rem;
  color: var(--color-text-primary);
  vertical-align: middle;
}
@media (max-width: 639px) {
  ._legsTable_53kpd_705 {
    font-size: 11px;
  }
  ._legsTable_53kpd_705 th,
  ._legsTable_53kpd_705 td {
    padding: 0.25rem;
  }
}

._thRight_53kpd_734 {
  text-align: right !important;
}

._tdRight_53kpd_738 {
  text-align: right;
}

._legSell_53kpd_742 {
  background: rgba(239, 68, 68, 0.03);
}

._legBuy_53kpd_746 {
  background: rgba(34, 197, 94, 0.03);
}

._actionSell_53kpd_750 {
  display: inline-block;
  padding: 1px 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

._actionBuy_53kpd_760 {
  display: inline-block;
  padding: 1px 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

._sideCall_53kpd_770 {
  font-weight: 600;
  color: #667eea;
}

._sidePut_53kpd_775 {
  font-weight: 600;
  color: #f59e0b;
}

._expiryCell_53kpd_780 {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

._preTag_53kpd_787 {
  display: inline-block;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  font-size: 10px;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

._metrics_53kpd_490 {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

._metric_53kpd_490 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._metricLabel_53kpd_811 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-weight: 600;
}

._metricValue_53kpd_819 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._edgePanel_53kpd_825 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}
@media (max-width: 639px) {
  ._edgePanel_53kpd_825 {
    padding: 0.75rem;
  }
}

._edgeTitle_53kpd_840 {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

._edgeGrid_53kpd_848 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 639px) {
  ._edgeGrid_53kpd_848 {
    grid-template-columns: 1fr;
  }
}

._edgeItem_53kpd_859 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-background-light);
  border-radius: 0.375rem;
}

._edgeLabel_53kpd_868 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-bottom: 1px dashed var(--color-text-tertiary);
  cursor: help;
}

._edgeLabelWrap_53kpd_878 {
  position: relative;
  display: inline-flex;
  align-items: center;
}
._edgeLabelWrap_53kpd_878:hover ._tooltip_53kpd_883 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

._tooltip_53kpd_883 {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  width: 260px;
  padding: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.25rem);
  transition: all 200ms ease;
  z-index: 20;
  pointer-events: none;
}

._edgeValue_53kpd_913 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._edgePositive_53kpd_919 {
  color: #22c55e;
}

._edgeNeutral_53kpd_923 {
  color: var(--color-text-secondary);
}

._edgeHint_53kpd_927 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  line-height: 1.3;
}

._setupActions_53kpd_933 {
  display: flex;
  gap: 0.75rem;
}
@media (max-width: 639px) {
  ._setupActions_53kpd_933 {
    flex-direction: column;
  }
}

._orderBtn_53kpd_943 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._orderBtn_53kpd_943:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._orderBtn_53kpd_943 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._orderBtn_53kpd_943:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._orderBtn_53kpd_943 {
  border: none;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: var(--color-text-inverse);
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
  flex: 1;
}
._orderBtn_53kpd_943:hover {
  opacity: 0.9;
}

._placeBtn_53kpd_986 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._placeBtn_53kpd_986:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._placeBtn_53kpd_986 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._placeBtn_53kpd_986:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._placeBtn_53kpd_986 {
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
  flex: 1;
}
._placeBtn_53kpd_986:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

._chartWrap_53kpd_1030 {
  height: 200px;
  position: relative;
}
@media (max-width: 639px) {
  ._chartWrap_53kpd_1030 {
    height: 160px;
  }
}

._confirmOverlay_53kpd_1040 {
  position: absolute;
  inset: 0;
  background: var(--color-black-alpha-40);
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

._confirmCard_53kpd_1051 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 1.5rem;
  max-width: 360px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--color-border);
}
._confirmCard_53kpd_1051 p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

._confirmActions_53kpd_1070 {
  display: flex;
  gap: 0.75rem;
}

._confirmYes_53kpd_1075 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._confirmYes_53kpd_1075:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._confirmYes_53kpd_1075 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._confirmYes_53kpd_1075:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._confirmYes_53kpd_1075 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  flex: 1;
}

._confirmNo_53kpd_1114 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._confirmNo_53kpd_1114:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._confirmNo_53kpd_1114 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._confirmNo_53kpd_1114:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._confirmNo_53kpd_1114 {
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  flex: 1;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._wrapper_1utw0_329 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._legend_1utw0_335 {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-text-secondary);
}

._legendEntry_1utw0_345,
._legendEarnings_1utw0_346 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

._dotGreen_1utw0_352 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
}

._dotAmber_1utw0_360 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f59e0b;
}

._chart_1utw0_368 {
  height: 260px;
}
@media (max-width: 639px) {
  ._chart_1utw0_368 {
    height: 200px;
  }
}

._empty_1utw0_377 {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.6;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._wrapper_1dbd1_329 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._legend_1dbd1_335 {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-text-secondary);
}

._legendItem_1dbd1_346 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

._dotAmber_1dbd1_352 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
}

._dotRed_1dbd1_361 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
}

._dotGreen_1dbd1_370 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

._currentIv_1dbd1_379 {
  margin-left: auto;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-text-secondary);
}
._currentIv_1dbd1_379 strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

._chart_1dbd1_391 {
  height: 260px;
}
@media (max-width: 639px) {
  ._chart_1dbd1_391 {
    height: 200px;
  }
}

._empty_1dbd1_400 {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.6;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._grid_1c2zg_329 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 639px) {
  ._grid_1c2zg_329 {
    grid-template-columns: repeat(2, 1fr);
  }
}

._stat_1c2zg_340 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  text-align: center;
}

._value_1c2zg_352 {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: "semibold";
  line-height: 1.2;
  color: var(--color-text-primary);
}

._label_1c2zg_359 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-text-secondary);
}

._hint_1c2zg_366 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.3;
  color: var(--color-text-tertiary);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_19l0r_329 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  padding: 1rem;
}
@media (max-width: 639px) {
  ._container_19l0r_329 {
    gap: 1rem;
    padding: 0.75rem;
  }
}

._topBar_19l0r_343 {
  display: flex;
  align-items: center;
}

._backBtn_19l0r_348 {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
  padding: 0.25rem 0;
  transition: "color" "150ms" "ease";
}
._backBtn_19l0r_348:hover {
  color: var(--color-primary);
}

._header_19l0r_363 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}

._headerLeft_19l0r_372 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._symbol_19l0r_378 {
  font-size: var(--font-size-4xl, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
  margin: 0;
}

._subtitle_19l0r_390 {
  margin: 0;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-text-secondary);
}

._headerRight_19l0r_398 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

._freshness_19l0r_406 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.2;
  color: var(--color-text-tertiary);
}

._headerActions_19l0r_413 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._deepDiveBtn_19l0r_419 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._deepDiveBtn_19l0r_419:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._deepDiveBtn_19l0r_419 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._deepDiveBtn_19l0r_419:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._deepDiveBtn_19l0r_419 {
  background: transparent;
  border: 1px solid var(--color-border);
  color: #667eea;
  cursor: pointer;
  transition: all 150ms ease;
}
._deepDiveBtn_19l0r_419:hover {
  border-color: #667eea;
  background: var(--color-primary-light);
}

._reanalyzeBtn_19l0r_460 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._reanalyzeBtn_19l0r_460:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._reanalyzeBtn_19l0r_460 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._reanalyzeBtn_19l0r_460:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._reanalyzeBtn_19l0r_460 {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}
._reanalyzeBtn_19l0r_460:hover:not(:disabled) {
  border-color: var(--color-border-focus);
  color: var(--color-text-primary);
}
._reanalyzeBtn_19l0r_460:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._error_19l0r_505 {
  padding: 1rem;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-financial-loss);
  background: var(--color-background-light);
  border: 1px solid var(--color-financial-loss);
  border-radius: var(--radius-lg, 0.5rem);
}

._section_19l0r_516 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 0.75rem);
}
@media (max-width: 639px) {
  ._section_19l0r_516 {
    padding: 1rem;
  }
}

._sectionTitle_19l0r_531 {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  margin: 0;
}

._sectionSubtitle_19l0r_542 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 0.5rem;
}

@media (max-width: 639px) {
  ._header_19l0r_363 {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }
  ._headerRight_19l0r_398 {
    align-items: flex-start;
    width: 100%;
  }
  ._headerActions_19l0r_413 {
    width: 100%;
    justify-content: space-between;
  }
  ._deepDiveBtn_19l0r_419,
  ._reanalyzeBtn_19l0r_460 {
    flex: 1;
    justify-content: center;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._accordion_1xqea_329 {
  border-left: 3px solid var(--color-border);
  border-radius: 0.375rem;
  overflow: hidden;
  background: var(--color-background);
}
._accordion_1xqea_329._covered-call_1xqea_335 {
  border-left-color: #14b8a6;
}
._accordion_1xqea_329._bullish-verticals_1xqea_338 {
  border-left-color: #22c55e;
}
._accordion_1xqea_329._bearish-verticals_1xqea_341 {
  border-left-color: #ef4444;
}
._accordion_1xqea_329._double-calendar_1xqea_344 {
  border-left-color: #3b82f6;
}
._accordion_1xqea_329._bought-call_1xqea_347 {
  border-left-color: #667eea;
}
._accordion_1xqea_329._cash-secured-put_1xqea_350 {
  border-left-color: #f59e0b;
}
._accordion_1xqea_329._bought-put_1xqea_353 {
  border-left-color: #0ea5e9;
}
._accordion_1xqea_329._other-multi-leg_1xqea_356 {
  border-left-color: #737373;
}

._header_1xqea_360 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  gap: 0.75rem;
}
._header_1xqea_360:hover {
  background: var(--color-background-light);
}

._chevron_1xqea_378 {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
._chevron_1xqea_378._expanded_1xqea_383 {
  transform: rotate(90deg);
}

._label_1xqea_387 {
  font-weight: 600;
}

._count_1xqea_391 {
  background: var(--color-background-light);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

._spacer_1xqea_400 {
  flex: 1;
}

._pnl_1xqea_404 {
  font-weight: 600;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
._pnl_1xqea_404._profit_1xqea_409 {
  color: #22c55e;
}
._pnl_1xqea_404._loss_1xqea_412 {
  color: #ef4444;
}

._body_1xqea_416 {
  padding: 0 1.25rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 0.75rem;
}
@media (max-width: 639px) {
  ._body_1xqea_416 {
    grid-template-columns: 1fr;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._card_15tvr_329 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: var(--color-surface);
}

._row_15tvr_340 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

._symbol_15tvr_347 {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

._badge_15tvr_353 {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 0.125rem;
  background: var(--color-primary-light);
  color: var(--color-primary);
  white-space: nowrap;
}

._detail_15tvr_363 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

._spacer_15tvr_369 {
  flex: 1;
}

._pnlValue_15tvr_373 {
  font-weight: 600;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
._pnlValue_15tvr_373._profit_15tvr_378 {
  color: #22c55e;
}
._pnlValue_15tvr_373._loss_15tvr_381 {
  color: #ef4444;
}

._pnlPct_15tvr_385 {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.8;
}

._meta_15tvr_391 {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 639px) {
  ._row_15tvr_340 {
    gap: 0.5rem;
  }
  ._meta_15tvr_391 {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_1vzt0_329 {
  width: 100%;
  padding: 2rem 1.5rem;
}
@media (max-width: 639px) {
  ._container_1vzt0_329 {
    padding: 1rem 0.75rem;
  }
}

._header_1vzt0_339 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
@media (max-width: 639px) {
  ._header_1vzt0_339 {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

._headerRight_1vzt0_353 {
  display: flex;
  align-items: center;
  gap: 1rem;
}

._refreshButton_1vzt0_359 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._refreshButton_1vzt0_359:hover:not(:disabled) {
  background: var(--color-surface-hover);
  border-color: var(--color-border-medium);
}
._refreshButton_1vzt0_359:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._title_1vzt0_383 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

._subtitle_1vzt0_389 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

._totalPnl_1vzt0_395 {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
._totalPnl_1vzt0_395._profit_1vzt0_400 {
  color: #22c55e;
}
._totalPnl_1vzt0_395._loss_1vzt0_403 {
  color: #ef4444;
}

._content_1vzt0_407 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._emptyGroup_1vzt0_413 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  padding: 0.5rem 0;
}

._empty_1vzt0_413,
._error_1vzt0_420 {
  text-align: center;
  padding: 4rem 1rem;
  font-size: 1rem;
  color: var(--color-text-secondary);
}

._error_1vzt0_420 {
  color: #ef4444;
}

._skeleton_1vzt0_431 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._skeletonBlock_1vzt0_437 {
  height: 4rem;
  border-radius: 0.375rem;
  background: var(--color-background-light);
  animation: _pulse_1vzt0_1 1.5s ease-in-out infinite;
}

@keyframes _pulse_1vzt0_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._tableCard_8so40_329 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

._tableWrapper_8so40_336 {
  overflow-x: auto;
}
@media (max-width: 639px) {
  ._tableWrapper_8so40_336 {
    display: none;
  }
}

._table_8so40_329 {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
}
._table_8so40_329 th {
  text-align: left;
  padding: 0.75rem 1rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

._row_8so40_361 {
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: "background" "150ms" "ease";
}
._row_8so40_361:hover {
  background: var(--color-background-light);
}
._row_8so40_361 td {
  padding: 0.75rem 1rem;
  color: var(--color-text-primary);
  vertical-align: middle;
}

._rowStatic_8so40_375 {
  cursor: default;
  border-bottom: 1px solid var(--color-border);
}
._rowStatic_8so40_375 td {
  padding: 0.75rem 1rem;
  color: var(--color-text-primary);
  vertical-align: middle;
}

._ticker_8so40_385 {
  font-weight: 600;
  color: var(--color-primary) !important;
  letter-spacing: 0.03em;
}

._dte_8so40_391 {
  color: var(--color-text-secondary) !important;
}

._badge_8so40_395 {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
  font-weight: 600;
  font-size: 0.75rem;
}

._rankLow_8so40_403 {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

._rankMid_8so40_408 {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

._rankHigh_8so40_413 {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

._ernPremium_8so40_418 {
  font-weight: 600;
  color: #22c55e;
  white-space: nowrap;
}

._entryDate_8so40_424 {
  white-space: nowrap;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "semibold";
  line-height: 1.4;
  color: var(--color-text-primary);
}

._daysHint_8so40_432 {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-text-tertiary);
  font-size: 0.75rem;
  font-weight: 400;
}

._strategy_8so40_440 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

._ccBadge_8so40_446 {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 1px 0.25rem;
  border-radius: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(14, 165, 233, 0.15);
  color: #0ea5e9;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

._ivGtRvBadge_8so40_459 {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 1px 0.25rem;
  border-radius: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: #dcfce7;
  color: #15803d;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

._exitHint_8so40_472 {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-text-tertiary);
  font-size: 0.75rem;
  font-weight: 400;
}

._containBadge_8so40_480, ._dirBadgeDown_8so40_480, ._dirBadgeUp_8so40_480 {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 1px 0.25rem;
  border-radius: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

._dirBadgeUp_8so40_480 {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}

._dirBadgeDown_8so40_480 {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

._containBadge_8so40_480 {
  background: var(--color-white-alpha-8);
  color: var(--color-text-secondary);
}

._cards_8so40_506 {
  flex-direction: column;
  gap: 0.75rem;
  display: none;
}
@media (max-width: 639px) {
  ._cards_8so40_506 {
    display: flex;
  }
}

._card_8so40_506 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

._cardHeader_8so40_528 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

._cardRow_8so40_535 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
}
._cardRow_8so40_535 span:first-child {
  color: var(--color-text-secondary);
}
._cardRow_8so40_535 span:last-child {
  color: var(--color-text-primary);
  font-weight: 500;
}

._empty_8so40_551 {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.6;
}

._strategyChipGroup_8so40_560 {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

._strategyChip_8so40_560 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._strategyChip_8so40_560:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._strategyChip_8so40_560 {
  height: 1.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm, 0.125rem);
}
._strategyChip_8so40_560:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._strategyChip_8so40_560 {
  background: var(--color-background-light);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._strategyChip_8so40_560:hover {
  border-color: #667eea;
  color: #667eea;
}

._strategyChipActive_8so40_609 {
  background: #667eea;
  color: var(--color-primary-contrast);
  border-color: #667eea;
}
._strategyChipActive_8so40_609:hover {
  background: #5b21b6;
  border-color: #5b21b6;
  color: var(--color-primary-contrast);
}

._groupHeaderRow_8so40_620 td {
  padding: 0.5rem 1rem;
  background: var(--color-background-light);
  border-top: 2px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

._groupLabel_8so40_627 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "semibold";
  line-height: 1.3;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._groupCount_8so40_636 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  min-width: 18px;
  height: 18px;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background: var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}

._groupHeaderCard_8so40_651 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "semibold";
  line-height: 1.3;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--color-border);
  margin-top: 0.5rem;
}
._groupHeaderCard_8so40_651:first-child {
  margin-top: 0;
}

._indexPill_8so40_666 {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 1px 0.25rem;
  border-radius: 0.125rem;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
  line-height: 1.6;
}
@media (max-width: 639px) {
  ._indexPill_8so40_666 {
    display: none;
  }
}

._pill-sp500_8so40_683 {
  background: rgba(102, 126, 234, 0.15);
  color: #5b21b6;
}
:root[data-theme=dark] ._pill-sp500_8so40_683 {
  background: rgba(167, 139, 250, 0.2);
  color: #c4b5fd;
}

._pill-nasdaq100_8so40_692 {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}
:root[data-theme=dark] ._pill-nasdaq100_8so40_692 {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

._pill-russell1000_8so40_701 {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}
:root[data-theme=dark] ._pill-russell1000_8so40_701 {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

._strikes_8so40_710 {
  white-space: nowrap;
}

._strikesGroup_8so40_714 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._strikeChip_8so40_720 {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  color: var(--color-text-primary);
}

._viewBtn_8so40_728 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._viewBtn_8so40_728:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._viewBtn_8so40_728 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._viewBtn_8so40_728:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._viewBtn_8so40_728 {
  width: 100%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid var(--color-border-focus);
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 500;
  transition: "all" "fast" cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0.5rem;
}
._viewBtn_8so40_728:hover {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._panel_17rll_329 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

._header_17rll_340 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

._title_17rll_349 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "semibold";
  line-height: 1.4;
  color: var(--color-text-primary);
}

._summary_17rll_356 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-text-tertiary);
}

._tableWrapper_17rll_363 {
  overflow-x: auto;
}

._table_17rll_363 {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.4;
}
._table_17rll_363 th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  color: var(--color-text-tertiary);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

._row_17rll_383, ._rowPassed_17rll_383 {
  border-bottom: 1px solid var(--color-border);
}
._row_17rll_383 td, ._rowPassed_17rll_383 td {
  padding: 0.5rem 0.75rem;
  color: var(--color-text-secondary);
  vertical-align: middle;
}

._rowPassed_17rll_383 td {
  color: var(--color-text-primary);
}

._rowClickable_17rll_396 {
  cursor: pointer;
}
._rowClickable_17rll_396:hover td {
  background: var(--color-background-light);
}

._ticker_17rll_403 {
  font-weight: 600;
  color: var(--color-text-primary) !important;
  letter-spacing: 0.03em;
}

._dte_17rll_409 {
  color: var(--color-text-tertiary) !important;
  white-space: nowrap;
}

._tagWrap_17rll_414 {
  position: relative;
  display: inline-flex;
  align-items: center;
}
._tagWrap_17rll_414:hover ._tooltip_17rll_419 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

._tooltip_17rll_419 {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  width: 280px;
  padding: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.25rem);
  transition: all 180ms ease;
  z-index: 50;
  pointer-events: none;
}
._tooltip_17rll_419 strong {
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
}

._tag_17rll_414 {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
  font-weight: 600;
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: default;
}

._tagPassed_17rll_462 {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

._tagFiltered_17rll_467 {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

._tagMissing_17rll_472 {
  background: var(--color-white-alpha-6);
  color: var(--color-text-tertiary);
}

._reason_17rll_477 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-tertiary) !important;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_1rcbp_329 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

._hero_1rcbp_335 {
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  border-radius: 0.75rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
:root[data-theme=dark] ._hero_1rcbp_335 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
@media (max-width: 639px) {
  ._hero_1rcbp_335 {
    padding: 1.5rem;
  }
  :root[data-theme=dark] ._hero_1rcbp_335 {
    background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
    border: none;
  }
}

._heroBody_1rcbp_356 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
@media (max-width: 639px) {
  ._heroBody_1rcbp_356 {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
}

._heroText_1rcbp_371 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._heroTitle_1rcbp_377 {
  font-size: var(--font-size-3xl, 1.7143rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-inverse);
}
:root[data-theme=dark] ._heroTitle_1rcbp_377 {
  color: var(--color-text-primary);
}

._heroSubtitle_1rcbp_390 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.6;
  color: var(--color-text-inverse);
  opacity: 0.9;
  max-width: 540px;
}
:root[data-theme=dark] ._heroSubtitle_1rcbp_390 {
  color: var(--color-text-secondary);
}

._heroStats_1rcbp_402 {
  display: flex;
  gap: 1.5rem;
  flex-shrink: 0;
}

._stat_1rcbp_408 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

._statValue_1rcbp_415 {
  font-size: var(--font-size-3xl, 1.7143rem);
  font-weight: "bold";
  line-height: 1;
  color: var(--color-text-inverse);
}
:root[data-theme=dark] ._statValue_1rcbp_415 {
  color: var(--color-text-primary);
}

._statLabel_1rcbp_425 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.3;
  color: var(--color-text-inverse);
  opacity: 0.75;
}
:root[data-theme=dark] ._statLabel_1rcbp_425 {
  color: var(--color-text-secondary);
}

._controls_1rcbp_436 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._filterRow_1rcbp_442 {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

._filterLabel_1rcbp_449 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "medium";
  line-height: 1.4;
  color: var(--color-text-secondary);
}

._select_1rcbp_459 {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--color-border);
  background: var(--color-background-light);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
  cursor: pointer;
}
._select_1rcbp_459:focus {
  outline: none;
  border-color: var(--color-border-focus);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._select_1rcbp_459:focus:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

._indexChipGroup_1rcbp_481 {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

._indexChip_1rcbp_481 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._indexChip_1rcbp_481:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._indexChip_1rcbp_481 {
  height: 1.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm, 0.125rem);
}
._indexChip_1rcbp_481:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._indexChip_1rcbp_481 {
  background: var(--color-background-light);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._indexChip_1rcbp_481:hover {
  border-color: #667eea;
  color: #667eea;
}

._indexChipActive_1rcbp_529 {
  background: #667eea;
  color: var(--color-primary-contrast);
  border-color: #667eea;
}
._indexChipActive_1rcbp_529:hover {
  background: #5b21b6;
  border-color: #5b21b6;
  color: var(--color-primary-contrast);
}

._statTotal_1rcbp_540 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.3;
  opacity: 0.75;
}

._scanBtn_1rcbp_547 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._scanBtn_1rcbp_547:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._scanBtn_1rcbp_547 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._scanBtn_1rcbp_547:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._scanBtn_1rcbp_547 {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  cursor: pointer;
}
._scanBtn_1rcbp_547:hover:not(:disabled) {
  opacity: 0.9;
}
._scanBtn_1rcbp_547:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._controlsRow2_1rcbp_590 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  min-height: 1.5rem;
}

._scannedAt_1rcbp_598 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-text-tertiary);
}

._scannedAtRight_1rcbp_605 {
  margin-left: auto;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "semibold";
  line-height: 1.4;
  color: var(--color-text-secondary);
}

._toggleBtn_1rcbp_613 {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "medium";
  line-height: 1.4;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: "color" "150ms" "ease";
  transition: "border-color" "150ms" "ease";
}
._toggleBtn_1rcbp_613:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

._center_1rcbp_631 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
}

._error_1rcbp_638 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 1rem;
  color: #ef4444;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.6;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._card_11c89_329 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

._title_11c89_340 {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  margin: 0;
}

._gaugeRow_11c89_351 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._gaugeEndLabel_11c89_357 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

._gaugeTrack_11c89_366 {
  position: relative;
  flex: 1;
  height: 0.5rem;
  background: var(--color-black-alpha-1);
  border-radius: 9999px;
  overflow: visible;
}

._gaugeFill_11c89_375 {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #22c55e;
  border-radius: 9999px;
  transition: width 0.4s ease;
}

._gaugeHistoricalMark_11c89_385 {
  position: absolute;
  top: -0.25rem;
  width: 2px;
  height: calc(0.5rem + 0.5rem);
  background: #f59e0b;
  transform: translateX(-50%);
  border-radius: 0.125rem;
}

._gaugeCurrentDot_11c89_395 {
  position: absolute;
  top: 50%;
  width: 1rem;
  height: 1rem;
  background: #22c55e;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}

._gaugeLegend_11c89_407 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-text-secondary);
}

._legendGreen_11c89_417 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

._legendAmber_11c89_426 {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #f59e0b;
  border-radius: 0.125rem;
  flex-shrink: 0;
  margin-left: 0.75rem;
}

._stats_11c89_436 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
@media (max-width: 639px) {
  ._stats_11c89_436 {
    grid-template-columns: repeat(2, 1fr);
  }
}

._stat_11c89_436 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--color-background-light);
  border-radius: 0.375rem;
}

._statValue_11c89_456 {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: "semibold";
  line-height: 1.2;
  color: var(--color-text-primary);
}

._statLabel_11c89_463 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "medium";
  line-height: 1.3;
  color: var(--color-text-secondary);
}

._statHint_11c89_470 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.3;
  color: var(--color-text-tertiary);
}

._statWarn_11c89_477 ._statValue_11c89_456 {
  color: #f59e0b;
}

._statGood_11c89_481 ._statValue_11c89_456 {
  color: #22c55e;
}

._declineWarning_11c89_485 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(239, 68, 68, 0.06);
  border-left: 3px solid #ef4444;
  border-radius: 0.375rem;
}

._declineWarningTitle_11c89_495 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "semibold";
  line-height: 1.3;
  color: #ef4444;
}

._declineWarningBody_11c89_502 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

._declineStats_11c89_510 {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-text-secondary);
}
._declineStats_11c89_510 strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

._insight_11c89_524 {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  background: var(--color-white-alpha-1);
  border-left: 3px solid var(--color-primary);
  border-radius: 0.375rem;
}

._insightDot_11c89_534 {
  flex-shrink: 0;
  margin-top: 0.25rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

._insightText_11c89_543 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._card_db934_329 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 1rem;
  margin-bottom: 1rem;
}

._title_db934_338 {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  margin: 0 0 0.75rem 0;
}

._table_db934_349 {
  width: 100%;
  border-collapse: collapse;
}
._table_db934_349 td {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
._table_db934_349 tr:last-child td {
  border-bottom: none;
}

._criterion_db934_362 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "medium";
  line-height: 1.5;
  color: var(--color-text-primary);
  width: 40%;
}

._values_db934_370 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-secondary);
  padding-right: 0.75rem;
}

._badge_db934_378 {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm, 0.125rem);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "semibold";
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._pass_db934_389 {
  background-color: #dcfce7;
  color: #15803d;
}

._fail_db934_394 {
  background-color: #fee2e2;
  color: #b91c1c;
}

._na_db934_399 {
  background-color: var(--color-background-light);
  color: var(--color-text-tertiary);
}

@media (max-width: 639px) {
  ._table_db934_349 {
    display: block;
  }
  ._table_db934_349 tbody,
  ._table_db934_349 tr,
  ._table_db934_349 td {
    display: block;
  }
  ._table_db934_349 tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
  }
  ._table_db934_349 tr:last-child {
    border-bottom: none;
  }
  ._table_db934_349 td {
    border-bottom: none;
    padding: 0.25rem 0;
  }
  ._criterion_db934_362 {
    width: 100%;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: "semibold";
    line-height: 1.5;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_kn7ye_329 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

._topBar_kn7ye_335 {
  display: flex;
  align-items: center;
}

._backBtn_kn7ye_340 {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
  padding: 0.25rem 0;
  transition: "color" "150ms" "ease";
}
._backBtn_kn7ye_340:hover {
  color: var(--color-primary);
}

._header_kn7ye_355 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

._headerLeft_kn7ye_364 {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

._symbol_kn7ye_370 {
  font-size: var(--font-size-4xl, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
}

._price_kn7ye_381 {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: "normal";
  line-height: 1.2;
  color: var(--color-text-secondary);
}

._headerRight_kn7ye_388 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._ccBadge_kn7ye_394 {
  padding: 0.25rem 0.75rem;
  border-radius: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(14, 165, 233, 0.15);
  color: #0ea5e9;
  letter-spacing: 0.04em;
}

._calendarBtn_kn7ye_404 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._calendarBtn_kn7ye_404:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._calendarBtn_kn7ye_404 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._calendarBtn_kn7ye_404:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._calendarBtn_kn7ye_404 {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
._calendarBtn_kn7ye_404:hover {
  opacity: 0.9;
}

._entryCard_kn7ye_446 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._entryCardInner_kn7ye_457 {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  flex-wrap: wrap;
}
@media (max-width: 639px) {
  ._entryCardInner_kn7ye_457 {
    flex-direction: column;
    gap: 1rem;
  }
}

._entryBlock_kn7ye_470 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 140px;
}

._entryLabel_kn7ye_478 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "medium";
  line-height: 1.3;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._entryValue_kn7ye_487 {
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: "semibold";
  line-height: 1.2;
  color: var(--color-text-primary);
}

._entryDate_kn7ye_494 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-text-secondary);
}

._entryCountdown_kn7ye_501 {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "semibold";
  line-height: 1.3;
  background: rgba(102, 126, 234, 0.12);
  color: #a78bfa;
}

._entryCountdownNow_kn7ye_513 {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

._rankGreen_kn7ye_518 {
  color: #22c55e !important;
}

._rankYellow_kn7ye_522 {
  color: #f59e0b !important;
}

._rankRed_kn7ye_526 {
  color: #ef4444 !important;
}

._divider_kn7ye_530 {
  width: 1px;
  background: var(--color-border);
  flex-shrink: 0;
}
@media (max-width: 639px) {
  ._divider_kn7ye_530 {
    width: 100%;
    height: 1px;
  }
}

._entryTip_kn7ye_542 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.6;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  margin: 0;
}

._section_kn7ye_552 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._sectionTitle_kn7ye_558 {
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
}

._sectionSubtitle_kn7ye_568 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  margin-top: -0.5rem;
}

._center_kn7ye_577 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
}

._errorBanner_kn7ye_584 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 1rem;
  color: #ef4444;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.6;
}

._noProfile_kn7ye_596 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.6;
  color: var(--color-text-tertiary);
  padding: 1rem 0;
}
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._card_cs7po_330 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}
._card_cs7po_330._cardActive_cs7po_342 {
  border-color: #22c55e;
}
@media (max-width: 639px) {
  ._card_cs7po_330 {
    padding: 1rem;
    gap: 1rem;
  }
}

._cardHeader_cs7po_352 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._titleRow_cs7po_358 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._title_cs7po_358 {
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  margin: 0;
}

._ccBadge_cs7po_375 {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(14, 165, 233, 0.15);
  color: #0ea5e9;
  letter-spacing: 0.04em;
}

._headerMeta_cs7po_386 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
@media (max-width: 639px) {
  ._headerMeta_cs7po_386 {
    gap: 0.5rem;
  }
}

._dteBadge_cs7po_398 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-text-secondary);
}

._closeBadge_cs7po_405 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-text-secondary);
}
._closeBadge_cs7po_405::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--color-text-tertiary);
}

._surgeHint_cs7po_417 {
  color: #0ea5e9;
  font-weight: 500;
}

._signalGrid_cs7po_422 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 639px) {
  ._signalGrid_cs7po_422 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

._signalItem_cs7po_434 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background: var(--color-background-light);
  border-radius: 0.375rem;
}

._signalLabel_cs7po_443 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "medium";
  line-height: 1.3;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._signalValue_cs7po_452 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: "semibold";
  line-height: 1.2;
  color: var(--color-text-primary);
}

._signalSub_cs7po_462 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.3;
  color: var(--color-text-tertiary);
  font-weight: 400;
}

._valuePositive_cs7po_470 {
  color: #22c55e;
}

._rankGreen_cs7po_474 {
  color: #22c55e;
}

._rankYellow_cs7po_478 {
  color: #f59e0b;
}

._rankRed_cs7po_482 {
  color: #ef4444;
}

._legsTable_cs7po_486 {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
}
._legsTable_cs7po_486 th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  font-size: 0.75rem;
}
._legsTable_cs7po_486 td {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
}

._thRight_cs7po_507 {
  text-align: right;
}

._tdRight_cs7po_511 {
  text-align: right;
  color: var(--color-text-primary);
}

._legSell_cs7po_516 td {
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}

._legBuy_cs7po_521 td {
  color: var(--color-text-primary);
}

._actionSell_cs7po_525 {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

._actionBuy_cs7po_535 {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

._expLabel_cs7po_545 {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 1px 0.25rem;
  border-radius: 0.125rem;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
}

._metricsRow_cs7po_556 {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}
@media (max-width: 639px) {
  ._metricsRow_cs7po_556 {
    gap: 1rem;
  }
}

._metric_cs7po_556 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._metricLabel_cs7po_575 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "medium";
  line-height: 1.3;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._metricValue_cs7po_584 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-base, 1rem);
  font-weight: "semibold";
  line-height: 1.2;
  color: var(--color-text-primary);
}

._metricHint_cs7po_594 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.3;
  color: var(--color-text-tertiary);
  font-weight: 400;
}

._setupActions_cs7po_602 {
  display: flex;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

._orderBtn_cs7po_608 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._orderBtn_cs7po_608:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._orderBtn_cs7po_608 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._orderBtn_cs7po_608:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._orderBtn_cs7po_608 {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  cursor: pointer;
}
._orderBtn_cs7po_608:hover {
  opacity: 0.88;
}

._placeBtn_cs7po_647 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._placeBtn_cs7po_647:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._placeBtn_cs7po_647 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._placeBtn_cs7po_647:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._placeBtn_cs7po_647 {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  cursor: pointer;
}
._placeBtn_cs7po_647:hover {
  background: var(--color-background-light);
}

._confirmOverlay_cs7po_686 {
  position: absolute;
  inset: 0;
  background: var(--color-black-alpha-7);
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

._confirmCard_cs7po_697 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  max-width: 320px;
  width: 90%;
  text-align: center;
}
._confirmCard_cs7po_697 p {
  font-size: var(--font-size-base, 1rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0 0 1rem;
}

._confirmActions_cs7po_714 {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

._confirmYes_cs7po_720 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._confirmYes_cs7po_720:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._confirmYes_cs7po_720 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._confirmYes_cs7po_720:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._confirmYes_cs7po_720 {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  cursor: pointer;
}
._confirmYes_cs7po_720:hover {
  opacity: 0.88;
}

._confirmNo_cs7po_759 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._confirmNo_cs7po_759:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._confirmNo_cs7po_759 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._confirmNo_cs7po_759:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._confirmNo_cs7po_759 {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  cursor: pointer;
}
._confirmNo_cs7po_759:hover {
  background: var(--color-background-light);
}

._pricingNotice_cs7po_798 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-secondary);
  background-color: var(--color-black-alpha-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 0.375rem);
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
}

._tip_cs7po_810 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_1vf82_329 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  padding: 1rem;
}
@media (max-width: 639px) {
  ._container_1vf82_329 {
    gap: 1rem;
    padding: 0.75rem;
  }
}

._topBar_1vf82_343 {
  display: flex;
  align-items: center;
}

._backBtn_1vf82_348 {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
  padding: 0.25rem 0;
  transition: "color" "150ms" "ease";
}
._backBtn_1vf82_348:hover {
  color: var(--color-primary);
}

._header_1vf82_363 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}

._headerLeft_1vf82_372 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._symbol_1vf82_378 {
  font-size: var(--font-size-4xl, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
  margin: 0;
}

._subtitle_1vf82_390 {
  margin: 0;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-text-secondary);
}

._headerRight_1vf82_398 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

._freshness_1vf82_406 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.2;
  color: var(--color-text-tertiary);
}

._headerActions_1vf82_413 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._deepDiveBtn_1vf82_419 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._deepDiveBtn_1vf82_419:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._deepDiveBtn_1vf82_419 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._deepDiveBtn_1vf82_419:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._deepDiveBtn_1vf82_419 {
  background: transparent;
  border: 1px solid var(--color-border);
  color: #667eea;
  cursor: pointer;
  transition: all 150ms ease;
}
._deepDiveBtn_1vf82_419:hover {
  border-color: #667eea;
  background: var(--color-primary-light);
}

._reanalyzeBtn_1vf82_460 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._reanalyzeBtn_1vf82_460:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._reanalyzeBtn_1vf82_460 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._reanalyzeBtn_1vf82_460:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._reanalyzeBtn_1vf82_460 {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}
._reanalyzeBtn_1vf82_460:hover:not(:disabled) {
  border-color: var(--color-border-focus);
  color: var(--color-text-primary);
}
._reanalyzeBtn_1vf82_460:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._signalContext_1vf82_505 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 0.75rem);
}
@media (max-width: 639px) {
  ._signalContext_1vf82_505 {
    padding: 1rem;
  }
}

._signalContextTitle_1vf82_520 {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  margin: 0;
}

._signalContextSub_1vf82_531 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

._signalGrid_1vf82_539 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 639px) {
  ._signalGrid_1vf82_539 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

._signalItem_1vf82_551 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._signalLabel_1vf82_557 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.3;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._signalValue_1vf82_566 {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: "semibold";
  line-height: 1.2;
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._signalSub_1vf82_576 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.3;
  color: var(--color-text-tertiary);
  font-weight: 400;
}

._valuePositive_1vf82_584 {
  color: var(--color-financial-profit);
}

._rankGreen_1vf82_588 {
  color: var(--color-financial-profit);
}

._rankYellow_1vf82_592 {
  color: #f59e0b;
}

._rankRed_1vf82_596 {
  color: var(--color-financial-loss);
}

._error_1vf82_600 {
  padding: 1rem;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-financial-loss);
  background: var(--color-background-light);
  border: 1px solid var(--color-financial-loss);
  border-radius: var(--radius-lg, 0.5rem);
}

._section_1vf82_611 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 0.75rem);
}
@media (max-width: 639px) {
  ._section_1vf82_611 {
    padding: 1rem;
  }
}

._sectionTitle_1vf82_626 {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  margin: 0;
}

._sectionSubtitle_1vf82_637 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 0.5rem;
}

@media (max-width: 639px) {
  ._header_1vf82_363 {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }
  ._headerRight_1vf82_398 {
    align-items: flex-start;
    width: 100%;
  }
  ._headerActions_1vf82_413 {
    width: 100%;
    justify-content: space-between;
  }
  ._deepDiveBtn_1vf82_419,
  ._reanalyzeBtn_1vf82_460 {
    flex: 1;
    justify-content: center;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._badge_gbsr5_329 {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

._shadow_gbsr5_340 {
  background-color: rgba(99, 102, 241, 0.15);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

._live_gbsr5_346 {
  background-color: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._card_1yqyh_329 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 1.25rem;
}

._header_1yqyh_337 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

._date_1yqyh_344 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

._trades_1yqyh_350 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._skipped_1yqyh_355 {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  font-style: italic;
}

._idle_1yqyh_361 {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

._empty_1yqyh_366 {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

._position_1yqyh_371 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._direction_1yqyh_377 {
  font-size: 1rem;
  font-weight: 600;
}

._bullish_1yqyh_382 {
  color: var(--color-financial-profit);
}

._bearish_1yqyh_386 {
  color: var(--color-financial-loss);
}

._strikes_1yqyh_390 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._credit_1yqyh_396 {
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

._meta_1yqyh_401 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

._breakeven_1yqyh_406 {
  font-size: 0.75rem;
  color: #6366f1;
  font-weight: 500;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._tableWrapper_wofaz_329 {
  overflow-x: auto;
  border-radius: 0.375rem;
  border: 1px solid var(--color-border);
}

._table_wofaz_329 {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
._table_wofaz_329 th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  background-color: var(--color-background-light);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
._table_wofaz_329 td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  white-space: nowrap;
}

._row_wofaz_357 {
  cursor: pointer;
}
._row_wofaz_357:hover {
  background-color: var(--color-background-light);
}
._row_wofaz_357:last-child td {
  border-bottom: none;
}

._selected_wofaz_367 {
  background-color: var(--color-primary-light) !important;
}

._skipped_wofaz_371 {
  opacity: 0.55;
  cursor: default;
}

._skipLabel_wofaz_376 {
  font-style: italic;
  color: var(--color-text-tertiary);
}

._date_wofaz_381 {
  font-weight: 500;
  font-family: "Courier New", monospace;
}

._profit_wofaz_386 {
  color: var(--color-financial-profit);
}

._loss_wofaz_390 {
  color: var(--color-financial-loss);
}

._empty_wofaz_394 {
  padding: 1.5rem;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._overlay_103ei_329 {
  position: fixed;
  inset: 0;
  background: var(--color-black-alpha-0.5);
  z-index: 100;
}
@media (min-width: 640px) {
  ._overlay_103ei_329 {
    display: none;
  }
}

._drawer_103ei_341 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  z-index: 101;
  display: flex;
  flex-direction: column;
}
@media (max-width: 639px) {
  ._drawer_103ei_341 {
    left: 0;
    width: 100%;
    border-left: none;
  }
}

._drawerHeader_103ei_361 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  min-height: 56px;
}

._drawerTitle_103ei_371 {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 639px) {
  ._drawerTitle_103ei_371 {
    font-size: 0.875rem;
  }
}

._closeBtn_103ei_390 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  min-width: 44px;
  min-height: 36px;
  white-space: nowrap;
  transition: color 0.15s ease;
  transition: border-color 0.15s ease;
}
._closeBtn_103ei_390:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-secondary);
}

._drawerBody_103ei_414 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
}

._bullish_103ei_423 {
  color: var(--color-financial-profit);
}

._bearish_103ei_427 {
  color: var(--color-financial-loss);
}

._winAmount_103ei_431 {
  font-weight: 700;
  color: var(--color-financial-profit);
}

._lossAmount_103ei_436 {
  font-weight: 700;
  color: var(--color-financial-loss);
}

._loading_103ei_441,
._error_103ei_442,
._empty_103ei_443 {
  text-align: center;
  padding: 1.5rem;
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
}

._error_103ei_442 {
  color: var(--color-financial-loss);
}

._logEntry_103ei_454 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 0.75rem;
  border-left: 3px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._logEvent_103ei_466 {
  border-left-color: var(--color-primary);
}

._logChange_103ei_470 {
  border-left-color: var(--color-financial-profit);
}

._logSnapshot_103ei_474 {
  border-left-color: var(--color-border);
  opacity: 0.85;
}

._logMeta_103ei_479 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._logTime_103ei_485 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

._logBadge_103ei_491 {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: 0.125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

._badgeEnter_103ei_500 {
  background: var(--color-white-alpha-0.12);
  color: var(--color-financial-profit);
}

._badgeExit_103ei_505 {
  background: var(--color-white-alpha-0.12);
  color: var(--color-financial-loss);
}

._badgeSkip_103ei_510 {
  background: var(--color-white-alpha-0.08);
  color: var(--color-text-secondary);
}

._badgeHold_103ei_515 {
  background: var(--color-white-alpha-0.06);
  color: var(--color-text-tertiary);
}

._logReason_103ei_520 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.4;
}

._logGrid_103ei_527 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem 0.5rem;
  font-size: 0.75rem;
}
._logGrid_103ei_527 span:nth-child(odd) {
  color: var(--color-text-tertiary);
}
._logGrid_103ei_527 span:nth-child(even) {
  color: var(--color-text-primary);
  font-weight: 500;
  text-align: right;
}

._logDetail_103ei_542 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--color-border);
}

._logSubtle_103ei_551 {
  color: var(--color-text-tertiary);
}

._drawerFooter_103ei_555 {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
@media (min-width: 640px) {
  ._drawerFooter_103ei_555 {
    display: none;
  }
}

._mobileCloseBtn_103ei_566 {
  display: block;
  width: 100%;
  min-height: 48px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
}
._mobileCloseBtn_103ei_566:hover {
  opacity: 0.9;
}
._mobileCloseBtn_103ei_566:active {
  opacity: 0.8;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._page_ddbb8_329 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  transition: padding-right 0.25s ease;
}
@media (max-width: 639px) {
  ._page_ddbb8_329 {
    padding: 1rem;
    gap: 1rem;
  }
}

@media (min-width: 640px) {
  ._pageWithDrawer_ddbb8_347 {
    padding-right: 396px;
  }
}

._header_ddbb8_352 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._titleRow_ddbb8_358 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

._title_ddbb8_358 {
  font-size: var(--font-size-4xl, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  margin: 0;
}

._subtitle_ddbb8_376 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 0;
}

._symbolTabs_ddbb8_382 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (max-width: 639px) {
  ._symbolTabs_ddbb8_382 {
    width: 100%;
  }
}

._symbolTab_ddbb8_382 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._symbolTab_ddbb8_382:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._symbolTab_ddbb8_382 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._symbolTab_ddbb8_382:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._symbolTab_ddbb8_382 {
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 600;
  transition: color 0.15s ease;
  transition: border-color 0.15s ease;
  transition: background 0.15s ease;
}
._symbolTab_ddbb8_382:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

._symbolTabActive_ddbb8_438 {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
}
._symbolTabActive_ddbb8_438:hover {
  color: var(--color-primary-contrast);
}

._grid_ddbb8_447 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

._sectionHeader_ddbb8_453 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

._sectionTitle_ddbb8_460 {
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  margin: 0;
}

._logBtn_ddbb8_471 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._logBtn_ddbb8_471:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._logBtn_ddbb8_471 {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md, 0.375rem);
}
._logBtn_ddbb8_471:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._logBtn_ddbb8_471 {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: color 0.15s ease;
  transition: border-color 0.15s ease;
}
._logBtn_ddbb8_471:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

._todaySection_ddbb8_514,
._historySection_ddbb8_515 {
  display: flex;
  flex-direction: column;
}

._loading_ddbb8_520 {
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
  padding: 1rem;
}

._refreshBtn_ddbb8_526 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  margin-left: auto;
  transition: color 0.15s ease;
  transition: border-color 0.15s ease;
}
._refreshBtn_ddbb8_526:hover:not(:disabled) {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
._refreshBtn_ddbb8_526:disabled {
  cursor: default;
  opacity: 0.6;
}

@keyframes _spin_ddbb8_557 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._spinning_ddbb8_557 {
  animation: _spin_ddbb8_557 0.7s linear infinite;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._tile_y6vyt_329 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 0.75rem);
  transition: "background" "150ms" "ease";
}
._tile_y6vyt_329:hover {
  background: var(--color-background-light);
}

._top_y6vyt_344 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

._label_y6vyt_352 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._infoWrap_y6vyt_361 {
  position: relative;
  flex-shrink: 0;
}

._info_y6vyt_361 {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1;
  transition: "color" "150ms" "ease";
}
._info_y6vyt_361:hover, ._info_y6vyt_361:focus-visible {
  color: var(--color-primary);
  outline: none;
}
._info_y6vyt_361[aria-expanded=true] {
  color: var(--color-primary);
}

._popover_y6vyt_387 {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 16rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (max-width: 639px) {
  ._popover_y6vyt_387 {
    width: 14rem;
  }
}

._popoverTitle_y6vyt_408 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-primary);
  margin: 0;
}

._popoverBody_y6vyt_416 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

._body_y6vyt_424 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._value_y6vyt_430 {
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text-primary);
}
._value_y6vyt_430._profit_y6vyt_436 {
  color: var(--color-financial-profit);
}
._value_y6vyt_430._loss_y6vyt_439 {
  color: var(--color-financial-loss);
}

._technical_y6vyt_443 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.3;
  color: var(--color-text-secondary);
}

._verdict_y6vyt_450 {
  margin-top: 0.25rem;
  align-self: flex-start;
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text-secondary);
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 9999px);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._wrapper_wwnel_329 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._tableScroll_wwnel_335 {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 0.75rem);
}

._table_wwnel_335 {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
}
._table_wwnel_335 thead {
  background: var(--color-background-light);
}
._table_wwnel_335 th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
._table_wwnel_335 td {
  padding: 0.75rem 1rem;
  color: var(--color-text-primary);
  border-top: 1px solid var(--color-border);
  white-space: nowrap;
}
._table_wwnel_335 tbody tr:hover {
  background: var(--color-background-light);
}

._date_wwnel_373 {
  color: var(--color-text-secondary);
}

._muted_wwnel_377 {
  color: var(--color-text-secondary);
}

._profit_wwnel_381 {
  color: var(--color-financial-profit);
  font-weight: 600;
}

._loss_wwnel_386 {
  color: var(--color-financial-loss);
  font-weight: 600;
}

._badge_wwnel_391 {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-base, 0.25rem);
}

._badgeIn_wwnel_402 {
  color: var(--color-financial-profit);
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

._badgeOut_wwnel_408 {
  color: var(--color-financial-loss);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

._barCol_wwnel_414 {
  min-width: 140px;
}

._barGroup_wwnel_418 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 120px;
}

._barTrack_wwnel_425 {
  width: 100%;
  height: 6px;
  background: var(--color-background-light);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

._barImplied_wwnel_433 {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full, 9999px);
}

._barActual_wwnel_439 {
  height: 100%;
  border-radius: var(--radius-full, 9999px);
}

._barActualIn_wwnel_444 {
  background: var(--color-financial-profit);
}

._barActualOut_wwnel_448 {
  background: var(--color-financial-loss);
}

._caption_wwnel_452 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-secondary);
}

._swatchImplied_wwnel_459,
._swatchActual_wwnel_460 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-sm, 0.125rem);
  vertical-align: middle;
}

._swatchImplied_wwnel_459 {
  background: var(--color-primary);
}

._swatchActual_wwnel_460 {
  background: var(--color-financial-profit);
}

._empty_wwnel_476 {
  font-size: var(--font-size-base, 1rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-secondary);
  padding: 1rem;
  text-align: center;
}

._mobileList_wwnel_485 {
  display: none;
}

._mobileCard_wwnel_489 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 0.5rem);
  background: var(--color-background-light);
}

._mobileCardHeader_wwnel_499 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

._mobileCardMeta_wwnel_506 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
}

._mobileMetricRow_wwnel_515 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._mobileMetricHeader_wwnel_521 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

._mobileLabel_wwnel_528 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
}

@media (max-width: 639px) {
  ._tableScroll_wwnel_335 {
    display: none;
  }
  ._mobileList_wwnel_485 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  ._barGroup_wwnel_418 {
    min-width: unset;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_1fp02_329 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
}

._topBar_1fp02_339 {
  display: flex;
  align-items: center;
}

._backBtn_1fp02_344 {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
  padding: 0.25rem 0;
  transition: "color" "150ms" "ease";
}
._backBtn_1fp02_344:hover {
  color: var(--color-primary);
}

._header_1fp02_359 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}

._headerLeft_1fp02_368 {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

._symbol_1fp02_374 {
  font-size: var(--font-size-4xl, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
}

._price_1fp02_385 {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: "normal";
  line-height: 1.2;
  color: var(--color-text-secondary);
}

._headerRight_1fp02_392 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

._earningsPill_1fp02_399 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text-primary);
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 9999px);
}

._dot_1fp02_413 {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-text-tertiary);
}

._freshness_1fp02_420 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: "normal";
  line-height: 1.2;
  color: var(--color-text-tertiary);
}

._center_1fp02_427 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

._errorBanner_1fp02_434 {
  padding: 1rem;
  color: var(--color-financial-loss);
  background: var(--color-background-light);
  border: 1px solid var(--color-financial-loss);
  border-radius: var(--radius-lg, 0.5rem);
}

._lowConfidence_1fp02_442 {
  padding: 0.75rem 1rem;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.4;
  color: var(--color-text-secondary);
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 0.5rem);
}

._noProfile_1fp02_453 {
  padding: 1.5rem;
  text-align: center;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 0.75rem);
}

._kpiGrid_1fp02_462 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}

@media (max-width: 1023px) {
  ._kpiGrid_1fp02_462 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 639px) {
  ._kpiGrid_1fp02_462 {
    grid-template-columns: repeat(2, 1fr);
  }
}
._section_1fp02_478 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 0.75rem);
}

._sectionTitle_1fp02_488 {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
}

._sectionSubtitle_1fp02_498 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

._strategyCard_1fp02_506 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl, 1rem);
}

._strategyBody_1fp02_519 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 240px;
}

._strategyKicker_1fp02_527 {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

._strategyText_1fp02_536 {
  font-size: var(--font-size-base, 1rem);
  font-weight: "normal";
  line-height: 1.5;
  color: var(--color-text-secondary);
}

._strategyBtn_1fp02_543 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._strategyBtn_1fp02_543:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
._strategyBtn_1fp02_543 {
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}
._strategyBtn_1fp02_543:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
._strategyBtn_1fp02_543 {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  cursor: pointer;
  transition: "filter" "150ms" "ease";
}
._strategyBtn_1fp02_543:hover {
  filter: brightness(1.1);
}

@media (max-width: 639px) {
  ._header_1fp02_359 {
    align-items: flex-start;
  }
  ._headerRight_1fp02_392 {
    align-items: flex-start;
  }
  ._strategyBtn_1fp02_543 {
    width: 100%;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._sidebar_egne3_329 {
  position: relative;
  width: 256px;
  height: 100%;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1020;
}
._sidebar_egne3_329._collapsed_egne3_340 {
  width: 64px;
}

._header_egne3_344 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-primary);
  min-height: 64px;
  gap: 0.5rem;
  flex-shrink: 0;
}

._logo_egne3_357 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  appearance: none;
  background: none;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 0;
  border-radius: 0.375rem;
  transition: "colors" "fast" cubic-bezier(0.4, 0, 0.2, 1);
}
._logo_egne3_357:hover ._logoText_egne3_372 {
  color: #a78bfa;
}
._logo_egne3_357:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._logo_egne3_357:focus-visible:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

._logoIcon_egne3_384 {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  flex-shrink: 0;
}

._logoContent_egne3_391 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
}

._logoText_egne3_372 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  white-space: nowrap;
  transition: color color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

._logoSubtext_egne3_408 {
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(102, 126, 234, 0.12);
  color: #a78bfa;
  padding: 1px 0.5rem;
  border-radius: 9999px;
  align-self: flex-start;
  white-space: nowrap;
}
:root[data-theme=dark] ._logoSubtext_egne3_408 {
  background: rgba(102, 126, 234, 0.15);
  color: #c4b5fd;
}

._headerButtons_egne3_423 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

._collapseButton_egne3_430 {
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  width: 30px;
  height: 30px;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
._collapseButton_egne3_430:hover {
  background: var(--color-surface-active);
  border-color: var(--color-border-medium);
  color: var(--color-text-primary);
}
._collapseButton_egne3_430:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

._mobileCloseButton_egne3_454 {
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._mobileCloseButton_egne3_454:hover {
  background: var(--color-surface-active);
  color: var(--color-text-primary);
}
._mobileCloseButton_egne3_454:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (min-width: 1025px) {
  ._mobileCloseButton_egne3_454 {
    display: none;
  }
}

._userTypeSection_egne3_481 {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

._navigation_egne3_486 {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
  min-height: 0;
}

._navigationSection_egne3_493 {
  margin-bottom: 0.25rem;
}

._sectionHeader_egne3_497 {
  width: 100%;
  background: none;
  border: none;
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._sectionHeader_egne3_497:hover {
  color: var(--color-text-primary);
}
._sectionHeader_egne3_497:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

._sectionTitle_egne3_521 {
  flex: 1;
  text-align: left;
}

._sectionToggle_egne3_526 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._sectionToggle_egne3_526._expanded_egne3_534 {
  transform: rotate(180deg);
}

._sectionItems_egne3_538 {
  display: flex;
  flex-direction: column;
}

._navigationItem_egne3_543 {
  background: none;
  border: none;
  margin: 2px 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--color-text-primary);
  font-size: 0.75rem;
}
._navigationItem_egne3_543:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}
._navigationItem_egne3_543._active_egne3_561 {
  background: rgba(102, 126, 234, 0.2);
  color: var(--color-text-primary);
  font-weight: 600;
}
:root[data-theme=dark] ._navigationItem_egne3_543._active_egne3_561 {
  background: rgba(102, 126, 234, 0.22);
  color: var(--color-text-primary);
}
._navigationItem_egne3_543:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

._navigationIcon_egne3_575 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
}

._navigationContent_egne3_583 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._navigationLabel_egne3_591 {
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.25;
}

._navigationDescription_egne3_597 {
  font-size: 0.625rem;
  color: var(--color-text-tertiary);
  line-height: 1.25;
}

._filtersSection_egne3_603 {
  border-top: 1px solid var(--color-border);
  background: var(--color-background);
  flex-shrink: 0;
  max-height: 40%;
  overflow-y: auto;
}

._tradingNav_egne3_611 {
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
}

._tradingNavItem_egne3_617 {
  background: none;
  border: none;
  margin: 2px 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._tradingNavItem_egne3_617:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._tradingNavItem_egne3_617:focus-visible:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

._tradingNavOverview_egne3_640 {
  color: var(--color-text-primary);
}
._tradingNavOverview_egne3_640:hover {
  background: var(--color-surface-hover);
}
._tradingNavOverview_egne3_640._active_egne3_561 {
  background: rgba(20, 184, 166, 0.18);
  color: var(--color-text-primary);
  font-weight: 600;
}

._tradingNavScanner_egne3_652 {
  color: var(--color-text-primary);
}
._tradingNavScanner_egne3_652:hover {
  background: var(--color-surface-hover);
}
._tradingNavScanner_egne3_652._active_egne3_561 {
  background: rgba(59, 130, 246, 0.18);
  color: var(--color-text-primary);
  font-weight: 600;
}

._tradingNavStrategies_egne3_664 {
  color: var(--color-text-primary);
}
._tradingNavStrategies_egne3_664:hover {
  background: var(--color-surface-hover);
}
._tradingNavStrategies_egne3_664._active_egne3_561 {
  background: rgba(102, 126, 234, 0.18);
  color: var(--color-text-primary);
  font-weight: 600;
}

._tradingNavRisk_egne3_676 {
  color: var(--color-text-primary);
}
._tradingNavRisk_egne3_676:hover {
  background: var(--color-surface-hover);
}
._tradingNavRisk_egne3_676._active_egne3_561 {
  background: rgba(102, 126, 234, 0.22);
  color: var(--color-text-primary);
  font-weight: 600;
}

._tradingNavHighConviction_egne3_688 {
  color: var(--color-text-primary);
}
._tradingNavHighConviction_egne3_688:hover {
  background: var(--color-surface-hover);
}
._tradingNavHighConviction_egne3_688._active_egne3_561 {
  background: rgba(34, 197, 94, 0.18);
  color: var(--color-text-primary);
  font-weight: 600;
}

._tradingNavEarnings_egne3_700 {
  color: var(--color-text-primary);
}
._tradingNavEarnings_egne3_700:hover {
  background: var(--color-surface-hover);
}
._tradingNavEarnings_egne3_700._active_egne3_561 {
  background: rgba(102, 126, 234, 0.15);
  color: #a78bfa;
  font-weight: 600;
}

._tradingNavEngine_egne3_712 {
  color: var(--color-text-primary);
}
._tradingNavEngine_egne3_712:hover {
  background: var(--color-surface-hover);
}
._tradingNavEngine_egne3_712._active_egne3_561 {
  background: rgba(102, 126, 234, 0.15);
  color: #a78bfa;
  font-weight: 600;
}

._tradingNavSim_egne3_724 {
  color: var(--color-text-primary);
}
._tradingNavSim_egne3_724:hover, ._tradingNavSim_egne3_724._active_egne3_561 {
  background-color: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
  border-left-color: #8b5cf6;
}
._tradingNavSim_egne3_724._active_egne3_561 {
  font-weight: 600;
}

._tradingNavTos_egne3_736 {
  color: var(--color-text-primary);
}
._tradingNavTos_egne3_736:hover {
  background: var(--color-surface-hover);
}

._footer_egne3_743 {
  border-top: 1px solid var(--color-border);
  padding: 0.75rem 1.25rem;
  background: var(--color-background);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._settingsButton_egne3_753 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
._settingsButton_egne3_753:hover {
  background: var(--color-background-light);
  color: var(--color-text-primary);
}
._settingsButton_egne3_753 svg {
  flex-shrink: 0;
}

._footerContent_egne3_775 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._version_egne3_781 {
  font-size: 0.625rem;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

._credits_egne3_787 {
  font-size: 0.625rem;
  color: var(--color-text-tertiary);
}

._collapsed_egne3_340 ._navigationItem_egne3_543 {
  margin: 2px 0.25rem;
  padding: 0.625rem;
  justify-content: center;
}
._collapsed_egne3_340 ._navigationContent_egne3_583,
._collapsed_egne3_340 ._navigationDescription_egne3_597 {
  display: none;
}
._collapsed_egne3_340 ._sectionHeader_egne3_497 {
  padding: 0.5rem;
  justify-content: center;
}
._collapsed_egne3_340 ._sectionTitle_egne3_521,
._collapsed_egne3_340 ._sectionToggle_egne3_526 {
  display: none;
}
._collapsed_egne3_340 ._header_egne3_344 {
  padding: 1rem 0.5rem;
  justify-content: center;
}
._collapsed_egne3_340 ._tradingNavItem_egne3_617 {
  padding: 0.75rem;
  justify-content: center;
}
._collapsed_egne3_340 ._tradingNavItem_egne3_617 span:last-child {
  display: none;
}

@media (max-width: 1024px) {
  ._sidebar_egne3_329 {
    position: fixed;
    left: 0;
    top: 60px;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    width: 256px;
  }
  ._sidebar_egne3_329._mobileOpen_egne3_832 {
    transform: translateX(0);
  }
  ._collapsed_egne3_340 {
    width: 64px;
    transform: translateX(-100%);
  }
  ._collapsed_egne3_340._mobileOpen_egne3_832 {
    transform: translateX(0);
  }
  ._filtersSection_egne3_603 {
    display: block;
    max-height: none;
    min-height: 180px;
    flex: 0 0 auto;
  }
  ._navigation_egne3_486 {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem 0;
  }
  ._navigationSection_egne3_493 {
    margin-bottom: 0.25rem;
  }
  ._navigationSection_egne3_493:last-child {
    margin-bottom: 0;
  }
  ._navigationItem_egne3_543 {
    padding: 0.5rem 0.75rem;
  }
  ._sectionHeader_egne3_497 {
    padding: 0.25rem 1rem;
  }
  ._header_egne3_344 {
    padding: 1rem;
    min-height: 56px;
  }
  ._userTypeSection_egne3_481 {
    padding: 0.5rem;
  }
  ._footer_egne3_743 {
    padding: 0.5rem 1rem;
  }
  ._footerContent_egne3_775 {
    gap: 0;
  }
  ._collapseButton_egne3_430 {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }
}
._navigation_egne3_486,
._filtersSection_egne3_603 {
  scroll-behavior: smooth;
}
._navigation_egne3_486::-webkit-scrollbar,
._filtersSection_egne3_603::-webkit-scrollbar {
  width: 4px;
}
._navigation_egne3_486::-webkit-scrollbar-track,
._filtersSection_egne3_603::-webkit-scrollbar-track {
  background: transparent;
}
._navigation_egne3_486::-webkit-scrollbar-thumb,
._filtersSection_egne3_603::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 9999px;
}
._navigation_egne3_486::-webkit-scrollbar-thumb:hover,
._filtersSection_egne3_603::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-medium);
}

@media (prefers-reduced-motion: reduce) {
  ._sidebar_egne3_329,
  ._collapseButton_egne3_430,
  ._navigationItem_egne3_543,
  ._tradingNavItem_egne3_617 {
    transition: none;
  }
}/**
 * Theme Dropdown Component Styles
 * 
 * Dropdown for switching between light/dark/system themes
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._themeDropdown_1rp0m_334 {
  position: relative;
  display: inline-block;
}

._themeButton_1rp0m_339 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._themeButton_1rp0m_339:hover {
  background: var(--color-background-light);
  border-color: var(--color-border-medium);
  box-shadow: var(--shadow-xs, );
}
._themeButton_1rp0m_339:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}

._themeIcon_1rp0m_364 {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
}

._themeLabel_1rp0m_370 {
  color: var(--color-text-primary);
  white-space: nowrap;
}
@media (max-width: 639px) {
  ._themeLabel_1rp0m_370 {
    display: none;
  }
}

._dropdownIcon_1rp0m_380 {
  color: var(--color-text-tertiary);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._dropdownIcon_1rp0m_380._open_1rp0m_384 {
  transform: rotate(180deg);
}

._dropdownOverlay_1rp0m_388 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

._themeOptions_1rp0m_397 {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  min-width: 140px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
  z-index: 20;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

._themeOption_1rp0m_397 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._themeOption_1rp0m_397:hover {
  background: var(--color-background-light);
}
._themeOption_1rp0m_397._active_1rp0m_427 {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
._themeOption_1rp0m_397:first-child {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}
._themeOption_1rp0m_397:last-child {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

._themeOptionIcon_1rp0m_440 {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
}
._active_1rp0m_427 ._themeOptionIcon_1rp0m_440 {
  color: var(--color-primary);
}

._themeOptionLabel_1rp0m_449 {
  flex: 1;
  text-align: left;
}

._checkIcon_1rp0m_454 {
  color: var(--color-primary);
  opacity: 0.8;
}

@media (max-width: 639px) {
  ._themeButton_1rp0m_339 {
    padding: 0.5rem;
    gap: 0;
  }
  ._themeOptions_1rp0m_397 {
    right: auto;
    left: 0;
    min-width: 120px;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._accountDropdown_1okp1_329 {
  position: relative;
  display: inline-block;
}

._accountButton_1okp1_334 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._accountButton_1okp1_334:hover {
  background: var(--color-background-light);
  border-color: var(--color-border-medium);
  box-shadow: var(--shadow-xs, );
}
._accountButton_1okp1_334:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}

._accountIcon_1okp1_359 {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
}

._accountLabel_1okp1_365 {
  color: var(--color-text-primary);
  white-space: nowrap;
  font-family: monospace;
  letter-spacing: 0.02em;
}
@media (max-width: 639px) {
  ._accountLabel_1okp1_365 {
    display: none;
  }
}

._dropdownIcon_1okp1_377 {
  color: var(--color-text-tertiary);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._dropdownIcon_1okp1_377._open_1okp1_381 {
  transform: rotate(180deg);
}

._dropdownOverlay_1okp1_385 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

._accountOptions_1okp1_394 {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  min-width: 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
  z-index: 20;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

._accountOption_1okp1_394 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-family: monospace;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._accountOption_1okp1_394:hover {
  background: var(--color-background-light);
}
._accountOption_1okp1_394._active_1okp1_425 {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
._accountOption_1okp1_394:first-child {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}
._accountOption_1okp1_394:last-child {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

._accountOptionLabel_1okp1_438 {
  flex: 1;
  text-align: left;
  letter-spacing: 0.02em;
}

._checkIcon_1okp1_444 {
  color: var(--color-primary);
  opacity: 0.8;
}

@media (max-width: 639px) {
  ._accountButton_1okp1_334 {
    padding: 0.5rem;
    gap: 0;
  }
  ._accountOptions_1okp1_394 {
    right: auto;
    left: 0;
    min-width: 140px;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._alertsBell_r5x5t_329 {
  position: relative;
  display: inline-block;
}

._bellButton_r5x5t_334 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._bellButton_r5x5t_334:hover {
  background: var(--color-background-light);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xs, );
}
._bellButton_r5x5t_334:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.2));
}

._badge_r5x5t_358 {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

._overlay_r5x5t_376 {
  position: fixed;
  inset: 0;
  z-index: 10;
}

._panel_r5x5t_382 {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 1.5rem);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
  z-index: 20;
  overflow: hidden;
}
@media (max-width: 639px) {
  ._panel_r5x5t_382 {
    width: calc(100vw - 1.5rem);
  }
}

._panelHeader_r5x5t_404 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

._panelTitle_r5x5t_412 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

._panelSubtitle_r5x5t_418 {
  font-size: 0.625rem;
  color: var(--color-text-tertiary);
}

._panelBody_r5x5t_423 {
  overflow-y: auto;
  padding: 0.25rem;
}

._empty_r5x5t_428 {
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

._alertItem_r5x5t_435 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
._alertItem_r5x5t_435:hover {
  background: var(--color-background-light);
}
._alertItem_r5x5t_435 + ._alertItem_r5x5t_435 {
  border-top: 1px solid var(--color-border);
}

._alertTop_r5x5t_450 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._alertCategory_r5x5t_456 {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

._alertTime_r5x5t_464 {
  font-size: 0.625rem;
  color: var(--color-text-tertiary);
}

._alertTitle_r5x5t_469 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

._alertText_r5x5t_475 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}/**
 * TopNavigation Component Styles
 * 
 * Main navigation header with user controls and profile selector
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._topNav_9jt12_334 {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 1020;
  box-shadow: var(--shadow-base, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06));
}

._container_9jt12_344 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 100%;
  padding: 0 1.5rem;
}

._leftSide_9jt12_353 {
  flex: 1;
}

._backLink_9jt12_357 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  transition: color 150ms ease;
}
._backLink_9jt12_357:hover {
  color: var(--color-text-primary);
}

._brandButton_9jt12_373 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: "colors" "fast" cubic-bezier(0.4, 0, 0.2, 1);
}
._brandButton_9jt12_373:hover {
  background: var(--color-border);
}
._brandButton_9jt12_373:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
._brandButton_9jt12_373:focus-visible:focus-visible {
  outline-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

._brandIcon_9jt12_397 {
  font-size: 1.25rem;
  line-height: 1;
}

._brandName_9jt12_402 {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: "bold";
  line-height: 1.5;
  background: linear-gradient(135deg, #667eea 0%, #4c1d95 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

._rightControls_9jt12_412 {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

._profileSelectorContainer_9jt12_418 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

._profileSelectorLabel_9jt12_425 {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  font-weight: 500;
  white-space: nowrap;
}

._profileSelector_9jt12_418 {
  position: relative;
}

._profileButton_9jt12_436 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: var(--color-surface);
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  min-width: 140px;
  white-space: nowrap;
}
._profileButton_9jt12_436:hover {
  border-color: var(--color-border-dark);
  box-shadow: var(--shadow-xs, );
}
._profileButton_9jt12_436:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

._profileIcon_9jt12_461 {
  display: flex;
  align-items: center;
  justify-content: center;
}

._profileLabel_9jt12_467 {
  flex: 1;
  text-align: left;
}

._dropdownIcon_9jt12_472 {
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--color-text-muted);
}
._dropdownIcon_9jt12_472._open_9jt12_476 {
  transform: rotate(180deg);
}

._dropdownOverlay_9jt12_480 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

._profileDropdown_9jt12_489 {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  box-shadow: var(--shadow-dropdown, );
  z-index: 2;
  overflow: hidden;
}

._profileOption_9jt12_502 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  font-size: 0.875rem;
}
._profileOption_9jt12_502:hover {
  background: var(--color-background-light);
}
._profileOption_9jt12_502._active_9jt12_518 {
  font-weight: 500;
}
._profileOption_9jt12_502:focus {
  background: var(--color-background-light);
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

._profileOptionIcon_9jt12_527 {
  display: flex;
  align-items: center;
  justify-content: center;
}

._profileOptionLabel_9jt12_533 {
  flex: 1;
  color: var(--color-text-primary);
}

._checkIcon_9jt12_538 {
  color: var(--color-success);
}

._userMenu_9jt12_542 {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--color-border);
}

._userInfo_9jt12_550 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._userName_9jt12_556 {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-weight: 500;
  white-space: nowrap;
}

._adminBadge_9jt12_563 {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-error-dark);
  background: var(--color-error-light);
  border: 1px solid var(--color-error-border);
  border-radius: 0.125rem;
}

._signOutButton_9jt12_575 {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
._signOutButton_9jt12_575:hover {
  color: var(--color-error-dark);
  border-color: var(--color-error);
  background: var(--color-error-light);
}
._signOutButton_9jt12_575:focus {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  ._navLinks_9jt12_598 {
    display: none;
  }
  ._profileSelectorLabel_9jt12_425 {
    display: none;
  }
  ._container_9jt12_344 {
    padding: 0 1rem;
  }
  ._rightControls_9jt12_412 {
    gap: 1rem;
  }
}
@media (max-width: 768px) {
  ._profileButton_9jt12_436 {
    min-width: auto;
    padding: 0.5rem;
  }
  ._profileLabel_9jt12_467 {
    display: none;
  }
  ._userMenu_9jt12_542 {
    padding-left: 1rem;
  }
  ._userName_9jt12_556 {
    display: none;
  }
  ._signOutButton_9jt12_575 {
    padding: 0.5rem 0.75rem;
  }
}
@media (max-width: 640px) {
  ._container_9jt12_344 {
    padding: 0 0.75rem;
  }
  ._rightControls_9jt12_412 {
    gap: 0.5rem;
  }
  ._profileDropdown_9jt12_489 {
    right: -1rem;
    left: -1rem;
    min-width: auto;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._overlay_71v9e_329 {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: var(--color-black-alpha-60);
  backdrop-filter: blur(2px);
}

._modal_71v9e_341 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 560px;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
@media (max-width: 639px) {
  ._modal_71v9e_341 {
    padding: 1rem;
  }
}

._header_71v9e_358 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

._title_71v9e_365 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

._closeBtn_71v9e_371 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s;
}
._closeBtn_71v9e_371:hover {
  background: var(--color-background-light);
  color: var(--color-text-primary);
}

._hint_71v9e_389 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

._examples_71v9e_396 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
}
._examples_71v9e_396 code {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._textarea_71v9e_415 {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem;
  font-size: 0.875rem;
  font-family: monospace;
  color: var(--color-text-primary);
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  resize: vertical;
  transition: border-color 0.2s ease;
}
._textarea_71v9e_415:focus {
  outline: none;
  border-color: var(--color-border-focus);
}
._textarea_71v9e_415::placeholder {
  color: var(--color-text-tertiary);
}

._previewSection_71v9e_436 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

._strategyBadge_71v9e_443 {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: flex-start;
}

._legsContainer_71v9e_457 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
}

._legRow_71v9e_467 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
}
@media (max-width: 639px) {
  ._legRow_71v9e_467 {
    flex-direction: column;
    align-items: flex-start;
  }
}

._buyBadge_71v9e_481 {
  padding: 2px 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-financial-profit);
  background: rgba(34, 197, 94, 0.12);
  border-radius: 0.125rem;
  white-space: nowrap;
}

._sellBadge_71v9e_491 {
  padding: 2px 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-financial-loss);
  background: rgba(239, 68, 68, 0.12);
  border-radius: 0.125rem;
  white-space: nowrap;
}

._legQty_71v9e_501 {
  font-weight: 600;
  color: var(--color-text-primary);
}

._legSymbol_71v9e_506 {
  font-weight: 600;
  color: var(--color-text-primary);
}

._legDetail_71v9e_511 {
  color: var(--color-text-secondary);
  flex: 1;
}

._legOcc_71v9e_516 {
  font-size: 0.75rem;
  font-family: monospace;
  color: var(--color-text-tertiary);
  margin-left: auto;
}
@media (max-width: 639px) {
  ._legOcc_71v9e_516 {
    margin-left: 0;
  }
}

._orderTypeRow_71v9e_528 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

._orderTypeLabel_71v9e_536 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._orderTypeToggle_71v9e_541 {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  overflow: hidden;
}

._toggleBtn_71v9e_549 {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
._toggleBtn_71v9e_549:hover:not(._toggleActive_71v9e_559) {
  background: var(--color-background-light);
  color: var(--color-text-primary);
}

._toggleActive_71v9e_559 {
  color: white;
  background: var(--color-primary);
  font-weight: 600;
}

._priceRow_71v9e_570 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

._priceLabel_71v9e_578 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

._priceInput_71v9e_583 {
  width: 96px;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  text-align: right;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: var(--color-surface);
  color: var(--color-text-primary);
  transition: border-color 0.2s ease;
}
._priceInput_71v9e_583:focus {
  outline: none;
  border-color: var(--color-border-focus);
}

._totalRow_71v9e_599 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

._totalLabel_71v9e_608 {
  color: var(--color-text-secondary);
}

._totalValue_71v9e_612 {
  font-weight: 600;
  color: var(--color-text-primary);
}

._error_71v9e_617 {
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-error);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.375rem;
}

._actions_71v9e_627 {
  display: flex;
  gap: 0.75rem;
}

._btnCancel_71v9e_632 {
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
._btnCancel_71v9e_632:hover:not(:disabled) {
  background: var(--color-background-light);
}
._btnCancel_71v9e_632:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._btnPrimary_71v9e_652 {
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  background: var(--color-primary);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._btnPrimary_71v9e_652:hover:not(:disabled) {
  opacity: 0.9;
}
._btnPrimary_71v9e_652:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._btnConfirm_71v9e_672 {
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  background: #16a34a;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
._btnConfirm_71v9e_672:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
._btnConfirm_71v9e_672:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._overlay_wphv6_329 {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: var(--color-black-alpha-60);
  backdrop-filter: blur(2px);
}

._modal_wphv6_341 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 420px;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
@media (max-width: 639px) {
  ._modal_wphv6_341 {
    padding: 1rem;
  }
}

._header_wphv6_358 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

._title_wphv6_365 {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  margin: 0;
}

._closeBtn_wphv6_376 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
._closeBtn_wphv6_376:hover {
  background: var(--color-background-light);
  color: var(--color-text-primary);
}

._section_wphv6_394 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.25rem;
}

._sectionTitle_wphv6_403 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

._sectionHint_wphv6_412 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

._field_wphv6_419 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._label_wphv6_425 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

._select_wphv6_431 {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
  appearance: auto;
}
._select_wphv6_431:focus {
  outline: none;
  border-color: var(--color-border-focus);
}

._emptyHint_wphv6_448 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin: 0;
}

._reconnectBtn_wphv6_454 {
  align-self: flex-start;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._reconnectBtn_wphv6_454:hover:not(:disabled) {
  opacity: 0.85;
}
._reconnectBtn_wphv6_454:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._footer_wphv6_474 {
  display: flex;
  justify-content: flex-end;
}

._doneBtn_wphv6_479 {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  background: var(--color-primary);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._doneBtn_wphv6_479:hover {
  opacity: 0.9;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
/**
 * AppLayout Component Styles
 * Converted from CSS to enterprise SCSS with design tokens
 */
._appLayout_1ae7s_333 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-background);
  position: relative;
}

._appContent_1ae7s_341 {
  display: flex;
  flex: 1;
  height: calc(100vh - 60px);
}

._authLayout_1ae7s_347 {
  min-height: 100vh;
  width: 100%;
  background: var(--color-background);
}

._sidebarContainer_1ae7s_353 {
  flex-shrink: 0;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1025px) {
  ._sidebarContainer_1ae7s_353 {
    height: calc(100vh - 60px);
    align-self: flex-start;
    position: sticky;
    top: 60px;
    overflow-y: auto;
  }
}
@media (max-width: 1024px) {
  ._sidebarContainer_1ae7s_353 {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: 280px;
    pointer-events: none;
  }
  ._sidebarContainer_1ae7s_353._mobileOpen_1ae7s_376 {
    pointer-events: auto;
  }
}

._noWrapper_1ae7s_381 {
  overflow: hidden !important;
}

._mainContent_1ae7s_385 {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-background);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  width: 100%;
  margin-left: 0;
}

._contentWrapper_1ae7s_399 {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 2rem;
}
@media (max-width: 1024px) {
  ._contentWrapper_1ae7s_399 {
    padding: 4rem 1.5rem 1.5rem 1.5rem;
  }
}
@media (max-width: 768px) {
  ._contentWrapper_1ae7s_399 {
    padding: 5rem 1rem 1rem 1rem;
  }
}

._mobileMenuButton_1ae7s_418 {
  display: none;
  position: fixed;
  top: 70px;
  left: 1.5rem;
  z-index: 200;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 100ms ease;
  align-items: center;
  justify-content: center;
}
._mobileMenuButton_1ae7s_418._hidden_1ae7s_436 {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}
._mobileMenuButton_1ae7s_418:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-primary);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
._mobileMenuButton_1ae7s_418:active {
  transform: scale(0.95);
}
._mobileMenuButton_1ae7s_418:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (max-width: 1024px) {
  ._mobileMenuButton_1ae7s_418 {
    display: flex;
  }
}
@media (max-width: 768px) {
  ._mobileMenuButton_1ae7s_418 {
    width: 40px;
    height: 40px;
    top: 72px;
    left: 1rem;
  }
}

._hamburger_1ae7s_467 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 3px;
}
._hamburger_1ae7s_467 span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 1px;
  transition: all 150ms ease;
  transform-origin: center;
}
@media (max-width: 639px) {
  ._hamburger_1ae7s_467 span {
    width: 16px;
  }
}
._hamburger_1ae7s_467._open_1ae7s_490 span:first-child {
  transform: rotate(45deg) translate(4px, 4px);
}
._hamburger_1ae7s_467._open_1ae7s_490 span:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}
._hamburger_1ae7s_467._open_1ae7s_490 span:last-child {
  transform: rotate(-45deg) translate(4px, -4px);
}

._mobileOverlay_1ae7s_501 {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-black-alpha-50);
  backdrop-filter: blur(4px);
  z-index: 99;
  top: 60px;
}
@media (max-width: 1024px) {
  ._mobileOverlay_1ae7s_501 {
    display: block;
  }
}

@media (prefers-contrast: high) {
  ._mobileMenuButton_1ae7s_418 {
    border-width: 2px;
    border-color: var(--color-text-primary);
  }
  ._hamburger_1ae7s_467 span {
    background: var(--color-text-primary);
    height: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._sidebarContainer_1ae7s_353,
  ._mainContent_1ae7s_385,
  ._hamburger_1ae7s_467 span,
  ._mobileMenuButton_1ae7s_418 {
    transition: none;
  }
}
@media (max-width: 1024px) {
  ._appLayout_1ae7s_333:has(._sidebarContainer_1ae7s_353._mobileOpen_1ae7s_376) {
    overflow: hidden;
    height: 100vh;
  }
}

@media print {
  ._sidebarContainer_1ae7s_353,
  ._mobileMenuButton_1ae7s_418 {
    display: none;
  }
  ._mainContent_1ae7s_385 {
    margin-left: 0;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
/**
 * ProtectedRoute Component Styles
 * Converted from CSS to enterprise SCSS with design tokens
 */
._container_8ce7f_333 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--color-background-light);
  padding: 3rem;
}

._loadingCard_8ce7f_342 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 4.5rem;
  text-align: center;
  max-width: 400px;
  width: 100%;
  animation: _fadeIn_8ce7f_1 300ms ease;
}
._loadingCard_8ce7f_342 h2 {
  color: var(--color-text-primary);
  margin: 0 0 1.5rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}
._loadingCard_8ce7f_342 p {
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.625;
  font-size: 1rem;
}

._spinner_8ce7f_366 {
  border: 4px solid var(--color-border-light);
  border-left-color: var(--color-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: _spin_8ce7f_366 1s linear infinite;
  margin: 0 auto 2rem auto;
}

@keyframes _fadeIn_8ce7f_1 {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 639px) {
  ._container_8ce7f_333 {
    padding: 1.5rem;
  }
  ._loadingCard_8ce7f_342 {
    padding: 2rem;
  }
  ._loadingCard_8ce7f_342 h2 {
    font-size: 1.25rem;
  }
  ._loadingCard_8ce7f_342 p {
    font-size: 0.875rem;
  }
  ._spinner_8ce7f_366 {
    width: 32px;
    height: 32px;
    border-width: 3px;
  }
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._sidebar_1a3pk_329 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-background-light);
}

._logoBtn_1a3pk_336 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  transition: background-color 150ms ease;
}
._logoBtn_1a3pk_336:hover {
  background-color: var(--color-surface);
}

._logoIcon_1a3pk_353 {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  flex-shrink: 0;
}

._logoText_1a3pk_360 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._logoName_1a3pk_366 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
}

._logoSub_1a3pk_373 {
  font-size: 0.625rem;
  color: var(--color-text-tertiary);
  line-height: 1;
}

._header_1a3pk_379 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

._title_1a3pk_388 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._clearBtn_1a3pk_396 {
  font-size: 0.75rem;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
._clearBtn_1a3pk_396:hover {
  opacity: 0.8;
}

._body_1a3pk_408 {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  gap: 1.5rem;
}

._footer_1a3pk_417 {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

._countBadge_1a3pk_423 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

._section_1a3pk_428 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._label_1a3pk_434 {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._select_1a3pk_442 {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}
._select_1a3pk_442:focus {
  outline: none;
  border-color: var(--color-border-focus);
}
._select_1a3pk_442 option {
  background-color: var(--color-surface);
}

._quickRangeGrid_1a3pk_465 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

._quickRangeBtn_1a3pk_471 {
  padding: 0.5rem 0.625rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 150ms ease;
  text-align: center;
}
._quickRangeBtn_1a3pk_471:hover {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}
._quickRangeBtn_1a3pk_471._active_1a3pk_486 {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

._monthGrid_1a3pk_492 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

._monthChip_1a3pk_498 {
  padding: 0.25rem 0.75rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 150ms ease;
}
._monthChip_1a3pk_498:hover {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}
._monthChip_1a3pk_498._active_1a3pk_486 {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

._resultToggle_1a3pk_518 {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  overflow: hidden;
}

._resultBtn_1a3pk_525 {
  flex: 1;
  padding: 0.5rem;
  background-color: var(--color-surface);
  border: none;
  border-right: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 150ms ease;
}
._resultBtn_1a3pk_525:last-child {
  border-right: none;
}
._resultBtn_1a3pk_525:hover {
  color: var(--color-text-primary);
}
._resultBtn_1a3pk_525._active_1a3pk_486 {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._layout_kqqjo_329 {
  display: flex;
  width: 100%;
  height: calc(100vh - 60px);
  overflow: hidden;
}

._sidebar_kqqjo_336 {
  width: 280px;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  background-color: var(--color-background-light);
}
@media (max-width: 639px) {
  ._sidebar_kqqjo_336 {
    display: none;
  }
}

._main_kqqjo_350 {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  background-color: var(--color-background);
}

._mobileFilterToggle_kqqjo_357 {
  display: none;
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 100;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
  transition: opacity 150ms ease;
}
._mobileFilterToggle_kqqjo_357:hover {
  opacity: 0.9;
}
@media (max-width: 639px) {
  ._mobileFilterToggle_kqqjo_357 {
    display: flex;
  }
}

._overlay_kqqjo_385 {
  position: fixed;
  inset: 0;
  background-color: var(--color-black-alpha-60);
  z-index: 200;
}

._bottomSheet_kqqjo_392 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  background-color: var(--color-background-light);
  border-radius: 0.75rem 0.75rem 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
}

._bottomSheetHeader_kqqjo_406 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

._bottomSheetTitle_kqqjo_415 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

._bottomSheetClose_kqqjo_421 {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0.25rem;
}
._bottomSheetClose_kqqjo_421:hover {
  color: var(--color-text-primary);
}

._bottomSheetContent_kqqjo_434 {
  flex: 1;
  overflow-y: auto;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._grid_qw92q_329 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 639px) {
  ._grid_qw92q_329 {
    grid-template-columns: repeat(2, 1fr);
  }
}

._card_qw92q_340 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  overflow: hidden;
}

._cardHeader_qw92q_352 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
}

._cardLabel_qw92q_359 {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._iconWrapper_qw92q_367 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  flex-shrink: 0;
}
._iconWrapper_qw92q_367._profit_qw92q_376 {
  background-color: var(--color-black-alpha-10);
  color: var(--color-financial-profit);
}
._iconWrapper_qw92q_367._loss_qw92q_380 {
  background-color: var(--color-black-alpha-10);
  color: var(--color-financial-loss);
}
._iconWrapper_qw92q_367._neutral_qw92q_384 {
  background-color: var(--color-black-alpha-10);
  color: var(--color-text-secondary);
}

._cardValue_qw92q_389 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.25rem;
}
._cardValue_qw92q_389._profit_qw92q_376 {
  color: var(--color-financial-profit);
}
._cardValue_qw92q_389._loss_qw92q_380 {
  color: var(--color-financial-loss);
}
._cardValue_qw92q_389._neutral_qw92q_384 {
  color: var(--color-text-primary);
}

._cardSubtitle_qw92q_405 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

._progressTrack_qw92q_410 {
  margin-top: 0.5rem;
  width: 100%;
  height: 3px;
  background-color: var(--color-border);
  border-radius: 9999px;
  overflow: hidden;
}

._progressBar_qw92q_419 {
  height: 100%;
  border-radius: 9999px;
  transition: width 400ms ease;
}
._progressBar_qw92q_419._profit_qw92q_376 {
  background-color: var(--color-financial-profit);
}
._progressBar_qw92q_419._loss_qw92q_380 {
  background-color: var(--color-financial-loss);
}
._progressBar_qw92q_419._neutral_qw92q_384 {
  background-color: var(--color-primary);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_17lqy_329 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

._header_17lqy_340 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
}

._title_17lqy_347 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

._periodToggle_17lqy_354 {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  overflow: hidden;
}

._periodBtn_17lqy_361 {
  padding: 0.375rem 0.75rem;
  background-color: var(--color-surface);
  border: none;
  border-right: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}
._periodBtn_17lqy_361:last-child {
  border-right: none;
}
._periodBtn_17lqy_361:hover {
  color: var(--color-text-primary);
}
._periodBtn_17lqy_361._active_17lqy_378 {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._container_gcfwj_329 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

._title_gcfwj_340 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

._list_gcfwj_347 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._item_gcfwj_353 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._itemRow_gcfwj_359 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
}

._itemLabel_gcfwj_366 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

._itemValue_gcfwj_372 {
  font-size: 0.875rem;
  font-weight: 600;
}

._profit_gcfwj_377 {
  color: var(--color-financial-profit);
}

._loss_gcfwj_381 {
  color: var(--color-financial-loss);
}

._barTrack_gcfwj_385 {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: var(--color-white-alpha-8);
  border-radius: 9999px;
  overflow: hidden;
}

._bar_gcfwj_385 {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 9999px;
  min-width: 4px;
}

._barProfit_gcfwj_403 {
  background-color: #22c55e;
}

._barLoss_gcfwj_407 {
  background-color: #ef4444;
}

._noData_gcfwj_411 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
}

._toggleBtn_gcfwj_420 {
  align-self: center;
  margin-top: 0.25rem;
  padding: 0.375rem 1rem;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 150ms ease;
}
._toggleBtn_gcfwj_420:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._wrapper_slvgb_329 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._grid_slvgb_335 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 639px) {
  ._grid_slvgb_335 {
    grid-template-columns: 1fr;
  }
}

._card_slvgb_346 {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

._rowTop_slvgb_357 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

._ticker_slvgb_365 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

._plGroup_slvgb_371 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  flex-shrink: 0;
}

._pl_slvgb_371 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

._plPct_slvgb_385 {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
}

._rowMid_slvgb_391 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

._strategyMeta_slvgb_399 {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

._strategyType_slvgb_406 {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._contracts_slvgb_414 {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
}

._badges_slvgb_420 {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

._rowFooter_slvgb_427 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-secondary);
  gap: 0.5rem;
}
._rowFooter_slvgb_427:hover {
  color: var(--color-text-primary);
}

._dateInfo_slvgb_444 {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  min-width: 0;
}

._daysHeld_slvgb_452 {
  color: var(--color-text-tertiary);
}

._chevron_slvgb_456 {
  flex-shrink: 0;
  transform: rotate(-90deg);
  transition: transform 200ms ease;
}

._chevronOpen_slvgb_462 {
  transform: rotate(0deg);
}

._profit_slvgb_466 {
  color: var(--color-financial-profit);
}

._loss_slvgb_470 {
  color: var(--color-financial-loss);
}

._badge_slvgb_420 {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

._badgeWin_slvgb_484 {
  background-color: var(--color-black-alpha-10);
  color: var(--color-financial-profit);
}

._badgeLoss_slvgb_489 {
  background-color: var(--color-black-alpha-10);
  color: var(--color-financial-loss);
}

._badgeExpired_slvgb_494 {
  background-color: var(--color-black-alpha-10);
  color: #f59e0b;
}

._badgeAssigned_slvgb_499 {
  background-color: var(--color-black-alpha-10);
  color: #60a5fa;
}

._legDetails_slvgb_504 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

._legDetailsLabel_slvgb_511 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
._legDetailsLabel_slvgb_511::before, ._legDetailsLabel_slvgb_511::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

._legCard_slvgb_529 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  gap: 0.5rem;
}

._legLeft_slvgb_540 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

._legSideBadge_slvgb_547 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  border-radius: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
}

._legBuy_slvgb_557 {
  background-color: var(--color-black-alpha-10);
  color: var(--color-financial-profit);
}

._legSell_slvgb_562 {
  background-color: var(--color-black-alpha-10);
  color: var(--color-financial-loss);
}

._legLabel_slvgb_567 {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._legPl_slvgb_575 {
  font-size: 0.875rem;
  font-weight: 500;
  flex-shrink: 0;
}

._toggleBtn_slvgb_581 {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  color: var(--color-primary);
  font-size: 0.875rem;
  cursor: pointer;
  text-align: center;
  transition: background-color 150ms ease;
}
._toggleBtn_slvgb_581:hover {
  background-color: var(--color-primary-light);
}

._empty_slvgb_598 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Design Tokens - Enterprise Design System
 * 
 * This file contains all design tokens used throughout the application.
 * These tokens provide a consistent design language and can be easily
 * modified to update the entire application's appearance.
 */
/**
 * Functions - SCSS utility functions
 * 
 * Collection of utility functions for calculations,
 * unit conversions, and other helper operations
 */
/**
 * Convert pixels to rem
 * @param {Number} $px - Pixel value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in rem
 */
/**
 * Convert rem to pixels
 * @param {Number} $rem - Rem value
 * @param {Number} $base - Base font size in pixels (default: 16)
 * @return {Number} Value in pixels
 */
/**
 * Convert em to rem
 * @param {Number} $em - Em value
 * @return {Number} Value in rem
 */
/**
 * Create a color with alpha transparency
 * @param {Color} $color - Base color
 * @param {Number} $alpha - Alpha value (0-1)
 * @return {Color} Color with alpha
 */
/**
 * Lighten a color by mixing with white
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to lighten (0-100)
 * @return {Color} Lightened color
 */
/**
 * Darken a color by mixing with black
 * @param {Color} $color - Base color
 * @param {Number} $percentage - Percentage to darken (0-100)
 * @return {Color} Darkened color
 */
/**
 * Get contrasting color (black or white) based on luminance
 * @param {Color} $color - Base color
 * @return {Color} Contrasting color
 */
/**
 * Calculate spacing based on a modular scale
 * @param {Number} $step - Step in the scale
 * @param {Number} $base - Base spacing value
 * @param {Number} $ratio - Scale ratio
 * @return {Number} Calculated spacing
 */
/**
 * Get spacing value from design tokens
 * @param {String|Number} $key - Spacing key or multiplier
 * @return {Number} Spacing value
 */
/**
 * Calculate optimal line height based on font size
 * @param {Number} $font-size - Font size
 * @return {Number} Optimal line height
 */
/**
 * Generate font-size and line-height pair
 * @param {Number} $font-size - Font size
 * @param {Number} $line-height - Optional line height
 * @return {List} Font size and line height
 */
/**
 * Calculate container width with padding
 * @param {Number} $max-width - Maximum width
 * @param {Number} $padding - Horizontal padding
 * @return {Number} Total container width
 */
/**
 * Calculate grid column width
 * @param {Number} $columns - Number of columns
 * @param {Number} $gap - Gap between columns
 * @param {Number} $container-width - Container width
 * @return {Number} Column width
 */
/**
 * Remove unit from a number
 * @param {Number} $value - Value with unit
 * @return {Number} Unitless value
 */
/**
 * Check if a value is a length
 * @param {*} $value - Value to check
 * @return {Boolean} True if value is a length
 */
/**
 * Clamp a value between min and max
 * @param {Number} $value - Value to clamp
 * @param {Number} $min - Minimum value
 * @param {Number} $max - Maximum value
 * @return {Number} Clamped value
 */
/**
 * Linear interpolation between two values
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $factor - Interpolation factor (0-1)
 * @return {Number} Interpolated value
 */
/**
 * Generate a list of values with equal steps
 * @param {Number} $start - Start value
 * @param {Number} $end - End value
 * @param {Number} $steps - Number of steps
 * @return {List} List of values
 */
/**
 * Get deep map value with dot notation
 * @param {Map} $map - Map to search
 * @param {String} $path - Dot-separated path
 * @return {*} Map value
 */
/**
 * Merge multiple maps deeply
 * @param {Map} $maps - Maps to merge
 * @return {Map} Merged map
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Mixins - Reusable SCSS patterns
 * 
 * Collection of mixins for common styling patterns
 * to promote consistency and reduce code duplication
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Theme Manager
 * 
 * Centralized theme management system that handles theme switching
 * and provides theme-specific utilities
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Light Theme
 * 
 * Default theme for the application with light color scheme
 */
/**
 * Abstracts Index
 * 
 * Central import file for all abstract SCSS files
 * (variables, functions, mixins, etc.)
 */
/**
 * Dark Theme
 * 
 * Dark theme for the application with dark color scheme
 */
/**
 * Get theme value
 * @param {String} $key - The key to retrieve from the theme
 * @param {String} $theme - The theme name (defaults to current theme)
 * @return {*} The theme value
 */
/**
 * Create CSS custom property for theme value
 * @param {String} $property - CSS property name
 * @param {String} $key - Theme key
 */
/**
 * Apply theme-aware styles
 * @param {String} $theme - Theme name ('light' or 'dark')
 */
/**
 * Generate CSS custom properties for all themes
 * Using legacy property names for production compatibility
 */
/**
 * Theme-aware color function that uses CSS custom properties
 * @param {String} $key - The theme key
 * @return {String} CSS custom property reference
 */
/**
 * Get alpha color variant using CSS custom property
 * @param {String} $color - The base color ('white' or 'black')
 * @param {Number} $alpha - The alpha value (10, 20, 30, 50)
 * @return {String} CSS custom property reference
 */
/**
 * Responsive theme mixin for media query based theme switching
 */
/**
 * Flexbox center alignment
 */
/**
 * Flexbox space between
 */
/**
 * Flexbox column layout
 */
/**
 * Grid layout with gap
 * @param {Number} $columns - Number of columns
 * @param {String} $gap - Gap size
 */
/**
 * Container with max-width and centering
 * @param {String} $max-width - Maximum width
 */
/**
 * Typography scale
 * @param {String} $size - Size key from design tokens
 * @param {String} $weight - Font weight
 * @param {String} $line-height - Line height
 */
/**
 * Heading styles
 * @param {Number} $level - Heading level (1-6)
 */
/**
 * Text truncation
 * @param {Number} $lines - Number of lines (1 for single line, >1 for multiline)
 */
/**
 * Box shadow with theme support
 * @param {String} $size - Shadow size (sm, base, md, lg, xl, 2xl)
 */
/**
 * Border radius
 * @param {String} $size - Radius size
 */
/**
 * Transition effects
 * @param {String} $property - CSS property to transition
 * @param {String} $duration - Transition duration
 * @param {String} $timing - Timing function
 */
/**
 * Focus ring styles
 * @param {String} $color - Focus ring color
 * @param {String} $offset - Focus ring offset
 */
/**
 * Button base styles
 * @param {String} $size - Button size (xs, sm, md, lg, xl)
 */
/**
 * Input base styles
 * @param {String} $size - Input size (sm, md, lg)
 */
/**
 * Card/Surface styles
 * @param {String} $padding - Padding size
 * @param {String} $shadow - Shadow size
 */
/**
 * Responsive breakpoint mixin
 * @param {String} $breakpoint - Breakpoint name
 */
/**
 * Mobile-first responsive grid
 * @param {Map} $columns - Columns per breakpoint
 */
/**
 * Visually hidden (accessible but not visible)
 */
/**
 * Reset button styles
 */
/**
 * Reset list styles
 */
/**
 * Aspect ratio
 * @param {Number} $width - Width ratio
 * @param {Number} $height - Height ratio
 */
/**
 * Primary button styles
 */
/**
 * Secondary button styles
 */
/**
 * Input base styles with proper theming
 * @param {String} $size - Input size (sm, md, lg) - optional
 */
/**
 * Card base styles with proper theming
 */
/**
 * Loading spinner animation
 * @param {String} $size - Spinner size
 * @param {String} $color - Spinner color
 */
/**
 * Keyframes mixin for animations
 * @param {String} $name - Animation name
 */
/**
 * Apply theme tokens as CSS custom properties
 * This mixin outputs CSS custom properties for all theme tokens
 */
._page_48eqt_329 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  min-height: 100%;
}
@media (max-width: 639px) {
  ._page_48eqt_329 {
    padding: 1rem;
    gap: 1rem;
  }
}

._chartsRow_48eqt_343 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 639px) {
  ._chartsRow_48eqt_343 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

._tableSection_48eqt_355 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._sectionTitle_48eqt_361 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

._loading_48eqt_368 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 60vh;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

._empty_48eqt_378 {
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 60vh;
  gap: 0.75rem;
  text-align: center;
}

._emptyTitle_48eqt_390 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

._emptyText_48eqt_397 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 0;
}