/*
Theme Name: USDT.ru
Theme URI: https://USDT.ru
Description: Крипто-агрегатор для новичков
Version: 2.0.0
Author: USDT.ru
*/

/* === Global color palette: edit these tokens to recolor the theme === */
:root {
  --color-transparent: transparent;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-bg: #0d0d0d;
  --color-surface: #1a1a1a;
  --color-surface-2: #222222;
  --color-border: #2a2a2a;
  --color-border-strong: #333333;
  --color-text: #e8e8e8;
  --color-text-muted: #888888;
  --color-text-sub: #aaaaaa;
  --color-text-dim: #666666;
  --color-accent: #f7931a;
  --color-accent-hover: #ff9f2d;
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
  --color-0033ad: #0033ad;
  --color-0077b5: #0077b5;
  --color-0088cc: #0088cc;
  --color-0098ea: #0098ea;
  --color-00aae4: #00aae4;
  --color-00b67a: #00b67a;
  --color-0288d1: #0288d1;
  --color-06b6d4: #06b6d4;
  --color-0a0a0a: #0a0a0a;
  --color-0a0f1a: #0a0f1a;
  --color-0a100f: #0a100f;
  --color-0a1020: #0a1020;
  --color-0a1a0a: #0a1a0a;
  --color-0a1a12: #0a1a12;
  --color-0a1a1a: #0a1a1a;
  --color-0a2a0a: #0a2a0a;
  --color-0b0b0c: #0b0b0c;
  --color-0d1117: #0d1117;
  --color-0d1a00: #0d1a00;
  --color-0d1a0d: #0d1a0d;
  --color-0d1a18: #0d1a18;
  --color-0d1a1a: #0d1a1a;
  --color-0d1a2a: #0d1a2a;
  --color-0d2a0d: #0d2a0d;
  --color-0d2a18: #0d2a18;
  --color-0d2a2a: #0d2a2a;
  --color-0e0e10: #0e0e10;
  --color-0f0f0f: #0f0f0f;
  --color-0f0f11: #0f0f11;
  --color-0f0f14: #0f0f14;
  --color-0f1218: #0f1218;
  --color-0f141c: #0f141c;
  --color-0f1a0a: #0f1a0a;
  --color-0f1a0f: #0f1a0f;
  --color-0f1a1a: #0f1a1a;
  --color-0f2010: #0f2010;
  --color-0f2318: #0f2318;
  --color-0f3460: #0f3460;
  --color-10100a: #10100a;
  --color-101010: #101010;
  --color-101012: #101012;
  --color-101218: #101218;
  --color-10b981: #10b981;
  --color-111111: #111111;
  --color-111822: #111822;
  --color-12141a: #12141a;
  --color-131313: #131313;
  --color-131315: #131315;
  --color-141414: #141414;
  --color-141a23: #141a23;
  --color-141a24: #141a24;
  --color-142a0d: #142a0d;
  --color-151515: #151515;
  --color-151517: #151517;
  --color-161616: #161616;
  --color-161618: #161618;
  --color-161923: #161923;
  --color-161d2a: #161d2a;
  --color-16213e: #16213e;
  --color-162d10: #162d10;
  --color-16a34a: #16a34a;
  --color-171a21: #171a21;
  --color-171a22: #171a22;
  --color-181200: #181200;
  --color-181818: #181818;
  --color-18181b: #18181b;
  --color-191d26: #191d26;
  --color-1a0800: #1a0800;
  --color-1a0a00: #1a0a00;
  --color-1a0a0a: #1a0a0a;
  --color-1a0a0f: #1a0a0f;
  --color-1a0a1a: #1a0a1a;
  --color-1a100a: #1a100a;
  --color-1a1100: #1a1100;
  --color-1a1200: #1a1200;
  --color-1a1400: #1a1400;
  --color-1a1500: #1a1500;
  --color-1a1600: #1a1600;
  --color-1a1800: #1a1800;
  --color-1a1a0a: #1a1a0a;
  --color-1a1a0d: #1a1a0d;
  --color-1a1a1d: #1a1a1d;
  --color-1a1a2e: #1a1a2e;
  --color-1a1e27: #1a1e27;
  --color-1a2233: #1a2233;
  --color-1aab52: #1aab52;
  --color-1c1c1c: #1c1c1c;
  --color-1c6b25: #1c6b25;
  --color-1d1710: #1d1710;
  --color-1d1d21: #1d1d21;
  --color-1d212b: #1d212b;
  --color-1d4ed8: #1d4ed8;
  --color-1db34e: #1db34e;
  --color-1e1a12: #1e1a12;
  --color-1e1a14: #1e1a14;
  --color-1e1e1e: #1e1e1e;
  --color-1e1e22: #1e1e22;
  --color-1f1a0e: #1f1a0e;
  --color-1f1f1f: #1f1f1f;
  --color-1f2937: #1f2937;
  --color-202020: #202020;
  --color-22252e: #22252e;
  --color-232327: #232327;
  --color-242424: #242424;
  --color-262a35: #262a35;
  --color-26a17b: #26a17b;
  --color-272727: #272727;
  --color-2775ca: #2775ca;
  --color-29b6f6: #29b6f6;
  --color-2a0d0d: #2a0d0d;
  --color-2a0d14: #2a0d14;
  --color-2a0d2a: #2a0d2a;
  --color-2a1500: #2a1500;
  --color-2a180d: #2a180d;
  --color-2a2a0d: #2a2a0d;
  --color-2a2f3c: #2a2f3c;
  --color-2a3444: #2a3444;
  --color-2a4a6a: #2a4a6a;
  --color-2aabee: #2aabee;
  --color-2c3140: #2c3140;
  --color-2d2000: #2d2000;
  --color-2e2e33: #2e2e33;
  --color-3a3a3a: #3a3a3a;
  --color-3d2600: #3d2600;
  --color-3d7bf4: #3d7bf4;
  --color-3ddc84: #3ddc84;
  --color-42a5f5: #42a5f5;
  --color-444444: #444444;
  --color-4ade80: #4ade80;
  --color-555555: #555555;
  --color-5b8cff: #5b8cff;
  --color-60a5fa: #60a5fa;
  --color-627eea: #627eea;
  --color-6366f1: #6366f1;
  --color-63b3ed: #63b3ed;
  --color-66bb6a: #66bb6a;
  --color-6b7280: #6b7280;
  --color-6b9eff: #6b9eff;
  --color-6f7cba: #6f7cba;
  --color-713f12: #713f12;
  --color-777777: #777777;
  --color-787878: #787878;
  --color-7c8494: #7c8494;
  --color-7e828c: #7e828c;
  --color-818cf8: #818cf8;
  --color-8247e5: #8247e5;
  --color-84cc16: #84cc16;
  --color-854d0e: #854d0e;
  --color-86efac: #86efac;
  --color-8a94a6: #8a94a6;
  --color-8b5cf6: #8b5cf6;
  --color-8b93a3: #8b93a3;
  --color-98a1b3: #98a1b3;
  --color-9945ff: #9945ff;
  --color-999999: #999999;
  --color-9aa3b2: #9aa3b2;
  --color-9ca3af: #9ca3af;
  --color-a0916a: #a0916a;
  --color-a0a0a0: #a0a0a0;
  --color-a16207: #a16207;
  --color-a5b4fc: #a5b4fc;
  --color-a78bfa: #a78bfa;
  --color-a855f7: #a855f7;
  --color-b7bfcd: #b7bfcd;
  --color-b9bcc4: #b9bcc4;
  --color-bbbbbb: #bbbbbb;
  --color-c084fc: #c084fc;
  --color-c2c9d6: #c2c9d6;
  --color-c3a634: #c3a634;
  --color-c55c00: #c55c00;
  --color-c96e00: #c96e00;
  --color-c97010: #c97010;
  --color-cccccc: #cccccc;
  --color-cfcfcf: #cfcfcf;
  --color-d0d0d0: #d0d0d0;
  --color-d1d5db: #d1d5db;
  --color-d1fae5: #d1fae5;
  --color-d4c88a: #d4c88a;
  --color-d4d4d4: #d4d4d4;
  --color-dc2626: #dc2626;
  --color-dddddd: #dddddd;
  --color-dfe4ec: #dfe4ec;
  --color-e07d0a: #e07d0a;
  --color-e07d10: #e07d10;
  --color-e07f00: #e07f00;
  --color-e07f10: #e07f10;
  --color-e0e0e0: #e0e0e0;
  --color-e2e8f0: #e2e8f0;
  --color-e5e7eb: #e5e7eb;
  --color-e6007a: #e6007a;
  --color-e66e00: #e66e00;
  --color-e6841a: #e6841a;
  --color-e84142: #e84142;
  --color-e8840f: #e8840f;
  --color-eab308: #eab308;
  --color-ec4899: #ec4899;
  --color-eeeeee: #eeeeee;
  --color-eef1f6: #eef1f6;
  --color-ef5350: #ef5350;
  --color-f0f0f0: #f0f0f0;
  --color-f1f5f9: #f1f5f9;
  --color-f2f2f4: #f2f2f4;
  --color-f3ba2f: #f3ba2f;
  --color-f3f4f6: #f3f4f6;
  --color-f472b6: #f472b6;
  --color-f5f5f5: #f5f5f5;
  --color-f7a600: #f7a600;
  --color-f87171: #f87171;
  --color-f97316: #f97316;
  --color-f9fafb: #f9fafb;
  --color-facc15: #facc15;
  --color-fbbf24: #fbbf24;
  --color-fca5a5: #fca5a5;
  --color-fde047: #fde047;
  --color-fef08a: #fef08a;
  --color-fef9c3: #fef9c3;
  --color-fefce8: #fefce8;
  --color-ff060a: #ff060a;
  --color-ff4444: #ff4444;
  --color-ff6b00: #ff6b00;
  --color-ff7a00: #ff7a00;
  --color-ff8a80: #ff8a80;
  --color-ffaa40: #ffaa40;
  --color-ffb347: #ffb347;
  --color-ffb75e: #ffb75e;

  --color-009fdf: #009fdf;
  --color-21a038: #21a038;
  --color-bfbbbb: #bfbbbb;
  --color-ef3124: #ef3124;
  --color-f7d000: #f7d000;
  --color-ffdd2d: #ffdd2d;

  /* Derived translucent colors stay linked to their base token. */
  --color-0088cc-a25-098039: color-mix(in srgb, var(--color-0088cc) 25.098039%, var(--color-transparent));
  --color-00b67a-a15: color-mix(in srgb, var(--color-00b67a) 15%, var(--color-transparent));
  --color-06b6d4-a15: color-mix(in srgb, var(--color-06b6d4) 15%, var(--color-transparent));
  --color-0b0b0c-a86: color-mix(in srgb, var(--color-0b0b0c) 86%, var(--color-transparent));
  --color-0b0b0c-a90: color-mix(in srgb, var(--color-0b0b0c) 90%, var(--color-transparent));
  --color-0f0f14-a95: color-mix(in srgb, var(--color-0f0f14) 95%, var(--color-transparent));
  --color-10b981-a15: color-mix(in srgb, var(--color-10b981) 15%, var(--color-transparent));
  --color-111111-a97: color-mix(in srgb, var(--color-111111) 97%, var(--color-transparent));
  --color-141414-a78: color-mix(in srgb, var(--color-141414) 78%, var(--color-transparent));
  --color-141414-a92: color-mix(in srgb, var(--color-141414) 92%, var(--color-transparent));
  --color-16a34a-a12-54902: color-mix(in srgb, var(--color-16a34a) 12.54902%, var(--color-transparent));
  --color-16a34a-a25-098039: color-mix(in srgb, var(--color-16a34a) 25.098039%, var(--color-transparent));
  --color-1c6b25-a6-27451: color-mix(in srgb, var(--color-1c6b25) 6.27451%, var(--color-transparent));
  --color-1d4ed8-a20: color-mix(in srgb, var(--color-1d4ed8) 20%, var(--color-transparent));
  --color-26a17b-a10: color-mix(in srgb, var(--color-26a17b) 10%, var(--color-transparent));
  --color-26a17b-a15: color-mix(in srgb, var(--color-26a17b) 15%, var(--color-transparent));
  --color-26a17b-a30: color-mix(in srgb, var(--color-26a17b) 30%, var(--color-transparent));
  --color-3d7bf4-a15: color-mix(in srgb, var(--color-3d7bf4) 15%, var(--color-transparent));
  --color-3d7bf4-a30: color-mix(in srgb, var(--color-3d7bf4) 30%, var(--color-transparent));
  --color-3ddc84-a8: color-mix(in srgb, var(--color-3ddc84) 8%, var(--color-transparent));
  --color-3ddc84-a35: color-mix(in srgb, var(--color-3ddc84) 35%, var(--color-transparent));
  --color-3ddc84-a50: color-mix(in srgb, var(--color-3ddc84) 50%, var(--color-transparent));
  --color-42a5f5-a12-54902: color-mix(in srgb, var(--color-42a5f5) 12.54902%, var(--color-transparent));
  --color-4ade80-a12: color-mix(in srgb, var(--color-4ade80) 12%, var(--color-transparent));
  --color-4ade80-a60: color-mix(in srgb, var(--color-4ade80) 60%, var(--color-transparent));
  --color-5b8cff-a8: color-mix(in srgb, var(--color-5b8cff) 8%, var(--color-transparent));
  --color-60a5fa-a12: color-mix(in srgb, var(--color-60a5fa) 12%, var(--color-transparent));
  --color-60a5fa-a30: color-mix(in srgb, var(--color-60a5fa) 30%, var(--color-transparent));
  --color-627eea-a10: color-mix(in srgb, var(--color-627eea) 10%, var(--color-transparent));
  --color-627eea-a15: color-mix(in srgb, var(--color-627eea) 15%, var(--color-transparent));
  --color-627eea-a30: color-mix(in srgb, var(--color-627eea) 30%, var(--color-transparent));
  --color-6366f1-a10: color-mix(in srgb, var(--color-6366f1) 10%, var(--color-transparent));
  --color-6366f1-a15: color-mix(in srgb, var(--color-6366f1) 15%, var(--color-transparent));
  --color-63b3ed-a15: color-mix(in srgb, var(--color-63b3ed) 15%, var(--color-transparent));
  --color-66bb6a-a12-54902: color-mix(in srgb, var(--color-66bb6a) 12.54902%, var(--color-transparent));
  --color-6b7280-a15: color-mix(in srgb, var(--color-6b7280) 15%, var(--color-transparent));
  --color-6f7cba-a12-54902: color-mix(in srgb, var(--color-6f7cba) 12.54902%, var(--color-transparent));
  --color-787878-a15: color-mix(in srgb, var(--color-787878) 15%, var(--color-transparent));
  --color-8247e5-a12-54902: color-mix(in srgb, var(--color-8247e5) 12.54902%, var(--color-transparent));
  --color-8b5cf6-a12: color-mix(in srgb, var(--color-8b5cf6) 12%, var(--color-transparent));
  --color-8b5cf6-a15: color-mix(in srgb, var(--color-8b5cf6) 15%, var(--color-transparent));
  --color-9945ff-a10: color-mix(in srgb, var(--color-9945ff) 10%, var(--color-transparent));
  --color-9945ff-a15: color-mix(in srgb, var(--color-9945ff) 15%, var(--color-transparent));
  --color-9945ff-a30: color-mix(in srgb, var(--color-9945ff) 30%, var(--color-transparent));
  --color-a78bfa-a12: color-mix(in srgb, var(--color-a78bfa) 12%, var(--color-transparent));
  --color-a78bfa-a30: color-mix(in srgb, var(--color-a78bfa) 30%, var(--color-transparent));
  --color-a855f7-a12: color-mix(in srgb, var(--color-a855f7) 12%, var(--color-transparent));
  --color-a855f7-a15: color-mix(in srgb, var(--color-a855f7) 15%, var(--color-transparent));
  --color-a855f7-a30: color-mix(in srgb, var(--color-a855f7) 30%, var(--color-transparent));
  --color-a855f7-a35: color-mix(in srgb, var(--color-a855f7) 35%, var(--color-transparent));
  --color-accent-a1-8: color-mix(in srgb, var(--color-accent) 1.8%, var(--color-transparent));
  --color-accent-a2: color-mix(in srgb, var(--color-accent) 2%, var(--color-transparent));
  --color-accent-a2-5: color-mix(in srgb, var(--color-accent) 2.5%, var(--color-transparent));
  --color-accent-a3: color-mix(in srgb, var(--color-accent) 3%, var(--color-transparent));
  --color-accent-a4: color-mix(in srgb, var(--color-accent) 4%, var(--color-transparent));
  --color-accent-a5: color-mix(in srgb, var(--color-accent) 5%, var(--color-transparent));
  --color-accent-a6: color-mix(in srgb, var(--color-accent) 6%, var(--color-transparent));
  --color-accent-a7: color-mix(in srgb, var(--color-accent) 7%, var(--color-transparent));
  --color-accent-a7-058824: color-mix(in srgb, var(--color-accent) 7.058824%, var(--color-transparent));
  --color-accent-a8: color-mix(in srgb, var(--color-accent) 8%, var(--color-transparent));
  --color-accent-a8-235294: color-mix(in srgb, var(--color-accent) 8.235294%, var(--color-transparent));
  --color-accent-a9: color-mix(in srgb, var(--color-accent) 9%, var(--color-transparent));
  --color-accent-a9-411765: color-mix(in srgb, var(--color-accent) 9.411765%, var(--color-transparent));
  --color-accent-a10: color-mix(in srgb, var(--color-accent) 10%, var(--color-transparent));
  --color-accent-a11: color-mix(in srgb, var(--color-accent) 11%, var(--color-transparent));
  --color-accent-a12: color-mix(in srgb, var(--color-accent) 12%, var(--color-transparent));
  --color-accent-a12-54902: color-mix(in srgb, var(--color-accent) 12.54902%, var(--color-transparent));
  --color-accent-a14: color-mix(in srgb, var(--color-accent) 14%, var(--color-transparent));
  --color-accent-a15: color-mix(in srgb, var(--color-accent) 15%, var(--color-transparent));
  --color-accent-a16: color-mix(in srgb, var(--color-accent) 16%, var(--color-transparent));
  --color-accent-a18: color-mix(in srgb, var(--color-accent) 18%, var(--color-transparent));
  --color-accent-a18-823529: color-mix(in srgb, var(--color-accent) 18.823529%, var(--color-transparent));
  --color-accent-a20: color-mix(in srgb, var(--color-accent) 20%, var(--color-transparent));
  --color-accent-a22: color-mix(in srgb, var(--color-accent) 22%, var(--color-transparent));
  --color-accent-a25: color-mix(in srgb, var(--color-accent) 25%, var(--color-transparent));
  --color-accent-a25-098039: color-mix(in srgb, var(--color-accent) 25.098039%, var(--color-transparent));
  --color-accent-a26-666667: color-mix(in srgb, var(--color-accent) 26.666667%, var(--color-transparent));
  --color-accent-a30: color-mix(in srgb, var(--color-accent) 30%, var(--color-transparent));
  --color-accent-a32: color-mix(in srgb, var(--color-accent) 32%, var(--color-transparent));
  --color-accent-a33-333333: color-mix(in srgb, var(--color-accent) 33.333333%, var(--color-transparent));
  --color-accent-a35: color-mix(in srgb, var(--color-accent) 35%, var(--color-transparent));
  --color-accent-a40: color-mix(in srgb, var(--color-accent) 40%, var(--color-transparent));
  --color-accent-a45: color-mix(in srgb, var(--color-accent) 45%, var(--color-transparent));
  --color-accent-a50: color-mix(in srgb, var(--color-accent) 50%, var(--color-transparent));
  --color-accent-a55: color-mix(in srgb, var(--color-accent) 55%, var(--color-transparent));
  --color-accent-a60: color-mix(in srgb, var(--color-accent) 60%, var(--color-transparent));
  --color-bg-a92: color-mix(in srgb, var(--color-bg) 92%, var(--color-transparent));
  --color-bg-a96: color-mix(in srgb, var(--color-bg) 96%, var(--color-transparent));
  --color-bg-a97: color-mix(in srgb, var(--color-bg) 97%, var(--color-transparent));
  --color-black-a20: color-mix(in srgb, var(--color-black) 20%, var(--color-transparent));
  --color-black-a24: color-mix(in srgb, var(--color-black) 24%, var(--color-transparent));
  --color-black-a26: color-mix(in srgb, var(--color-black) 26%, var(--color-transparent));
  --color-black-a30: color-mix(in srgb, var(--color-black) 30%, var(--color-transparent));
  --color-black-a35: color-mix(in srgb, var(--color-black) 35%, var(--color-transparent));
  --color-black-a40: color-mix(in srgb, var(--color-black) 40%, var(--color-transparent));
  --color-black-a45: color-mix(in srgb, var(--color-black) 45%, var(--color-transparent));
  --color-black-a50: color-mix(in srgb, var(--color-black) 50%, var(--color-transparent));
  --color-black-a55: color-mix(in srgb, var(--color-black) 55%, var(--color-transparent));
  --color-black-a60: color-mix(in srgb, var(--color-black) 60%, var(--color-transparent));
  --color-black-a65: color-mix(in srgb, var(--color-black) 65%, var(--color-transparent));
  --color-black-a70: color-mix(in srgb, var(--color-black) 70%, var(--color-transparent));
  --color-black-a75: color-mix(in srgb, var(--color-black) 75%, var(--color-transparent));
  --color-black-a85: color-mix(in srgb, var(--color-black) 85%, var(--color-transparent));
  --color-black-a95: color-mix(in srgb, var(--color-black) 95%, var(--color-transparent));
  --color-black-a96: color-mix(in srgb, var(--color-black) 96%, var(--color-transparent));
  --color-black-a97: color-mix(in srgb, var(--color-black) 97%, var(--color-transparent));
  --color-border-a40: color-mix(in srgb, var(--color-border) 40%, var(--color-transparent));
  --color-border-a50: color-mix(in srgb, var(--color-border) 50%, var(--color-transparent));
  --color-d1fae5-a12-54902: color-mix(in srgb, var(--color-d1fae5) 12.54902%, var(--color-transparent));
  --color-danger-a5: color-mix(in srgb, var(--color-danger) 5%, var(--color-transparent));
  --color-danger-a6: color-mix(in srgb, var(--color-danger) 6%, var(--color-transparent));
  --color-danger-a7: color-mix(in srgb, var(--color-danger) 7%, var(--color-transparent));
  --color-danger-a8: color-mix(in srgb, var(--color-danger) 8%, var(--color-transparent));
  --color-danger-a8-235294: color-mix(in srgb, var(--color-danger) 8.235294%, var(--color-transparent));
  --color-danger-a10: color-mix(in srgb, var(--color-danger) 10%, var(--color-transparent));
  --color-danger-a12: color-mix(in srgb, var(--color-danger) 12%, var(--color-transparent));
  --color-danger-a12-54902: color-mix(in srgb, var(--color-danger) 12.54902%, var(--color-transparent));
  --color-danger-a15: color-mix(in srgb, var(--color-danger) 15%, var(--color-transparent));
  --color-danger-a18-823529: color-mix(in srgb, var(--color-danger) 18.823529%, var(--color-transparent));
  --color-danger-a20: color-mix(in srgb, var(--color-danger) 20%, var(--color-transparent));
  --color-danger-a25: color-mix(in srgb, var(--color-danger) 25%, var(--color-transparent));
  --color-danger-a25-098039: color-mix(in srgb, var(--color-danger) 25.098039%, var(--color-transparent));
  --color-danger-a30: color-mix(in srgb, var(--color-danger) 30%, var(--color-transparent));
  --color-danger-a31-372549: color-mix(in srgb, var(--color-danger) 31.372549%, var(--color-transparent));
  --color-danger-a40: color-mix(in srgb, var(--color-danger) 40%, var(--color-transparent));
  --color-dc2626-a10: color-mix(in srgb, var(--color-dc2626) 10%, var(--color-transparent));
  --color-dc2626-a12-54902: color-mix(in srgb, var(--color-dc2626) 12.54902%, var(--color-transparent));
  --color-dc2626-a25-098039: color-mix(in srgb, var(--color-dc2626) 25.098039%, var(--color-transparent));
  --color-e6007a-a12-54902: color-mix(in srgb, var(--color-e6007a) 12.54902%, var(--color-transparent));
  --color-eab308-a6: color-mix(in srgb, var(--color-eab308) 6%, var(--color-transparent));
  --color-eab308-a7: color-mix(in srgb, var(--color-eab308) 7%, var(--color-transparent));
  --color-eab308-a12: color-mix(in srgb, var(--color-eab308) 12%, var(--color-transparent));
  --color-eab308-a15: color-mix(in srgb, var(--color-eab308) 15%, var(--color-transparent));
  --color-eab308-a20: color-mix(in srgb, var(--color-eab308) 20%, var(--color-transparent));
  --color-eab308-a30: color-mix(in srgb, var(--color-eab308) 30%, var(--color-transparent));
  --color-eab308-a35: color-mix(in srgb, var(--color-eab308) 35%, var(--color-transparent));
  --color-ec4899-a12: color-mix(in srgb, var(--color-ec4899) 12%, var(--color-transparent));
  --color-ec4899-a15: color-mix(in srgb, var(--color-ec4899) 15%, var(--color-transparent));
  --color-ec4899-a30: color-mix(in srgb, var(--color-ec4899) 30%, var(--color-transparent));
  --color-ef5350-a7: color-mix(in srgb, var(--color-ef5350) 7%, var(--color-transparent));
  --color-ef5350-a25: color-mix(in srgb, var(--color-ef5350) 25%, var(--color-transparent));
  --color-f3ba2f-a10: color-mix(in srgb, var(--color-f3ba2f) 10%, var(--color-transparent));
  --color-f3ba2f-a15: color-mix(in srgb, var(--color-f3ba2f) 15%, var(--color-transparent));
  --color-f3ba2f-a30: color-mix(in srgb, var(--color-f3ba2f) 30%, var(--color-transparent));
  --color-f97316-a8: color-mix(in srgb, var(--color-f97316) 8%, var(--color-transparent));
  --color-f97316-a12: color-mix(in srgb, var(--color-f97316) 12%, var(--color-transparent));
  --color-f97316-a15: color-mix(in srgb, var(--color-f97316) 15%, var(--color-transparent));
  --color-fbbf24-a8: color-mix(in srgb, var(--color-fbbf24) 8%, var(--color-transparent));
  --color-fbbf24-a25: color-mix(in srgb, var(--color-fbbf24) 25%, var(--color-transparent));
  --color-fde047-a43-921569: color-mix(in srgb, var(--color-fde047) 43.921569%, var(--color-transparent));
  --color-ff7a00-a20: color-mix(in srgb, var(--color-ff7a00) 20%, var(--color-transparent));
  --color-ff7a00-a25: color-mix(in srgb, var(--color-ff7a00) 25%, var(--color-transparent));
  --color-ff7a00-a30: color-mix(in srgb, var(--color-ff7a00) 30%, var(--color-transparent));
  --color-ff7a00-a35: color-mix(in srgb, var(--color-ff7a00) 35%, var(--color-transparent));
  --color-info-a7: color-mix(in srgb, var(--color-info) 7%, var(--color-transparent));
  --color-info-a12: color-mix(in srgb, var(--color-info) 12%, var(--color-transparent));
  --color-info-a15: color-mix(in srgb, var(--color-info) 15%, var(--color-transparent));
  --color-info-a20: color-mix(in srgb, var(--color-info) 20%, var(--color-transparent));
  --color-info-a30: color-mix(in srgb, var(--color-info) 30%, var(--color-transparent));
  --color-info-a35: color-mix(in srgb, var(--color-info) 35%, var(--color-transparent));
  --color-success-a4: color-mix(in srgb, var(--color-success) 4%, var(--color-transparent));
  --color-success-a5: color-mix(in srgb, var(--color-success) 5%, var(--color-transparent));
  --color-success-a6: color-mix(in srgb, var(--color-success) 6%, var(--color-transparent));
  --color-success-a7: color-mix(in srgb, var(--color-success) 7%, var(--color-transparent));
  --color-success-a7-058824: color-mix(in srgb, var(--color-success) 7.058824%, var(--color-transparent));
  --color-success-a8: color-mix(in srgb, var(--color-success) 8%, var(--color-transparent));
  --color-success-a9: color-mix(in srgb, var(--color-success) 9%, var(--color-transparent));
  --color-success-a9-411765: color-mix(in srgb, var(--color-success) 9.411765%, var(--color-transparent));
  --color-success-a10: color-mix(in srgb, var(--color-success) 10%, var(--color-transparent));
  --color-success-a12: color-mix(in srgb, var(--color-success) 12%, var(--color-transparent));
  --color-success-a15: color-mix(in srgb, var(--color-success) 15%, var(--color-transparent));
  --color-success-a18-823529: color-mix(in srgb, var(--color-success) 18.823529%, var(--color-transparent));
  --color-success-a20: color-mix(in srgb, var(--color-success) 20%, var(--color-transparent));
  --color-success-a25: color-mix(in srgb, var(--color-success) 25%, var(--color-transparent));
  --color-success-a25-098039: color-mix(in srgb, var(--color-success) 25.098039%, var(--color-transparent));
  --color-success-a30: color-mix(in srgb, var(--color-success) 30%, var(--color-transparent));
  --color-success-a31-372549: color-mix(in srgb, var(--color-success) 31.372549%, var(--color-transparent));
  --color-success-a35: color-mix(in srgb, var(--color-success) 35%, var(--color-transparent));
  --color-success-a40: color-mix(in srgb, var(--color-success) 40%, var(--color-transparent));
  --color-success-a45: color-mix(in srgb, var(--color-success) 45%, var(--color-transparent));
  --color-success-a50: color-mix(in srgb, var(--color-success) 50%, var(--color-transparent));
  --color-success-a60: color-mix(in srgb, var(--color-success) 60%, var(--color-transparent));
  --color-surface-a95: color-mix(in srgb, var(--color-surface) 95%, var(--color-transparent));
  --color-surface-a97: color-mix(in srgb, var(--color-surface) 97%, var(--color-transparent));
  --color-text-muted-a10: color-mix(in srgb, var(--color-text-muted) 10%, var(--color-transparent));
  --color-text-muted-a25: color-mix(in srgb, var(--color-text-muted) 25%, var(--color-transparent));
  --color-warning-a8: color-mix(in srgb, var(--color-warning) 8%, var(--color-transparent));
  --color-warning-a10: color-mix(in srgb, var(--color-warning) 10%, var(--color-transparent));
  --color-warning-a15: color-mix(in srgb, var(--color-warning) 15%, var(--color-transparent));
  --color-warning-a18-823529: color-mix(in srgb, var(--color-warning) 18.823529%, var(--color-transparent));
  --color-warning-a20: color-mix(in srgb, var(--color-warning) 20%, var(--color-transparent));
  --color-warning-a25: color-mix(in srgb, var(--color-warning) 25%, var(--color-transparent));
  --color-white-a2: color-mix(in srgb, var(--color-white) 2%, var(--color-transparent));
  --color-white-a2-5: color-mix(in srgb, var(--color-white) 2.5%, var(--color-transparent));
  --color-white-a3: color-mix(in srgb, var(--color-white) 3%, var(--color-transparent));
  --color-white-a3-137255: color-mix(in srgb, var(--color-white) 3.137255%, var(--color-transparent));
  --color-white-a4: color-mix(in srgb, var(--color-white) 4%, var(--color-transparent));
  --color-white-a5: color-mix(in srgb, var(--color-white) 5%, var(--color-transparent));
  --color-white-a6: color-mix(in srgb, var(--color-white) 6%, var(--color-transparent));
  --color-white-a7: color-mix(in srgb, var(--color-white) 7%, var(--color-transparent));
  --color-white-a8: color-mix(in srgb, var(--color-white) 8%, var(--color-transparent));
  --color-white-a10: color-mix(in srgb, var(--color-white) 10%, var(--color-transparent));
  --color-white-a15: color-mix(in srgb, var(--color-white) 15%, var(--color-transparent));
  --color-white-a35: color-mix(in srgb, var(--color-white) 35%, var(--color-transparent));
  --color-white-a40: color-mix(in srgb, var(--color-white) 40%, var(--color-transparent));
  --color-white-a50: color-mix(in srgb, var(--color-white) 50%, var(--color-transparent));
  --color-white-a55: color-mix(in srgb, var(--color-white) 55%, var(--color-transparent));
  --color-white-a62: color-mix(in srgb, var(--color-white) 62%, var(--color-transparent));
  --color-white-a66: color-mix(in srgb, var(--color-white) 66%, var(--color-transparent));
  --color-white-a70: color-mix(in srgb, var(--color-white) 70%, var(--color-transparent));
  --color-white-a72: color-mix(in srgb, var(--color-white) 72%, var(--color-transparent));
  --color-white-a82: color-mix(in srgb, var(--color-white) 82%, var(--color-transparent));
  --color-white-a86: color-mix(in srgb, var(--color-white) 86%, var(--color-transparent));
}
/* === End global color palette === */
/* ══ CSS Variables ══ */
:root {
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --border: var(--color-border);
  --border-2: var(--color-border-strong);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --text-sub: var(--color-text-sub);
  --text-2: var(--color-text-sub);
  --text-3: var(--color-text-dim);
  --accent: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --accent-dim: var(--color-accent-a15);
  --green: var(--color-success);
  --red: var(--color-danger);
  --amber: var(--color-warning);
  --blue: var(--color-info);
  --font: 'Space Grotesk', sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --container: 1400px;
  --header-h: 100px;
}

