/* ============================================================================
   MODERN TRADING PRO — Foundation
   ----------------------------------------------------------------------------
   Tek tutarlı design system. Linear / Vercel disiplini + Bloomberg yoğunluğu.
   - Koyu siyah-soğuk arka plan, ince border, sade tipografi
   - Mor accent + semantic semafor (success/danger/warning/info)
   - Tabular nums her sayısal ifadede
   - 4px spacing grid, 6px varsayılan radius, blur'suz / shadow'suz katı yüzeyler

   Bu dosya her sayfa CSS'inden ÖNCE yüklenir. Sayfaya özel CSS sadece
   layout & component varyasyonları içerir, token'ı buradan miras alır.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. RESET (CONSERVATIVE)
   ---------------------------------------------------------------------------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ----------------------------------------------------------------------------
   2. DESIGN TOKENS — Modern Trading Pro
   ---------------------------------------------------------------------------- */
:root {
    /* === Surfaces (koyu, soğuk siyahlar) === */
    --bg:               #0a0a0b;
    --surface-1:        #111113;   /* default kartlar */
    --surface-2:        #18181b;   /* nested / hover */
    --surface-3:        #1f1f23;   /* deeper nested */
    --surface-elevated: #0d0d0f;   /* sticky header (hafif lift için) */

    /* === Borders (çok ince, neredeyse görünmez) === */
    --border-subtle:  rgba(255, 255, 255, 0.04);
    --border-default: rgba(255, 255, 255, 0.07);
    --border-strong:  rgba(255, 255, 255, 0.12);

    /* === Text (sıkı tonal scale) === */
    --fg:           #fafafa;   /* zinc-50 */
    --fg-muted:     #a1a1aa;   /* zinc-400 */
    --fg-subtle:    #71717a;   /* zinc-500 */
    --fg-disabled:  #52525b;   /* zinc-600 */

    /* === Accent (sade mor, tek vurgu rengi) === */
    --accent:        #a78bfa;   /* purple-400 */
    --accent-hover:  #c4b5fd;   /* purple-300 */
    --accent-bg:     rgba(167, 139, 250, 0.10);
    --accent-border: rgba(167, 139, 250, 0.28);

    /* === Semantic === */
    --success:        #22c55e;
    --success-fg:     #4ade80;   /* daha okunur tablo için */
    --success-bg:     rgba(34, 197, 94, 0.10);
    --success-border: rgba(34, 197, 94, 0.22);

    --danger:        #ef4444;
    --danger-fg:     #f87171;
    --danger-bg:     rgba(239, 68, 68, 0.10);
    --danger-border: rgba(239, 68, 68, 0.22);

    --warning:        #f59e0b;
    --warning-fg:     #fbbf24;
    --warning-bg:     rgba(245, 158, 11, 0.10);
    --warning-border: rgba(245, 158, 11, 0.22);

    --info:        #60a5fa;
    --info-fg:     #93c5fd;
    --info-bg:     rgba(96, 165, 250, 0.10);
    --info-border: rgba(96, 165, 250, 0.22);

    /* === PnL standartları === */
    --pnl-positive: var(--success-fg);
    --pnl-negative: var(--danger-fg);
    --pnl-neutral:  var(--fg-muted);

    /* === Chart === */
    --chart-grid:        rgba(255, 255, 255, 0.04);
    --chart-axis:        #52525b;
    --chart-tooltip-bg:  #18181b;
    --chart-tooltip-fg:  #fafafa;

    /* === Layout === */
    --header-h:       44px;
    --ticker-h:       30px;
    --container-max:  1440px;
    --container-pad:  16px;

    /* === Typography === */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;

    /* Type scale (compact-first) */
    --text-2xs: 10px;
    --text-xs:  11px;
    --text-sm:  12px;
    --text-base:13px;
    --text-md:  14px;
    --text-lg:  16px;
    --text-xl:  20px;
    --text-2xl: 24px;
    --text-3xl: 32px;

    /* Line heights */
    --leading-tight: 1.2;
    --leading-snug:  1.35;
    --leading-base:  1.5;

    /* === Spacing (4px scale) === */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* === Radius === */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* === Transitions === */
    --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

    /* === Z-index scale === */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  800;
    --z-modal:    900;
    --z-toast:    1000;

    /* === Component sizes (compact) === */
    --btn-h-sm: 26px;
    --btn-h:    32px;
    --btn-h-lg: 40px;
    --input-h:  32px;
    --row-h:    36px;       /* table row */
    --row-h-sm: 30px;       /* compact table row */

    /* === Backward compatibility aliases (eski class'ları kırmadan) === */
    --background:       var(--bg);
    --foreground:       var(--fg);
    --panel-bg:         var(--surface-1);
    --panel-border:     var(--border-default);
    --muted-text:       var(--fg-muted);
    --header-bg:        rgba(10, 10, 11, 0.85);
    --header-border:    var(--border-default);
    --brand-accent:     var(--accent);
    --chip-border:      var(--border-default);
    --btn-active-bg:    var(--surface-2);
    --btn-active-fg:    var(--fg);
    --btn-inactive-fg:  var(--fg-muted);
    --btn-hover-bg:     var(--surface-2);
    --tooltip-bg:       var(--surface-2);
    --tooltip-border:   var(--border-default);
    --tooltip-fg:       var(--fg);
    --table-row-alt:    rgba(255, 255, 255, 0.018);
    --link-hover:       var(--fg);
    --skeleton-bg:      rgba(255, 255, 255, 0.06);
    --logo-chip-bg:     rgba(255, 255, 255, 0.04);
    --logo-chip-ring:   var(--border-default);
    --chart-logo-bg:    rgba(255, 255, 255, 0.92);
    --chart-logo-ring:  rgba(255, 255, 255, 0.18);
    --bg-primary:       var(--bg);
    --bg-secondary:     var(--surface-1);
    --bg-tertiary:      var(--surface-2);
    --border-color:     var(--border-default);
    --text-primary:     var(--fg);
    --text-secondary:   var(--fg-muted);
    --text-muted:       var(--fg-subtle);
    --grid-stroke:      var(--chart-grid);
    --axis-tick:        var(--chart-axis);
    --ref-line:         var(--fg-subtle);
    --positive:         var(--pnl-positive);
    --negative:         var(--pnl-negative);
}


