/*
 * O Câmbio — style.css
 * Tailwind CSS (purged, zero runtime) + custom styles
 * Substitui cdn.tailwindcss.com (~350kb JS) por este arquivo cacheável
 * ─────────────────────────────────────────────────────────────────────
 */

/* ════════════════════════════════════════════════════════
   1. TAILWIND — RESET / BASE
════════════════════════════════════════════════════════ */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e2e8f0;
}
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body { margin: 0; line-height: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
}
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
canvas { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none; }

/* ════════════════════════════════════════════════════════
   2. TAILWIND — UTILITIES (purged — só o que o HTML usa)
════════════════════════════════════════════════════════ */

/* — Position — */
.static   { position: static; }
.fixed    { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.top-0    { top: 0; }
.top-3    { top: 0.75rem; }
.left-4   { left: 1rem; }
.z-10     { z-index: 10; }
.z-50     { z-index: 50; }

/* — Display — */
.block       { display: block; }
.inline      { display: inline; }
.inline-flex { display: inline-flex; }
.flex        { display: flex; }
.grid        { display: grid; }
.hidden      { display: none; }
.table       { display: table; }

/* — Flex — */
.flex-1        { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-baseline{ align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-start   { justify-content: flex-start; }
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }

/* — Grid — */
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-span-2   { grid-column: span 2 / span 2; }

/* — Spacing: margin — */
.-my-4  { margin-top: -1rem; margin-bottom: -1rem; }
.mx-4   { margin-left: 1rem; margin-right: 1rem; }
.mx-6   { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-auto{ margin-left: auto; margin-right: auto; }
.mb-1   { margin-bottom: 0.25rem; }
.mb-2   { margin-bottom: 0.5rem; }
.mb-3   { margin-bottom: 0.75rem; }
.mb-4   { margin-bottom: 1rem; }
.mb-5   { margin-bottom: 1.25rem; }
.mb-6   { margin-bottom: 1.5rem; }
.ml-2   { margin-left: 0.5rem; }
.ml-3   { margin-left: 0.75rem; }
.mt-2   { margin-top: 0.5rem; }
.mt-4   { margin-top: 1rem; }
.mt-6   { margin-top: 1.5rem; }
.mt-20  { margin-top: 5rem; }

/* — Spacing: padding — */
.p-1    { padding: 0.25rem; }
.p-3    { padding: 0.75rem; }
.p-4    { padding: 1rem; }
.p-6    { padding: 1.5rem; }
.p-8    { padding: 2rem; }
.pb-2   { padding-bottom: 0.5rem; }
.pb-4   { padding-bottom: 1rem; }
.pr-4   { padding-right: 1rem; }
.px-3   { padding-left: 0.75rem;  padding-right: 0.75rem; }
.px-4   { padding-left: 1rem;     padding-right: 1rem; }
.px-5   { padding-left: 1.25rem;  padding-right: 1.25rem; }
.px-6   { padding-left: 1.5rem;   padding-right: 1.5rem; }
.py-1\.5{ padding-top: 0.375rem;  padding-bottom: 0.375rem; }
.py-2   { padding-top: 0.5rem;    padding-bottom: 0.5rem; }
.py-2\.5{ padding-top: 0.625rem;  padding-bottom: 0.625rem; }
.py-3   { padding-top: 0.75rem;   padding-bottom: 0.75rem; }
.py-4   { padding-top: 1rem;      padding-bottom: 1rem; }
.py-8   { padding-top: 2rem;      padding-bottom: 2rem; }
.py-12  { padding-top: 3rem;      padding-bottom: 3rem; }

/* — Size — */
.h-0         { height: 0; }
.h-2         { height: 0.5rem; }
.h-9         { height: 2.25rem; }
.h-12        { height: 3rem; }
.h-\[300px\] { height: 300px; }
.w-2         { width: 0.5rem; }
.w-9         { width: 2.25rem; }
.w-12        { width: 3rem; }
.w-fit       { width: fit-content; }
.w-full      { width: 100%; }
.max-w-sm    { max-width: 24rem; }
.max-w-md    { max-width: 28rem; }
.max-w-6xl   { max-width: 72rem; }
.max-w-none  { max-width: none; }

/* — Overflow — */
.overflow-hidden   { overflow: hidden; }
.overflow-x-auto   { overflow-x: auto; }

/* — Opacity — */
.opacity-0 { opacity: 0; }

/* — Borders — */
.border   { border-width: 1px; }
.border-4 { border-width: 4px; }
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }
.border-white        { border-color: #fff; }
.border-blue-100     { border-color: #dbeafe; }
.border-green-200    { border-color: #bbf7d0; }
.border-green-400    { border-color: #4ade80; }
.border-slate-100    { border-color: #f1f5f9; }
.border-slate-200    { border-color: #e2e8f0; }
.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #f1f5f9; }
.last\:border-0:last-child { border-width: 0; }

/* — Border radius — */
.rounded-lg  { border-radius: 0.5rem; }
.rounded-xl  { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full{ border-radius: 9999px; }

/* — Backgrounds — */
.bg-white        { background-color: #fff; }
.bg-white\/80    { background-color: rgb(255 255 255 / 0.8); }
.bg-blue-600     { background-color: #2563eb; }
.bg-green-50     { background-color: #f0fdf4; }
.bg-slate-50     { background-color: #f8fafc; }
.bg-slate-100    { background-color: #f1f5f9; }
.bg-yellow-500   { background-color: #eab308; }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.from-blue-50\/50 {
  --tw-gradient-from: rgb(239 246 255 / 0.5);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 246 255 / 0));
}
.to-transparent { --tw-gradient-to: transparent; }

/* — Shadows — */
.shadow-sm  { box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }
.shadow-lg  { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); }

/* — Text size — */
.text-\[9px\]  { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[13px\] { font-size: 13px; }
.text-xs  { font-size: 0.75rem;  line-height: 1rem; }
.text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg  { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl  { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem;   line-height: 2rem; }
.text-5xl { font-size: 3rem;     line-height: 1; }

/* — Text weight — */
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* — Text align / decoration — */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.italic      { font-style: italic; }
.uppercase   { text-transform: uppercase; }

/* — Text color — */
.text-white     { color: #fff; }
.text-blue-500  { color: #3b82f6; }
.text-blue-600  { color: #2563eb; }
.text-blue-700  { color: #1d4ed8; }
.text-green-500 { color: #22c55e; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.text-red-400   { color: #f87171; }
.text-red-500   { color: #ef4444; }
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }

/* — Tracking / leading — */
.tracking-tight      { letter-spacing: -0.025em; }
.tracking-tighter    { letter-spacing: -0.05em; }
.tracking-wider      { letter-spacing:  0.05em; }
.tracking-widest     { letter-spacing:  0.1em; }
.tracking-\[0\.2em\] { letter-spacing:  0.2em; }
.leading-none        { line-height: 1; }
.leading-relaxed     { line-height: 1.625; }

/* — Space — */
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }

/* — Misc — */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border-width: 0;
}
.cursor-pointer    { cursor: pointer; }
.select-none       { user-select: none; }
.pointer-events-none { pointer-events: none; }
.backdrop-blur-md  { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* — Transitions — */
.transition {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow,
    transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: 150ms;
}
.transition-all    { transition-property: all; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.transition-colors { transition-property: color,background-color,border-color; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.duration-300      { transition-duration: 300ms; }
.duration-500      { transition-duration: 500ms; }

/* — Transform — */
.rotate-180 { transform: rotate(180deg); }
.scale-95   { transform: scale(.95); }

/* — Animate — */
.animate-ping { animation: ping 1s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%,100% { transform: scale(2); opacity: 0; } }

/* — Prose (simplificado, substitui @tailwindcss/typography) — */
.prose       { color: inherit; max-width: 65ch; }
.prose-sm    { font-size: 0.875rem; line-height: 1.7; }
.prose p     { margin-top: 1rem; margin-bottom: 1rem; }
.prose strong{ font-weight: 700; color: inherit; }
.prose a     { color: #2563eb; text-decoration: underline; }
.max-w-none  { max-width: none; }

/* — Hover states — */
.hover\:bg-blue-700:hover    { background-color: #1d4ed8; }
.hover\:bg-green-100:hover   { background-color: #dcfce7; }
.hover\:bg-slate-50:hover    { background-color: #f8fafc; }
.hover\:bg-white:hover       { background-color: #fff; }
.hover\:bg-yellow-400:hover  { background-color: #facc15; }
.hover\:border-blue-400:hover  { border-color: #60a5fa; }
.hover\:border-red-400:hover   { border-color: #f87171; }
.hover\:border-yellow-400:hover{ border-color: #facc15; }
.hover\:rotate-180:hover     { transform: rotate(180deg); }
.hover\:text-blue-500:hover  { color: #3b82f6; }
.hover\:text-blue-600:hover  { color: #2563eb; }
.hover\:text-red-500:hover   { color: #ef4444; }
.hover\:text-red-600:hover   { color: #dc2626; }
.hover\:text-slate-600:hover { color: #475569; }
.hover\:text-yellow-500:hover{ color: #eab308; }
.active\:scale-95:active     { transform: scale(.95); }
.group:hover .group-hover\:text-blue-600 { color: #2563eb; }

/* — Responsive: sm (≥640px) — */
@media (min-width: 640px) {
  .sm\:block  { display: block; }
  .sm\:flex   { display: flex; }
  .sm\:hidden { display: none; }
}

/* — Responsive: md (≥768px) — */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:p-8  { padding: 2rem; }
  .md\:p-10 { padding: 2.5rem; }
  .md\:text-7xl { font-size: 4.5rem; line-height: 1; }
}

/* — Responsive: lg (≥1024px) — */
@media (min-width: 1024px) {
  .lg\:col-span-2  { grid-column: span 2 / span 2; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* — Dark mode — */
.dark .dark\:bg-green-900\/20   { background-color: rgb(20 83 45 / 0.2); }
.dark .dark\:bg-slate-700       { background-color: #334155; }
.dark .dark\:bg-slate-800       { background-color: #1e293b; }
.dark .dark\:bg-slate-800\/50   { background-color: rgb(30 41 59 / 0.5); }
.dark .dark\:bg-slate-900       { background-color: #0f172a; }
.dark .dark\:bg-slate-900\/80   { background-color: rgb(15 23 42 / 0.8); }
.dark .dark\:border-blue-900\/30{ border-color: rgb(30 58 138 / 0.3); }
.dark .dark\:border-green-800   { border-color: #166534; }
.dark .dark\:border-slate-700   { border-color: #334155; }
.dark .dark\:border-slate-800   { border-color: #1e293b; }
.dark .dark\:border-slate-900   { border-color: #0f172a; }
.dark .dark\:divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: #1e293b; }
.dark .dark\:from-blue-900\/10  {
  --tw-gradient-from: rgb(30 58 138 / 0.1);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
}
.dark .dark\:hover\:bg-green-900\/40:hover  { background-color: rgb(20 83 45 / 0.4); }
.dark .dark\:hover\:bg-slate-700:hover      { background-color: #334155; }
.dark .dark\:hover\:bg-slate-800\/50:hover  { background-color: rgb(30 41 59 / 0.5); }
.dark .dark\:text-blue-400  { color: #60a5fa; }
.dark .dark\:text-green-400 { color: #4ade80; }
.dark .dark\:text-red-400   { color: #f87171; }
.dark .dark\:text-slate-100 { color: #f1f5f9; }
.dark .dark\:text-slate-200 { color: #e2e8f0; }
.dark .dark\:text-slate-300 { color: #cbd5e1; }
.dark .dark\:text-slate-400 { color: #94a3b8; }
.dark .dark\:text-white     { color: #fff; }


/* ════════════════════════════════════════════════════════
   3. COMPONENTES CUSTOMIZADOS (do <style> original)
════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; transition: background-color 0.3s ease, color 0.3s ease; }
html.dark body { background-color: #020617; color: #f1f5f9; }
body { background-color: #f8fafc; color: #0f172a; }

#tableBody td, .chip div { transition: color 0.3s ease; }

/* Ticker */
.ticker-wrap {
  overflow: hidden; white-space: nowrap;
  background: #ffffff; border-bottom: 1px solid #e2e8f0; padding: 12px 0;
}
html.dark .ticker-wrap { background: #0f172a; border-color: #1e293b; }
.ticker { display: inline-flex; will-change: transform; animation: none !important; }

/* Drag scroll */
.scroll-x {
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; cursor: grab; user-select: none;
}
.scroll-x:active { cursor: grabbing; }
.scroll-x::-webkit-scrollbar { display: none; }

/* Chips */
.chip {
  cursor: pointer; transition: all 0.2s ease;
  border-radius: 16px; padding: 12px; min-width: 135px;
  background: #ffffff; border: 1px solid #e2e8f0; flex-shrink: 0;
}
html.dark .chip { background: #0f172a; border-color: #1e293b; }
.chip.active { border-color: #3b82f6; background: #eff6ff; }
html.dark .chip.active { background: rgba(59,130,246,0.2); border-color: #3b82f6; }

/* Card */
.card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 24px; transition: box-shadow 0.3s ease; }
html.dark .card { background: #0f172a; border-color: #1e293b; }

/* Glow animations */
.glow-up   { animation: glowGreen 1.5s ease; }
.glow-down { animation: glowRed   1.5s ease; }
@keyframes glowGreen { 0%{box-shadow:0 0 0px rgba(34,197,94,0)} 50%{box-shadow:0 0 25px rgba(34,197,94,0.6)} 100%{box-shadow:0 0 0px rgba(34,197,94,0)} }
@keyframes glowRed   { 0%{box-shadow:0 0 0px rgba(239,68,68,0)} 50%{box-shadow:0 0 25px rgba(239,68,68,0.6)} 100%{box-shadow:0 0 0px rgba(239,68,68,0)} }

/* Inputs */
.input-number {
  width: 100%; padding: 28px 16px 12px;
  border-radius: 16px; border: 1px solid #e2e8f0;
  background: #ffffff; font-size: 1.25rem; font-weight: 700;
  outline: none; color: #0f172a;
}
html.dark .input-number { background: #1e293b; border-color: #334155; color: #f1f5f9; }

/* Market dot */
.market-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.market-dot.open   { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.market-dot.closed { background: #ef4444; }

/* Toast */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #3b82f6; color: white; padding: 12px 24px;
  border-radius: 100px; font-size: 13px; z-index: 9000;
  opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap;
}
#toast.show { opacity: 1; }

/* Modal */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 1000; align-items: center; justify-content: center; }
.modal.open { display: flex; }

/* Badge live */
.badge-live { display: inline-flex; align-items: center; gap: 5px; background: #dcfce7; color: #166534; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.05em; }
html.dark .badge-live { background: rgba(34,197,94,0.15); color: #4ade80; }
.badge-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Flag image */
.flag-img { border-radius: 3px; object-fit: cover; display: inline-block; flex-shrink: 0; }

/* Alert button */
.btn-alert { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 700; border: 1px solid #e2e8f0; background: #fff; color: #64748b; cursor: pointer; transition: all 0.2s; }
.btn-alert:hover { border-color: #f59e0b; color: #f59e0b; }
.btn-alert.active { border-color: #f59e0b; background: #fef3c7; color: #b45309; }
html.dark .btn-alert { background: #1e293b; border-color: #334155; }
html.dark .btn-alert:hover { border-color: #f59e0b; color: #f59e0b; }
html.dark .btn-alert.active { background: rgba(245,158,11,0.15); }

/* WhatsApp button */
.btn-whatsapp { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 100px; font-size: 12px; font-weight: 700; background: #25D366; color: #fff; cursor: pointer; transition: all 0.2s; border: none; }
.btn-whatsapp:hover { background: #128C7E; transform: scale(1.03); }
.btn-whatsapp:active { transform: scale(0.97); }

/* Update counter */
.update-counter { font-size: 10px; color: #94a3b8; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.update-counter-bar { width: 60px; height: 3px; background: #e2e8f0; border-radius: 100px; overflow: hidden; }
html.dark .update-counter-bar { background: #1e293b; }
.update-counter-fill { height: 100%; background: #3b82f6; border-radius: 100px; transition: width 1s linear; }

/* Alert badge */
.alert-count-badge { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; background: #ef4444; border-radius: 50%; font-size: 9px; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: center; }

/* Share bar mobile */
.share-bar-mobile { display: none; }
@media (max-width: 640px) {
  .share-bar-mobile { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
  .share-bar-desktop { display: none; }
}

/* FAQ icon */
.faq-icon { transition: transform 0.2s; display: inline-block; }

/* Context pill */
.context-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 700; }
.context-pill.high52 { background: #fef9c3; color: #854d0e; }
.context-pill.low52  { background: #fee2e2; color: #991b1b; }
html.dark .context-pill.high52 { background: rgba(245,158,11,0.15); color: #fbbf24; }
html.dark .context-pill.low52  { background: rgba(239,68,68,0.15);  color: #f87171; }

/* Language selector */
.lang-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; border: 1px solid #e2e8f0; background: #fff; color: #64748b; cursor: pointer; transition: all 0.2s; letter-spacing: 0.03em; }
html.dark .lang-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.lang-btn:hover, .lang-btn.active { border-color: #3b82f6; color: #2563eb; background: #eff6ff; }
html.dark .lang-btn:hover, html.dark .lang-btn.active { background: rgba(59,130,246,0.15); border-color: #3b82f6; color: #60a5fa; }
.lang-selector { display: flex; gap: 4px; }


/* ════════════════════════════════════════════════════════
   4. LIVE CHART MODAL (antes estava num segundo <style>)
════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&family=Barlow+Condensed:wght@500;600;700&display=swap');

:root {
  --lc-bg: #080c14; --lc-surface: #0d1421;
  --lc-border: #1a2540; --lc-border2: #243050;
  --lc-text: #e2e8f0; --lc-muted: #4a5f80; --lc-accent: #3b82f6;
  --lc-green: #22c55e; --lc-red: #ef4444; --lc-amber: #f59e0b;
  --lc-mono: 'IBM Plex Mono', monospace;
  --lc-display: 'Barlow Condensed', sans-serif;
}

@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes lc-fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes lc-slideUp { from{transform:translateY(40px) scale(0.97);opacity:0} to{transform:translateY(0) scale(1);opacity:1} }
@keyframes lc-blink   { 0%,100%{opacity:1} 50%{opacity:0.3} }

.lc-overlay { position:fixed;inset:0;background:rgba(4,8,18,0.93);backdrop-filter:blur(10px);z-index:9999;display:none;align-items:center;justify-content:center;animation:lc-fadeIn 0.2s ease; }
.lc-overlay.open { display:flex; }
.lc-panel { width:min(1140px,calc(100vw - 24px));max-height:calc(100vh - 32px);background:var(--lc-bg);border:1px solid var(--lc-border2);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 120px rgba(0,0,0,0.85),0 0 0 1px rgba(59,130,246,0.07);animation:lc-slideUp 0.28s cubic-bezier(0.34,1.56,0.64,1);position:relative; }
.lc-panel::before { content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.012) 2px,rgba(255,255,255,0.012) 4px);pointer-events:none;border-radius:20px;z-index:0; }
.lc-panel > * { position:relative;z-index:1; }
.lc-corner { position:absolute;top:0;right:0;width:180px;height:180px;background:radial-gradient(circle at top right,rgba(59,130,246,0.07),transparent 70%);pointer-events:none;border-radius:0 20px 0 0; }
.lc-topbar { display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--lc-border);background:var(--lc-surface);flex-shrink:0;gap:12px;flex-wrap:wrap; }
.lc-topbar-left { display:flex;align-items:center;gap:14px;flex-wrap:wrap; }
.lc-tab-group { display:flex;gap:3px;background:rgba(26,37,64,0.5);padding:3px;border-radius:7px;border:1px solid var(--lc-border); }
.lc-tab { padding:4px 10px;border-radius:5px;font-family:var(--lc-mono);font-size:10px;font-weight:700;cursor:pointer;border:none;letter-spacing:0.05em;transition:all .15s;background:transparent;color:var(--lc-muted); }
.lc-tab.active { background:var(--lc-accent);color:#fff; }
.lc-asset-btns { display:flex;gap:4px;flex-wrap:wrap; }
.lc-asset-btn { background:transparent;border:1px solid var(--lc-border);color:var(--lc-muted);padding:5px 11px;border-radius:7px;font-family:var(--lc-mono);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;letter-spacing:0.05em; }
.lc-asset-btn:hover { border-color:var(--lc-accent);color:var(--lc-text); }
.lc-asset-btn.active { background:rgba(59,130,246,0.15);border-color:var(--lc-accent);color:var(--lc-accent); }
.lc-close { width:32px;height:32px;border-radius:7px;background:transparent;border:1px solid var(--lc-border);color:var(--lc-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .15s;flex-shrink:0; }
.lc-close:hover { border-color:var(--lc-red);color:var(--lc-red); }
.lc-fiat-notice { display:none;align-items:center;gap:8px;padding:8px 20px;background:rgba(245,158,11,0.07);border-bottom:1px solid rgba(245,158,11,0.18);font-size:10px;color:var(--lc-amber);flex-shrink:0;font-family:var(--lc-mono);letter-spacing:0.03em; }
.lc-fiat-notice.show { display:flex; }
.lc-strip { display:flex;align-items:center;gap:20px;padding:12px 20px;border-bottom:1px solid var(--lc-border);background:linear-gradient(90deg,rgba(59,130,246,0.04),transparent);flex-shrink:0;flex-wrap:wrap; }
.lc-price-main { display:flex;align-items:baseline;gap:10px; }
.lc-price-val { font-family:var(--lc-display);font-size:2.6rem;font-weight:600;letter-spacing:0.01em;line-height:1;color:var(--lc-text);transition:color 0.25s; }
.lc-badge { font-size:12px;font-weight:700;padding:3px 10px;border-radius:6px;letter-spacing:0.03em;font-family:var(--lc-mono); }
.lc-badge.up   { background:rgba(34,197,94,0.15);color:var(--lc-green); }
.lc-badge.down { background:rgba(239,68,68,0.15);color:var(--lc-red); }
.lc-ohlc { display:flex;gap:16px;flex-wrap:wrap; }
.lc-ohlc-item { display:flex;flex-direction:column;gap:1px; }
.lc-ohlc-label { font-size:8px;font-weight:700;color:var(--lc-muted);text-transform:uppercase;letter-spacing:0.1em;font-family:var(--lc-mono); }
.lc-ohlc-val { font-size:12px;font-weight:600;color:var(--lc-text);font-family:var(--lc-mono); }
.lc-live-ind { display:flex;align-items:center;gap:5px;margin-left:auto;font-size:9px;font-weight:700;color:var(--lc-green);text-transform:uppercase;letter-spacing:0.1em;font-family:var(--lc-mono); }
.lc-live-dot { width:6px;height:6px;border-radius:50%;background:var(--lc-green);box-shadow:0 0 6px var(--lc-green);animation:lc-blink 1.4s infinite; }
.lc-source { font-size:9px;color:var(--lc-muted);padding:2px 7px;border:1px solid var(--lc-border);border-radius:4px;letter-spacing:0.06em;text-transform:uppercase;font-family:var(--lc-mono); }
.lc-tf-bar { display:flex;gap:3px;padding:8px 20px 10px;flex-shrink:0;border-bottom:1px solid var(--lc-border);background:var(--lc-bg); }
.lc-tf { padding:4px 10px;border-radius:5px;font-family:var(--lc-mono);font-size:10px;font-weight:600;cursor:pointer;border:1px solid transparent;color:var(--lc-muted);background:transparent;transition:all .15s;letter-spacing:0.05em; }
.lc-tf:hover { color:var(--lc-text);border-color:var(--lc-border2); }
.lc-tf.active { color:var(--lc-accent);border-color:var(--lc-accent);background:rgba(59,130,246,0.1); }
.lc-chart-area { flex:1;display:grid;grid-template-rows:1fr 120px;min-height:0; }
.lc-price-pane { padding:12px 20px 6px;border-bottom:1px solid var(--lc-border);position:relative; }
.lc-vol-pane   { padding:6px 20px 14px;position:relative; }
.lc-vol-label  { position:absolute;top:8px;left:24px;font-size:8px;font-weight:700;color:var(--lc-muted);text-transform:uppercase;letter-spacing:0.1em;font-family:var(--lc-mono); }

@media (max-width: 600px) {
  .lc-price-val  { font-size: 2rem; }
  .lc-chart-area { grid-template-rows: 1fr 90px; }
}