/* ══ Reset ══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html[data-page="home"], html[data-page="home"] body { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ══ Header ══ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--color-black);
  border-bottom: 1px solid var(--border-2);
  overflow-x: clip;
}
.header-inner {
  max-width: 1353px;
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.logo-icon {
  width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--color-black);
}
.logo-text { color: var(--color-white); }
.logo-icon-img {
  width: 36px;
  height: 36px;
  display: block;
  flex-shrink: 0;
      width: auto;
    height: 27px;
    /* margin-top: -5px; */
}
.logo-text .accent { color: var(--accent); }
.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  padding-left: 32px;
}
.nav-link {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.15s;
}
.nav-link:hover { color: var(--color-white); background: var(--surface); }
.nav-link.active { color: var(--accent); }
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.search-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 14px;
  height: 38px;
  width: 220px;
  transition: border-color 0.15s;
}
.search-header:focus-within { border-color: var(--accent); }
.search-header input {
  background: none;
  border: none;
  outline: none;
  color: var(--color-white);
  font-family: var(--font);
  font-size: 13px;
  width: 100%;
}
.search-header input::placeholder { color: var(--text-3); }
.search-icon-h { color: var(--text-3); font-size: 14px; }
.currency-switcher {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.currency-btn {
  padding: 6px 12px;
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
  cursor: pointer;
  font-family: var(--font);
}
.currency-btn.active { background: var(--accent); color: var(--color-black); }
.notif-btn {
  width: 38px;
  height: 38px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 16px;
  transition: all 0.15s;
  cursor: pointer;
}
.notif-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Ticker Bar */
.ticker-bar {
  background: var(--color-111111);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  height: 36px;
  display: flex;
  align-items: center;
  position: relative;
  max-width: 100vw;
  contain: paint;
}
.ticker-track {
  display: flex;
  animation: ticker-scroll 120s linear infinite;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-content { display: flex; align-items: center; gap: 0; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  border-right: 1px solid var(--color-border);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  height: 36px;
}
.ticker-item:hover { background: var(--color-accent-a5); }
.ticker-item { color: inherit; text-decoration: none; }
.ticker-logo {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.ticker-name { font-weight: 600; color: var(--color-white); font-size: 13px; }
.ticker-price { color: var(--color-cccccc); font-size: 13px; font-variant-numeric: tabular-nums; }
.ticker-change { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ticker-change.pos { color: var(--color-success); }
.ticker-change.neg { color: var(--color-danger); }

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Mobile Nav */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 22px;
  padding: 4px 8px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-black-a75);
  z-index: 250;
}
.mobile-nav-drawer {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 260;
  background: var(--color-surface);
  border-bottom: 2px solid var(--accent);
  flex-direction: column;
  transform: translateY(-110%);
  transition: transform 0.3s ease;
  display: flex;
}
body.menu-open .mobile-nav-overlay { display: block; }
body.menu-open .mobile-nav-drawer { transform: translateY(0); }
.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav-close {
  background: none;
  border: none;
  color: var(--color-text-sub);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s;
}
.mobile-nav-close:hover { color: var(--color-white); }
.mobile-search { padding: 12px 20px; }
.mobile-search .search-header { width: 100%; display: flex; }
.mobile-nav-links { display: flex; flex-direction: column; }
.mobile-nav-link {
  display: block;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--color-surface-2);
  transition: color 0.15s, background 0.15s;
}
.mobile-nav-link.active { color: var(--accent); }
.mobile-nav-link:hover { color: var(--color-white); background: var(--color-white-a4); }
.mobile-nav-actions { padding: 16px 20px; }

@media (max-width: 768px) {
  .hamburger-btn { display: flex; align-items: center; }
  .main-nav { display: none; }
  .search-header { display: none; }
  .notif-btn { display: none; }
  .header-inner { padding: 0 16px; gap: 12px; }
  .header-right { gap: 8px; }
}

/* ══ Footer ══ */
.site-footer {
  margin-top: 56px;
  border-top: 1px solid var(--border-2);
  background: var(--color-black);
  padding: 40px 0 28px;
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
}
.footer-logo span{
  display: none!important;
}

.logo-text{
  display: none!important;
}
.footer-desc {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.6;
  max-width: 280px;
  margin-bottom: 16px;
}
.footer-col-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 13px;
  color: var(--text-3);
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--accent); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--border-2);
  font-size: 12px;
  color: var(--color-444444);
}
.footer-disclaimer {
  font-size: 12px;
  color: var(--color-444444);
  line-height: 1.5;
  margin-bottom: 16px;
  max-width: none;
}