/* ----------------------------------------------------------------------------
   3. BASE LAYER
   ---------------------------------------------------------------------------- */
html, body {
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Sıkı font-feature açıkça açılır — tüm rakamlar tabular */
body, table, input, button, select, .terminal-text, .tabular-nums, .font-mono {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1, "cv11" 1;
}

::selection {
    background: var(--accent);
    color: var(--bg);
}

/* Focus disiplin */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}


/* ----------------------------------------------------------------------------
   4. TYPOGRAPHY UTILITIES
   ---------------------------------------------------------------------------- */
.ui-sans      { font-family: var(--font-sans); }
.font-mono,
.terminal-text { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tabular-nums { font-variant-numeric: tabular-nums; }

.text-2xs { font-size: var(--text-2xs); line-height: var(--leading-tight); }
.text-xs  { font-size: var(--text-xs);  line-height: var(--leading-tight); }
.text-sm  { font-size: var(--text-sm);  line-height: var(--leading-snug); }
.text-md  { font-size: var(--text-md);  line-height: var(--leading-snug); }
.text-lg  { font-size: var(--text-lg);  line-height: var(--leading-snug); }
.text-xl  { font-size: var(--text-xl);  line-height: var(--leading-snug); font-weight: 600; }
.text-2xl { font-size: var(--text-2xl); line-height: var(--leading-tight); font-weight: 600; letter-spacing: -0.01em; }
.text-3xl { font-size: var(--text-3xl); line-height: var(--leading-tight); font-weight: 700; letter-spacing: -0.02em; }

.text-fg          { color: var(--fg); }
.text-muted       { color: var(--fg-muted); }
.text-subtle      { color: var(--fg-subtle); }
.text-success     { color: var(--success-fg); }
.text-danger      { color: var(--danger-fg); }
.text-warning     { color: var(--warning-fg); }
.text-info        { color: var(--info-fg); }
.text-accent      { color: var(--accent); }

.font-medium      { font-weight: 500; }
.font-semibold    { font-weight: 600; }
.font-bold        { font-weight: 700; }

.tracking-tight   { letter-spacing: -0.01em; }
.tracking-wide    { letter-spacing: 0.05em; }
.uppercase        { text-transform: uppercase; }


/* ----------------------------------------------------------------------------
   5. SCROLLBAR
   ---------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
    transition: background var(--t-base);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--fg-disabled);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}


/* ----------------------------------------------------------------------------
   6. COMPONENT PRIMITIVES
   ---------------------------------------------------------------------------- */

/* === Card — temel yüzey === */
.card {
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: border-color var(--t-base), background var(--t-base);
}

.card-hover:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.card-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.card-body {
    padding: var(--space-4);
}

.card-compact .card-body { padding: var(--space-3); }
.card-loose   .card-body { padding: var(--space-6); }


/* === Button === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-h);
    padding: 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    color: var(--fg-muted);
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--t-fast);
    white-space: nowrap;
    user-select: none;
}

.btn:hover {
    color: var(--fg);
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.btn:active {
    transform: translateY(0.5px);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-sm { height: var(--btn-h-sm); padding: 0 var(--space-2); font-size: var(--text-xs); }
.btn-lg { height: var(--btn-h-lg); padding: 0 var(--space-4); font-size: var(--text-md); }

.btn-primary {
    color: var(--accent-fg, var(--fg));
    background: var(--accent);
    border-color: var(--accent);
}
.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-success { color: var(--fg); background: var(--success); border-color: var(--success); }
.btn-danger  { color: var(--fg); background: var(--danger);  border-color: var(--danger); }

.btn-ghost {
    background: transparent;
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--surface-2);
    border-color: var(--border-default);
}

.btn-icon {
    width: var(--btn-h);
    padding: 0;
}
.btn-icon.btn-sm { width: var(--btn-h-sm); }


/* === Chip / Tag === */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 22px;
    padding: 0 var(--space-2);
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 1;
    color: var(--fg-muted);
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-feature-settings: "tnum" 1;
}

