/* ═══════════════════════════════════════════════════════════
   Currency Converter Pro  ·  currency-converter.css  v4-pro
   All classes scoped .cc-* — zero conflict with ChrysoKit
   New in v4: 3D card, market clocks, strength index,
              investment calculator, sparklines, range meter
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --cc-r:    12px;
  --cc-r-lg: 20px;
  --cc-r-sm: 8px;
  --cc-gap:  1.25rem;
  --cc-ease: 0.18s ease;

  --cc-bg:   #ffffff;
  --cc-bg2:  #f8f7f4;
  --cc-bg3:  #f0ede6;
  --cc-bdr:  #e8e3d8;
  --cc-bdr-f:#D4A373;

  --cc-tx:   #1a1614;
  --cc-tx2:  #6b6460;
  --cc-tx3:  #6f695f;   /* darkened from #9e9790 for WCAG AA on light bg */

  --cc-a:    #D4A373;
  --cc-ad:   #8c6438;   /* darkened from #b8865a so accent text passes AA */
  --cc-al:   rgba(212,163,115,.13);

  --cc-up:   #0f7a42;  --cc-up-bg: rgba(24,160,88,.1);   /* darker green for AA text */
  --cc-dn:   #d03050;  --cc-dn-bg: rgba(208,48,80,.1);

  --cc-line: #D4A373;
  --cc-ma:   #7c9cbf;
  --cc-fill: rgba(212,163,115,.09);
  --cc-grid: rgba(0,0,0,.055);

  --cc-shadow: 0 2px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --cc-shadow-hover: 0 8px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.07);
  --cc-shadow-3d: 0 20px 60px rgba(0,0,0,.15), 0 4px 16px rgba(0,0,0,.08);
}

[data-theme="dark"] {
  --cc-bg:   #1e1b18;
  --cc-bg2:  #252219;
  --cc-bg3:  #2d2920;
  --cc-bdr:  #3a3530;
  --cc-tx:   #f5f0e8;
  --cc-tx2:  #aaa28c;   /* lightened for AA on dark bg */
  --cc-tx3:  #968e80;   /* lightened from #6a6255 for AA on dark bg */
  --cc-al:   rgba(212,163,115,.16);
  --cc-ad:   #D4A373;
  --cc-up:   #36c175;  --cc-up-bg: rgba(54,193,117,.13);
  --cc-dn:   #e05c78;  --cc-dn-bg: rgba(224,92,120,.13);
  --cc-fill: rgba(212,163,115,.11);
  --cc-grid: rgba(255,255,255,.06);
  --cc-shadow: 0 2px 24px rgba(0,0,0,.3);
  --cc-shadow-hover: 0 8px 40px rgba(0,0,0,.4);
  --cc-shadow-3d: 0 20px 60px rgba(0,0,0,.4);
}

.tool-page > * + * { margin-top: var(--cc-gap); }

/* ── Spinner ────────────────────────────────────────────── */
.cc-spinner {
  width:32px; height:32px;
  border:3px solid var(--cc-bdr);
  border-top-color:var(--cc-a);
  border-radius:50%;
  animation:cc-spin .7s linear infinite;
}
.cc-spinner--sm { width:20px; height:20px; border-width:2px; }
@keyframes cc-spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   WORLD MARKET HOURS BAR
═══════════════════════════════════════════════════════════ */
.cc-market-bar {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.65rem 1.25rem;
  background:var(--cc-bg);
  border:1px solid var(--cc-bdr);
  border-radius:var(--cc-r);
  box-shadow:var(--cc-shadow);
  overflow:hidden;
  position:relative;
}
.cc-market-bar::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--cc-a), #e8c4a0, var(--cc-a));
  background-size:200% 100%;
  animation:cc-shimmer 3s linear infinite;
}
@keyframes cc-shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

.cc-market-label {
  display:flex; align-items:center; gap:.4rem;
  font-size:.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--cc-tx3); white-space:nowrap; flex-shrink:0;
}
.cc-market-label svg { width:13px; height:13px; }

.cc-mclocks { display:flex; gap:1rem; flex-wrap:wrap; flex:1; }

.cc-mclock {
  display:flex; align-items:center; gap:.5rem;
  padding:.35rem .75rem;
  border-radius:var(--cc-r-sm);
  background:var(--cc-bg2);
  border:1px solid var(--cc-bdr);
  transition:border-color var(--cc-ease), background var(--cc-ease);
  min-width:140px; flex:1;
}
.cc-mclock:hover { border-color:var(--cc-a); background:var(--cc-al); }

.cc-mc-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--cc-tx3); flex-shrink:0;
  transition:background .3s ease;
}
.cc-mc-dot.open {
  background:var(--cc-up);
  box-shadow:0 0 0 2px var(--cc-up-bg);
  animation:cc-mc-pulse 2s ease-in-out infinite;
}
.cc-mc-dot.closed { background:var(--cc-tx3); }
@keyframes cc-mc-pulse {
  0%,100%{box-shadow:0 0 0 2px var(--cc-up-bg);}
  50%{box-shadow:0 0 0 5px rgba(24,160,88,0);}
}

.cc-mc-info { display:flex; flex-direction:column; flex:1; }
.cc-mc-city { font-size:.78rem; font-weight:700; color:var(--cc-tx); line-height:1.1; }
.cc-mc-exchange { font-size:.64rem; color:var(--cc-tx3); font-weight:600; }
.cc-mc-time {
  font-size:.85rem; font-weight:800; color:var(--cc-tx);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  font-family:'JetBrains Mono','Fira Code','Courier New',monospace;
}