@media (max-width: 768px) {
  .site-footer { margin-top: 32px; padding: 24px 0 0; }
  .footer-inner { padding: 0 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
}


/* ---- Footer Popular Coins ---- */
.footer-popular {
  margin-bottom: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-2);
}
.footer-popular-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.footer-popular-links a {
  font-size: 13px;
  color: var(--text-3);
  transition: color 0.15s;
  white-space: nowrap;
}
.footer-popular-links a:hover { color: var(--accent); }

/* ============ GLOBAL BREADCRUMB ============ */
.breadcrumb-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 0 0;
}
.breadcrumb,
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3, var(--color-text-dim));
  align-items: center;
}
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--text-3, var(--color-text-dim)); }
.breadcrumb a { color: var(--text-2, var(--color-text-sub)); transition: color 0.15s; text-decoration: none; }
.breadcrumb a:hover { color: var(--accent, var(--color-accent)); }
.breadcrumb li:last-child,
.breadcrumb .current,
.breadcrumb-current { color: var(--text-2, var(--color-text-sub)); }
.breadcrumb-sep { color: var(--color-444444); }
nav.breadcrumb {
  font-size: 13px;
  color: var(--text-3, var(--color-text-dim));
}
@media (max-width: 768px) {
  .breadcrumb-section,
  nav.breadcrumb { padding: 12px 16px 0; }
}