.chip-success { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-border); }
.chip-danger  { color: var(--danger-fg);  background: var(--danger-bg);  border-color: var(--danger-border); }
.chip-warning { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-border); }
.chip-info    { color: var(--info-fg);    background: var(--info-bg);    border-color: var(--info-border); }
.chip-accent  { color: var(--accent);     background: var(--accent-bg);  border-color: var(--accent-border); }

/* === Role badge (h1 / h2 / h3) — model adı yanına iliştirilen küçük etiket === */
.role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    min-width: 22px;
    padding: 0 5px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    border-radius: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    color: var(--fg-subtle);
    text-transform: uppercase;
    vertical-align: middle;
    user-select: none;
}
.role-badge.role-h1 { color: var(--accent);     background: var(--accent-bg);  border-color: var(--accent-border); }
.role-badge.role-h2 { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-border); }
.role-badge.role-h3 { color: var(--info-fg);    background: var(--info-bg);    border-color: var(--info-border); }

/* Sağ üste konumlanmış varyant (model-card içinde absolute) */
.role-badge.role-badge-corner {
    position: absolute;
    top: 6px;
    right: 6px;
}

/* === LONG/SHORT badge — green/red enforced (FINAL override) === */
.badge-long,
.badge-short,
span.badge-long,
span.badge-short {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    min-width: 52px;
    padding: 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.badge-long,
span.badge-long {
    color: var(--success-fg) !important;
    background: var(--success-bg) !important;
    border-color: var(--success-border) !important;
}
.badge-short,
span.badge-short {
    color: var(--danger-fg) !important;
    background: var(--danger-bg) !important;
    border-color: var(--danger-border) !important;
}


/* === Input === */
.input {
    width: 100%;
    height: var(--input-h);
    padding: 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    transition: border-color var(--t-fast), background var(--t-fast);
}

.input:hover {
    border-color: var(--border-strong);
}

.input:focus {
    border-color: var(--accent);
    background: var(--surface-1);
}

.input::placeholder {
    color: var(--fg-subtle);
}


/* === Stat / KPI === */
.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: border-color var(--t-base);
}
.stat:hover { border-color: var(--border-strong); }