/* ═══════════════════════════════════════════════════════════
   TOOLBAR
═══════════════════════════════════════════════════════════ */
.cc-toolbar {
  display:flex; align-items:center;
  justify-content:space-between; gap:.75rem; flex-wrap:wrap;
}
.cc-tb-left, .cc-tb-right { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

.cc-tbtn {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.38rem .75rem;
  border-radius:var(--cc-r-sm);
  border:1px solid var(--cc-bdr);
  background:var(--cc-bg2);
  color:var(--cc-tx2);
  font-size:.78rem; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:all var(--cc-ease);
}
.cc-tbtn svg { width:13px; height:13px; }
.cc-tbtn:hover { border-color:var(--cc-a); color:var(--cc-ad); background:var(--cc-al); }
.cc-tbtn--accent { background:var(--cc-al); border-color:var(--cc-a); color:var(--cc-ad); }
.cc-tbtn--accent:hover { background:var(--cc-a); color:#fff; }

.cc-refresh-status { display:flex; align-items:center; gap:.45rem; font-size:.75rem; color:var(--cc-tx3); }
.cc-pulse-dot {
  width:7px; height:7px; border-radius:50%; background:var(--cc-up);
  animation:cc-pulse-dot 2s ease-in-out infinite;
}
@keyframes cc-pulse-dot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.7);} }

/* ═══════════════════════════════════════════════════════════
   3D CARD WRAPPER
═══════════════════════════════════════════════════════════ */
.cc-card-3d-wrap {
  perspective: 900px;
  perspective-origin: 50% 50%;
}
.cc-card-3d-wrap .cc-card {
  transform-style: preserve-3d;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════════
   CONVERTER CARD
═══════════════════════════════════════════════════════════ */
.cc-card {
  position:relative;
  background:var(--cc-bg);
  border:1px solid var(--cc-bdr);
  border-radius:var(--cc-r-lg);
  padding:1.75rem 2rem;
  box-shadow:var(--cc-shadow);
  overflow:visible;
}
.cc-card::after {
  content:'';
  position:absolute; inset:-1px;
  border-radius:calc(var(--cc-r-lg) + 1px);
  background:linear-gradient(135deg, rgba(212,163,115,.15), transparent 60%, rgba(212,163,115,.08));
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
  z-index:1;
}
.cc-card-3d-wrap:hover .cc-card::after { opacity:1; }

.cc-overlay {
  position:absolute; inset:0; border-radius:var(--cc-r-lg);
  background:var(--cc-bg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.75rem; font-size:.875rem; color:var(--cc-tx2);
  z-index:30; transition:opacity .3s ease;
}
.cc-overlay.cc-gone { opacity:0; pointer-events:none; }

/* ── Quick pairs ─────────────────────────────────────── */
.cc-pairs-row {
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  margin-bottom:1.25rem;
}
.cc-pairs-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--cc-tx3); white-space:nowrap; }
.cc-pairs-list  { display:flex; gap:.4rem; flex-wrap:wrap; flex:1; }

.cc-pair-pill {
  padding:.26rem .6rem; border-radius:999px;
  border:1px solid var(--cc-bdr); background:var(--cc-bg2);
  color:var(--cc-tx2); font-size:.74rem; font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition:background var(--cc-ease), border-color var(--cc-ease), color var(--cc-ease);
}
.cc-pair-pill:hover,
.cc-pair-pill[aria-pressed="true"] { background:var(--cc-al); border-color:var(--cc-a); color:var(--cc-ad); }

.cc-fav-all-btn {
  background:none; border:none; color:var(--cc-tx3);
  cursor:pointer; padding:.25rem; display:flex;
  transition:color var(--cc-ease);
}
.cc-fav-all-btn svg { width:15px; height:15px; }
.cc-fav-all-btn:hover { color:var(--cc-a); }

/* ── 3-col grid ─────────────────────────────────────────── */
.cc-grid { display:grid; grid-template-columns:1fr 52px 1fr; gap:1rem; align-items:start; }
.cc-side { display:flex; flex-direction:column; gap:.6rem; }
.cc-meta-row { display:flex; align-items:center; justify-content:space-between; padding:0 .1rem; }
.cc-cname { font-size:.78rem; color:var(--cc-tx3); }

/* Fav star */
.cc-fav-btn {
  background:none; border:none; color:var(--cc-tx3);
  cursor:pointer; padding:.2rem; display:flex;
  transition:color var(--cc-ease);
}
.cc-fav-btn svg { width:14px; height:14px; }
.cc-fav-btn:hover, .cc-fav-btn.on { color:var(--cc-a); }
.cc-fav-btn.on svg { fill:var(--cc-a); }

/* ── Picker button ─────────────────────────────────────── */
.cc-picker-wrap { position:relative; }
.cc-picker-btn {
  display:flex; align-items:center; gap:.5rem; width:100%;
  padding:.6rem .875rem;
  border-radius:var(--cc-r); border:1.5px solid var(--cc-bdr);
  background:var(--cc-bg2); color:var(--cc-tx);
  font-weight:700; font-size:1rem; cursor:pointer;
  transition:border-color var(--cc-ease), background var(--cc-ease);
}
.cc-picker-btn:hover { border-color:var(--cc-bdr-f); background:var(--cc-al); }
.cc-picker-btn[aria-expanded="true"] {
  border-color:var(--cc-a); background:var(--cc-al);
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}
.cc-flag    { font-size:1.3rem; line-height:1; }
.cc-code    { flex:1; text-align:left; }
.cc-chevron { width:15px; height:15px; color:var(--cc-tx3); flex-shrink:0; transition:transform var(--cc-ease); }
.cc-picker-btn[aria-expanded="true"] .cc-chevron { transform:rotate(180deg); }