/* Ticker link + img styles */
a.ticker-item { color: inherit; text-decoration: none; }
img.ticker-logo { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* Exchange logo images */
.exchange-logo-img {
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}
.exchange-logo .exchange-logo-img,
.exchange-logo-big .exchange-logo-img,
.sticky-exchange-logo .exchange-logo-img,
.sb-ex-logo .exchange-logo-img,
.sidebar-exchange-logo .exchange-logo-img,
.sidebar-exch-logo .exchange-logo-img,
.similar-logo .exchange-logo-img,
.other-promo-logo .exchange-logo-img,
.hex-logo-wrap .exchange-logo .exchange-logo-img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.exchange-logo-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  font-weight: 700;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

/* Remove background from logo containers when they have real images */
.exchange-logo:has(.exchange-logo-img),
.exchange-logo-big:has(.exchange-logo-img),
.featured-logo:has(.exchange-logo-img),
.sticky-exchange-logo:has(.exchange-logo-img),
.sb-ex-logo:has(.exchange-logo-img),
.sidebar-exchange-logo:has(.exchange-logo-img),
.sidebar-exch-logo:has(.exchange-logo-img),
.similar-logo:has(.exchange-logo-img),
.other-promo-logo:has(.exchange-logo-img),
.table-logo-icon:has(.exchange-logo-img),
.sticky-bar-logo:has(.exchange-logo-img) {
  background: var(--color-transparent) !important;
}


/* ============ BASE LAYOUT ============ */
.page-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}
.full-width-section {
  max-width: 1400px;
  margin: 0 auto;
}
.content-area {
  padding: 24px 0 60px;
}
@media (max-width: 768px) {
  .page-wrapper { padding: 0 12px; }
}