.stat-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--fg-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.stat-value {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.01em;
    line-height: var(--leading-tight);
}

.stat-value.stat-value-lg { font-size: var(--text-2xl); }
.stat-value.text-success  { color: var(--success-fg); }
.stat-value.text-danger   { color: var(--danger-fg); }

.stat-sub {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    font-family: var(--font-mono);
}


/* === Tables (compact, ince border) === */
.table-wrapper {
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

table.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
}

.data-table thead th {
    height: 32px;
    padding: 0 var(--space-3);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--fg-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-default);
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}

.data-table tbody td {
    height: var(--row-h);
    padding: 0 var(--space-3);
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr {
    transition: background var(--t-fast);
}

.data-table tbody tr:hover {
    background: var(--surface-2);
}

.data-table .text-right { text-align: right; }
.data-table .text-center { text-align: center; }
.data-table .mono { font-family: var(--font-mono); }
.data-table .num  { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }


/* === PnL colors (inline value renkleri) === */
.pnl-positive { color: var(--pnl-positive); }
.pnl-negative { color: var(--pnl-negative); }
.pnl-neutral  { color: var(--pnl-neutral); }

.pnl-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    border-radius: var(--radius-sm);
    line-height: 1;
}

.pnl-pill.up   { color: var(--success-fg); background: var(--success-bg); }
.pnl-pill.down { color: var(--danger-fg);  background: var(--danger-bg); }


/* === Logo chip === */
.logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--logo-chip-bg);
    border: 1px solid var(--logo-chip-ring);
    border-radius: var(--radius);
    overflow: hidden;
}

.logo-chip-sm { width: 18px; height: 18px; border-radius: var(--radius-sm); }
.logo-chip-md { width: 22px; height: 22px; border-radius: var(--radius-sm); }
.logo-chip-lg { width: 28px; height: 28px; }


/* === Chip/Tab Buttons (existing class compat) === */
.chip-btn {
    height: 26px;
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--fg-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: all var(--t-fast);
    cursor: pointer;
}
.chip-btn:hover {
    color: var(--fg);
    background: var(--surface-2);
}
.chip-btn.active {
    color: var(--fg);
    background: var(--surface-2);
    border-color: var(--border-default);
}


/* === Tab Button (active state with bottom border) === */
.tab-btn {
    position: relative;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--t-fast);
}
.tab-btn:hover { color: var(--fg); }
.tab-btn.active { color: var(--fg); }
.tab-btn.active::after {
    content: "";
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    border-radius: var(--radius-full);
}


/* === Divider === */
.divider {
    height: 1px;
    background: var(--border-default);
    border: none;
}


/* === Skeleton === */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--skeleton-bg) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        var(--skeleton-bg) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* === Spinner === */
.spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* ----------------------------------------------------------------------------
   7. LAYOUT PRIMITIVES
   ---------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

.glass-header,
.app-header {
    position: sticky;
    top: 0;
    height: var(--header-h);
    background: var(--surface-elevated);
    border-bottom: 1px solid var(--border-default);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    z-index: var(--z-sticky);
}


/* ----------------------------------------------------------------------------
   8. UTILITY CLASSES (mini, page CSS'leri ile çakışmayacak şekilde)
   ---------------------------------------------------------------------------- */

/* Spacing */
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }

.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }

.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* Display & flex (geri-uyumluluk için, Tailwind ile çakışmasın diye name'ler aynı) */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; }
.hidden        { display: none; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-col      { flex-direction: column; }
.flex-1        { flex: 1 1 auto; }
.flex-shrink-0 { flex-shrink: 0; }
.w-full        { width: 100%; }
.h-full        { height: 100%; }
.min-w-0       { min-width: 0; }


/* ----------------------------------------------------------------------------
   9. ANIMATIONS (paylaşılan)
   ---------------------------------------------------------------------------- */

@keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fade-in 0.24s ease-out; }

@keyframes pulse {
    50% { opacity: 0.55; }
}

.pulse { animation: pulse 1.6s ease-in-out infinite; }

@keyframes flash-up {
    0%   { background-color: var(--success-bg); }
    100% { background-color: transparent; }
}
@keyframes flash-down {
    0%   { background-color: var(--danger-bg); }
    100% { background-color: transparent; }
}

.flash-green { animation: flash-up 0.6s ease-out; }
.flash-red   { animation: flash-down 0.6s ease-out; }


/* ----------------------------------------------------------------------------
   10. CHART OVERRIDES (Chart.js / Recharts)
   ---------------------------------------------------------------------------- */
.chartjs-tooltip,
.recharts-tooltip-wrapper {
    font-family: var(--font-mono) !important;
}

.recharts-cartesian-grid line {
    stroke: var(--chart-grid) !important;
}

.recharts-cartesian-axis-tick text,
.recharts-cartesian-axis text {
    fill: var(--chart-axis) !important;
    font-family: var(--font-mono) !important;
    font-size: var(--text-2xs) !important;
}

.recharts-tooltip-wrapper .recharts-default-tooltip {
    background: var(--chart-tooltip-bg) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius) !important;
    padding: var(--space-2) var(--space-3) !important;
}


/* ----------------------------------------------------------------------------
   11. PRINT
   ---------------------------------------------------------------------------- */
@media print {
    .no-print { display: none !important; }
    body { background: white; color: black; }
}


/* ============================================================================
   12. FINAL OVERRIDES — En sonda, başka hiçbir kuralın ezmemesi için
   ============================================================================ */

/*
 * LONG / SHORT badge — kesin yeşil / kırmızı.
 * 3 katmanlı specificity attack (html body) + !important + hex değerler.
 * Tailwind, inline style, page CSS — hiçbiri override edemez.
 */
html body .badge-long,
html body span.badge-long,
html body td .badge-long,
html body .position-table .badge-long,
html body .compact-table .badge-long {
    color: #4ade80 !important;
    background-color: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.30) !important;
    background-image: none !important;
    text-shadow: none !important;
}

html body .badge-short,
html body span.badge-short,
html body td .badge-short,
html body .position-table .badge-short,
html body .compact-table .badge-short {
    color: #f87171 !important;
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.30) !important;
    background-image: none !important;
    text-shadow: none !important;
}

/* ============================================================================
   AI THOUGHT STREAM — premium full-screen chat layout
   ============================================================================ */

.ai-chat-main {
    height: calc(100vh - var(--header-h));
    overflow: hidden;
    background: var(--bg);
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.ai-chat-shell {
    width: 100%;
    max-width: 920px;
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-6);
    min-height: 0;
}

/* === Header — kompakt sticky === */
.ai-chat-header {
    flex-shrink: 0;
    padding: var(--space-6) 0 var(--space-4);
    border-bottom: 1px solid var(--border-default);
    margin-bottom: var(--space-4);
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
    position: sticky;
    top: 0;
    z-index: 10;
}

.ai-chat-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ai-chat-title-icon {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.35));
}

.ai-chat-title-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ai-chat-title-line {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.ai-chat-title-sub {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--fg-muted);
    font-family: var(--font-mono);
}

.ai-chat-counter {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-sm);
    line-height: 1;
}

.ai-chat-dot-sep { opacity: 0.4; }

.ai-chat-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success-fg);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}

/* === Scrollable list === */
.ai-chat-list {
    flex: 1;
    overflow-y: auto;
    padding-right: var(--space-2);
    padding-bottom: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    scroll-behavior: smooth;
}

.ai-chat-list::-webkit-scrollbar { width: 10px; }
.ai-chat-list::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-full); }
.ai-chat-list::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }


/* === Chat Card — premium === */
.ai-chat-card {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    padding: var(--space-5);
    transition: border-color var(--t-base), transform var(--t-base), background var(--t-base);
    animation: fade-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-chat-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-1);
    transform: translateY(-1px);
}