/* ── Dropdown ──────────────────────────────────────────── */
.cc-dd {
  position:absolute; top:100%; left:0; right:0; z-index:200;
  background:var(--cc-bg);
  border:1.5px solid var(--cc-a); border-top:none;
  border-radius:0 0 var(--cc-r) var(--cc-r);
  box-shadow:0 8px 32px rgba(0,0,0,.14);
  display:flex; flex-direction:column;
  max-height:320px; overflow:hidden;
  animation:cc-ddin .15s ease;
}
.cc-dd[hidden] { display:none; }
@keyframes cc-ddin { from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:none;} }

.cc-dd-search {
  position:relative; padding:.5rem .75rem;
  border-bottom:1px solid var(--cc-bdr); flex-shrink:0;
}
.cc-dd-icon {
  position:absolute; left:1.2rem; top:50%; transform:translateY(-50%);
  width:14px; height:14px; color:var(--cc-tx3); pointer-events:none;
}
.cc-dd-input {
  width:100%; padding:.37rem .5rem .37rem 1.8rem;
  border:1px solid var(--cc-bdr); border-radius:var(--cc-r-sm);
  background:var(--cc-bg2); color:var(--cc-tx);
  font-size:.84rem; outline:none;
}
.cc-dd-input:focus { border-color:var(--cc-a); }

.cc-dd-chips {
  display:flex; gap:.3rem; padding:.4rem .75rem;
  border-bottom:1px solid var(--cc-bdr); flex-shrink:0; flex-wrap:wrap;
}
.cc-chip {
  padding:.2rem .55rem; border-radius:999px;
  border:1px solid var(--cc-bdr); background:none;
  color:var(--cc-tx3); font-size:.7rem; font-weight:700;
  cursor:pointer; transition:all var(--cc-ease);
}
.cc-chip:hover, .cc-chip--on { background:var(--cc-al); border-color:var(--cc-a); color:var(--cc-ad); }

.cc-dd-list {
  list-style:none; margin:0; padding:.375rem 0;
  overflow-y:auto; flex:1; scrollbar-width:thin;
}
.cc-dd-item {
  display:flex; align-items:center; gap:.6rem;
  padding:.46rem .875rem;
  cursor:pointer; font-size:.875rem; color:var(--cc-tx);
  transition:background var(--cc-ease); outline:none;
}
.cc-dd-item:hover,
.cc-dd-item:focus,
.cc-dd-item[aria-selected="true"] { background:var(--cc-al); color:var(--cc-ad); }
.cc-dd-item:focus { box-shadow:inset 0 0 0 2px var(--cc-a); }
.cc-dd-item .di-flag { font-size:1.1rem; }
.cc-dd-item .di-code { font-weight:700; min-width:3ch; }
.cc-dd-item .di-name { color:var(--cc-tx2); font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.cc-dd-item .di-fav  { margin-left:auto; color:var(--cc-tx3); font-size:.85rem; }
.cc-dd-item .di-fav.on { color:var(--cc-a); }
.cc-dd-empty { padding:1.25rem; text-align:center; color:var(--cc-tx3); font-size:.84rem; }

/* ── Amount fields ─────────────────────────────────────── */
.cc-field { display:flex; flex-direction:column; gap:.2rem; }
.cc-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--cc-tx3); }
.cc-amount {
  width:100%; padding:.7rem 1rem;
  font-size:1.55rem; font-weight:800;
  border:1.5px solid var(--cc-bdr); border-radius:var(--cc-r);
  background:var(--cc-bg2); color:var(--cc-tx);
  outline:none; transition:border-color var(--cc-ease), box-shadow var(--cc-ease);
  -moz-appearance:textfield;
}
.cc-amount::-webkit-inner-spin-button,
.cc-amount::-webkit-outer-spin-button { -webkit-appearance:none; }
.cc-amount:focus { border-color:var(--cc-a); box-shadow:0 0 0 3px var(--cc-al); }
.cc-result {
  background:linear-gradient(135deg, var(--cc-al), rgba(212,163,115,.2));
  border-color:var(--cc-a); color:var(--cc-ad); cursor:default;
}
[data-theme="dark"] .cc-result { color:var(--cc-a); }