/* ============ STICKY PRICE BAR — collapse when hidden ============ */
.sticky-price-bar {
  margin-bottom: -56px;
}


/* Hide sticky bars on koshelek page — block is outside data-page scope */
.sticky-bottom-bar { display: none; }

/* === News 3-column grid (front page) === */
.cd-news-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
}
.cd-news-item {
  display: flex;
  flex-direction: column;
  background: var(--card-bg, var(--color-surface));
  border: 1px solid var(--border, var(--color-border));
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s;
}
.cd-news-item:hover {
  border-color: var(--accent, var(--color-accent));
}
.cd-news-tag {
  display: inline-block;
  background: var(--color-accent-a15);
  color: var(--accent, var(--color-accent));
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.cd-news-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-white);
  margin-bottom: auto;
  padding-bottom: 8px;
}
.cd-news-date {
  font-size: 12px;
  color: var(--text-3, var(--color-text-muted));
}
@media (max-width: 768px) {
  .cd-news-grid-3col {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}

/* === News 3-column grid (front page) === */
.cd-news-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
}
.cd-news-item {
  display: flex;
  flex-direction: column;
  background: var(--card-bg, var(--color-surface));
  border: 1px solid var(--border, var(--color-border));
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s;
}
.cd-news-item:hover {
  border-color: var(--accent, var(--color-accent));
}
.cd-news-tag {
  display: inline-block;
  background: var(--color-accent-a15);
  color: var(--accent, var(--color-accent));
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.cd-news-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-white);
  margin-bottom: auto;
  padding-bottom: 8px;
}
.cd-news-date {
  font-size: 12px;
  color: var(--text-3, var(--color-text-muted));
}
@media (max-width: 768px) {
  .cd-news-grid-3col {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}

/* === Mobile Menu Drawer === */
.menu-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--color-black-a60); z-index: 9998;
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.menu-overlay.show { opacity: 1; visibility: visible; }

