/* Ortak tema: renk tokenları (açık / koyu) ve temel sıfırlama. */
:root {
  color-scheme: light;
  --bg: #F5F6F8;
  --card: #FFFFFF;
  --ink: #0B1220;
  --ink-2: #344054;
  --muted: #667085;
  --faint: #98A2B3;
  --line: #E6E8EC;
  --line-2: #F0F2F5;
  --line-strong: #D5D9E0;
  --hover: #FAFBFC;
  --th: #FCFCFD;
  --topbar: rgba(255, 255, 255, .85);
  --seg: #EDEFF2;
  --seg-active: #FFFFFF;
  --tip-bg: #0B1220;
  --tip-fg: #FFFFFF;
  --tip-muted: #B8C0CC;
  --primary: #0B1220;
  --primary-fg: #FFFFFF;
  --primary-hover: #1F2937;
  --focus: rgba(53, 72, 201, .22);
  --brand-bg: linear-gradient(140deg, #1F2937, #0B1220);
  --brand-fg: #FFFFFF;

  --pos: #067647;
  --pos-soft: #E8F6EE;
  --neg: #C4320A;
  --neg-soft: #FDEFEA;
  --warn: #B54708;
  --warn-soft: #FEF4E6;
  --info: #3548C9;
  --info-soft: #EEF1FF;

  --crypto: #6D5BD0;
  --crypto-soft: #F1EFFC;
  --stock: #0F8B8D;
  --stock-soft: #E6F4F4;

  --v-binance: #9A6B00;
  --v-bybit: #B25400;
  --v-okx: #0B1220;
  --v-alpaca: #735A00;

  --radius: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-lg: 0 12px 32px -12px rgba(16, 24, 40, .14);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0D14;
  --card: #11161F;
  --ink: #E8ECF3;
  --ink-2: #C1C8D4;
  --muted: #8B95A7;
  --faint: #5E687A;
  --line: #222A37;
  --line-2: #19202B;
  --line-strong: #2E3747;
  --hover: #151B25;
  --th: #0E131B;
  --topbar: rgba(10, 13, 20, .78);
  --seg: #171D28;
  --seg-active: #262E3C;
  --tip-bg: #E8ECF3;
  --tip-fg: #0B1220;
  --tip-muted: #5E687A;
  --primary: #E8ECF3;
  --primary-fg: #0B1220;
  --primary-hover: #FFFFFF;
  --focus: rgba(142, 162, 255, .3);
  --brand-bg: linear-gradient(140deg, #F4F6FA, #C8CFDB);
  --brand-fg: #0B1220;
  --pos: #3DD68C;
  --pos-soft: rgba(61, 214, 140, .12);
  --neg: #FF7B5C;
  --neg-soft: rgba(255, 123, 92, .12);
  --warn: #F5B04C;
  --warn-soft: rgba(245, 176, 76, .12);
  --info: #8EA2FF;
  --info-soft: rgba(142, 162, 255, .13);
  --crypto: #A594FF;
  --crypto-soft: rgba(165, 148, 255, .14);
  --stock: #3FC8CA;
  --stock-soft: rgba(63, 200, 202, .13);
  --v-binance: #F0B90B;
  --v-bybit: #F7A600;
  --v-okx: #E8ECF3;
  --v-alpaca: #FFD84D;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 40px -14px rgba(0, 0, 0, .7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A0D14;
    --card: #11161F;
    --ink: #E8ECF3;
    --ink-2: #C1C8D4;
    --muted: #8B95A7;
    --faint: #5E687A;
    --line: #222A37;
    --line-2: #19202B;
    --line-strong: #2E3747;
    --hover: #151B25;
    --th: #0E131B;
    --topbar: rgba(10, 13, 20, .78);
    --seg: #171D28;
    --seg-active: #262E3C;
    --tip-bg: #E8ECF3;
    --tip-fg: #0B1220;
    --tip-muted: #5E687A;
    --primary: #E8ECF3;
    --primary-fg: #0B1220;
    --primary-hover: #FFFFFF;
    --focus: rgba(142, 162, 255, .3);
    --brand-bg: linear-gradient(140deg, #F4F6FA, #C8CFDB);
    --brand-fg: #0B1220;
    --pos: #3DD68C;
    --pos-soft: rgba(61, 214, 140, .12);
    --neg: #FF7B5C;
    --neg-soft: rgba(255, 123, 92, .12);
    --warn: #F5B04C;
    --warn-soft: rgba(245, 176, 76, .12);
    --info: #8EA2FF;
    --info-soft: rgba(142, 162, 255, .13);
    --crypto: #A594FF;
    --crypto-soft: rgba(165, 148, 255, .14);
    --stock: #3FC8CA;
    --stock-soft: rgba(63, 200, 202, .13);
    --v-binance: #F0B90B;
    --v-bybit: #F7A600;
    --v-okx: #E8ECF3;
    --v-alpaca: #FFD84D;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-lg: 0 18px 40px -14px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  transition: background-color .2s ease;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  color: var(--brand-fg); background: var(--brand-bg);
  box-shadow: 0 4px 10px -4px rgba(11, 18, 32, .45);
}
.brand-mark svg { width: 18px; height: 18px; }

.icon-btn {
  appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--hover); }
.icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus); }
.icon-btn svg { width: 17px; height: 17px; }