/* ── Swap button ───────────────────────────────────────── */
.cc-swap-col { display:flex; align-items:center; justify-content:center; padding-top:2rem; }
.cc-swap-btn {
  width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--cc-bdr);
  background:var(--cc-bg); color:var(--cc-tx2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.cc-swap-btn svg { width:18px; height:18px; }
.cc-swap-btn:hover {
  background:var(--cc-a); border-color:var(--cc-a); color:#fff;
  transform:rotate(180deg) scale(1.1);
  box-shadow:0 4px 16px rgba(212,163,115,.4);
}
.cc-swap-btn:active { transform:rotate(180deg) scale(.95); }

/* ── Fee bar ───────────────────────────────────────────── */
.cc-fee-bar {
  margin-top:1rem; padding:.875rem 1rem;
  background:var(--cc-bg2); border:1px solid var(--cc-bdr); border-radius:var(--cc-r);
}
.cc-fee-row { display:flex; justify-content:space-between; align-items:center; font-size:.84rem; padding:.15rem 0; }
.cc-fee-lbl { color:var(--cc-tx2); }
.cc-fee-val { font-weight:700; color:var(--cc-tx); }
.cc-fee-neg { color:var(--cc-dn); }
.cc-fee-total { border-top:1px solid var(--cc-bdr); margin-top:.4rem; padding-top:.55rem; }
.cc-fee-get { font-size:1rem; color:var(--cc-up); }

/* ── Rate bar ──────────────────────────────────────────── */
.cc-rate-bar {
  margin-top:1.25rem; padding:.875rem 1rem;
  background:var(--cc-bg2); border:1px solid var(--cc-bdr); border-radius:var(--cc-r);
  transition:background var(--cc-ease);
}
.cc-rate-main { font-size:1.05rem; font-weight:700; color:var(--cc-tx); margin-bottom:.375rem; }
.cc-rate-meta { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.cc-live-badge {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:.2rem .5rem; border-radius:999px;
  background:var(--cc-up-bg); color:var(--cc-up);
}
.cc-pulse { width:6px; height:6px; border-radius:50%; background:currentColor; animation:cc-pulse-live 1.8s ease-in-out infinite; }
@keyframes cc-pulse-live { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.7);} }
.cc-rate-date   { font-size:.77rem; color:var(--cc-tx3); }
.cc-rate-change { font-size:.77rem; font-weight:700; padding:.15rem .45rem; border-radius:4px; }
.cc-rate-change.up { color:var(--cc-up); background:var(--cc-up-bg); }
.cc-rate-change.dn { color:var(--cc-dn); background:var(--cc-dn-bg); }
.cc-inverse-btn {
  margin-left:auto; font-size:.73rem; color:var(--cc-tx3);
  background:none; border:1px solid var(--cc-bdr); border-radius:6px; padding:.2rem .55rem;
  cursor:pointer; white-space:nowrap; transition:all var(--cc-ease);
}
.cc-inverse-btn:hover { border-color:var(--cc-a); color:var(--cc-ad); }