.mobile-menu {
  position: fixed; top: 0; right: -300px; width: 280px; height: 100%;
  background: var(--color-111111); z-index: 9999; padding: 20px;
  transition: right 0.3s ease; overflow-y: auto;
  display: flex; flex-direction: column;
}
.mobile-menu.open { right: 0; }

.mobile-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border);
}
.close-menu-btn {
  background: none; border: none; color: var(--color-white); font-size: 20px;
  cursor: pointer; padding: 8px; line-height: 1;
}
.mobile-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mobile-nav-link {
  display: block; padding: 12px 16px; color: var(--color-eeeeee); text-decoration: none;
  font-size: 15px; border-radius: 8px; transition: background 0.2s;
}
.mobile-nav-link:hover { background: var(--color-surface); }
.mobile-menu-cta { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); }

@media (min-width: 769px) {
  .mobile-menu, .menu-overlay { display: none !important; }
}

/* === Currency toggle on /coins/ === */
.cd-currency-toggle {
  display: flex; gap: 2px; background: var(--color-surface); border-radius: 8px; padding: 2px;
}
.cd-cur-btn {
  background: none; border: none; color: var(--text-3, var(--color-text-muted)); font-size: 13px;
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.cd-cur-btn.active {
  background: var(--accent, var(--color-accent)); color: var(--color-black);
}
.cd-cur-btn:hover:not(.active) { color: var(--color-white); }

/* === Telegram icon in header === */
.header-tg-link {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-29b6f6); transition: color 0.2s; padding: 4px;
}
.header-tg-link:hover { color: var(--color-0288d1); }