.ai-chat-card .acc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.ai-chat-card .acc-model {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex: 1;
}

.ai-chat-card .acc-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}

.ai-chat-card .acc-model-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ai-chat-card .acc-name {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.01em;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ai-chat-card .acc-name .role-badge {
    font-size: 9px;
    height: 16px;
    padding: 0 5px;
}

.ai-chat-card .acc-time {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--fg-subtle);
    line-height: 1.2;
}

.ai-chat-card .acc-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--fg-subtle);
    flex-shrink: 0;
    text-align: right;
}

.ai-chat-card .acc-meta .tokens { color: var(--fg-muted); }
.ai-chat-card .acc-meta .cost { color: var(--accent); opacity: 0.85; }

/* === Body — düşünce metni === */
.ai-chat-card .acc-body {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.65;
    color: var(--fg);
    opacity: 0.96;
    letter-spacing: 0.005em;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-chat-card .acc-body::first-letter {
    font-weight: 600;
}

/* === Decision chips altta === */
.ai-chat-card .acc-decisions {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border-default);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ai-chat-card .acc-decision {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid;
    line-height: 1;
    letter-spacing: 0.03em;
}

.ai-chat-card .acc-decision .sym { font-weight: 700; }
.ai-chat-card .acc-decision .sig { opacity: 0.85; text-transform: lowercase; }
.ai-chat-card .acc-decision .conf { opacity: 0.7; font-variant-numeric: tabular-nums; }

.ai-chat-card .acc-decision.is-buy   { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-border); }
.ai-chat-card .acc-decision.is-sell  { color: var(--danger-fg);  background: var(--danger-bg);  border-color: var(--danger-border); }
.ai-chat-card .acc-decision.is-close { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-border); }
.ai-chat-card .acc-decision.is-hold  { color: var(--fg-muted);   background: var(--surface-2);  border-color: var(--border-default); }

/* === Empty / loading states === */
.ai-chat-empty {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--fg-subtle);
    font-size: var(--text-md);
}
.ai-chat-empty .icon {
    font-size: 48px;
    margin-bottom: var(--space-3);
    opacity: 0.4;
    filter: drop-shadow(0 0 16px rgba(167, 139, 250, 0.2));
}
.ai-chat-empty .hint {
    font-size: var(--text-sm);
    color: var(--fg-subtle);
    margin-top: var(--space-2);
    opacity: 0.7;
}

/* === Mobile === */
@media (max-width: 768px) {
    .ai-chat-shell { padding: 0 var(--space-3); }
    .ai-chat-header { padding: var(--space-4) 0 var(--space-3); margin-bottom: var(--space-3); }
    .ai-chat-title-icon { font-size: 22px; }
    .ai-chat-title-line { font-size: var(--text-lg); }
    .ai-chat-card { padding: var(--space-4); }
    .ai-chat-card .acc-body { font-size: var(--text-sm); line-height: 1.6; }
    .ai-chat-card .acc-icon { font-size: 20px; }
    .ai-chat-card .acc-name { font-size: var(--text-sm); }
}

/* ===== Position Windows Grid — açık pozisyonlar pencere pencere ===== */
.position-window {
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    animation: fade-in 0.24s ease-out;
    cursor: default;
}
.position-window:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.position-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}
.position-window-coin {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.position-window-symbol {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.01em;
}
.position-window-model {
    font-size: var(--text-2xs);
    color: var(--fg-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 1px;
}
.position-window-pnl {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.position-window-pnl .pnl-value {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.position-window-pnl .pnl-pct {
    font-size: var(--text-2xs);
    opacity: 0.85;
}
.position-window-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-3);
}
.position-window-grid .pw-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.position-window-grid .pw-label {
    font-size: var(--text-2xs);
    color: var(--fg-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.position-window-grid .pw-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty state */
.positions-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--fg-subtle);
    font-size: var(--text-sm);
}
.positions-empty .icon {
    font-size: 32px;
    margin-bottom: var(--space-2);
    opacity: 0.5;
}