/* ═══════════════════════════════════════════════════════════
   CURRENCY STRENGTH INDEX
═══════════════════════════════════════════════════════════ */
.cc-strength-panel {
  padding:1.5rem 1.75rem;
}
.cc-strength-sub {
  font-size:.72rem; color:var(--cc-tx3); font-weight:600;
}
.cc-strength-list {
  display:flex; flex-direction:column; gap:.5rem; margin-top:.5rem;
}
.cc-strength-row {
  display:flex; align-items:center; gap:.65rem;
}
.cc-strength-flag { font-size:1.1rem; flex-shrink:0; width:1.5rem; text-align:center; }
.cc-strength-code { font-size:.78rem; font-weight:800; color:var(--cc-tx); min-width:2.8rem; }
.cc-strength-track {
  flex:1; height:8px; background:var(--cc-bg2);
  border:1px solid var(--cc-bdr); border-radius:999px; overflow:hidden;
}
.cc-strength-fill {
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--cc-a), #e8c07a);
  transition:width .6s cubic-bezier(.34,1.56,.64,1);
}
.cc-strength-fill.strong { background:linear-gradient(90deg, var(--cc-up), #36c175); }
.cc-strength-fill.weak   { background:linear-gradient(90deg, var(--cc-dn), #e05c78); }
.cc-strength-val {
  font-size:.72rem; font-weight:700; color:var(--cc-tx3);
  min-width:2rem; text-align:right;
  font-variant-numeric:tabular-nums;
}
.cc-strength-pct {
  font-size:.7rem; font-weight:700; min-width:3.5rem; text-align:right;
}
.cc-strength-pct.up { color:var(--cc-up); }
.cc-strength-pct.dn { color:var(--cc-dn); }
.cc-strength-pct.flat { color:var(--cc-tx3); }

/* ═══════════════════════════════════════════════════════════
   ALERTS STRIP
═══════════════════════════════════════════════════════════ */
.cc-alerts-strip {
  background:var(--cc-bg); border:1.5px solid var(--cc-a);
  border-radius:var(--cc-r); padding:1rem 1.25rem;
}
.cc-alerts-head {
  display:flex; align-items:center; gap:.5rem;
  font-size:.8rem; font-weight:700; color:var(--cc-ad); margin-bottom:.75rem;
}
.cc-alerts-head svg { width:14px; height:14px; }
.cc-alerts-clear {
  margin-left:auto; font-size:.72rem; background:none;
  border:1px solid var(--cc-bdr); border-radius:6px;
  padding:.2rem .55rem; color:var(--cc-tx3); cursor:pointer; transition:all var(--cc-ease);
}
.cc-alerts-clear:hover { border-color:var(--cc-dn); color:var(--cc-dn); }
.cc-alerts-list { display:flex; flex-direction:column; gap:.45rem; }
.cc-alert-item {
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem .75rem; background:var(--cc-bg2);
  border:1px solid var(--cc-bdr); border-radius:var(--cc-r-sm); font-size:.82rem;
}
.cc-alert-pair   { font-weight:700; color:var(--cc-tx); }
.cc-alert-dir    { font-size:.72rem; padding:.15rem .45rem; border-radius:4px; font-weight:700; }
.cc-alert-dir.above { background:var(--cc-up-bg); color:var(--cc-up); }
.cc-alert-dir.below { background:var(--cc-dn-bg); color:var(--cc-dn); }
.cc-alert-target { font-weight:700; color:var(--cc-tx); margin-left:.25rem; }
.cc-alert-del    { margin-left:auto; background:none; border:none; color:var(--cc-tx3); cursor:pointer; padding:.2rem; display:flex; transition:color var(--cc-ease); }
.cc-alert-del:hover { color:var(--cc-dn); }
.cc-alert-del svg { width:13px; height:13px; }

/* ═══════════════════════════════════════════════════════════
   STATS STRIP (3D hover)
═══════════════════════════════════════════════════════════ */
.cc-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.875rem;
  perspective:600px;
}
@media(max-width:640px){ .cc-stats { grid-template-columns:repeat(2,1fr); } }
.cc-stat {
  background:var(--cc-bg); border:1px solid var(--cc-bdr);
  border-radius:var(--cc-r); padding:1rem 1.125rem;
  transition:transform .2s ease, box-shadow .2s ease;
  cursor:default;
  transform-style:preserve-3d;
}
.cc-stat:hover {
  transform:translateY(-4px) rotateX(4deg);
  box-shadow:0 12px 32px rgba(0,0,0,.1);
  border-color:var(--cc-a);
}
.cc-stat-label { font-size:.69rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--cc-tx3); margin:0 0 .35rem; }
.cc-stat-val   { font-size:1.1rem; font-weight:800; color:var(--cc-tx); line-height:1.2; margin:0; }
.cc-stat-pct, .cc-stat-sub { font-size:.74rem; font-weight:600; margin:.2rem 0 0; }
.cc-stat-pct.up { color:var(--cc-up); }
.cc-stat-pct.dn { color:var(--cc-dn); }
.cc-stat-sub    { color:var(--cc-tx3); }

/* ═══════════════════════════════════════════════════════════
   52-WEEK RANGE METER
═══════════════════════════════════════════════════════════ */
.cc-range-panel {
  background:var(--cc-bg); border:1px solid var(--cc-bdr);
  border-radius:var(--cc-r); padding:1rem 1.25rem;
  box-shadow:var(--cc-shadow);
}
.cc-range-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.75rem;
}
.cc-range-title { font-size:.75rem; font-weight:700; color:var(--cc-tx2); text-transform:uppercase; letter-spacing:.05em; }
.cc-range-pos-label {
  font-size:.75rem; font-weight:700; padding:.15rem .5rem;
  border-radius:999px; background:var(--cc-al); color:var(--cc-ad);
}
.cc-range-track-wrap { display:flex; align-items:center; gap:.75rem; }
.cc-range-lo, .cc-range-hi {
  font-size:.75rem; font-weight:700; color:var(--cc-tx3);
  white-space:nowrap; min-width:4rem;
  font-variant-numeric:tabular-nums;
}
.cc-range-hi { text-align:right; }
.cc-range-track {
  flex:1; height:10px; background:var(--cc-bg3);
  border:1px solid var(--cc-bdr); border-radius:999px;
  position:relative; overflow:visible;
}
.cc-range-fill {
  position:absolute; top:0; left:0; bottom:0;
  background:linear-gradient(90deg, var(--cc-dn), var(--cc-a), var(--cc-up));
  border-radius:999px;
  transition:width .6s ease;
}
.cc-range-needle {
  position:absolute; top:50%; width:14px; height:14px;
  border-radius:50%; background:var(--cc-bg); border:2px solid var(--cc-a);
  transform:translate(-50%, -50%);
  box-shadow:0 0 0 3px var(--cc-al);
  transition:left .6s ease;
  z-index:2;
}
.cc-range-labels {
  display:flex; justify-content:space-between;
  font-size:.65rem; color:var(--cc-tx3); margin-top:.4rem;
  font-weight:600; text-transform:uppercase; letter-spacing:.04em;
}

/* ═══════════════════════════════════════════════════════════
   INVESTMENT CALCULATOR
═══════════════════════════════════════════════════════════ */
.cc-invest-panel { }
.cc-invest-body { display:flex; flex-direction:column; gap:1.25rem; margin-top:.25rem; }
.cc-invest-inputs {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
}
@media(max-width:600px){ .cc-invest-inputs { grid-template-columns:1fr; } }

.cc-invest-field { display:flex; flex-direction:column; gap:.3rem; }
.cc-invest-input-wrap {
  display:flex; align-items:stretch;
  border:1.5px solid var(--cc-bdr); border-radius:var(--cc-r);
  overflow:hidden; background:var(--cc-bg2);
  transition:border-color var(--cc-ease);
}
.cc-invest-input-wrap:focus-within { border-color:var(--cc-a); box-shadow:0 0 0 3px var(--cc-al); }
.cc-invest-input {
  flex:1; padding:.65rem .9rem; font-size:1rem; font-weight:700;
  border:none; background:transparent; color:var(--cc-tx);
  outline:none; -moz-appearance:textfield; min-width:0;
}
.cc-invest-input::-webkit-inner-spin-button,
.cc-invest-input::-webkit-outer-spin-button { -webkit-appearance:none; }
.cc-invest-unit {
  padding:.65rem .85rem; font-size:.78rem; font-weight:700; color:var(--cc-tx2);
  background:var(--cc-bg3); border-left:1px solid var(--cc-bdr);
  display:flex; align-items:center; white-space:nowrap; flex-shrink:0;
}

.cc-invest-results {
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
.cc-invest-res-card {
  flex:1; min-width:120px; padding:1rem 1.125rem;
  background:var(--cc-bg2); border:1px solid var(--cc-bdr); border-radius:var(--cc-r);
  text-align:center; transition:transform .2s ease, box-shadow .2s ease;
}
.cc-invest-res-card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.07); }
.cc-invest-res-today { border-color:var(--cc-bdr); }
.cc-invest-res-future {
  background:linear-gradient(135deg, var(--cc-al), transparent);
  border-color:var(--cc-a);
}
.cc-invest-res-label {
  font-size:.69rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--cc-tx3); margin:0 0 .4rem;
}
.cc-invest-res-val {
  font-size:1.05rem; font-weight:800; color:var(--cc-tx); margin:0;
  font-variant-numeric:tabular-nums;
}
.cc-invest-res-delta .cc-invest-res-val { font-size:.95rem; }
.cc-invest-res-arrow { color:var(--cc-a); flex-shrink:0; }
.cc-invest-res-arrow svg { width:18px; height:18px; }