/* Hide old currency-switcher class if any remain */
.currency-switcher { display: none !important; }

/* === Header color protection (against data-page a resets) === */
.site-header .nav-link { color: var(--text-muted, var(--color-999999)) !important; }
.site-header .nav-link:hover { color: var(--color-white) !important; }
.site-header .nav-link.active { color: var(--accent, var(--color-accent)) !important; }
.site-header .logo-text { color: var(--color-white) !important; }
.site-header .search-header input { color: var(--text-muted, var(--color-999999)) !important; }
.site-header .search-icon-h { color: var(--text-3, var(--color-text-muted)) !important; }
.site-header .notif-btn { color: var(--text-3, var(--color-text-muted)) !important; }
.site-header .hamburger-btn { color: var(--color-white) !important; }
.site-header .header-tg-link { color: var(--color-29b6f6) !important; }
.site-header .header-tg-link:hover { color: var(--color-0288d1) !important; }


/* ============ FAVORITES ============ */
.cd-fav-detail-btn {
  background: var(--color-transparent); border: 1px solid var(--color-border-strong); border-radius: 8px;
  padding: 4px 12px; font-size: 13px; color: var(--text-3);
  cursor: pointer; transition: all 0.2s; font-family: var(--font);
}
.cd-fav-detail-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cd-fav-detail-btn.active { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-a10); }