.cc-invest-chart {
  width:100%; border-radius:var(--cc-r-sm);
  display:block; background:var(--cc-bg2);
}

.cc-invest-note {
  font-size:.72rem; color:var(--cc-tx3); margin:0;
  line-height:1.5;
}

/* ═══════════════════════════════════════════════════════════
   PANEL CARD (chart, table, history)
═══════════════════════════════════════════════════════════ */
.cc-panel {
  background:var(--cc-bg); border:1px solid var(--cc-bdr);
  border-radius:var(--cc-r-lg); padding:1.5rem 1.75rem;
  box-shadow:0 1px 8px rgba(0,0,0,.04);
  transition:box-shadow var(--cc-ease);
}
.cc-panel:hover { box-shadow:0 4px 20px rgba(0,0,0,.07); }
.cc-panel-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem;
}
.cc-panel-title {
  font-size:1rem; font-weight:700; color:var(--cc-tx); margin:0;
  display:flex; align-items:center; gap:.45rem;
}
.cc-panel-title svg { width:16px; height:16px; color:var(--cc-a); }
.cc-panel-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

.cc-chart-type-sel {
  padding:.28rem .55rem; border-radius:var(--cc-r-sm);
  border:1px solid var(--cc-bdr); background:var(--cc-bg2);
  color:var(--cc-tx2); font-size:.78rem; outline:none; cursor:pointer;
}
.cc-chart-type-sel:focus { border-color:var(--cc-a); }

/* Period tabs */
.cc-tabs { display:flex; gap:.25rem; background:var(--cc-bg2); border:1px solid var(--cc-bdr); border-radius:var(--cc-r-sm); padding:.25rem; }
.cc-tab { padding:.3rem .65rem; border-radius:6px; border:none; background:none; color:var(--cc-tx2); font-size:.77rem; font-weight:700; cursor:pointer; transition:all var(--cc-ease); }
.cc-tab:hover { color:var(--cc-tx); }
.cc-tab--on { background:var(--cc-bg); color:var(--cc-ad); box-shadow:0 1px 4px rgba(0,0,0,.1); }
[data-theme="dark"] .cc-tab--on { color:var(--cc-a); }

/* Chart */
.cc-chart-wrap { position:relative; width:100%; height:240px; transition:height .3s ease; }
#ccChart { display:block; width:100% !important; height:100% !important; }
.cc-chart-loader {
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; background:var(--cc-bg); border-radius:var(--cc-r-sm);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.cc-chart-loader.on { opacity:1; pointer-events:auto; }
.cc-chart-tip {
  position:absolute; top:8px; pointer-events:none; display:none;
  background:var(--cc-bg); border:1px solid var(--cc-bdr);
  border-radius:var(--cc-r-sm); padding:.4rem .7rem;
  font-size:.77rem; color:var(--cc-tx);
  box-shadow:0 4px 16px rgba(0,0,0,.12); white-space:nowrap; z-index:10;
}
.cc-crosshair {
  position:absolute; top:0; bottom:36px; width:1px;
  background:var(--cc-bdr); pointer-events:none; display:none; z-index:5;
}
.cc-chart-note { margin:.75rem 0 0; font-size:.71rem; color:var(--cc-tx3); }

/* ═══════════════════════════════════════════════════════════
   TABLE
═══════════════════════════════════════════════════════════ */
.cc-tbl-input {
  width:80px; padding:.35rem .6rem; border-radius:var(--cc-r-sm);
  border:1px solid var(--cc-bdr); background:var(--cc-bg2);
  color:var(--cc-tx); font-size:.875rem; font-weight:700; outline:none;
  -moz-appearance:textfield;
}
.cc-tbl-input::-webkit-inner-spin-button,
.cc-tbl-input::-webkit-outer-spin-button { -webkit-appearance:none; }
.cc-tbl-input:focus { border-color:var(--cc-a); }
.cc-tbl-base   { font-size:.8rem; color:var(--cc-tx2); font-weight:600; }
.cc-tbl-search {
  padding:.35rem .6rem; border-radius:var(--cc-r-sm);
  border:1px solid var(--cc-bdr); background:var(--cc-bg2);
  color:var(--cc-tx); font-size:.8rem; outline:none; width:120px;
  transition:border-color var(--cc-ease);
}
.cc-tbl-search:focus { border-color:var(--cc-a); }
.cc-tbl-scroll { overflow-x:auto; }

.cc-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.cc-table th {
  padding:.6rem .75rem; text-align:left;
  font-size:.69rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--cc-tx3); border-bottom:1px solid var(--cc-bdr); white-space:nowrap;
}
.cc-sortable { cursor:pointer; user-select:none; }
.cc-sortable:hover { color:var(--cc-tx); }
.cc-sort-icon { display:inline-block; margin-left:.2rem; opacity:.35; }
.cc-sorted-asc  .cc-sort-icon::after { content:'↑'; opacity:1; }
.cc-sorted-desc .cc-sort-icon::after { content:'↓'; opacity:1; }
.cc-r { text-align:right; }

.cc-table td { padding:.55rem .75rem; border-bottom:1px solid var(--cc-bdr); color:var(--cc-tx); vertical-align:middle; }
.cc-table tbody tr:last-child td { border-bottom:none; }
.cc-table tbody tr { transition:background var(--cc-ease); cursor:pointer; }
.cc-table tbody tr:hover { background:var(--cc-bg2); }
.cc-table tbody tr.cc-row-highlight { background:var(--cc-al); }

.cc-td-cur  { display:flex; align-items:center; gap:.5rem; }
.cc-td-flag { font-size:1.2rem; }
.cc-td-name { font-size:.77rem; color:var(--cc-tx2); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-td-code { font-weight:700; }
.cc-td-r    { text-align:right; font-variant-numeric:tabular-nums; }
.cc-td-m    { font-family:'JetBrains Mono','Fira Code','Courier New',monospace; }
.cc-tbl-msg { text-align:center; color:var(--cc-tx3); padding:2rem; }

/* Sparkline cell */
.cc-td-spark { display:flex; align-items:center; justify-content:flex-end; gap:.4rem; }
.cc-sparkline { display:block; flex-shrink:0; }
.cc-trend     { font-size:.77rem; font-weight:700; white-space:nowrap; }
.cc-trend.up  { color:var(--cc-up); }
.cc-trend.dn  { color:var(--cc-dn); }
.cc-trend.flat{ color:var(--cc-tx3); }

/* Pagination */
.cc-tbl-pagination { display:flex; justify-content:center; align-items:center; gap:.5rem; margin-top:.875rem; flex-wrap:wrap; }
.cc-page-btn { padding:.3rem .65rem; border-radius:6px; border:1px solid var(--cc-bdr); background:var(--cc-bg2); color:var(--cc-tx2); font-size:.78rem; font-weight:700; cursor:pointer; transition:all var(--cc-ease); }
.cc-page-btn:hover { border-color:var(--cc-a); color:var(--cc-ad); }
.cc-page-btn--on { background:var(--cc-al); border-color:var(--cc-a); color:var(--cc-ad); }

/* ═══════════════════════════════════════════════════════════
   HISTORY
═══════════════════════════════════════════════════════════ */
.cc-clear-btn { font-size:.76rem; padding:.3rem .7rem; border-radius:6px; border:1px solid var(--cc-bdr); background:none; color:var(--cc-tx3); cursor:pointer; transition:all var(--cc-ease); }
.cc-clear-btn:hover { border-color:var(--cc-dn); color:var(--cc-dn); }
.cc-history { display:flex; flex-direction:column; gap:.45rem; }
.cc-history-empty { font-size:.84rem; color:var(--cc-tx3); text-align:center; padding:1.25rem; margin:0; }
.cc-history-item {
  display:flex; align-items:center; gap:.7rem; padding:.55rem .875rem;
  background:var(--cc-bg2); border:1px solid var(--cc-bdr); border-radius:var(--cc-r-sm);
  font-size:.84rem; cursor:pointer; transition:all var(--cc-ease);
}
.cc-history-item:hover { background:var(--cc-al); border-color:var(--cc-a); transform:translateX(3px); }
.cc-hi-from { font-weight:700; color:var(--cc-tx); }
.cc-hi-arr  { color:var(--cc-tx3); font-size:.75rem; }
.cc-hi-to   { font-weight:700; color:var(--cc-ad); }
[data-theme="dark"] .cc-hi-to { color:var(--cc-a); }
.cc-hi-time { margin-left:auto; font-size:.71rem; color:var(--cc-tx3); white-space:nowrap; }

/* ═══════════════════════════════════════════════════════════
   SETTINGS DRAWER
═══════════════════════════════════════════════════════════ */
.cc-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  z-index:500; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.cc-backdrop.on { opacity:1; pointer-events:auto; }

.cc-drawer {
  position:fixed; top:0; right:0; bottom:0; width:360px; max-width:95vw;
  background:var(--cc-bg); border-left:1px solid var(--cc-bdr);
  z-index:501; display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 32px rgba(0,0,0,.12);
}
.cc-drawer:not([hidden]) { display:flex; }
.cc-drawer.on { transform:translateX(0); }

.cc-drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 1.5rem; border-bottom:1px solid var(--cc-bdr); flex-shrink:0;
}
.cc-drawer-title { font-size:1rem; font-weight:700; color:var(--cc-tx); margin:0; display:flex; align-items:center; gap:.5rem; }
.cc-drawer-title svg { width:17px; height:17px; color:var(--cc-a); }
.cc-drawer-close { background:none; border:none; color:var(--cc-tx3); cursor:pointer; padding:.25rem; display:flex; transition:color var(--cc-ease); }
.cc-drawer-close:hover { color:var(--cc-dn); }
.cc-drawer-close svg { width:18px; height:18px; }

.cc-drawer-body { flex:1; overflow-y:auto; padding:1.25rem 1.5rem; display:flex; flex-direction:column; gap:1.5rem; scrollbar-width:thin; }

.cc-ds { display:flex; flex-direction:column; gap:.75rem; }
.cc-ds-title { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--cc-tx3); margin:0 0 .1rem; }
.cc-ds-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.85rem; color:var(--cc-tx2); }
.cc-ds-lbl { flex:1; }
.cc-ds-select { padding:.35rem .6rem; border-radius:var(--cc-r-sm); border:1px solid var(--cc-bdr); background:var(--cc-bg2); color:var(--cc-tx); font-size:.82rem; outline:none; cursor:pointer; min-width:130px; }
.cc-ds-select:focus { border-color:var(--cc-a); }
.cc-ds-input { width:100px; padding:.35rem .6rem; border-radius:var(--cc-r-sm); border:1px solid var(--cc-bdr); background:var(--cc-bg2); color:var(--cc-tx); font-size:.82rem; outline:none; -moz-appearance:textfield; }
.cc-ds-input::-webkit-inner-spin-button,
.cc-ds-input::-webkit-outer-spin-button { -webkit-appearance:none; }
.cc-ds-input:focus { border-color:var(--cc-a); }