.cd-fav-page { max-width: 1200px; margin: 0 auto; padding: 24px 40px 60px; }
.cd-fav-subtitle { color: var(--text-3); font-size: 14px; margin-bottom: 24px; }
.cd-fav-loading { color: var(--text-3); padding: 40px; text-align: center; }

.cd-fav-empty { text-align: center; padding: 60px 20px; }
.cd-fav-empty-icon { font-size: 48px; margin-bottom: 16px; }
.cd-fav-empty h2 { color: var(--color-white); font-size: 20px; margin-bottom: 8px; }

.cd-fav-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.cd-fav-count { color: var(--text-2); font-size: 14px; }
.cd-fav-clear-btn {
  background: var(--color-transparent); border: 1px solid var(--color-444444); border-radius: 8px;
  padding: 6px 14px; font-size: 13px; color: var(--text-3);
  cursor: pointer; font-family: var(--font); transition: all 0.2s;
}
.cd-fav-clear-btn:hover { border-color: var(--color-ff4444); color: var(--color-ff4444); }

.cd-fav-table-wrap { overflow-x: auto; }
.cd-fav-table { width: 100%; border-collapse: collapse; }
.cd-fav-table th {
  text-align: left; font-size: 12px; color: var(--text-3);
  padding: 10px 8px; border-bottom: 1px solid var(--color-surface-2);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.cd-fav-table th.text-right { text-align: right; }
.cd-fav-row { transition: background 0.15s; }
.cd-fav-row:hover { background: var(--color-white-a3); }
.cd-fav-row td { padding: 12px 8px; border-bottom: 1px solid var(--color-surface); font-size: 14px; color: var(--color-white); }
.cd-fav-row td.text-right { text-align: right; }
.cd-fav-row td.td-center { text-align: center; }
.cd-fav-row .coin-info-cell {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.cd-fav-row .coin-logo { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.cd-fav-row .coin-names { display: flex; flex-direction: column; }
.cd-fav-row .coin-name { font-weight: 600; color: var(--color-white); font-size: 14px; }
.cd-fav-row .coin-ticker { font-size: 12px; color: var(--text-3); text-transform: uppercase; }
.cd-fav-row .green { color: var(--color-success); }
.cd-fav-row .red { color: var(--color-danger); }

.cd-fav-row .fav-btn {
  background: none; border: none; font-size: 18px; color: var(--color-accent);
  cursor: pointer; padding: 4px; line-height: 1;
}
.cd-fav-row .fav-btn:hover { transform: scale(1.2); }

@media (max-width: 768px) {
  .cd-fav-page { padding: 16px; }
  .cd-fav-table .hide-mob { display: none; }
  .cd-fav-row .coin-name { font-size: 13px; }
}

/* ── SEO H1 subtitle part ─────────────────────── */
.coin-title-sub {
  font-size: 0.65em;
  font-weight: 400;
  color: var(--text-3);
  white-space: nowrap;
}
h1.coin-title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
h1.hero-coin-name {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ── Subpage H1 (prognoz, gdekupit, novosti, koshelek) ─────── */
.subpage-h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-white);
  margin: 12px 0 16px;
  line-height: 1.3;
}
@media (max-width: 600px) {
  .subpage-h1 { font-size: 18px; }
}

/* ── Chart section H2 ───────────────────────────────────────── */
.chart-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  margin: 0 0 8px;
  line-height: 1.3;
}