/* Toggle switch */
.cc-toggle { width:40px; height:22px; border-radius:999px; background:var(--cc-bdr); flex-shrink:0; cursor:pointer; position:relative; transition:background .2s ease; }
.cc-toggle[aria-checked="true"] { background:var(--cc-a); }
.cc-toggle-knob { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s ease; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.cc-toggle[aria-checked="true"] .cc-toggle-knob { transform:translateX(18px); }

.cc-ds-reset { margin-top:.5rem; padding:.55rem; border-radius:var(--cc-r-sm); border:1px solid var(--cc-bdr); background:none; color:var(--cc-dn); font-size:.82rem; font-weight:600; cursor:pointer; transition:all var(--cc-ease); width:100%; }
.cc-ds-reset:hover { background:var(--cc-dn-bg); border-color:var(--cc-dn); }

/* ═══════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════ */
.cc-modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:600; }
.cc-modal-bg[hidden], .cc-modal[hidden] { display:none; }
.cc-modal {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:601; background:var(--cc-bg); border:1px solid var(--cc-bdr);
  border-radius:var(--cc-r-lg); padding:1.75rem;
  width:400px; max-width:calc(100vw - 2rem);
  box-shadow:0 16px 48px rgba(0,0,0,.2);
  animation:cc-modal-in .2s ease;
  display:flex; flex-direction:column; gap:.875rem;
}
@keyframes cc-modal-in { from{opacity:0;transform:translate(-50%,-54%);} to{opacity:1;transform:translate(-50%,-50%);} }
.cc-modal-head { display:flex; align-items:center; justify-content:space-between; }
.cc-modal-head h3 { font-size:1rem; font-weight:700; color:var(--cc-tx); margin:0; display:flex; align-items:center; gap:.5rem; }
.cc-modal-head h3 svg { width:16px; height:16px; color:var(--cc-a); }
.cc-modal-close { background:none; border:none; color:var(--cc-tx3); cursor:pointer; display:flex; transition:color var(--cc-ease); }
.cc-modal-close:hover { color:var(--cc-dn); }
.cc-modal-close svg { width:18px; height:18px; }
.cc-modal-desc { font-size:.85rem; color:var(--cc-tx2); margin:0; }
.cc-modal-cur  { font-size:.84rem; color:var(--cc-tx3); padding:.5rem .75rem; background:var(--cc-bg2); border-radius:var(--cc-r-sm); }
.cc-modal-label{ display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--cc-tx3); }
.cc-alert-dir-row { display:flex; gap:.5rem; }
.cc-dir-btn {
  flex:1; padding:.5rem; border-radius:var(--cc-r-sm);
  border:1.5px solid var(--cc-bdr); background:var(--cc-bg2); color:var(--cc-tx2);
  font-size:.84rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  transition:all var(--cc-ease);
}
.cc-dir-btn svg { width:14px; height:14px; }
.cc-dir-btn:hover, .cc-dir-btn--on { border-color:var(--cc-a); background:var(--cc-al); color:var(--cc-ad); }
.cc-modal-input {
  width:100%; padding:.6rem .875rem;
  border-radius:var(--cc-r); border:1.5px solid var(--cc-bdr);
  background:var(--cc-bg2); color:var(--cc-tx); font-size:1rem;
  outline:none; transition:border-color var(--cc-ease);
}
.cc-modal-input:focus { border-color:var(--cc-a); }
.cc-modal-save { width:100%; padding:.65rem; border-radius:var(--cc-r); border:none; background:var(--cc-a); color:#fff; font-size:.9rem; font-weight:700; cursor:pointer; transition:background var(--cc-ease), transform var(--cc-ease); }
.cc-modal-save:hover { background:var(--cc-ad); transform:translateY(-1px); }
.cc-modal-save:active { transform:translateY(0); }

/* ═══════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════ */
.cc-toast {
  position:fixed; bottom:2rem; left:50%;
  transform:translateX(-50%) translateY(2rem);
  background:var(--cc-tx); color:var(--cc-bg);
  padding:.6rem 1.25rem; border-radius:999px;
  font-size:.84rem; font-weight:600;
  z-index:700; opacity:0; pointer-events:none;
  transition:all .3s ease; white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.cc-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .cc-card { padding:1.25rem 1rem; }
  .cc-grid { grid-template-columns:1fr; gap:.75rem; }
  .cc-swap-col { padding-top:0; }
  .cc-swap-btn { transform:rotate(90deg); }
  .cc-swap-btn:hover { transform:rotate(270deg) scale(1.1); }
  .cc-amount { font-size:1.3rem; }
  .cc-panel { padding:1.25rem 1rem; }
  .cc-strength-panel { padding:1.25rem 1rem; }
  .cc-panel-head { flex-direction:column; align-items:flex-start; gap:.5rem; }
  .cc-drawer { width:100%; }
  .cc-toolbar { gap:.5rem; }
  .cc-mclocks { gap:.5rem; }
  .cc-mclock { min-width:auto; flex:none; }
  .cc-market-bar { gap:.5rem; padding:.5rem .875rem; }
  .cc-invest-results { flex-direction:column; }
  .cc-invest-res-arrow { transform:rotate(90deg); }
}
@media(max-width:480px){
  .cc-tab { padding:.28rem .5rem; font-size:.72rem; }
  .cc-pairs-label { display:none; }
  .cc-tbl-search { width:90px; }
  .cc-mc-exchange { display:none; }
  .cc-range-track-wrap { gap:.4rem; }
  .cc-range-lo, .cc-range-hi { font-size:.68rem; min-width:3rem; }
}