:root {
  --up: #079447;
  --down: #d93025;
  --ink: #17191d;
  --muted: #777d87;
  --line: #e6e8eb;
  --panel: #ffffff;
  --soft: #f5f6f8;
  --columns: 4;
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }

html { background: #d7d9dc; }

body {
  margin: 0;
  min-width: 320px;
  background: #d7d9dc;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }

.install-app-button {
  display:inline-flex;
  min-height:36px;
  padding:7px 12px;
  flex:0 0 auto;
  align-items:center;
  gap:6px;
  border:1px solid rgba(243,152,0,.42);
  border-radius:999px;
  color:#9a5700;
  background:linear-gradient(145deg,#fff 22%,#fff8e9 100%);
  box-shadow:0 3px 9px rgba(194,109,0,.13),inset 0 0 3px rgba(243,152,0,.2),inset 0 0 10px rgba(243,152,0,.1),inset 0 1px 0 #fff;
  font-size:.78rem;
  font-weight:950;
  white-space:nowrap;
  cursor:pointer;
}
.install-app-button:hover,.install-app-button:focus-visible { border-color:rgba(243,152,0,.68);background:linear-gradient(145deg,#fff 16%,#ffefca 100%);box-shadow:0 4px 12px rgba(194,109,0,.18),inset 0 0 4px rgba(243,152,0,.24),inset 0 0 12px rgba(243,152,0,.13); }
.install-app-button-icon { font-size:1.05rem;line-height:1; }

.install-app-prompt {
  position:fixed;
  z-index:8500;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  display:grid;
  width:min(720px,calc(100% - 24px));
  grid-template-columns:46px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:11px 12px;
  border:1px solid rgba(8,148,71,.28);
  border-radius:17px;
  background:rgba(255,255,255,.97);
  box-shadow:0 14px 38px rgba(22,45,33,.22),inset 0 0 16px rgba(18,187,88,.06);
  transform:translate(-50%,calc(100% + 40px));
  opacity:0;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .26s ease;
}
.install-app-prompt[hidden] { display:none; }
.install-app-prompt.is-visible { transform:translate(-50%,0);opacity:1; }
.install-app-prompt-icon { display:grid;width:44px;height:44px;place-items:center;border-radius:13px;background:linear-gradient(135deg,#ffac1f,#f39800);box-shadow:0 5px 13px rgba(210,113,0,.25);font-size:1.55rem; }
.install-app-prompt-copy { display:grid;gap:2px; }
.install-app-prompt-copy strong { color:#18201c;font-size:.92rem; }
.install-app-prompt-copy span { color:#68716c;font-size:.76rem;font-weight:700; }
.install-app-prompt-actions { display:flex;align-items:center;gap:6px; }
.install-app-prompt-actions button { min-height:36px;padding:7px 11px;border-radius:10px;font-size:.76rem;font-weight:900;cursor:pointer; }
#installAppPromptOpen { border:1px solid #0aa357;color:#fff;background:linear-gradient(135deg,#14b966,#078e49);box-shadow:0 4px 11px rgba(8,148,71,.2); }
#installAppPromptLater { border:1px solid #d8ddda;color:#626b66;background:#f5f7f6; }

.install-app-dialog { width:min(540px,calc(100% - 24px));padding:0;border:0;border-radius:22px;color:#17191d;background:#fff;box-shadow:0 28px 80px rgba(17,31,24,.34); }
.install-app-dialog::backdrop { background:rgba(18,26,22,.58);backdrop-filter:blur(4px); }
.install-app-dialog-card { position:relative;padding:24px 24px 21px;text-align:center;overflow:hidden; }
.install-app-dialog-card::before { content:"";position:absolute;inset:0 0 auto;height:7px;background:linear-gradient(90deg,#f39800,#ffbc39 42%,#18bd67 67%,#078e49); }
.install-app-close { position:absolute;top:14px;right:14px;width:38px;height:38px;padding:0;border:1px solid #dfe4e1;border-radius:50%;color:#56605b;background:#f6f8f7;font-size:1.45rem;line-height:1;cursor:pointer; }
.install-app-dialog-icon { display:grid;width:58px;height:58px;margin:4px auto 10px;place-items:center;border-radius:18px;background:linear-gradient(135deg,#ffad22,#f39800);box-shadow:0 8px 20px rgba(210,113,0,.23);font-size:2rem; }
.install-app-kicker { margin:0 0 4px;color:#079447;font-size:.72rem;font-weight:950;letter-spacing:.14em; }
.install-app-dialog h2 { margin:0;font-size:clamp(1.3rem,4vw,1.7rem); }
.install-app-lead { margin:9px auto 17px;color:#68716c;font-size:.88rem;font-weight:700;line-height:1.65; }
.install-app-native button { width:100%;min-height:50px;border:0;border-radius:13px;color:#fff;background:linear-gradient(135deg,#13b862,#078e49);box-shadow:0 7px 18px rgba(8,148,71,.23);font-size:1rem;font-weight:950;cursor:pointer; }
.install-app-native p { margin:8px 0 14px;color:#77807b;font-size:.76rem;font-weight:700; }
.install-app-steps { display:grid;gap:8px;margin:0;padding:0;list-style:none;text-align:left;counter-reset:install-step; }
.install-app-steps li { display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;min-height:52px;padding:8px 11px;border:1px solid #e0e7e3;border-radius:13px;background:linear-gradient(145deg,#fff,#f6fbf8);color:#313a35;font-size:.87rem;font-weight:800;line-height:1.45;counter-increment:install-step; }
.install-app-steps li::before { content:counter(install-step);display:grid;width:30px;height:30px;place-items:center;border-radius:50%;color:#fff;background:#0aa357;font-size:.85rem;font-weight:950; }
.install-app-note { margin:12px 0 0;padding:9px 11px;border-radius:10px;color:#7a5a16;background:#fff8e8;font-size:.76rem;font-weight:750;line-height:1.55; }
.install-app-never { margin:15px 0 0;padding:7px;border:0;color:#737b77;background:transparent;font-size:.74rem;font-weight:800;text-decoration:underline;cursor:pointer; }

.primary-site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 2vw, 22px);
  min-height: 45px;
  padding: 5px 12px;
  overflow-x: auto;
  border-bottom: 1px solid #e4e7e9;
  background: #fff;
  scrollbar-width: none;
}
.primary-site-nav::-webkit-scrollbar { display: none; }
.primary-site-nav-items {
  display:flex;
  flex:0 0 max-content;
  align-items:center;
  gap:inherit;
  margin-inline:auto;
}
.power-save-control {
  display: inline-flex;
  min-height: 36px;
  padding: 5px 9px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(8,126,66,.2);
  border-radius: 999px;
  color: #47504b;
  background: #f5f7f6;
  box-shadow: 0 2px 7px rgba(32,54,42,.08);
  font-size: .72rem;
  font-weight: 950;
  white-space: nowrap;
}
.power-save-toggle {
  position: relative;
  width: 48px;
  height: 28px;
  padding: 0;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: #b8bec2;
  box-shadow: inset 0 1px 3px rgba(26,34,30,.2);
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease;
}
.power-save-toggle:focus-visible { outline: 3px solid rgba(246,160,0,.58); outline-offset: 2px; }
.power-save-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(17,29,23,.3);
  transition: transform .22s cubic-bezier(.2,.75,.25,1);
}
.power-save-toggle[aria-checked="true"] { background: #0aa357; box-shadow: inset 0 1px 3px rgba(5,91,46,.24), 0 0 0 1px rgba(8,126,66,.08); }
.power-save-toggle[aria-checked="true"] .power-save-thumb { transform: translateX(20px); }
.power-save-state { min-width: 23px; color: #68716c; font-size: .69rem; line-height: 1; text-align: center; }
.power-save-toggle[aria-checked="true"] + .power-save-state { color: #078442; }
.primary-site-nav a,
.primary-site-nav .indicator-toggle {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid rgba(8, 142, 67, .32);
  border-radius: 999px;
  color: #078b43;
  background: linear-gradient(145deg, #fff 24%, #f3fbf6 100%);
  box-shadow: 0 3px 9px rgba(7,133,62,.12), inset 0 0 3px rgba(21,186,91,.2), inset 0 0 10px rgba(21,186,91,.11), inset 0 1px 0 #fff;
  font-size: .82rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.primary-site-nav a:hover,
.primary-site-nav a:focus-visible,
.primary-site-nav .indicator-toggle:hover,
.primary-site-nav .indicator-toggle:focus-visible {
  border-color: rgba(8,142,67,.54);
  color: #067b3a;
  background: linear-gradient(145deg, #fff 18%, #e9f8ef 100%);
  box-shadow: 0 4px 11px rgba(7,133,62,.17), inset 0 0 4px rgba(21,186,91,.24), inset 0 0 12px rgba(21,186,91,.14), inset 0 1px 0 #fff;
}
.primary-site-nav .indicator-toggle {
  cursor:pointer;
}
.primary-site-nav .indicator-toggle[aria-pressed="true"] {
  border-color:#078e49;
  color:#fff;
  background:linear-gradient(135deg,#0eb15e,#078442);
  box-shadow:0 4px 12px rgba(7,133,62,.24),inset 0 1px 0 rgba(255,255,255,.24);
}
.primary-site-nav a[aria-current="page"] { border-color:rgba(8,142,67,.48);box-shadow:0 4px 11px rgba(7,133,62,.17),inset 0 0 4px rgba(21,186,91,.25),inset 0 0 13px rgba(21,186,91,.16),inset 0 1px 0 #fff; }
.primary-site-nav .x-nav-link {
  border-color: rgba(8,142,67,.24);
  color: #17191d;
  background: linear-gradient(145deg,#fff 30%,#f7fbf8 100%);
  box-shadow: 0 3px 9px rgba(25,29,33,.12),inset 0 0 3px rgba(21,186,91,.16),inset 0 0 9px rgba(21,186,91,.08),inset 0 1px 0 #fff;
}
.primary-site-nav .x-nav-link:hover,
.primary-site-nav .x-nav-link:focus-visible {
  color: #17191d;
  border-color: rgba(8,142,67,.42);
  background: linear-gradient(145deg,#fff,#edf8f1);
  box-shadow: 0 4px 11px rgba(25,29,33,.15),inset 0 0 4px rgba(21,186,91,.2),inset 0 0 11px rgba(21,186,91,.11),inset 0 1px 0 #fff;
}
.x-nav-icon { display: inline-flex; width: 20px; height: 20px; margin-right: 6px; padding: 4px; flex: 0 0 auto; border-radius: 6px; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.x-nav-icon svg { display: block; width: 100%; height: 100%; }
.x-nav-icon path { fill: #fff; }
.primary-site-nav .youtube-nav-link {
  display: inline-flex;
  align-items: center;
  border-color: rgba(8,142,67,.24);
  color: #17191d;
  background: linear-gradient(145deg,#fff 30%,#f7fbf8 100%);
  box-shadow: 0 3px 9px rgba(25,29,33,.12),inset 0 0 3px rgba(21,186,91,.16),inset 0 0 9px rgba(21,186,91,.08),inset 0 1px 0 #fff;
}
.primary-site-nav .youtube-nav-link:hover,
.primary-site-nav .youtube-nav-link:focus-visible {
  color: #17191d;
  border-color: rgba(8,142,67,.42);
  background: linear-gradient(145deg,#fff,#edf8f1);
  box-shadow: 0 4px 11px rgba(25,29,33,.15),inset 0 0 4px rgba(21,186,91,.2),inset 0 0 11px rgba(21,186,91,.11),inset 0 1px 0 #fff;
}
.youtube-nav-icon {
  display: inline-flex;
  width: 20px;
  height: 15px;
  margin-right: 6px;
  flex: 0 0 auto;
}
.youtube-nav-icon svg { display: block; width: 100%; height: 100%; }
.youtube-nav-icon rect { fill: #ff0033; }
.youtube-nav-icon path { fill: #fff; }

.publisher-intro {
  width: min(920px, calc(100% - 24px));
  margin: 26px auto 4px;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(26,31,38,.1);
}

.learning-hub {
  margin: clamp(24px,3vw,42px) 0 14px;
  padding: clamp(20px,3vw,34px);
  border: 1px solid rgba(7,139,59,.2);
  border-radius: clamp(18px,2vw,28px);
  background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(238,250,243,.96));
  box-shadow: 0 10px 28px rgba(17,70,43,.09);
}
.learning-hub-toggle { display:flex; width:100%; align-items:center; gap:18px; padding:0; border:0; color:inherit; background:transparent; font:inherit; text-align:left; cursor:pointer; }
.learning-hub-toggle:focus-visible { outline:3px solid rgba(7,139,59,.3); outline-offset:7px; border-radius:10px; }
.learning-hub-heading { display:flex; min-width:0; flex:1; align-items:end; justify-content:space-between; gap:22px; }
.learning-hub-kicker { margin:0 0 5px; color:#078b3b; font-size:.76rem; font-weight:950; letter-spacing:.14em; }
.learning-hub-title { display:block; font-size:clamp(1.35rem,3vw,2rem); font-weight:950; letter-spacing:-.035em; }
.learning-hub-description { max-width:440px; color:#5e6862; font-size:.92rem; font-weight:700; line-height:1.7; }
.learning-hub-toggle-meta { display:flex; flex:0 0 auto; align-items:center; gap:10px; color:#078b3b; font-size:.76rem; font-weight:950; white-space:nowrap; }
.learning-hub-chevron { position:relative;display:grid;width:32px;height:32px;place-items:center;flex-shrink:0;border-radius:50%;background:rgba(7,139,59,.1);transition:transform .25s ease,background .2s ease; }
.learning-hub-chevron svg { display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round; }
.learning-hub-chevron::before { content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 6 7-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;pointer-events:none;will-change:transform,opacity; }
html[data-power-save="false"] .learning-hub-chevron::before { animation:demoTapTrail 1.65s linear infinite; }
.learning-hub-toggle:hover .learning-hub-chevron { background:rgba(7,139,59,.17); }
.learning-hub-collapse { display:grid; grid-template-rows:1fr; transition:grid-template-rows .28s ease,opacity .22s ease; opacity:1; }
.learning-hub-collapse-inner { min-height:0; overflow:hidden; }
.learning-card-grid { margin-top:18px; }
.learning-hub.is-collapsed .learning-hub-collapse { grid-template-rows:0fr; opacity:0; }
.learning-hub.is-collapsed .learning-hub-chevron { transform:rotate(-90deg); }
.learning-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.learning-card { display:flex; min-width:0; min-height:118px; align-items:center; gap:14px; padding:17px; border:1px solid rgba(7,139,59,.16); border-radius:17px; color:#202328; background:linear-gradient(145deg,#fff,#f7fbf8); box-shadow:0 5px 14px rgba(26,63,44,.06); text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.learning-card:hover { transform:translateY(-2px); border-color:rgba(7,139,59,.4); box-shadow:0 10px 22px rgba(26,63,44,.12); }
.learning-card-featured { background:linear-gradient(135deg,#fff8eb,#f0fff5); }
.learning-card-icon { display:grid; width:46px; height:46px; flex:0 0 46px; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(145deg,#f6a000,#079247); box-shadow:0 5px 12px rgba(8,139,61,.19); font-size:1.45rem; font-weight:950; }
.learning-card>span:last-child { display:block; min-width:0; }
.learning-card small,.learning-card strong,.learning-card em { display:block; }
.learning-card small { color:#078b3b; font-size:.7rem; font-weight:950; letter-spacing:.07em; }
.learning-card strong { margin-top:4px; font-size:1rem; line-height:1.35; }
.learning-card em { margin-top:5px; color:#667069; font-size:.78rem; font-style:normal; line-height:1.5; }
html[data-theme="dark"] .learning-hub { border-color:#283a31; background:linear-gradient(145deg,#151b1e,#101916); box-shadow:0 8px 24px rgba(0,0,0,.28); }
html[data-theme="dark"] .learning-hub-description { color:#b5beb9; }
html[data-theme="dark"] .learning-card { border-color:#2c3b34; color:#f2f5f3; background:linear-gradient(145deg,#19211e,#121815); }
html[data-theme="dark"] .learning-card em { color:#aeb8b2; }
.publisher-kicker { margin: 0 0 6px; color: #078b3b; font-size: .75rem; font-weight: 900; letter-spacing: .09em; }
.publisher-intro h2 { margin: 0 0 12px; font-size: clamp(1.25rem,3vw,1.7rem); white-space: nowrap; }
.publisher-intro > p:not(.publisher-kicker) { margin: 0; color: #555c65; font-size: 1rem; line-height: 1.85; }
.publisher-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.publisher-links a { padding: 9px 13px; border-radius: 9px; background: #edf7f1; color: #087c40; font-size: .88rem; font-weight: 900; text-decoration: none; }

.topbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  grid-template-rows: auto auto auto auto auto;
  align-items: center;
  gap: 7px clamp(12px, 2vw, 28px);
  min-height: 244px;
  padding: max(7px, env(safe-area-inset-top)) clamp(14px, 3vw, 32px) 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
}

.board-switch-bar {
  position: sticky;
  z-index: 90;
  top: 0;
  display: grid;
  grid-template-columns: minmax(180px,1fr) auto minmax(180px,1fr);
  align-items: center;
  min-height: 72px;
  padding: max(8px,env(safe-area-inset-top)) clamp(12px,2.3vw,30px) 8px;
  border-bottom: 1px solid rgba(21,52,40,.12);
  background: rgba(255,255,255,.94);
  box-shadow: 0 5px 22px rgba(23,48,38,.07);
  backdrop-filter: blur(18px);
}
.stockbull-switch-link {
  position: relative;
  isolation: isolate;
  justify-self: start;
  display: inline-flex;
  min-width: 0;
  width: 128px;
  height: 44px;
  align-items: center;
  gap: 7px;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid rgba(91,108,101,.25);
  border-radius: 13px;
  color: #24313a;
  background: rgba(255,255,255,.9);
  box-shadow: 0 4px 13px rgba(16,43,70,.08),0 0 0 1px rgba(10,154,85,.04),0 0 15px rgba(10,154,85,.12);
  font-size: .74rem;
  font-weight: 900;
  text-decoration: none;
}
.stockbull-switch-link img { position:relative;z-index:1;display:block;width:88px;height:29px;object-fit:contain; }
.stockbull-switch-link .stockbull-switch-logo-dark{display:none}
html[data-theme="dark"] .stockbull-switch-link .stockbull-switch-logo-light{display:none}
html[data-theme="dark"] .stockbull-switch-link .stockbull-switch-logo-dark{display:block}
.stockbull-switch-link .switch-direction{position:relative;z-index:1}
.switch-direction { color:#0a8f4d;font-size:1rem;font-weight:1000; }
.switch-label { white-space:nowrap; }
.current-board-brand { grid-column:2;display:block;width:clamp(145px,16vw,215px);height:52px; }
.current-board-brand img { display:block;width:100%;height:100%;object-fit:contain; }
.current-board-brand .brand-logo { width:min(100%,156px);height:auto;margin:auto; }
.board-theme-toggle { justify-self:end;width:44px;height:44px;border-radius:13px; }
.board-theme-toggle .theme-icon { width:21px;height:21px; }
.brand-stack { visibility:hidden;pointer-events:none; }
html[data-theme="dark"] .board-switch-bar { border-color:#28332e;background:rgba(14,19,22,.95);box-shadow:0 6px 24px rgba(0,0,0,.22); }
html[data-theme="dark"] .stockbull-switch-link { border-color:#425049;color:#e7efea;background:#151c1f;box-shadow:0 4px 14px rgba(0,0,0,.2),0 0 14px rgba(49,177,108,.11); }
.live-panel { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; min-width: 0; }
.live-summary { display: flex; width: 100%; min-width: 0; align-items: center; gap: 7px; }
.live-panel p { margin: 0; color: var(--muted); font-size: .72rem; font-weight: 750; line-height: 1.3; white-space: nowrap; }

.currency-switch,
.chart-mode-switch {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid rgba(8, 142, 67, .32);
  border-radius: 8px;
  background: linear-gradient(145deg,#fff 24%,#f3fbf6 100%);
  box-shadow: 0 3px 9px rgba(7,133,62,.11),inset 0 0 3px rgba(21,186,91,.2),inset 0 0 10px rgba(21,186,91,.11),inset 0 1px 0 #fff;
}
.currency-switch button,
.chart-mode-switch button {
  min-width: 42px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid #dce5df;
  background: #fff;
  color: #59616a;
  cursor: pointer;
  font-size: .68rem;
  font-weight: 900;
}
.chart-mode-switch button {
  display:grid;
  min-width:46px;
  place-items:center;
}
.currency-switch button:last-child,
.chart-mode-switch button:last-child { border-right: 0; }
.currency-switch button[aria-pressed="true"],
.chart-mode-switch button[aria-pressed="true"] {
  background: linear-gradient(135deg,#0aa357,#087e42);
  color: #fff;
}
.currency-switch button:focus-visible,
.chart-mode-switch button:focus-visible { position:relative;z-index:1;outline:2px solid #f39800;outline-offset:-2px; }
.chart-mode-icon {
  width:22px;
  height:22px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.chart-mode-line-icon { stroke-width:3.1; }
.chart-mode-candle-icon { stroke-width:2.05; }

.theme-toggle {
  display: inline-grid;
  width: 30px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(8, 142, 67, .32);
  border-radius: 8px;
  background: linear-gradient(145deg,#fff 24%,#f3fbf6 100%);
  box-shadow: 0 3px 9px rgba(7,133,62,.11),inset 0 0 3px rgba(21,186,91,.2),inset 0 0 10px rgba(21,186,91,.11),inset 0 1px 0 #fff;
  color: #f39800;
  cursor: pointer;
}
.theme-toggle:focus-visible { outline: 2px solid #f39800; outline-offset: 2px; }
.theme-icon { grid-area: 1 / 1; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .18s ease, transform .22s ease; }
.theme-icon-sun circle { fill: currentColor; stroke: none; }
.theme-icon-moon { opacity: 0; transform: rotate(-24deg) scale(.62); }
.theme-toggle[aria-pressed="true"] .theme-icon-sun { opacity: 0; transform: rotate(28deg) scale(.62); }
.theme-toggle[aria-pressed="true"] .theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); }

.header-utility-controls {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.music-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.music-toggle {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 28px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(8, 142, 67, .32);
  border-radius: 8px;
  background: linear-gradient(145deg,#fff 24%,#f3fbf6 100%);
  box-shadow: 0 3px 9px rgba(7,133,62,.11),inset 0 0 3px rgba(21,186,91,.2),inset 0 0 10px rgba(21,186,91,.11),inset 0 1px 0 #fff;
  color: #078b47;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 950;
  line-height: 1;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.music-toggle:hover { transform: translateY(-1px); }
.music-toggle:disabled {
  border-color: #b8bdc1;
  color: #747a7e;
  background: #e6e8ea;
  box-shadow: inset 0 1px 3px rgba(65,72,76,.12);
  cursor: not-allowed;
  opacity: 1;
  transform: none;
  filter: none;
}
.music-toggle:disabled::after {
  position: absolute;
  width: 125%;
  height: 3px;
  border-radius: 999px;
  background: #858b8f;
  content: "";
  transform: rotate(-42deg);
  box-shadow: 0 0 0 1px rgba(255,255,255,.45);
  pointer-events: none;
}
.music-toggle:focus-visible { outline: 2px solid #f39800; outline-offset: 2px; }
.music-note {
  display: inline-block;
  font-size: 1.08rem;
  font-weight: 1000;
  line-height: 1;
  -webkit-text-stroke: .45px currentColor;
  text-shadow: 0 0 .01px currentColor;
  transform-origin: 50% 70%;
}
.music-toggle[aria-pressed="true"] {
  border-color: #07914b;
  color: #fff;
  background: linear-gradient(135deg,#0aad5d,#087e42);
  box-shadow: 0 3px 9px rgba(8,142,67,.24);
}
.music-toggle[aria-pressed="true"] .music-note { animation: musicNoteFloat 1.15s ease-in-out infinite; }
.music-toggle.is-loading { border-color:#f39800;color:#f39800;background:linear-gradient(145deg,#fff8eb,#fff);box-shadow:0 3px 9px rgba(243,152,0,.22),inset 0 0 8px rgba(243,152,0,.12);cursor:wait;opacity:1; }
.music-toggle.is-loading::before { position:absolute;width:14px;height:14px;border:2px solid rgba(243,152,0,.24);border-top-color:#f39800;border-right-color:#f39800;border-radius:50%;content:"";animation:musicLoadingSpin .72s linear infinite; }
.music-toggle.is-loading::after { display:none; }
.music-toggle.is-loading .music-note { opacity:0;animation:none; }
.music-menu button:disabled { cursor:wait;opacity:.5; }
.music-menu {
  position: absolute;
  z-index: 80;
  top: 50%;
  left: calc(100% + 5px);
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(8,142,67,.24);
  border-radius: 9px;
  background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(242,251,246,.98));
  box-shadow: 0 6px 18px rgba(27,48,38,.18),inset 0 0 3px rgba(21,186,91,.2),inset 0 0 11px rgba(21,186,91,.11),inset 0 1px 0 #fff;
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-5px,-50%) scale(.94);
  transform-origin: left center;
  transition: opacity .16s ease, transform .2s ease;
}
.music-menu.is-open { opacity: 1; pointer-events: auto; transform: translate(0,-50%) scale(1); }
.music-menu button {
  min-width: 30px;
  height: 24px;
  padding: 0 5px;
  border: 0;
  border-radius: 6px;
  color: #078b47;
  background: linear-gradient(145deg,rgba(255,255,255,.66),rgba(234,248,240,.66));
  box-shadow:inset 0 0 0 1px rgba(21,186,91,.1),inset 0 0 7px rgba(21,186,91,.08);
  cursor: pointer;
  font-size: .67rem;
  font-weight: 1000;
  -webkit-text-stroke: .25px currentColor;
}
.music-menu button:hover { color:#078146; background:#e7f7ee; }
.music-menu button:focus-visible { outline:2px solid #f39800; outline-offset:-1px; }
.music-notice {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  max-width: calc(100vw - 32px);
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(31,38,43,.92);
  box-shadow: 0 7px 22px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  font-size: .77rem;
  font-weight: 850;
  white-space: nowrap;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .25s ease;
}
.music-notice.is-visible { opacity: 1; transform: translate(-50%, 0); }
@keyframes musicNoteFloat {
  0%,100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-2px) rotate(7deg); }
}
@keyframes musicLoadingSpin { to { transform:rotate(360deg); } }

.live-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #777d87;
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}
.live-status i { width: 7px; height: 7px; border-radius: 50%; background: #a3a7ae; }
.live-status.connected { color: #078a3d; }
.live-status.connected i { background: #08a34a; box-shadow: 0 0 0 3px rgba(8,163,74,.14); animation: livePulse 1.5s ease-in-out infinite; }
.live-status.disconnected { color: #b7791f; }
.live-status.disconnected i { background: #e0a126; }

.brand-stack {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  width: clamp(270px, 23vw, 345px);
  height: 68px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.brand-logo {
  position: relative;
  display: block;
  width: clamp(188px, 15vw, 240px);
  aspect-ratio: 2172 / 724;
  margin: 0;
  isolation: isolate;
  background-image: var(--brand-logo-image, url('/optimized/bitbull-logo-v4.webp'));
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: 72% 88%;
}
.brand-logo-static,.brand-logo-wave,.brand-logo-wave-slice,.brand-logo-wave-slice img {
  position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;
}
.brand-logo-static,.brand-logo-wave-slice img{object-fit:contain}
.brand-logo-static,.brand-logo-wave{opacity:0}
.brand-logo-wave{z-index:2;overflow:visible}
.brand-logo-wave-slice{clip-path:inset(0 var(--slice-right) 0 var(--slice-left));transform:scaleY(1);transform-origin:50% var(--line-anchor)}
.brand-logo.motion-ready{background-image:none}
.brand-logo.motion-ready .brand-logo-static{opacity:1}
.brand-logo.motion-fallback{background-image:var(--brand-logo-image,url('/optimized/bitbull-logo-v4.webp'))!important}
.brand-logo.motion-fallback .brand-logo-static,.brand-logo.motion-fallback .brand-logo-wave{opacity:0;animation:none}
.brand-logo.motion-once{animation:brandCatch 2.65s cubic-bezier(.22,.61,.36,1) both;transform-origin:50% 50%;will-change:transform}
.brand-logo.motion-once .brand-logo-static{animation:brandBaseReveal 2.65s steps(1,end) both}
.brand-logo.motion-once .brand-logo-wave{animation:brandMotionReveal 2.65s steps(1,end) both}
.brand-logo.motion-once .brand-logo-wave-slice{animation:brandLetterFlow 1.65s cubic-bezier(.22,.61,.36,1) var(--letter-delay) 1 both;will-change:transform}
.brand-logo::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: '';
  background: linear-gradient(100deg,transparent 37%,rgba(255,255,255,.96) 49%,rgba(109,255,174,.62) 53%,transparent 63%);
  background-size: 36% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  -webkit-mask: url('/optimized/bitbull-logo-v4.webp') center / contain no-repeat;
  mask: url('/optimized/bitbull-logo-v4.webp') center / contain no-repeat;
}
.brand-logo.motion-once::after { animation: brandShine 2.65s ease-in-out 1 both; }

.gainers-toggle {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  grid-row: 4;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-self: center;
  gap: 10px;
  padding: 4px 14px;
  border: 1px solid rgba(8,142,67,.3);
  border-radius: 13px;
  color: #078b43;
  background: linear-gradient(145deg,#fff,#eef9f2);
  box-shadow: 0 4px 11px rgba(7,133,62,.12),inset 0 1px 0 rgba(255,255,255,.9);
  cursor: pointer;
  font-size: clamp(.83rem,1.3vw,1rem);
  font-weight: 950;
  line-height: 1;
}
.gainers-toggle[aria-expanded="false"]::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 1px solid rgba(21, 186, 91, .4);
  border-radius: inherit;
  box-shadow: inset 0 0 3px rgba(21, 186, 91, .24), inset 0 0 12px rgba(21, 186, 91, .15);
  pointer-events: none;
}
.gainers-toggle:hover { border-color: rgba(8,142,67,.52); }
.gainers-toggle:focus-visible { outline: 3px solid rgba(8,142,67,.22); outline-offset: 2px; }
.gainers-toggle-label { display:contents; }
.gainers-toggle-label>span { position:relative;z-index:1;grid-column:2;justify-self:center;text-align:center; }
.gainers-toggle-icon { position:relative;z-index:1;grid-column:1;justify-self:start;box-sizing:border-box;width:38px;height:38px;padding:2px;border:2px solid rgba(16,185,86,.48);border-radius:50%;fill:none;background:radial-gradient(circle at 36% 30%,#fff 0 42%,#e4f8ec 100%);box-shadow:0 3px 8px rgba(4,135,60,.18),inset 0 1px 0 rgba(255,255,255,.9);filter:drop-shadow(0 2px 2px rgba(4,135,60,.14)); }
.gainers-toggle-line { fill:none;stroke:url(#gainersArrowGradient);stroke-width:11;stroke-linecap:round;stroke-linejoin:round; }
.gainers-toggle-head { fill:url(#gainersArrowGradient); }
.gainers-toggle-arrow { position:absolute;right:20px;top:50%;display:inline-block;color:#078c43;font-size:1.9rem;font-weight:1000;line-height:1;transform:translateY(-54%) scaleX(1.12);transform-origin:center;transition:transform .2s ease; }
.gainers-toggle[aria-expanded="true"] .gainers-toggle-arrow { transform:translateY(-46%) rotate(180deg) scaleX(1.12); }
.gainers-toggle-arrow::before {
  content:"⌄";
  position:absolute;
  inset:0;
  color:rgba(7,140,67,.62);
  font-weight:300;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}
html[data-power-save="false"] .gainers-toggle-arrow::before { animation:demoTapTrail 1.65s linear infinite; }
.topbar.gainers-collapsed { grid-template-rows:auto auto auto auto; }
.topbar.gainers-collapsed .gainers-list { display:none; }
.topbar.gainers-collapsed .feature-cta-row { grid-row:3; }

@keyframes brandLetterFlow{0%,4%{transform:scaleY(1)}22%{transform:scaleY(1.13)}42%{transform:scaleY(.985)}58%,100%{transform:scaleY(1)}}
@keyframes brandBaseReveal{0%,1.5%{opacity:1}2%,49%{opacity:0}50%,100%{opacity:1}}
@keyframes brandMotionReveal{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes brandCatch{0%,50%{transform:translateY(0) rotate(0)}55%{transform:translateY(1px) rotate(1.05deg)}59%{transform:translateY(-1px) rotate(-.65deg)}63%{transform:translateY(.5px) rotate(.32deg)}68%,100%{transform:translateY(0) rotate(0)}}
@keyframes brandShine{0%,58%{background-position:-55% 0;opacity:0}62%{opacity:.5}70%{background-position:155% 0;opacity:.82}76%,100%{background-position:155% 0;opacity:0}}

@media (prefers-reduced-motion: reduce) {
  .brand-logo,
  .brand-logo-wave-slice,
  .brand-logo::after { animation: none; }
  .brand-logo-wave{display:none!important}
  .brand-logo.motion-ready .brand-logo-static{opacity:1!important;animation:none!important}
}

.gainers-list {
  grid-column: 1 / -1;
  grid-row: 5;
  display: grid;
  grid-template-columns: repeat(10, minmax(72px, 1fr));
  align-items: stretch;
  gap: clamp(6px, .9vw, 14px);
  width: 100%;
  min-height: 91px;
  margin-top: 9px;
}

.gainers-list:empty::after {
  content: "ランキング取得中…";
  grid-column: 1 / -1;
  align-self: center;
  color: #92979f;
  font-size: .74rem;
}

.feature-cta-row {
  grid-column: 1 / -1;
  grid-row: 3;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(8px,1.2vw,14px);
  width:100%;
  justify-self:center;
}
.feature-cta {
  position:relative;
  isolation:isolate;
  display: grid;
  grid-template-columns:44px minmax(0,1fr) 34px;
  align-items: center;
  gap: 12px;
  min-width:0;
  min-height:54px;
  padding:5px 15px;
  overflow:hidden;
  border: 1px solid rgba(8,151,72,.34);
  border-radius: 15px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.my-chart-cta {
  border-color:rgba(243,152,0,.4);
  color:#b96700;
  background:linear-gradient(90deg,#f39800 0%,rgba(243,152,0,.88) 13%,rgba(243,152,0,.24) 36%,#fff 63%,#fff 100%);
  box-shadow:0 7px 19px rgba(196,109,0,.16),inset 0 1px 0 rgba(255,255,255,.78);
}
.portfolio-cta {
  color:#078b43;
  background:linear-gradient(90deg,#fff 0%,#fff 37%,rgba(10,163,87,.24) 64%,rgba(10,163,87,.88) 87%,#0aa357 100%);
  box-shadow:0 7px 19px rgba(5,126,63,.16),inset 0 1px 0 rgba(255,255,255,.72);
}

.demo-trade {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  justify-self: center;
}
.demo-trade [hidden] { display:none !important; }
.demo-trade-toggle {
  display: grid;
  grid-template-columns: 56px minmax(150px, 1fr) minmax(390px, 48%) 32px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 78px;
  padding: 7px 15px;
  border: 1px solid rgba(255,145,0,.34);
  border-radius: 15px;
  background: linear-gradient(90deg,
    #f39800 0%,
    #f39800 28%,
    rgba(243,152,0,.72) 36%,
    rgba(243,152,0,.16) 46%,
    #fff 54%,
    rgba(10,163,87,.16) 68%,
    rgba(10,163,87,.68) 91%,
    #0aa357 100%);
  box-shadow: 0 7px 20px rgba(42,61,50,.13),inset 0 1px 0 #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.demo-trade-toggle:hover { transform: translateY(-1px); border-color: rgba(8,151,72,.45); box-shadow: 0 9px 23px rgba(42,61,50,.17); }
.demo-trade-toggle:focus-visible { outline: 3px solid rgba(246,160,0,.56); outline-offset: 3px; }
.demo-trade.is-open .demo-trade-toggle { border-radius: 15px 15px 0 0; border-bottom-color: rgba(8,151,72,.12); }
.demo-trade-toggle-icon { position:relative;display:grid;width:48px;height:48px;place-items:center;border:2px solid rgba(255,149,0,.72);border-radius:14px;background:#fff8eb;box-shadow:0 0 0 4px rgba(255,153,0,.08),0 5px 14px rgba(241,119,0,.28);line-height:1;isolation:isolate;transition:border-radius .2s ease,box-shadow .2s ease,transform .2s ease; }
.demo-trade-toggle-icon>img { position:relative;z-index:2;width:88%;height:88%;border-radius:12px;object-fit:contain; }
.demo-trade.has-position .demo-trade-toggle-icon { border-color:transparent;border-radius:50%;background:transparent;box-shadow:none; }
.demo-trade.has-position .demo-trade-toggle-icon>img { z-index:3;width:104%;height:104%;border:0;border-radius:50%;background:transparent;box-shadow:none;object-fit:contain; }
.demo-trade-flames {
  position:absolute;
  z-index:2;
  inset:-19px -14px -9px;
  opacity:0;
  background-image:url("/demo-position-fire-v2.webp");
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:400% 200%;
  filter:
    drop-shadow(1.2px 0 0 rgba(255,255,255,.98))
    drop-shadow(-1.2px 0 0 rgba(255,255,255,.98))
    drop-shadow(0 1.2px 0 rgba(255,255,255,.98))
    drop-shadow(0 -1.2px 0 rgba(255,255,255,.98))
    drop-shadow(.85px .85px 0 rgba(255,255,255,.96))
    drop-shadow(-.85px .85px 0 rgba(255,255,255,.96))
    drop-shadow(.85px -.85px 0 rgba(255,255,255,.96))
    drop-shadow(-.85px -.85px 0 rgba(255,255,255,.96))
    drop-shadow(0 2px 4px rgba(255,70,0,.46));
  pointer-events:none;
  transform-origin:50% 76%;
  transition:opacity .2s ease;
  backface-visibility:hidden;
  contain:paint;
  will-change:background-position,transform;
}
.demo-trade.has-position .demo-trade-flames {
  opacity:1;
  animation:demoFlameSprite 1s steps(1,end) infinite,demoFlameBreathe 2.4s steps(12,end) infinite alternate;
}
@keyframes demoFlameSprite {
  0% { background-position:0 0; }
  12.5% { background-position:33.333% 0; }
  25% { background-position:66.666% 0; }
  37.5% { background-position:100% 0; }
  50% { background-position:0 100%; }
  62.5% { background-position:33.333% 100%; }
  75% { background-position:66.666% 100%; }
  87.5%,100% { background-position:100% 100%; }
}
@keyframes demoFlameBreathe {
  from { transform:translateY(1px) scale(.98,.96); }
  to { transform:translateY(-2px) scale(1.02,1.055); }
}
.demo-trade-toggle-copy { display:grid;min-width:0; }
.demo-trade-toggle-copy small { color:#fff;font-size:.65rem;font-weight:1000;letter-spacing:.12em;line-height:1.1;text-shadow:0 1px 3px rgba(131,64,0,.34); }
.demo-trade-toggle-copy strong { margin-top:2px;color:#fff;font-size:1.05rem;font-weight:1000;line-height:1.25;text-shadow:0 1px 3px rgba(131,64,0,.34); }
.demo-trade-toggle-status { margin-top:1px;overflow:hidden;color:rgba(255,255,255,.94);font-size:.67rem;font-weight:800;line-height:1.25;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(131,64,0,.28);white-space:nowrap; }
.demo-trade-toggle-figures { display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);align-items:stretch;min-width:0;min-height:56px;overflow:hidden;border-radius:10px;background:rgba(18,108,177,.08); }
.demo-trade-toggle-pnl { display:grid;align-content:center;justify-items:center;min-width:0;padding:5px 10px;border-right:1px solid rgba(18,108,177,.16);text-align:center; }
.demo-trade-toggle-pnl small { color:#737a82;font-size:.64rem;font-weight:900;line-height:1.15; }
.demo-trade-toggle-pnl strong { display:block;max-width:100%;margin-top:3px;color:#126cb1;font-size:clamp(1.2rem,2vw,1.7rem);font-weight:1000;line-height:1;letter-spacing:-.035em;white-space:nowrap;transition:color .2s ease,filter .2s ease,transform .2s ease,font-size .2s ease; }
.demo-trade-toggle-pnl strong.is-wide-amount { font-size:clamp(1.12rem,1.75vw,1.5rem);letter-spacing:-.055em; }
.demo-trade-toggle-pnl strong.is-extra-wide-amount { font-size:clamp(1.02rem,1.55vw,1.35rem);letter-spacing:-.07em; }
.demo-trade-toggle-pnl.is-profit strong,.demo-current-pnl-mobile.is-profit strong { color:#078f42; }
.demo-trade-toggle-pnl.is-loss strong,.demo-current-pnl-mobile.is-loss strong { color:#dc2535; }
.demo-trade-toggle-pnl.is-final strong,.demo-current-pnl-mobile.is-final strong { color:#126cb1; }
.demo-trade-toggle-balance { display:grid;min-width:0;min-height:56px;padding:4px 10px;place-items:center;border-radius:10px;background:#eaf2f7;text-align:center;transition:background .2s ease; }
.demo-trade-toggle-balance small { color:#737a82;font-size:.64rem;font-weight:800; }
.demo-trade-toggle-balance strong { max-width:100%;color:#126cb1;font-size:clamp(1.7rem,3.25vw,3.3rem);font-weight:1000;line-height:1;letter-spacing:-.055em;white-space:nowrap;transition:color .2s ease,font-size .2s ease; }
.demo-trade-toggle-balance strong.is-wide-amount { font-size:clamp(1.45rem,2.55vw,2.6rem);letter-spacing:-.07em; }
.demo-trade-toggle-balance strong.is-extra-wide-amount { font-size:clamp(1.3rem,2.2vw,2.25rem);letter-spacing:-.08em; }
.demo-trade-toggle-arrow {
  --demo-arrow-angle: 0deg;
  position:relative;
  display:block;
  color:#fff;
  font-size:1.9rem;
  font-weight:1000;
  line-height:1;
  text-align:center;
  transform-origin:center;
  transform:rotate(var(--demo-arrow-angle)) scaleX(1.12);
  transition:transform .2s ease;
}
.demo-trade.is-open .demo-trade-toggle-arrow { --demo-arrow-angle:180deg; }
.demo-trade-toggle-arrow::before {
  content:"⌄";
  position:absolute;
  inset:0;
  color:rgba(255,255,255,.68);
  font-weight:300;
  opacity:0;
  pointer-events:none;
  animation:demoTapTrail 1.65s linear infinite;
  will-change:transform,opacity;
}
@keyframes demoTapTrail {
  0%,12%,100% { opacity:0;transform:translateY(-15px); }
  24% { opacity:.34;transform:translateY(-13px); }
  35% { opacity:.08;transform:translateY(-11px); }
  47% { opacity:.68;transform:translateY(-8px); }
  57% { opacity:.12;transform:translateY(-6px); }
  68% { opacity:.82;transform:translateY(-3px); }
  78%,90% { opacity:0;transform:translateY(0); }
}
.demo-trade-panel { padding:14px;border:1px solid rgba(8,151,72,.2);border-top:0;border-radius:0 0 16px 16px;background:linear-gradient(145deg,#fff 45%,#f1faf4);box-shadow:0 12px 24px rgba(32,54,42,.15); }
.demo-trade-panel-heading { margin:0 2px 12px;text-align:center; }
.demo-trade-panel-heading small { display:block;color:#ed7a00;font-size:.66rem;font-weight:1000;letter-spacing:.12em; }
.demo-trade-panel-heading h2 { margin:3px 0 0;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:1000;line-height:1.3; }
.demo-trade-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px; }
.demo-current-pnl-mobile { display:none; }
.demo-trade-summary>div { min-width:0;padding:8px 10px;border:1px solid #e3e9e5;border-radius:10px;background:#fff;text-align:center; }
.demo-trade-summary>.demo-current-balance { display:grid;min-height:68px;place-items:center;border-color:rgba(18,108,177,.25);background:rgba(18,108,177,.055);transition:background .2s ease,border-color .2s ease; }
.demo-trade-summary small,.demo-position-heading small,.demo-market-price small { display:block;color:#777d87;font-size:.68rem;font-weight:800; }
.demo-trade-summary strong { display:block;margin-top:2px;overflow:hidden;color:#22272c;font-size:.95rem;font-weight:1000;text-overflow:ellipsis;white-space:nowrap; }
.demo-trade-summary>.demo-current-balance strong { width:100%;margin:0;color:#126cb1;font-size:clamp(1.5rem,4vw,2.35rem);line-height:1.05;transition:color .2s ease; }
.demo-trade-summary>.demo-current-balance strong.is-wide-amount { font-size:clamp(1.3rem,3.15vw,2rem);letter-spacing:-.055em; }
.demo-trade-summary>.demo-current-balance strong.is-extra-wide-amount { font-size:clamp(1.16rem,2.7vw,1.75rem);letter-spacing:-.075em; }
.demo-order-view { display:grid;grid-template-columns:minmax(170px,1fr) minmax(360px,1.7fr) minmax(170px,1fr);align-items:stretch;gap:12px; }
.demo-side-button { display:grid;align-content:center;justify-items:center;min-height:116px;padding:10px;border:0;border-radius:14px;box-shadow:0 7px 16px rgba(34,39,45,.15);color:#fff;cursor:pointer;transition:transform .15s ease,filter .15s ease; }
.demo-side-button:hover { transform:translateY(-1px);filter:brightness(1.05); }
.demo-side-button:active { transform:translateY(1px) scale(.99); }
.demo-side-button:focus-visible,.demo-close-button:focus-visible,.demo-retry-button:focus-visible { outline:3px solid rgba(246,160,0,.6);outline-offset:2px; }
.demo-side-button:disabled { cursor:not-allowed;filter:grayscale(.35);opacity:.55;transform:none; }
.demo-side-button small { font-size:.7rem;font-weight:800;opacity:.86; }
.demo-side-button strong { font-size:1.55rem;font-weight:1000;line-height:1.15; }
.demo-side-button span { font-size:.67rem;font-weight:900;letter-spacing:.05em;opacity:.9; }
.demo-sell-button { background:linear-gradient(145deg,#ff4b55,#d9192a); }
.demo-buy-button { background:linear-gradient(145deg,#18b861,#07833f); }
.demo-order-controls { display:grid;grid-template-columns:1.4fr .8fr;gap:9px;padding:11px;border:1px solid #e1e8e3;border-radius:14px;background:#fff; }
.demo-order-controls label { display:grid;gap:4px;color:#60666e;font-size:.7rem;font-weight:900; }
.demo-order-controls select { width:100%;height:42px;padding:0 34px 0 11px;border:1px solid #d6dce0;border-radius:9px;background:#fff;color:#202429;font-size:.9rem;font-weight:900; }
.demo-market-price { grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:9px;background:#f2f5f3; }
.demo-market-price strong { font-size:1.02rem;font-weight:1000;white-space:nowrap; }
.demo-position-view { padding:13px;border:1px solid #dce4df;border-radius:14px;background:#fff; }
.demo-position-heading { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:11px; }
.demo-position-heading>div:first-child strong { display:block;margin-top:1px;font-size:1.25rem;font-weight:1000; }
.demo-unrealized { text-align:right; }
.demo-unrealized strong { display:block;margin-top:1px;font-size:1.35rem;font-weight:1000; }
.demo-unrealized.is-profit strong { color:#078f42; }
.demo-unrealized.is-loss strong { color:#dc2535; }
.demo-position-details { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 11px; }
.demo-position-details>div { min-width:0;padding:8px;border-radius:9px;background:#f4f6f5;text-align:center; }
.demo-position-details dt { color:#777d87;font-size:.67rem;font-weight:800; }
.demo-position-details dd { margin:3px 0 0;overflow:hidden;font-size:.87rem;font-weight:1000;text-overflow:ellipsis;white-space:nowrap; }
.demo-close-button,.demo-retry-button { width:100%;min-height:44px;padding:9px 12px;border:0;border-radius:10px;background:linear-gradient(135deg,#1693df,#126cb1);box-shadow:0 5px 12px rgba(18,108,177,.2);color:#fff;font-size:.9rem;font-weight:1000;cursor:pointer; }
.demo-retry-button { margin-top:10px;background:linear-gradient(135deg,#ff9d00,#ec7100);box-shadow:0 5px 12px rgba(236,113,0,.22); }
.demo-result { margin-top:10px;padding:10px 12px;border:1px solid #b9daf1;border-radius:10px;background:#edf8ff;color:#126ca8;font-size:.82rem;font-weight:900;text-align:center; }
.demo-trade-note { margin:10px 2px 0;color:#7b8189;font-size:.67rem;font-weight:700;line-height:1.55;text-align:center; }
.demo-storage-warning { margin:10px 2px 0;padding:9px 11px;border:1px solid rgba(220,37,53,.3);border-radius:9px;background:rgba(220,37,53,.07);color:#b51f2d;font-size:.68rem;font-weight:900;line-height:1.5;text-align:center; }
.storage-persistence-warning { position:fixed;z-index:1200;right:14px;bottom:max(14px,env(safe-area-inset-bottom));width:min(390px,calc(100% - 28px));padding:11px 13px;border:1px solid rgba(220,37,53,.34);border-radius:12px;background:rgba(255,247,248,.97);box-shadow:0 10px 30px rgba(73,22,29,.2);color:#a91f2c;font-size:.76rem;font-weight:900;line-height:1.5;text-align:center;backdrop-filter:blur(10px); }
.demo-confirm-dialog { width:min(430px,calc(100% - 28px));padding:0;border:0;border-radius:17px;box-shadow:0 24px 70px rgba(18,27,22,.32); }
.demo-confirm-dialog::backdrop { background:rgba(21,28,25,.55);backdrop-filter:blur(3px); }
.demo-confirm-dialog form { margin:0;padding:22px; }
.demo-confirm-kicker { margin:0 0 4px;color:#ed7a00;font-size:.7rem;font-weight:1000;letter-spacing:.12em; }
.demo-confirm-dialog h2 { margin:0 0 12px;font-size:1.28rem; }
.demo-confirm-dialog p:not(.demo-confirm-kicker) { margin:0;color:#535a62;font-size:.9rem;font-weight:700;line-height:1.7; }
.demo-confirm-actions { display:grid;grid-template-columns:1fr 1.25fr;gap:9px;margin-top:18px; }
.demo-confirm-actions button { min-height:44px;border:0;border-radius:10px;font-weight:1000;cursor:pointer; }
.demo-confirm-cancel { background:#edf0f2;color:#545b62; }
.demo-confirm-submit { background:linear-gradient(135deg,#12a457,#06793c);color:#fff; }
.demo-confirm-submit.is-sell { background:linear-gradient(135deg,#ff4b55,#d9192a); }
.demo-close-button:disabled { cursor:not-allowed;opacity:.55; }
.demo-trade.is-profit .demo-trade-toggle-figures { background:rgba(7,143,66,.09); }
.demo-trade.is-profit .demo-trade-toggle-balance { background:#e8f4ed; }
.demo-trade.is-profit .demo-trade-toggle-balance strong,
.demo-trade.is-profit .demo-trade-summary>.demo-current-balance strong { color:#078f42; }
.demo-trade.is-profit .demo-trade-summary>.demo-current-balance { border-color:rgba(7,143,66,.28);background:rgba(7,143,66,.06); }
.demo-trade.is-loss .demo-trade-toggle-figures { background:rgba(220,37,53,.09); }
.demo-trade.is-loss .demo-trade-toggle-balance { background:#f9e8ea; }
.demo-trade.is-loss .demo-trade-toggle-balance strong,
.demo-trade.is-loss .demo-trade-summary>.demo-current-balance strong { color:#dc2535; }
.demo-trade.is-loss .demo-trade-summary>.demo-current-balance { border-color:rgba(220,37,53,.28);background:rgba(220,37,53,.055); }
.demo-balance-value.balance-flash-up { animation:demoBalanceFlashUp .52s ease; }
.demo-balance-value.balance-flash-down { animation:demoBalanceFlashDown .52s ease; }
@keyframes demoBalanceFlashUp {
  0%,100% { filter:none;transform:scale(1); }
  24%,62% { color:#20f578;filter:drop-shadow(0 0 8px rgba(32,245,120,.88));transform:scale(1.055); }
}
@keyframes demoBalanceFlashDown {
  0%,100% { filter:none;transform:scale(1); }
  24%,62% { color:#ff3155;filter:drop-shadow(0 0 8px rgba(255,49,85,.84));transform:scale(1.055); }
}

@media (min-width: 721px) {
  .demo-trade-panel { padding:18px; }
  .demo-trade-summary { gap:12px;margin-bottom:15px; }
  .demo-trade-panel-heading { margin-bottom:15px; }
  .demo-trade-panel-heading h2 { font-size:1.45rem; }
  .demo-trade-summary>div { padding:10px 14px; }
  .demo-trade-summary strong { font-size:1.05rem; }
  .demo-trade-summary>.demo-current-balance { min-height:82px; }
  .demo-trade-summary>.demo-current-balance strong { font-size:clamp(1.85rem,3.5vw,2.75rem); }
  .demo-side-button { min-height:132px; }
  .demo-side-button strong { font-size:1.8rem; }
  .demo-order-controls { padding:15px;gap:12px; }
  .demo-order-controls select { height:48px;font-size:1rem; }
  .demo-market-price { padding:11px 13px; }
  .demo-market-price strong { font-size:1.15rem; }
  .demo-position-view { padding:18px; }
  .demo-position-heading>div:first-child strong { font-size:1.55rem; }
  .demo-unrealized strong { font-size:1.75rem; }
  .demo-position-details>div { padding:12px; }
  .demo-position-details dd { font-size:1rem; }
  .demo-close-button { min-height:50px;font-size:1rem; }
}
.feature-cta:hover { transform:translateY(-2px);filter:brightness(1.025); }
.my-chart-cta:hover { box-shadow:0 10px 25px rgba(196,109,0,.25),inset 0 1px 0 rgba(255,255,255,.82); }
.portfolio-cta:hover { box-shadow:0 10px 25px rgba(5,126,63,.27),inset 0 1px 0 rgba(255,255,255,.82); }
.feature-cta:active { transform:translateY(1px) scale(.992);filter:brightness(.985); }
.feature-cta:focus-visible { outline:3px solid rgba(246,160,0,.58);outline-offset:3px; }
.feature-cta-icon { display:grid;width:38px;height:38px;place-items:center;border-radius:50%;background:#fff;box-shadow:0 3px 11px rgba(36,45,40,.16),inset 0 0 0 1px rgba(255,255,255,.8); }
.my-chart-cta-icon { border:2px solid rgba(255,255,255,.92);background:linear-gradient(145deg,#ffad1f,#ee8200);box-shadow:0 0 0 3px rgba(255,255,255,.48),0 4px 12px rgba(192,99,0,.28); }
.my-chart-cta-icon svg { width:29px;height:29px;overflow:visible; }
.my-chart-star { fill:#fff5d8;stroke:#fff;stroke-width:1.4;stroke-linejoin:round; }
.my-chart-line { fill:none;stroke:#ed8100;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round; }
.portfolio-cta-icon { border:2px solid rgba(255,255,255,.92);background:linear-gradient(145deg,#18bd69,#078c46);box-shadow:0 0 0 3px rgba(255,255,255,.48),0 4px 12px rgba(5,126,63,.3); }
.portfolio-cta-icon svg { width:29px;height:29px;overflow:visible;transform:rotate(-90deg);filter:drop-shadow(0 1px 1px rgba(0,88,42,.16)); }
.portfolio-donut-base { fill:none;stroke:#fff;stroke-width:8; }
.portfolio-donut-segment { fill:none;stroke:#baf6d3;stroke-width:8;stroke-dasharray:29 71;stroke-linecap:butt; }
.portfolio-donut-core { fill:#0a9d51;stroke:rgba(255,255,255,.68);stroke-width:1; }
.feature-cta-copy { display:grid;min-width:0;justify-items:center;text-align:center; }
.feature-cta-title { display:flex;align-items:baseline;justify-content:center;gap:.16em;font-size:clamp(1rem,1.65vw,1.22rem);font-weight:1000;letter-spacing:.02em;line-height:1.14;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.74); }
.portfolio-sync-label {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:17px;
  margin-top:2px;
  padding:1px 8px;
  border:1px solid rgba(7,139,67,.24);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#07783c;
  font-size:.58rem;
  font-weight:1000;
  letter-spacing:.025em;
  line-height:1.2;
  box-shadow:0 2px 6px rgba(5,126,63,.1);
  white-space:nowrap;
}
.feature-cta-arrow {
  position:relative;
  display:block;
  width:34px;
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  color:currentColor;
  transform:scaleX(1.12);
  transform-origin:right center;
}
.feature-cta-arrow::before {
  content:"›";
  position:absolute;
  inset:0;
  color:currentColor;
  font-weight:300;
  opacity:0;
  pointer-events:none;
  text-align:right;
  animation:portfolioTapTrail 1.65s linear infinite;
  will-change:transform,opacity;
}
.portfolio-cta .feature-cta-arrow { color:#fff; }
@keyframes portfolioTapTrail {
  0%,12%,100% { opacity:0;transform:translateX(-15px); }
  24% { opacity:.34;transform:translateX(-13px); }
  35% { opacity:.08;transform:translateX(-11px); }
  47% { opacity:.7;transform:translateX(-8px); }
  57% { opacity:.12;transform:translateX(-6px); }
  68% { opacity:.86;transform:translateX(-3px); }
  78%,90% { opacity:0;transform:translateX(0); }
}

.gainer-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 91px;
  padding: 7px 5px 6px;
  border: 1px solid #e3e8e5;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff 10%, #f1faf4 100%);
  box-shadow: 0 3px 9px rgba(26, 67, 44, .1);
  animation: rankIn .32s ease both;
}

.gainer-icon-stage {
  position: relative;
  display: grid;
  width: 49px;
  height: 49px;
  place-items: center;
  isolation: isolate;
}

.gainer-icon {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #e4e7ea;
  border-radius: 50%;
  background: #fff;
}
.gainer-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gainer-icon span { display: grid; width: 100%; height: 100%; place-items: center; color: #fff; background: #59616c; font-size: .82rem; font-weight: 900; }
.gainer-icon.letter-icon { display: grid; place-items: center; color: #fff; background: #59616c; font-size: .72rem; font-weight: 900; }
.gainer-aura { display:none; }
.gainer-item.top-gainer,
.coin-card.top-gainer { --rank-glow:#ffd21a;--rank-glow-soft:rgba(255,197,0,.62); }
.gainer-item.top-gainer-2,
.coin-card.top-gainer-2 { --rank-glow:#a9c9df;--rank-glow-soft:rgba(93,139,170,.66); }
.gainer-item.top-gainer-3,
.coin-card.top-gainer-3 { --rank-glow:#df8a43;--rank-glow-soft:rgba(184,96,39,.58); }
.gainer-item.top-gainer .gainer-aura {
  position:absolute;
  z-index:0;
  inset:-4px;
  display:block;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 46% 48%,color-mix(in srgb,var(--rank-glow) 75%,white) 0 17%,var(--rank-glow-soft) 31%,transparent 68%),
    radial-gradient(ellipse at 67% 32%,var(--rank-glow-soft) 0 8%,transparent 39%),
    radial-gradient(ellipse at 29% 70%,var(--rank-glow-soft) 0 7%,transparent 36%);
  filter:blur(2.2px) saturate(1.06);
  opacity:.64;
  pointer-events:none;
  transform:scale(1.03);
  animation:rankAuraPulse 2.8s ease-in-out infinite;
  will-change:transform,opacity,filter;
}
.gainer-item.top-gainer .gainer-aura::before,
.gainer-item.top-gainer .gainer-aura::after {
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.gainer-item.top-gainer .gainer-aura::before {
  inset:-2px 5px 4px -3px;
  background:radial-gradient(ellipse at center,var(--rank-glow-soft) 0 14%,transparent 67%);
  filter:blur(6px);
  opacity:.76;
}
.gainer-item.top-gainer .gainer-aura::after {
  inset:3px -5px -3px 7px;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--rank-glow) 58%,transparent) 0 10%,transparent 64%);
  filter:blur(7px);
  opacity:.62;
}
.gainer-item.top-gainer-1 .gainer-aura { opacity:.86; }
.gainer-item.top-gainer-2 .gainer-aura { opacity:.78; }
.gainer-item.top-gainer-3 .gainer-aura { opacity:.7; }
.rank-star-field {
  position:absolute;
  z-index:4;
  display:none;
  width:calc(var(--icon-size) * 1.24);
  height:calc(var(--icon-size) * 1.24);
  top:calc(var(--icon-size) * -.12);
  left:calc(var(--icon-size) * -.12);
  overflow:visible;
  pointer-events:none;
}
.gainer-icon-stage>.rank-star-field { width:61px;height:61px;top:-6px;left:-6px; }
.top-gainer .rank-star-field {
  display:block;
}
.top-gainer-2 .rank-star-field { opacity:.88; }
.top-gainer-3 .rank-star-field { opacity:.82; }
.coin-card.demo-position-coin.top-gainer .rank-star-field { display:none; }
.rank-star-field i {
  --dust-x:0px;
  --dust-y:-7px;
  position:absolute;
  display:block;
  width:2.5px;
  height:2.5px;
  border-radius:50%;
  color:var(--rank-glow);
  background:currentColor;
  box-shadow:0 0 3px 1px currentColor;
  opacity:0;
  transform:translate3d(0,0,0) scale(.25);
  animation:rankDustDrift 1.15s ease-out infinite;
  will-change:transform,opacity;
}
.rank-star-field i:nth-child(3),
.rank-star-field i:nth-child(8) { width:5px;height:5px;border-radius:0;clip-path:polygon(50% 0,60% 39%,100% 50%,60% 61%,50% 100%,40% 61%,0 50%,40% 39%); }
.rank-star-field i:nth-child(1) { left:48%;top:0;--dust-x:0;--dust-y:-7px;animation-delay:0s; }
.rank-star-field i:nth-child(2) { left:76%;top:8%;--dust-x:5px;--dust-y:-6px;animation-delay:-.12s; }
.rank-star-field i:nth-child(3) { left:94%;top:31%;--dust-x:7px;--dust-y:-3px;animation-delay:-.24s; }
.rank-star-field i:nth-child(4) { left:96%;top:63%;--dust-x:7px;--dust-y:3px;animation-delay:-.36s; }
.rank-star-field i:nth-child(5) { left:75%;top:91%;--dust-x:5px;--dust-y:6px;animation-delay:-.48s; }
.rank-star-field i:nth-child(6) { left:44%;top:96%;--dust-x:-1px;--dust-y:7px;animation-delay:-.6s; }
.rank-star-field i:nth-child(7) { left:14%;top:83%;--dust-x:-6px;--dust-y:5px;animation-delay:-.72s; }
.rank-star-field i:nth-child(8) { left:0;top:54%;--dust-x:-7px;--dust-y:1px;animation-delay:-.84s; }
.rank-star-field i:nth-child(9) { left:7%;top:24%;--dust-x:-6px;--dust-y:-5px;animation-delay:-.96s; }
.rank-star-field i:nth-child(10) { left:24%;top:6%;--dust-x:-4px;--dust-y:-6px;animation-delay:-1.08s; }
.gainer-rank { position: absolute; z-index: 3; top: -18px; left: 1px; display: grid; width: 38px; height: 42px; place-items: center; padding: 0; border: 0; background: transparent; filter: drop-shadow(0 3px 3px rgba(20,40,55,.22)); font-size: 2rem; line-height: 1; text-align: center; }
.gainer-rank.medal {
  animation: medalShine 1.65s ease-in-out infinite;
}
.gainer-rank.medal::after { content:"✦"; position:absolute; top:7px; right:-1px; color:#fff; font-size:.72rem; opacity:.22; text-shadow:0 0 5px #fff; animation:medalSparkle 1.35s ease-in-out infinite; }
.gainer-rank b { position:absolute; z-index:2; left:50%; color:#fff; font-size:.62rem; font-weight:1000; line-height:1; -webkit-text-stroke:1.15px #111; paint-order:stroke fill; text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111,0 1px 2px #000; transform:translate(-50%,-50%); }
.gainer-rank.medal b { top:64%; font-size:.66rem; }
.gainer-rank.rank-medal b { top:70%; }
.gainer-symbol { display: block; max-width: 100%; margin-top: 4px; overflow: hidden; color: #34383e; font-size: .78rem; font-weight: 900; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.gainer-change { display: block; color: #078f40; font-size: .78rem; font-weight: 900; line-height: 1.1; text-align: center; white-space: nowrap; }
.gainer-item.negative { background: linear-gradient(145deg, #fff 10%, #fff5f3 100%); }
.gainer-item.negative .gainer-change { color: #cc3035; }

.actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
}

.column-switch {
  position:relative;display:flex;overflow:visible;border:0;border-radius:8px;background:none;box-shadow:none;
}

.column-switch button {
  width: 34px;
  height: 34px;
  border: 0;
  border-right: 1px solid #e1e4e8;
  background: #fff;
  color: #60656d;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
}

.column-switch button:last-child { border-right: 0; }
.column-switch button.active { background: #24272c; color: #fff; }
.column-picker-options{position:absolute;z-index:30;right:38px;top:0;display:none;overflow:hidden;border:1px solid rgba(8,142,67,.28);border-radius:8px;background:#fff;box-shadow:0 7px 20px rgba(7,48,32,.2)}
.column-picker.is-open .column-picker-options{display:flex}
.column-switch .column-picker-toggle{border:1px solid rgba(8,142,67,.28);border-radius:8px;background:linear-gradient(145deg,#fff 24%,#f3fbf6 100%);box-shadow:0 3px 9px rgba(7,133,62,.1);font-weight:900}
@media(max-width:720px){.column-picker-options [data-columns="5"]{display:none}}
@media(max-width:720px) and (orientation:portrait){.column-picker-options [data-columns="4"]{display:none}}
@media(max-height:720px) and (orientation:landscape){.column-picker-options [data-columns="5"]{display:none}}

.edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  min-width: 112px;
  padding: 0 14px 0 11px;
  border: 1px solid rgba(8, 142, 67, .34);
  border-radius: 11px;
  background: linear-gradient(145deg, #fff, #eef9f2);
  box-shadow:0 4px 10px rgba(7,133,62,.13),inset 0 0 3px rgba(21,186,91,.2),inset 0 0 11px rgba(21,186,91,.12),inset 0 1px 0 rgba(255,255,255,.9);
  color: #078b43;
  cursor: pointer;
  font-weight: 900;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.edit-button:hover { transform: translateY(-1px); border-color: rgba(8,142,67,.55); box-shadow:0 6px 13px rgba(7,133,62,.17),inset 0 0 4px rgba(21,186,91,.24),inset 0 0 13px rgba(21,186,91,.14),inset 0 1px 0 rgba(255,255,255,.92); }
.edit-button:focus-visible { outline: 3px solid rgba(8,142,67,.22); outline-offset: 2px; }
.edit-button-icon { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; }
.edit-button-icon svg { display: block; width: 100%; height: 100%; }
.edit-button .done-glyph { display: none; }
.edit-button[aria-pressed="true"] { border-color: #e27b00; background: linear-gradient(135deg,#ffa91f,#ed7900); box-shadow: 0 5px 13px rgba(226,123,0,.25), inset 0 1px 0 rgba(255,255,255,.28); color: #fff; }
.edit-button[aria-pressed="true"] .sort-glyph { display: none; }
.edit-button[aria-pressed="true"] .done-glyph { display: block; }
.edit-button[aria-pressed="true"]:focus-visible { outline-color: rgba(243,142,0,.3); }

.reorder-toolbar {
  position: fixed;
  z-index: 9000;
  top: max(9px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  width: min(610px, calc(100% - 24px));
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 7px 6px 16px;
  border: 1px solid rgba(8,142,67,.42);
  border-radius: 16px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 8px 24px rgba(21,73,45,.2), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  isolation: isolate;
  overscroll-behavior: contain;
  transform: translateX(-50%);
  animation: reorderToolbarIn .28s cubic-bezier(.2,.78,.24,1) both;
}
.reorder-toolbar[hidden] { display: none; }
.reorder-toolbar-status { display:inline-flex;min-width:0;align-items:center;gap:8px;color:#176238;font-size:.92rem;font-weight:950;white-space:nowrap; }
.reorder-toolbar-status-text { overflow:hidden;text-overflow:ellipsis; }
.reorder-toolbar-grip { color:#079447;font-size:1.35rem;line-height:1;transform:rotate(90deg); }
.reorder-toolbar-actions { display:inline-flex;flex:0 0 auto;align-items:center;gap:8px; }
.reorder-reset-button {
  display:inline-flex;
  min-width:136px;
  height:44px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 14px;
  border:1px solid rgba(8,142,67,.5);
  border-radius:12px;
  color:#087c40;
  background:linear-gradient(145deg,#fff,#f2fbf6);
  box-shadow:0 4px 11px rgba(7,133,62,.12),inset 0 1px 0 rgba(255,255,255,.95);
  cursor:pointer;
  font-size:.9rem;
  font-weight:950;
}
.reorder-reset-button svg { width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; }
.reorder-reset-button:hover { border-color:#078443;background:#eaf9f0; }
.reorder-reset-button:focus-visible { outline:3px solid rgba(8,142,67,.24);outline-offset:2px; }
.reorder-reset-button.is-selected { border-color:#087c40;color:#fff;background:linear-gradient(135deg,#0bad5c,#087b40);box-shadow:0 0 0 3px rgba(11,173,92,.14),0 5px 14px rgba(7,133,62,.27),inset 0 1px 0 rgba(255,255,255,.2); }
.reorder-done-button {
  display:inline-flex;
  min-width:112px;
  height:44px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 19px;
  border:1px solid #087c40;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,#0bad5c,#087b40);
  box-shadow:0 5px 13px rgba(7,133,62,.28),inset 0 1px 0 rgba(255,255,255,.22);
  cursor:pointer;
  font-size:1rem;
  font-weight:1000;
}
.reorder-done-button svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round; }
.reorder-done-button:hover { background:linear-gradient(135deg,#0cba63,#066f39);box-shadow:0 7px 16px rgba(7,133,62,.34),inset 0 1px 0 rgba(255,255,255,.25); }
.reorder-done-button:focus-visible { outline:3px solid rgba(243,152,0,.45);outline-offset:2px; }
.reorder-toolbar.is-dirty .reorder-done-button { box-shadow:0 0 0 3px rgba(11,173,92,.16),0 7px 18px rgba(7,133,62,.34),inset 0 1px 0 rgba(255,255,255,.25); }
.reorder-done-button.attention { animation:reorderDoneCue .62s cubic-bezier(.2,.78,.24,1); }

@keyframes reorderToolbarIn {
  from { opacity:0;transform:translate(-50%,-12px) scale(.97); }
  to { opacity:1;transform:translate(-50%,0) scale(1); }
}
@keyframes reorderHandleCue {
  0%,100% { transform:translateX(-50%) translateY(0); }
  18% { transform:translateX(-50%) translateY(-5px); }
  38% { transform:translateX(-50%) translateY(2px); }
  58% { transform:translateX(-50%) translateY(-4px); }
  78% { transform:translateX(-50%) translateY(1px); }
}
@keyframes reorderDoneCue {
  0%,100% { transform:scale(1); }
  38% { transform:scale(1.075);box-shadow:0 0 0 7px rgba(11,173,92,.16),0 9px 20px rgba(7,133,62,.38); }
}

main { width: min(1640px, 100%); margin: 0 auto; padding: clamp(8px, 1.25vw, 18px); }

.notice {
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid #f0d6a6;
  border-radius: 8px;
  background: #fff9ec;
  color: #74551e;
  font-size: .86rem;
}

.coin-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: clamp(7px, .8vw, 12px);
}
.reference-grid { margin-top: clamp(7px, .8vw, 12px); }
.reference-grid:empty { display: none; }

.coin-card {
  --icon-size: clamp(82px, 7vw, 108px);
  --change-bg: #f3f4f6;
  position: relative;
  min-width: 0;
  padding: clamp(10px, 1.25vw, 16px);
  padding-bottom: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  box-shadow: 2px 2px 2px rgba(27,31,36,.24),5px 8px 14px rgba(27,31,36,.22);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.coin-card:hover { border-color: #d2d6db; box-shadow: 2px 3px 3px rgba(27,31,36,.27),6px 10px 18px rgba(27,31,36,.28); }
.coin-card:focus-visible { outline: 3px solid rgba(9, 148, 71, .2); outline-offset: 2px; }
.reference-card { border-color: #cfdbe2; background: linear-gradient(180deg,#fff 0%,#f8fbfc 100%); }
.reference-card .coin-symbol { font-size:clamp(2rem,2.7vw,2.65rem);letter-spacing:-.035em; }
.reference-card .coin-icon-shell.letter-icon { color: #126cb1; background: linear-gradient(145deg,#f2f8ff,#dceeff); box-shadow: inset 0 0 0 2px rgba(18,108,177,.2); }
.reference-card[data-id="reference-usd-jpy"] .coin-icon-shell.local-reference-icon {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: scale(.9);
  transform-origin: center;
}
.reference-card[data-id="reference-usd-jpy"] .coin-icon-shell.local-reference-icon .coin-icon {
  object-fit: cover;
}
.reference-card .coin-icon-shell.dollar-icon,
.reference-card .coin-icon-shell.yen-icon {
  color: #fff9cf;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(var(--icon-size) * .56);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 2px rgba(132, 79, 0, .45), 0 -1px 0 rgba(255, 255, 255, .62);
  border: max(2px, calc(var(--icon-size) * .035)) solid #e3a500;
  background: linear-gradient(145deg,#ffe96a 0%,#ffc400 44%,#e59400 100%);
  box-shadow:
    inset 0 0 0 max(3px, calc(var(--icon-size) * .075)) rgba(255, 225, 55, .6),
    inset 0 0 0 max(5px, calc(var(--icon-size) * .105)) rgba(177, 105, 0, .25),
    0 3px 8px rgba(166, 102, 0, .24);
}
.reference-card[data-id="reference-btc-usd"] .coin-icon-shell { box-shadow: inset 0 0 0 2px rgba(243,152,0,.22); }
.coin-card.demo-position-coin { z-index:3;overflow:visible; }
.coin-card.dragging {
  z-index: 7;
  opacity: .88;
  transform: translateY(-3px) scale(1.015);
  border-color: #1769e8;
  outline: 4px solid #1769e8;
  outline-offset: -4px;
  box-shadow: inset 0 0 0 4px #1769e8,2px 3px 3px rgba(23,105,232,.3),6px 11px 22px rgba(23,105,232,.28);
}
.coin-card.drop-target {
  z-index: 6;
  border-color: #ef4c3e;
  outline: 4px solid #ef4c3e;
  outline-offset: -4px;
  box-shadow: inset 0 0 0 4px #ef4c3e, 0 8px 24px rgba(239, 76, 62, .2);
}

.drag-handle {
  position: absolute;
  z-index: 4;
  top: 8px;
  left: 50%;
  display: none;
  width: 54px;
  height: 36px;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  border: 1px solid rgba(8,142,67,.34);
  border-radius: 11px;
  color: #078b43;
  background: linear-gradient(145deg,#fff,#eaf8ef);
  box-shadow: 0 4px 10px rgba(7,133,62,.14),inset 0 1px 0 #fff;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform .15s ease,background .15s ease,box-shadow .15s ease;
}
.drag-handle svg { display:block;width:23px;height:23px;fill:currentColor; }

.editing .coin-card { padding-top: 50px; }
.editing .coin-card:not(.dragging):not(.drop-target) { transform:translateY(-1px);box-shadow:2px 3px 3px rgba(27,31,36,.28),7px 11px 17px rgba(27,31,36,.3); }
.editing .drag-handle { display: flex; }
.coin-grid.drag-cue .drag-handle { animation:reorderHandleCue .95s ease-in-out; }
.drag-handle:hover { background:linear-gradient(145deg,#fff,#dcf3e5);box-shadow:0 6px 13px rgba(7,133,62,.18),inset 0 1px 0 #fff; }
.drag-handle:active { cursor: grabbing; transform:translateX(-50%) scale(.95);background:#d8f0e1; }

.coin-heading { position: relative; z-index: 2; min-height: var(--icon-size); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.coin-identity { position:relative;z-index:0;display:flex;width:100%;align-items:flex-start;gap:14px;min-width:0;overflow:visible;isolation:isolate; }
.coin-identity > div:last-child { min-width: 0; flex: 1; padding-top: 3px; }

.chart-position-flame {
  position:absolute;
  z-index:2;
  top:calc(var(--icon-size) * -.42);
  left:calc(var(--icon-size) * -.275);
  display:none;
  width:calc(var(--icon-size) * 1.55);
  aspect-ratio:1;
  background-image:url("/demo-position-fire-v2.webp");
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:400% 200%;
  filter:drop-shadow(0 2px 5px rgba(255,70,0,.46));
  pointer-events:none;
  transform-origin:50% 76%;
  backface-visibility:hidden;
  contain:paint;
  will-change:background-position,transform;
}
.coin-card.demo-position-coin .chart-position-flame {
  display:block;
  animation:demoFlameSprite 1s steps(1,end) infinite,demoFlameBreathe 2.4s steps(12,end) infinite alternate;
}

.coin-icon-shell {
  position: relative;
  z-index:3;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #eceef0;
  border-radius: 50%;
  background: var(--soft);
}
.coin-icon-shell.letter-icon { display: grid; place-items: center; color: #fff; background: #59616c; font-size: 1.75rem; font-weight: 900; }

.coin-icon { display: block; width: 100%; height: 100%; object-fit: cover; }
.coin-card[data-id="flare-networks"] .coin-icon-shell {
  border: 0;
  background: transparent;
}
.coin-card[data-id="shiba-inu"] .coin-icon-shell {
  overflow:visible;
  border-color:transparent;
  background:transparent;
}

.gainer-item.top-gainer .gainer-icon,
.coin-card.top-gainer .coin-icon-shell {
  border-color:color-mix(in srgb,var(--rank-glow) 52%,#e4e7ea);
  box-shadow:0 0 6px 1px var(--rank-glow-soft),inset 0 0 5px rgba(255,255,255,.28);
}

.gainer-item.top-gainer .gainer-icon {
  border-color:color-mix(in srgb,var(--rank-glow) 48%,#e4e7ea);
  box-shadow:0 0 5px 1px var(--rank-glow-soft),inset 0 0 5px rgba(255,255,255,.3);
}

/* A held demo position keeps the flame as its only surrounding effect.
   Icon-local motion and the diagonal shine remain active inside the flame. */
.coin-card.demo-position-coin.top-gainer .coin-icon-shell {
  border-color:#eceef0;
  box-shadow:none;
}

.gainer-item.top-gainer .gainer-icon::after,
.coin-card.top-gainer .coin-icon-shell::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -30%;
  bottom: -30%;
  left: -54%;
  width: 44%;
  pointer-events: none;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.18) 18%,color-mix(in srgb,var(--rank-glow) 46%,white) 34%,#fff 47%,#fff 56%,color-mix(in srgb,var(--rank-glow) 58%,white) 69%,rgba(255,255,255,.18) 84%,transparent 100%);
  mix-blend-mode: screen;
  transform: translate3d(-80%,0,0) skewX(-19deg);
  will-change: transform, opacity;
  animation: topCoinSweep 2.05s linear infinite;
}

/* The current leader runs first, then holds still while the existing gold
   sweep catches it. Both the TOP10 icon and its chart card use this cycle. */
.gainer-item.top-gainer-1 .gainer-icon img,
.coin-card.top-gainer-1 .coin-icon {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
  animation: topLeaderRun 4.8s linear infinite;
}

.gainer-item.top-gainer-1 .gainer-icon::after,
.coin-card.top-gainer-1 .coin-icon-shell::after {
  animation: topLeaderSweep 4.8s ease-in-out infinite;
}

.top-gainer-2 .gainer-icon::after,
.coin-card.top-gainer-2 .coin-icon-shell::after { animation-delay: .14s; }

.top-gainer-3 .gainer-icon::after,
.coin-card.top-gainer-3 .coin-icon-shell::after { animation-delay: .28s; }
.coin-symbol-row { position:relative;display:flex;width:100%;min-width:0;align-items:center;justify-content:flex-end;gap:clamp(5px,.55vw,9px);overflow:visible; }
.coin-symbol { max-width:100%;padding-right:0;overflow:hidden;font-size:clamp(2rem,2.7vw,2.65rem);font-weight:1000;letter-spacing:-.035em;line-height:1;text-align:right;text-overflow:clip;white-space:nowrap;transform:skewX(-12deg);transform-origin:right center; }
.tick-arrow {
  position:absolute;
  z-index:7;
  top:0;
  bottom:0;
  right:auto;
  left:clamp(4px,.65vw,10px);
  display: block;
  width: clamp(22px, 2.15vw, 34px);
  height: clamp(28px, 3.1vw, 46px);
  margin:auto 0;
  flex: 0 0 auto;
  opacity: 0;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 45%, 72% 45%, 72% 100%, 28% 100%, 28% 45%, 0 45%);
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.coin-card.tick-up .tick-arrow { color: #20f578; animation: tickArrowUp .8s ease-out both; }
.coin-card.tick-down .tick-arrow {
  color: #ff3155;
  clip-path: polygon(28% 0, 72% 0, 72% 55%, 100% 55%, 50% 100%, 0 55%, 28% 55%);
  animation: tickArrowDown .8s ease-out both;
}
.coin-card.tick-up .change { animation: changeFlashUp .8s ease-out; }
.coin-card.tick-down .change { animation: changeFlashDown .8s ease-out; }
.coin-name { display: none; }

.currency {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 6px;
  border-radius: 5px;
  background: var(--soft);
  color: #777c84;
  font-size: .66rem;
  font-weight: 700;
}
.currency.live-source { background: #e7f7ed; color: #078a3d; }
.currency.bitflyer-source { background: #fff0f5; color: #d31364; }

.change-strip {
  position:relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: clamp(52px, 4.5vw, 64px);
  margin: calc(var(--icon-size) * -.62) calc(clamp(10px, 1.25vw, 16px) * -1) 0 calc(var(--icon-size) + 12px);
  padding: 3px clamp(12px, 1.4vw, 20px);
  background: var(--change-bg);
}
.change {
  font-size: clamp(2.23rem, 3.7vw, 3.32rem);
  font-weight: 900;
  letter-spacing: -.045em;
  white-space: nowrap;
  line-height: 1;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
.positive .change { color: #078b36; }
.negative .change { color: #d51d23; }
.positive[data-band-level="high"] .change { color:#006f4e; }
.positive[data-band-level="extreme"] .change { color:#005d68;filter:drop-shadow(0 0 4px rgba(53,232,255,.42)); }
.negative[data-band-level="high"] .change,
.negative[data-band-level="extreme"] .change { color:#fff;text-shadow:-1px -1px 0 #64152f,1px -1px 0 #64152f,-1px 1px 0 #64152f,1px 1px 0 #64152f; }
.negative[data-band-level="extreme"] .change { filter:drop-shadow(0 0 4px rgba(255,73,119,.36)); }

.chart-wrap { margin-top: 0; }
.sparkline { display: block; width: 100%; height: auto; aspect-ratio: 18 / 12; overflow: visible; }
.sparkline .plot-fill { opacity: .7; }
.sparkline .plot-fill-down { opacity: 1; }
.sparkline .price-line {
  fill: none;
  stroke: #153fe5;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sparkline .realtime-pencil-line {
  fill: none;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .96;
  filter: drop-shadow(0 0 1px rgba(28,109,255,.28));
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.sparkline .pencil-start { stop-color: #174fe7; stop-opacity: 1; }
.sparkline .pencil-middle { stop-color: #174fe7; stop-opacity: 1; }
.sparkline .pencil-hold { stop-color: #174fe7; stop-opacity: 1; }
.sparkline .pencil-end { stop-color: #174fe7; stop-opacity: 1; }
.sparkline .price-range-mark {
  stroke: #153fe5;
  stroke-width: 1;
  stroke-linecap: round;
  opacity: .82;
  vector-effect: non-scaling-stroke;
}
.sparkline .candle-wick {
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}
.sparkline .candle-body {
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}
.sparkline .candle-wick.candle-up,
.sparkline .candle-body.candle-up { stroke:#078b43;fill:#10ad55; }
.sparkline .candle-wick.candle-down,
.sparkline .candle-body.candle-down { stroke:#d62332;fill:#ef3d49; }
.sparkline .candle-price-pencil {
  stroke-width:.7;
  opacity:.96;
  pointer-events:none;
  vector-effect:non-scaling-stroke;
}
.sparkline .candle-price-pencil.pencil-up {
  stroke:#078b43;
  fill:#10ad55;
  filter:drop-shadow(0 0 1px rgba(10,166,83,.38));
}
.sparkline .candle-price-pencil.pencil-down {
  stroke:#d62332;
  fill:#ef3d49;
  filter:drop-shadow(0 0 1px rgba(226,50,63,.35));
}
.sparkline .chart-indicator-line {
  fill:none;
  stroke-width:.72;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.92;
  pointer-events:none;
  vector-effect:non-scaling-stroke;
}
.sparkline .indicator-ma-short { stroke:#f39800; }
.sparkline .indicator-ma-long { stroke:#173f88; }
.sparkline .indicator-ichimoku-tenkan { stroke:#ee5a93; }
.sparkline .indicator-ichimoku-kijun { stroke:#1689c9; }
.sparkline .indicator-ichimoku-cloud {
  fill:rgba(30,185,101,.16);
  stroke:none;
  pointer-events:none;
}
.sparkline .grid-line {
  stroke: #45c8e8;
  stroke-width: 1.3;
  opacity: .88;
  vector-effect: non-scaling-stroke;
}
.sparkline .baseline-line {
  stroke: #ef2b2d;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}
.sparkline .baseline-label {
  fill: #d93025;
  stroke: #fff;
  stroke-width: 3px;
  paint-order: stroke fill;
  font-size: 16px;
  font-weight: 900;
}
.sparkline .extrema-line {
  stroke-width: 1;
  stroke-linecap: round;
  opacity: .9;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.sparkline .extrema-line-high { stroke: #21e875; }
.sparkline .extrema-line-low { stroke: #ff42ad; }
.sparkline .extrema-label {
  stroke: #fff;
  stroke-width: 2.5px;
  paint-order: stroke fill;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
  pointer-events: none;
}
.sparkline .extrema-label-high { fill: #14b95c; }
.sparkline .extrema-label-low { fill: #dc268c; }
.sparkline .grid-label {
  fill: #3189a3;
  font-size: 18px;
  font-weight: 900;
}
.sparkline .grid-label.grid-label--crowded { font-size: 16px; }
.sparkline .nonpositive-label { fill: #d82224; }
.sparkline .current-pointer {
  stroke: none;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 1.5px currentColor);
}
.sparkline .current-pointer.pointer-up { fill:#21e875;color:#21e875; }
.sparkline .current-pointer.pointer-down { fill:#ff42ad;color:#ff42ad; }
.sparkline .current-pointer.pointer-flat { fill:#35d9f3;color:#35d9f3; }

.card-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  margin-top: 0;
  line-height: 1;
}
.price { min-width: 0; font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 900; letter-spacing: -.045em; white-space: nowrap; }
.price-value { display: inline-block; color: #15171a; transition: color .12s ease, transform .12s ease, text-shadow .12s ease; }
.price.tick-up .price-value { color: #078f40; text-shadow: 0 0 8px rgba(7,143,64,.22); transform: scale(1.035); }
.price.tick-down .price-value { color: #d7272c; text-shadow: 0 0 8px rgba(215,39,44,.2); transform: scale(1.035); }
.card-price-row > span { color: #858a92; font-size: .7rem; font-weight: 800; }

.skeleton { min-height: 220px; }
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(245, 246, 248, .95), transparent);
  animation: shimmer 1.25s infinite;
}
.skeleton .coin-icon-shell, .skeleton .coin-symbol, .skeleton .coin-name, .skeleton .currency,
.skeleton .price, .skeleton .change, .skeleton .sparkline { color: transparent; background: #eff1f3; border-radius: 6px; }

footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-content: space-between;
  gap: 7px 18px;
  width: min(1640px, 100%);
  margin: 0 auto;
  padding: 8px clamp(14px, 3vw, 32px) max(22px, env(safe-area-inset-bottom));
  color: #959aa2;
  font-size: .72rem;
}

.source-note { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; }
.coingecko-credit { color: #347d20; font-size: .75rem; font-weight: 800; text-decoration: none; }
.coingecko-credit:hover { text-decoration: underline; }
.icon-credit { color: #656b74; font-size: .7rem; text-decoration: none; }
.icon-credit:hover { text-decoration: underline; }
.disclaimer { grid-column: 1 / -1; margin: 0; line-height: 1.55; }
.legal-links { display: flex; align-items: center; gap: 13px; white-space: nowrap; }
.legal-links a { color: #656b74; font-size: .75rem; font-weight: 700; text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }
.legal-links .guide-link {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 6px 13px 6px 8px;
  border: 1px solid #087b3b;
  border-radius: 999px;
  background: linear-gradient(135deg, #13a552, #087c3e);
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  box-shadow: 0 3px 9px rgba(5, 119, 56, .22);
}
.legal-links .guide-link span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  color: #087c3e;
  font-size: .76rem;
  line-height: 1;
}
.legal-links .guide-link:hover { text-decoration: none; filter: brightness(1.05); }

@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes livePulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes rankIn { from { opacity: .35; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes medalShine {
  0%, 100% { filter: drop-shadow(0 3px 3px rgba(20,40,55,.22)) brightness(1); transform:scale(1); }
  35% { filter: drop-shadow(0 3px 5px rgba(255,205,40,.48)) brightness(1.13); transform:scale(1.035); }
  65% { filter: drop-shadow(0 3px 4px rgba(255,255,255,.42)) brightness(1.05); transform:scale(1.012); }
}
@keyframes medalSparkle { 0%,100% { opacity:.18; transform:scale(.52) rotate(0); } 50% { opacity:1; transform:scale(1.2) rotate(34deg); } }
@keyframes rankAuraPulse {
  0%,100% { transform:translate3d(-.5px,.5px,0) scale(.99);filter:blur(2.5px) brightness(.94) saturate(1); }
  48% { transform:translate3d(.5px,-.5px,0) scale(1.035);filter:blur(2px) brightness(1.14) saturate(1.08); }
}
@keyframes rankDustDrift {
  0% { opacity:0;transform:translate3d(0,0,0) scale(.25); }
  16% { opacity:1;transform:translate3d(0,0,0) scale(1); }
  48% { opacity:.72; }
  68%,100% { opacity:0;transform:translate3d(var(--dust-x),var(--dust-y),0) scale(.42); }
}
@keyframes topCoinSweep {
  0% { transform:translate3d(-80%,0,0) skewX(-19deg); opacity:0; }
  4% { opacity:1; }
  42% { opacity:1; }
  51.2% { transform:translate3d(650%,0,0) skewX(-19deg); opacity:0; }
  100% { transform:translate3d(650%,0,0) skewX(-19deg); opacity:0; }
}
@keyframes topLeaderRun {
  0%, 4% { transform:translate3d(0,0,0) rotate(0deg) scale(1); }
  28% { transform:translate3d(0,0,0) rotate(1080deg) scale(1.018); }
  31%, 100% { transform:translate3d(0,0,0) rotate(1080deg) scale(1); }
}
@keyframes topLeaderSweep {
  0%, 34% { transform:translate3d(-80%,0,0) skewX(-19deg); opacity:0; }
  38% { transform:translate3d(-80%,0,0) skewX(-19deg); opacity:1; }
  54% { transform:translate3d(650%,0,0) skewX(-19deg); opacity:1; }
  59%, 100% { transform:translate3d(650%,0,0) skewX(-19deg); opacity:0; }
}
@keyframes tickArrowUp {
  0% { opacity:0; transform:translateY(10px) scale(.72); filter:drop-shadow(0 0 0 transparent); }
  18%, 58% { opacity:1; transform:translateY(-2px) scale(1.12); filter:drop-shadow(0 0 7px #20f578); }
  100% { opacity:0; transform:translateY(-13px) scale(.92); filter:drop-shadow(0 0 2px rgba(32,245,120,.2)); }
}
@keyframes tickArrowDown {
  0% { opacity:0; transform:translateY(-10px) scale(.72); filter:drop-shadow(0 0 0 transparent); }
  18%, 58% { opacity:1; transform:translateY(2px) scale(1.12); filter:drop-shadow(0 0 7px #ff3155); }
  100% { opacity:0; transform:translateY(13px) scale(.92); filter:drop-shadow(0 0 2px rgba(255,49,85,.2)); }
}
@keyframes changeFlashUp {
  0%,100% { filter:none; }
  28%,58% { color:#20f578; filter:drop-shadow(0 0 7px rgba(32,245,120,.95)); transform:scale(1.035); }
}
@keyframes changeFlashDown {
  0%,100% { filter:none; }
  28%,58% { color:#ff3155; filter:drop-shadow(0 0 7px rgba(255,49,85,.9)); transform:scale(1.035); }
}

@media (max-width: 1100px) {
  .topbar { grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr); gap: 8px 10px; }
  .gainers-list { grid-template-columns: repeat(10, minmax(58px, 1fr)); gap: 5px; }
  .gainer-item { min-height: 84px; padding: 6px 3px 5px; }
  .gainer-icon-stage { width:43px;height:43px; }
  .gainer-symbol, .gainer-change { font-size: .68rem; }
  .coin-card { --icon-size: 78px; }
  .coin-symbol { font-size: 2rem; }
  .change { font-size: 2.45rem; }
  .price { font-size: 2rem; }
}

@media (max-width: 720px) {
  .board-switch-bar { grid-template-columns:1fr auto 1fr;min-height:62px;padding:max(6px,env(safe-area-inset-top)) 8px 6px;gap:5px; }
  .stockbull-switch-link { width:96px;height:40px;gap:4px;padding:4px 6px; }
  .stockbull-switch-link img { width:66px;height:25px; }
  .switch-direction { font-size:.88rem; }
  .current-board-brand { width:clamp(112px,30vw,148px);height:42px; }
  .board-theme-toggle { width:40px;height:40px;border-radius:11px; }
  .primary-site-nav { justify-content: flex-start; min-height: 42px; padding-inline: 7px; }
  .primary-site-nav a,
  .primary-site-nav .indicator-toggle { font-size: .76rem; }
  .install-app-button { min-height:37px;padding:7px 10px;font-size:.74rem; }
  .power-save-control { min-height: 37px; padding: 5px 10px; font-size: .75rem; }
  .power-save-toggle { width: 50px; height: 29px; }
  .power-save-thumb { width: 23px; height: 23px; }
  .power-save-toggle[aria-checked="true"] .power-save-thumb { transform: translateX(21px); }
  .install-app-prompt { grid-template-columns:40px minmax(0,1fr);gap:8px;padding:10px; }
  .install-app-prompt-icon { width:39px;height:39px;border-radius:12px;font-size:1.35rem; }
  .install-app-prompt-copy strong { font-size:.82rem; }
  .install-app-prompt-copy span { font-size:.7rem; }
  .install-app-prompt-actions { grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) auto; }
  .install-app-dialog-card { padding:22px 17px 18px; }
  .install-app-dialog-icon { width:52px;height:52px;font-size:1.75rem; }
  .install-app-steps li { font-size:.82rem; }
  .topbar { grid-template-columns: minmax(174px, 1fr) minmax(0, 1fr) 42px; grid-template-rows: auto auto auto auto auto; min-height: 240px; gap: 8px 6px; padding: max(6px, env(safe-area-inset-top)) 9px 7px; }
  .brand-stack { position: absolute; grid-column: auto; grid-row: auto; top: max(12px, calc(env(safe-area-inset-top) + 6px)); left: 50%; width: clamp(180px, 54vw, 225px); height: auto; transform: translateX(-50%); }
  .brand-logo { width: clamp(145px, 42vw, 180px); }
  .gainers-toggle { grid-row:4;grid-template-columns:38px minmax(0,1fr) 38px;min-height:44px;gap:7px;padding:4px 10px;border-radius:12px;font-size:.82rem; }
  .gainers-toggle-icon { width:34px;height:34px;padding:1.5px; }
  .gainers-toggle-arrow { right:15px;font-size:1.65rem; }
  .gainers-list { grid-column: 1 / -1; grid-row: 5; grid-template-columns: repeat(10, minmax(64px, 1fr)); min-height: 82px; gap: 5px; overflow-x: auto; padding: 3px 1px 2px; scrollbar-width: thin; }
  .feature-cta-row { grid-row:3;gap:6px; }
  .feature-cta { grid-template-columns:30px minmax(0,1fr) 22px;gap:5px;min-height:47px;padding:3px 7px;border-radius:13px; }
  .my-chart-cta { background:linear-gradient(90deg,#f39800 0%,rgba(243,152,0,.78) 21%,rgba(243,152,0,.18) 57%,#fff 100%); }
  .portfolio-cta { background:linear-gradient(90deg,#fff 0%,rgba(10,163,87,.18) 43%,rgba(10,163,87,.78) 79%,#0aa357 100%); }
  .feature-cta-icon { width:28px;height:28px; }
  .my-chart-cta-icon { border-width:2px;box-shadow:0 0 0 2px rgba(255,255,255,.42),0 3px 9px rgba(192,99,0,.25); }
  .my-chart-cta-icon svg { width:21px;height:21px; }
  .portfolio-cta-icon { border-width:2px;box-shadow:0 0 0 2px rgba(255,255,255,.42),0 3px 9px rgba(5,126,63,.27); }
  .portfolio-cta-icon svg { width:21px;height:21px; }
  .feature-cta-title { flex-direction:column;align-items:center;gap:0;font-size:clamp(.78rem,3.55vw,.93rem);line-height:1.02;white-space:normal; }
  .portfolio-cta .feature-cta-title { flex-direction:row;gap:.12em;font-size:clamp(.68rem,3vw,.8rem);white-space:nowrap; }
  .portfolio-sync-label { min-height:14px;margin-top:1px;padding:0 5px;font-size:clamp(.47rem,2vw,.55rem); }
  .feature-cta-arrow { width:22px;font-size:1.85rem; }
  .demo-trade { grid-row:2; }
  .demo-trade-toggle { grid-template-columns:40px minmax(0,1fr) minmax(118px,44%) 26px;gap:7px;min-height:59px;padding:5px 9px;border-radius:13px;background:linear-gradient(90deg,#f39800 0%,#f39800 34%,rgba(243,152,0,.7) 41%,rgba(243,152,0,.14) 49%,#fff 55%,rgba(10,163,87,.15) 67%,rgba(10,163,87,.7) 91%,#0aa357 100%); }
  .demo-trade.is-open .demo-trade-toggle { border-radius:13px 13px 0 0; }
  .demo-trade-toggle-icon { width:38px;height:38px;border-radius:10px; }
  .demo-trade-toggle-icon>img { border-radius:9px; }
  .demo-trade-flames { inset:-15px -11px -7px; }
  .demo-trade-toggle-copy strong { font-size:.87rem; }
  .demo-trade-toggle-copy small { font-size:.57rem; }
  .demo-trade-toggle-status { font-size:.58rem; }
  .demo-trade-toggle-figures { display:block;min-height:48px;background:transparent;overflow:visible; }
  .demo-trade-toggle-pnl { display:none; }
  .demo-trade-toggle-balance { min-width:0;min-height:48px;padding-inline:4px; }
  .demo-trade-toggle-balance small { font-size:.55rem; }
  .demo-trade-toggle-balance strong { font-size:clamp(1.2rem,6.2vw,1.75rem);letter-spacing:-.06em; }
  .demo-trade-toggle-balance strong.is-wide-amount { font-size:clamp(1.08rem,5.3vw,1.48rem);letter-spacing:-.075em; }
  .demo-trade-toggle-balance strong.is-extra-wide-amount { font-size:clamp(1rem,4.8vw,1.34rem);letter-spacing:-.085em; }
  .demo-trade-toggle-arrow { font-size:1.65rem; }
  .demo-trade-panel { padding:10px 8px; }
  .demo-trade-summary { grid-template-columns:repeat(2,1fr);gap:5px;margin-bottom:8px; }
  .demo-current-pnl-mobile { display:grid;min-height:58px;align-content:center;justify-items:center; }
  .demo-current-pnl-mobile strong { display:block;width:100%;margin-top:2px;color:#126cb1;font-size:clamp(1.05rem,5.4vw,1.45rem);font-weight:1000;line-height:1.05;letter-spacing:-.035em;white-space:nowrap;transition:color .2s ease,font-size .2s ease; }
  .demo-current-pnl-mobile strong.is-wide-amount { font-size:clamp(.98rem,4.8vw,1.28rem);letter-spacing:-.065em; }
  .demo-current-pnl-mobile strong.is-extra-wide-amount { font-size:clamp(.92rem,4.35vw,1.16rem);letter-spacing:-.08em; }
  .demo-trade-summary>div { padding:7px 4px; }
  .demo-trade-summary>.demo-current-balance { min-height:58px; }
  .demo-trade-summary>.demo-current-balance strong { font-size:clamp(1.05rem,5.4vw,1.45rem); }
  .demo-trade-summary small { font-size:.59rem; }
  .demo-trade-summary strong { font-size:.75rem; }
  .demo-order-view { grid-template-columns:1fr 1fr;gap:7px; }
  .demo-order-controls { grid-column:1 / -1;grid-row:1;grid-template-columns:1.4fr .8fr;padding:8px; }
  .demo-sell-button { grid-column:1;grid-row:2; }
  .demo-buy-button { grid-column:2;grid-row:2; }
  .demo-side-button { min-height:70px; }
  .demo-side-button strong { font-size:1.3rem; }
  .demo-market-price { padding:7px 8px; }
  .demo-market-price strong { font-size:.87rem; }
  .demo-position-details { gap:5px; }
  .demo-position-details>div { padding:7px 3px; }
  .demo-position-details dd { font-size:.72rem; }
  .demo-trade-note { font-size:.61rem; }
  .gainer-item { min-height: 78px; }
  .gainer-rank.medal {
    top: -15px;
    left: 1px;
    width: 33px;
    height: 37px;
    font-size: 1.72rem;
  }
  .gainer-rank.rank-medal { top:-15px; width:33px; height:37px; font-size:1.72rem; }
  .gainer-rank.rank-medal b { top:70%; font-size:.52rem; }
  .gainer-icon-stage { width:39px;height:39px; }
  .live-panel { grid-column: 1; grid-row: 1; display: grid; align-self: center; justify-items: start; gap: 7px; }
  .live-summary { gap: 6px; }
  .live-status { font-size: .75rem; }
  .live-status i { width: 8px; height: 8px; }
  .live-panel p { font-size: .7rem; }
  .currency-switch,
  .chart-mode-switch { border-radius: 10px; }
  .currency-switch button { min-width: 45px; height: 36px; padding: 0 8px; font-size: .7rem; }
  .chart-mode-switch button { min-width:34px;height:36px;padding:0 5px; }
  .chart-mode-icon { width:22px;height:22px; }
  .header-utility-controls { gap:6px; }
  .theme-toggle { width: 42px; height: 38px; border-radius: 10px; }
  .theme-icon { width: 21px; height: 21px; }
  .music-toggle { width: 42px; height: 38px; padding: 0; border-radius: 10px; font-size: .76rem; }
  .music-note { font-size: 1.3rem; -webkit-text-stroke-width: .55px; }
  .music-menu { left:calc(100% + 6px); gap:3px; padding:4px; border-radius:11px; }
  .music-menu button { min-width:40px; height:34px; padding:0 7px; border-radius:8px; font-size:.74rem; }
  .actions { grid-column: 3; grid-row: 1; }
  .edit-label { display: none; }
  .edit-button { width: 40px; min-width: 40px; padding: 0; }
  .reorder-toolbar { top:max(7px,env(safe-area-inset-top));width:calc(100% - 18px);min-height:54px;gap:7px;padding:5px 6px 5px 11px;border-radius:15px; }
  .reorder-toolbar-status { gap:6px;font-size:.84rem; }
  .reorder-toolbar-grip { font-size:1.22rem; }
  .reorder-toolbar-actions { gap:5px; }
  .reorder-reset-button { min-width:116px;height:44px;padding-inline:9px;font-size:.8rem; }
  .reorder-reset-button svg { width:17px;height:17px; }
  .reorder-done-button { min-width:92px;height:44px;padding-inline:12px;font-size:.94rem; }
  .coin-grid { gap: 9px; }
  .coin-card {
    --icon-size: clamp(62px, 17vw, 76px);
    padding: clamp(8px, 2.4vw, 10px);
    padding-bottom: 5px;
    border-radius: 9px;
  }
  .coin-heading { gap: 0; }
  .coin-identity { gap: clamp(5px, 1.6vw, 8px); }
  .coin-identity > div:last-child { padding-top: 2px; }
  .coin-symbol {
    max-width: 100%;
    padding-right: 0;
    font-size: clamp(1.25rem, 5.8vw, 1.65rem);
  }
  .reference-card .coin-symbol-row { gap: 2px; }
  .reference-card .coin-symbol { max-width:100%;overflow:hidden;font-size:clamp(1.25rem,5.8vw,1.65rem);letter-spacing:-.035em;text-overflow:clip; }
  .tick-arrow { width:clamp(18px, 5vw, 23px); height:clamp(21px, 6vw, 28px); }
  .change-strip {
    min-height: clamp(38px, 10.8vw, 44px);
    margin: calc(var(--icon-size) * -.6) calc(clamp(8px, 2.4vw, 10px) * -1) 0 calc(var(--icon-size) + 7px);
    padding: 2px clamp(5px, 1.8vw, 8px);
  }
  .change { font-size: clamp(1.42rem, 6.75vw, 1.91rem); }
  .chart-wrap { margin-top: 0; }
  .sparkline { height: auto; }
  .sparkline .grid-label { font-size: 18px; font-weight: 900; }
  .sparkline .baseline-label { font-size: 16px; }
  .card-price-row { gap: 4px; }
  .price { font-size: clamp(1.28rem, 5.7vw, 1.65rem); }
  .card-price-row > span { font-size: .62rem; }
  footer { grid-template-columns: 1fr; padding-top: 7px; }
  .legal-links { grid-row: 2; flex-wrap: wrap; }
  .disclaimer { grid-row: 3; }
}

/* Shared compact utility row: keep social shortcuts visible beside power saving. */
.primary-site-nav{justify-content:flex-start;gap:7px;padding-block:2px}
.primary-site-nav .power-save-control{border-radius:11px}
.primary-site-nav .x-nav-link,.primary-site-nav .youtube-nav-link,.primary-site-nav .line-nav-link{display:inline-flex;width:44px;height:44px;min-height:44px;align-items:center;justify-content:center;flex:0 0 44px;padding:0;border-radius:11px}
.primary-site-nav .indicator-toggle{display:inline-flex;min-height:41px;align-items:center;justify-content:center;padding:6px 14px;border-radius:11px;font-size:.88rem}
.primary-site-nav .x-nav-icon{box-sizing:border-box;width:40px;height:40px;margin-right:0;padding:8px;border-radius:8px;background:#000;box-shadow:none}
.primary-site-nav .youtube-nav-icon{box-sizing:border-box;width:40px;height:40px;margin-right:0;align-items:center;justify-content:center;border-radius:8px;background:#fff}
.primary-site-nav .youtube-nav-icon svg{width:24px;height:18px;flex:none}
.primary-site-nav .line-nav-link img{display:block;width:40px;height:40px;max-width:none;object-fit:contain;flex:none;filter:none}
@media(max-width:720px){
  .primary-site-nav{gap:6px;padding:2px 7px}
  .primary-site-nav .power-save-control{min-height:37px;border-radius:10px}
  .primary-site-nav .x-nav-link,.primary-site-nav .youtube-nav-link,.primary-site-nav .line-nav-link{border-radius:10px}
  .primary-site-nav .indicator-toggle{min-height:43px;padding:6px 12px;border-radius:10px;font-size:.82rem}
}

@media (min-width:721px) and (max-width:900px){.coin-grid{gap:9px}}
@media(max-width:980px){.learning-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.learning-hub{margin-top:20px;padding:18px 13px}.learning-hub-toggle{align-items:flex-start;gap:9px}.learning-hub-heading{display:block}.learning-hub-description{display:block;margin-top:8px}.learning-hub-toggle-meta>span:first-child{display:none}.learning-hub-chevron{width:30px;height:30px}.learning-card-grid{grid-template-columns:1fr;gap:9px}.learning-card{min-height:94px;padding:13px}.learning-card-icon{width:42px;height:42px;flex-basis:42px}}
@media(prefers-reduced-motion:reduce){.learning-hub-collapse,.learning-hub-chevron{transition:none}}

@media (max-width: 370px) {
  .gainer-icon-stage { width:37px;height:37px; }
  .coin-card { --icon-size: 46px; padding: 7px; }
  .coin-identity { gap: 5px; }
  .coin-symbol { font-size: 1.2rem; }
  .change-strip {
    min-height: 36px;
    margin: -27px -7px 0 52px;
    padding-inline: 4px;
  }
  .change { font-size: clamp(1.42rem, 6.75vw, 1.91rem); }
  .sparkline { height: 90px; }
  .price { font-size: 1.2rem; }
}

@media (max-width: 720px) and (orientation: portrait) {
  .chart-wrap { margin-top: 0; }
  /* Match the taller chart viewBox without adding letterboxing. */
  .sparkline { height: auto; aspect-ratio: 18 / 12; }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .demo-trade-toggle-arrow::before,
  .gainers-toggle-arrow::before,
  .feature-cta-arrow::before,
  .pulse-entry-arrow::before { display:none !important; }
  .gainer-rank.medal { animation: none !important; }
  .gainer-item.top-gainer .gainer-aura { animation:none !important; }
  .rank-star-field { display:none !important; }
  .coin-grid.drag-cue .drag-handle,
  .reorder-toolbar,
  .reorder-done-button.attention { animation:none !important; }
}

/* Keep the visible experience unchanged while allowing Safari to stop
   compositing decorative layers that are outside the viewport or tab. */
.motion-paused,
.motion-paused *,
.motion-paused::before,
.motion-paused::after,
.motion-paused *::before,
.motion-paused *::after,
html.page-hidden *,
html.page-hidden *::before,
html.page-hidden *::after {
  animation-play-state:paused !important;
}

/* Power-saving mode keeps live values while pausing only moving layers.
   Keeping the icon animation layer alive prevents Safari from briefly
   dropping coin images when normal mode resumes. */
html[data-power-save="true"] .live-status.connected i,
html[data-power-save="true"] .gainer-rank.medal,
html[data-power-save="true"] .gainer-rank.medal::after,
html[data-power-save="true"] .gainer-item.top-gainer-1 .gainer-icon img,
html[data-power-save="true"] .coin-card.top-gainer-1 .coin-icon {
  animation-play-state: paused !important;
}
html[data-power-save="true"] .gainer-aura,
html[data-power-save="true"] .rank-star-field,
html[data-power-save="true"] .gainer-icon::after,
html[data-power-save="true"] .coin-icon-shell::after,
html[data-power-save="true"] .demo-trade-toggle-arrow::before,
html[data-power-save="true"] .gainers-toggle-arrow::before,
html[data-power-save="true"] .feature-cta-arrow::before {
  display: none !important;
}
html[data-power-save="true"] .demo-trade.has-position .demo-trade-flames,
html[data-power-save="true"] .coin-card.demo-position-coin .chart-position-flame {
  display:block !important;
  animation:none !important;
  background-position:0 0 !important;
}
html[data-power-save="true"] .tick-arrow { opacity: 0 !important; }
html[data-power-save="true"] .topbar { backdrop-filter: none; }
html[data-power-save="true"] .reorder-toolbar { backdrop-filter:none;animation:none; }
html[data-power-save="true"] .coin-grid.drag-cue .drag-handle,
html[data-power-save="true"] .reorder-done-button.attention { animation:none; }
html[data-power-save="true"] .coin-card { box-shadow:2px 2px 2px rgba(31,45,38,.22),5px 8px 12px rgba(31,45,38,.19); }
html[data-power-save="true"] .gainer-item.top-gainer .gainer-icon,
html[data-power-save="true"] .coin-card.top-gainer .coin-icon-shell { box-shadow: none; }
html[data-power-save="true"] .coin-icon,
html[data-power-save="true"] .gainer-icon img {
  opacity: 1 !important;
  visibility: visible !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Board dark theme */
html[data-theme="dark"] {
  --ink: #f3f7f5;
  --muted: #9ca8a2;
  --line: #2b3531;
  --panel: #151b1e;
  --soft: #222a2e;
  color-scheme: dark;
  background: #0b0f12;
}
html[data-theme="dark"] body { background: #0b0f12; color: var(--ink); }
html[data-theme="dark"] .topbar { border-color: #28332e; background: rgba(14,19,22,.96); box-shadow: 0 8px 28px rgba(0,0,0,.24); }
html[data-theme="dark"] .primary-site-nav { border-color: #28322e; background: #101619; }
html[data-theme="dark"] .install-app-button { border-color:rgba(255,174,45,.4);color:#ffc262;background:linear-gradient(145deg,#26231c,#1c1b17);box-shadow:0 3px 10px rgba(0,0,0,.28),inset 0 0 10px rgba(243,152,0,.1); }
html[data-theme="dark"] .install-app-prompt { border-color:rgba(52,203,119,.34);background:rgba(20,28,30,.97);box-shadow:0 14px 38px rgba(0,0,0,.55),inset 0 0 17px rgba(52,203,119,.06); }
html[data-theme="dark"] .install-app-prompt-copy strong { color:#f1f5f3; }
html[data-theme="dark"] .install-app-prompt-copy span { color:#abb5b0; }
html[data-theme="dark"] #installAppPromptLater { border-color:#3a4540;color:#c6ceca;background:#252d30; }
html[data-theme="dark"] .install-app-dialog { color:#f1f5f3;background:#171e21; }
html[data-theme="dark"] .install-app-close { border-color:#39443f;color:#c8d0cc;background:#252d30; }
html[data-theme="dark"] .install-app-lead { color:#aeb8b3; }
html[data-theme="dark"] .install-app-steps li { border-color:#35413b;color:#e4ebe7;background:linear-gradient(145deg,#20292c,#182124); }
html[data-theme="dark"] .install-app-note { color:#e7c77b;background:#2a2418; }
html[data-theme="dark"] .install-app-never { color:#aeb7b2; }
html[data-theme="dark"] .primary-site-nav a,
html[data-theme="dark"] .primary-site-nav .indicator-toggle { border-color:rgba(61,205,125,.34);color:#6adf9d;background:linear-gradient(145deg,#1b2521,#122019);box-shadow:0 3px 10px rgba(0,0,0,.28),inset 0 0 3px rgba(52,203,119,.2),inset 0 0 11px rgba(52,203,119,.1),inset 0 1px 0 rgba(255,255,255,.05); }
html[data-theme="dark"] .primary-site-nav a:hover,
html[data-theme="dark"] .primary-site-nav a:focus-visible,
html[data-theme="dark"] .primary-site-nav .indicator-toggle:hover,
html[data-theme="dark"] .primary-site-nav .indicator-toggle:focus-visible { border-color:rgba(82,221,143,.54);color:#8aebb2;background:linear-gradient(145deg,#213128,#14241c);box-shadow:0 4px 12px rgba(0,0,0,.34),inset 0 0 4px rgba(52,203,119,.25),inset 0 0 13px rgba(52,203,119,.14),inset 0 1px 0 rgba(255,255,255,.06); }
html[data-theme="dark"] .primary-site-nav .indicator-toggle[aria-pressed="true"] { border-color:#36d582;color:#fff;background:linear-gradient(135deg,#12a85d,#087d43); }
html[data-theme="dark"] .primary-site-nav .x-nav-link,
html[data-theme="dark"] .primary-site-nav .youtube-nav-link { border-color:rgba(61,205,125,.25);color:#eef4f1;background:linear-gradient(145deg,#20282b,#151b1e);box-shadow:0 3px 10px rgba(0,0,0,.3),inset 0 0 3px rgba(52,203,119,.16),inset 0 0 9px rgba(52,203,119,.08),inset 0 1px 0 rgba(255,255,255,.05); }
html[data-theme="dark"] .power-save-control { border-color:#35423c; color:#d6ded9; background:#171e21; box-shadow:0 2px 8px rgba(0,0,0,.24); }
html[data-theme="dark"] .power-save-toggle { background:#515a5e; }
html[data-theme="dark"] .power-save-toggle[aria-checked="true"] { background:#11a95c; }
html[data-theme="dark"] .power-save-state { color:#a9b3ae; }
html[data-theme="dark"] .power-save-toggle[aria-checked="true"] + .power-save-state { color:#69dc99; }
html[data-theme="dark"] .publisher-intro { border-color: #28332f; background: linear-gradient(145deg,#151b1e,#111719); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
html[data-theme="dark"] .publisher-intro > p:not(.publisher-kicker) { color: #b5beb9; }
html[data-theme="dark"] .publisher-links a { background: #193027; color: #65d493; }

html[data-theme="dark"] .currency-switch,
html[data-theme="dark"] .chart-mode-switch,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .music-toggle,
html[data-theme="dark"] .column-switch { border-color:#3b594a;background:linear-gradient(145deg,#1d2723,#131d18);box-shadow:0 3px 10px rgba(0,0,0,.28),inset 0 0 3px rgba(52,203,119,.2),inset 0 0 10px rgba(52,203,119,.1),inset 0 1px 0 rgba(255,255,255,.05); }
html[data-theme="dark"] .currency-switch button,
html[data-theme="dark"] .chart-mode-switch button,
html[data-theme="dark"] .column-switch button { border-color: #344039; background: #171e21; color: #b8c2bd; }
html[data-theme="dark"] .currency-switch button[aria-pressed="true"],
html[data-theme="dark"] .chart-mode-switch button[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg,#12a85d,#087d43); }
html[data-theme="dark"] .column-switch button.active { color: #0c1210; background: #dce6e1; }

@media(max-width:720px){
  html[data-columns="3"] .coin-card{--icon-size:46px;padding:6px 5px 4px}
  html[data-columns="3"] .coin-symbol{font-size:clamp(.9rem,4vw,1.08rem)}
  html[data-columns="3"] .change-strip{min-height:32px;margin:-28px -5px 0 51px;padding-inline:3px}
  html[data-columns="3"] .change{font-size:clamp(.92rem,4.2vw,1.12rem)}
  html[data-columns="3"] .price{font-size:clamp(.92rem,4vw,1.08rem)}
  html[data-columns="4"] .coin-grid{gap:5px}
  html[data-columns="4"] .coin-card{--icon-size:31px;padding:4px 3px 3px;border-radius:6px}
  html[data-columns="4"] .coin-identity{gap:2px}
  html[data-columns="4"] .coin-symbol{font-size:clamp(.62rem,2.8vw,.78rem);letter-spacing:-.06em}
  html[data-columns="4"] .change-strip{min-height:24px;margin:-19px -3px 0 34px;padding:1px 2px}
  html[data-columns="4"] .change{font-size:clamp(.68rem,3vw,.82rem)}
  html[data-columns="4"] .tick-arrow{left:2px;width:12px;height:17px}
  html[data-columns="3"] .sparkline .baseline-label{font-size:16px}
  html[data-columns="4"] .sparkline .baseline-label{font-size:16px}
  html[data-columns="4"] .card-price-row{gap:2px}
  html[data-columns="4"] .price{font-size:clamp(.68rem,3vw,.82rem)}
  html[data-columns="4"] .card-price-row>span{font-size:.42rem}
}

/* Keep card artwork proportional as density increases on every device. */
html[data-columns="3"] .coin-card{--icon-size:clamp(40px,6.2vw,68px)}
html[data-columns="4"] .coin-card{--icon-size:clamp(38px,5.4vw,58px)}
html[data-columns="5"] .coin-card{--icon-size:clamp(34px,4.4vw,50px)}
html[data-columns="3"] .coin-symbol{font-size:clamp(1rem,2.25vw,1.55rem)}
html[data-columns="4"] .coin-symbol{font-size:clamp(.88rem,1.75vw,1.3rem)}
html[data-columns="5"] .coin-symbol{font-size:clamp(.78rem,1.4vw,1.08rem)}
html[data-columns="3"] .change{font-size:clamp(1.15rem,2.7vw,1.8rem)}
html[data-columns="4"] .change{font-size:clamp(.98rem,2vw,1.45rem)}
html[data-columns="5"] .change{font-size:clamp(.85rem,1.6vw,1.2rem)}
html[data-columns="3"] .price{font-size:clamp(1rem,2.45vw,1.55rem)}
html[data-columns="4"] .price{font-size:clamp(.88rem,1.8vw,1.28rem)}
html[data-columns="5"] .price{font-size:clamp(.78rem,1.45vw,1.08rem)}
html[data-columns="3"] .card-price-row>span{font-size:.56rem}
html[data-columns="4"] .card-price-row>span,html[data-columns="5"] .card-price-row>span{font-size:.48rem}
html[data-theme="dark"] .theme-toggle { color: #ffd260; background: linear-gradient(145deg,#20282b,#151b1e); }
html[data-theme="dark"] .music-toggle { color: #62d796; background: linear-gradient(145deg,#20282b,#151b1e); }
html[data-theme="dark"] .music-toggle[aria-pressed="true"] { border-color:#24bd6d;color:#fff;background:linear-gradient(135deg,#11a95c,#087a42);box-shadow:0 3px 10px rgba(0,0,0,.32),0 0 13px rgba(28,199,105,.15); }
html[data-theme="dark"] .music-toggle:disabled { border-color:#4b5458;color:#9ba1a4;background:#2a3033;box-shadow:inset 0 1px 3px rgba(0,0,0,.28); }
html[data-theme="dark"] .music-toggle:disabled::after { background:#a0a5a8;box-shadow:0 0 0 1px rgba(0,0,0,.35); }
html[data-theme="dark"] .music-menu { border-color:#3b594a;background:linear-gradient(145deg,rgba(28,39,34,.98),rgba(18,29,23,.98));box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 0 3px rgba(52,203,119,.2),inset 0 0 11px rgba(52,203,119,.1); }
html[data-theme="dark"] .music-menu button { color:#69dc99;background:linear-gradient(145deg,rgba(35,49,42,.8),rgba(20,36,27,.8));box-shadow:inset 0 0 0 1px rgba(52,203,119,.12),inset 0 0 7px rgba(52,203,119,.08); }
html[data-theme="dark"] .music-menu button:hover { color:#fff; background:#193b2a; }
html[data-theme="dark"] .edit-button { border-color:rgba(52,203,119,.42);color:#54d38b;background:linear-gradient(145deg,#1b2521,#122019);box-shadow:0 4px 12px rgba(0,0,0,.28),inset 0 0 3px rgba(52,203,119,.21),inset 0 0 11px rgba(52,203,119,.11),inset 0 1px 0 rgba(255,255,255,.05); }
html[data-theme="dark"] .edit-button:hover { box-shadow:0 6px 16px rgba(0,0,0,.34),inset 0 0 4px rgba(52,203,119,.26),inset 0 0 13px rgba(52,203,119,.14),inset 0 1px 0 rgba(255,255,255,.07); }
html[data-theme="dark"] .edit-button[aria-pressed="true"] { border-color:#ef9518;color:#fff;background:linear-gradient(135deg,#ffa91f,#d96800);box-shadow:0 5px 14px rgba(0,0,0,.38),0 0 12px rgba(243,152,0,.15),inset 0 1px 0 rgba(255,255,255,.18); }
html[data-theme="dark"] .reorder-toolbar { border-color:rgba(67,211,130,.46);background:rgba(18,27,23,.97);box-shadow:0 9px 26px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06); }
html[data-theme="dark"] .reorder-toolbar-status { color:#dff7e9; }
html[data-theme="dark"] .reorder-toolbar-grip { color:#5bdb91; }
html[data-theme="dark"] .reorder-reset-button { border-color:rgba(67,211,130,.52);color:#72e2a1;background:linear-gradient(145deg,#202d27,#14221a);box-shadow:0 4px 12px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05); }
html[data-theme="dark"] .reorder-reset-button.is-selected { border-color:#34c276;color:#fff;background:linear-gradient(135deg,#11a95c,#087a42);box-shadow:0 0 0 3px rgba(28,199,105,.12),0 5px 15px rgba(0,0,0,.34); }
html[data-theme="dark"] .reorder-done-button { border-color:#34c276;background:linear-gradient(135deg,#11a95c,#087a42);box-shadow:0 5px 15px rgba(0,0,0,.38),0 0 13px rgba(28,199,105,.13); }

@media(max-width:360px){
  .reorder-toolbar-status-text{display:none}
}
html[data-theme="dark"] .gainers-toggle { border-color:rgba(52,203,119,.38);color:#eaf7ef;background:linear-gradient(145deg,#1b2521,#122019);box-shadow:0 3px 9px rgba(0,0,0,.25); }
html[data-theme="dark"] .gainers-toggle[aria-expanded="false"]::before { border-color:rgba(52,203,119,.4);box-shadow:inset 0 0 3px rgba(52,203,119,.22),inset 0 0 12px rgba(52,203,119,.13); }
html[data-theme="dark"] .gainers-toggle-icon { border-color:rgba(82,221,143,.52);background:radial-gradient(circle at 36% 30%,#24342c 0 42%,#14241c 100%);box-shadow:0 3px 9px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06); }

html[data-theme="dark"] .gainer-item { border-color: #2c3832; background: linear-gradient(145deg,#19211f 10%,#122019 100%); box-shadow: 0 4px 12px rgba(0,0,0,.28); }
html[data-theme="dark"] .gainer-item.negative { background: linear-gradient(145deg,#201b1d 10%,#241719 100%); }
html[data-theme="dark"] .gainer-symbol { color: #e7edea; }
html[data-theme="dark"] .gainer-change { color: #36d779; }
html[data-theme="dark"] .gainer-item.negative .gainer-change { color: #ff6870; }
html[data-theme="dark"] .gainer-icon { border-color: #3c4843; background: #20272a; }

html[data-theme="dark"] .coin-card { border-color: #2d373b; background: linear-gradient(165deg,#171e21,#121719); box-shadow:2px 2px 2px rgba(0,0,0,.72),5px 8px 14px rgba(0,0,0,.56); }
html[data-theme="dark"] .coin-card:hover { border-color: #41504a; box-shadow:2px 3px 3px rgba(0,0,0,.76),6px 10px 18px rgba(0,0,0,.64); }
html[data-theme="dark"] .editing .coin-card:not(.dragging):not(.drop-target) { box-shadow:2px 3px 3px rgba(0,0,0,.78),7px 11px 18px rgba(0,0,0,.66); }
html[data-theme="dark"] .coin-card.dragging { box-shadow:inset 0 0 0 4px #438df6,2px 3px 3px rgba(0,0,0,.78),6px 11px 22px rgba(0,0,0,.64); }
html[data-theme="dark"] .reference-card { border-color: #34464d; background: linear-gradient(165deg,#172127,#11191d); }
html[data-theme="dark"] .coin-icon-shell { border-color: #3a4549; background: #20282c; }
html[data-theme="dark"] .drag-handle { border-color: rgba(61,205,125,.42); color: #5bdb91; background: linear-gradient(145deg,#1e2924,#142019); box-shadow: 0 5px 13px rgba(0,0,0,.34); }
html[data-theme="dark"] .drag-handle:hover { background: linear-gradient(145deg,#24332b,#17261e); }
html[data-theme="dark"] .change { text-shadow: -1px -1px 0 rgba(6,10,12,.9),1px -1px 0 rgba(6,10,12,.9),-1px 1px 0 rgba(6,10,12,.9),1px 1px 0 rgba(6,10,12,.9),0 2px 7px rgba(0,0,0,.32); }
html[data-theme="dark"] .positive .change { color: #20c963; }
html[data-theme="dark"] .negative .change { color: #ff4d58; }
html[data-theme="dark"] .price-value { color: #f5f8f6; }
html[data-theme="dark"] .card-price-row > span { color: #9aa49f; }
html[data-theme="dark"] .sparkline .price-line,
html[data-theme="dark"] .sparkline .price-range-mark { stroke: #5c7fff; }
html[data-theme="dark"] .sparkline .candle-wick.candle-up,
html[data-theme="dark"] .sparkline .candle-body.candle-up { stroke:#20b867;fill:#35d87c; }
html[data-theme="dark"] .sparkline .candle-wick.candle-down,
html[data-theme="dark"] .sparkline .candle-body.candle-down { stroke:#ed4451;fill:#ff6570; }
html[data-theme="dark"] .sparkline .candle-price-pencil.pencil-up { stroke:#20b867;fill:#35d87c; }
html[data-theme="dark"] .sparkline .candle-price-pencil.pencil-down { stroke:#ed4451;fill:#ff6570; }
html[data-theme="dark"] .sparkline .indicator-ma-short { stroke:#ffbc45; }
html[data-theme="dark"] .sparkline .indicator-ma-long { stroke:#82a9ff; }
html[data-theme="dark"] .sparkline .indicator-ichimoku-tenkan { stroke:#ff83b4; }
html[data-theme="dark"] .sparkline .indicator-ichimoku-kijun { stroke:#64caf5; }
html[data-theme="dark"] .sparkline .indicator-ichimoku-cloud { fill:rgba(62,218,132,.18); }
html[data-theme="dark"] .sparkline .pencil-start { stop-color:#6b8cff;stop-opacity:1; }
html[data-theme="dark"] .sparkline .pencil-middle { stop-color:#6b8cff;stop-opacity:1; }
html[data-theme="dark"] .sparkline .pencil-hold { stop-color:#6b8cff;stop-opacity:1; }
html[data-theme="dark"] .sparkline .pencil-end { stop-color:#6b8cff;stop-opacity:1; }
html[data-theme="dark"] .sparkline .grid-line { stroke: #3ebbd6; opacity: .76; }
html[data-theme="dark"] .sparkline .baseline-label { stroke: #151b1e; }
html[data-theme="dark"] .sparkline .extrema-label { stroke:#151b1e; }
html[data-theme="dark"] .sparkline .extrema-label-high { fill:#42f693; }
html[data-theme="dark"] .sparkline .extrema-label-low { fill:#ff69be; }

/* Keep the percentage type size unchanged while making its color band calmer. */
.change-strip{
  background:var(--change-bg) center / 100% calc(100% - clamp(4px,.65vw,8px)) no-repeat;
}

html[data-theme="dark"] .sparkline .grid-label { fill: #70d8ec; }
html[data-theme="dark"] .sparkline .current-pointer.pointer-up { fill:#42f693;color:#42f693; }
html[data-theme="dark"] .sparkline .current-pointer.pointer-down { fill:#ff69be;color:#ff69be; }
html[data-theme="dark"] .sparkline .current-pointer.pointer-flat { fill:#70e9ff;color:#70e9ff; }

html[data-theme="dark"] .demo-trade-toggle { color: var(--ink); background: linear-gradient(90deg,#f39800 0%,#f39800 28%,rgba(243,152,0,.72) 36%,rgba(243,152,0,.14) 46%,#182023 54%,rgba(10,163,87,.16) 68%,rgba(10,163,87,.62) 91%,#0a9852 100%); box-shadow: 0 8px 22px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12); }
html[data-theme="dark"] .my-chart-cta { border-color:rgba(255,173,31,.42);color:#ffb83f;background:linear-gradient(90deg,#c96f00 0%,rgba(201,111,0,.72) 17%,rgba(201,111,0,.16) 43%,#182023 70%,#141a1d 100%);box-shadow:0 7px 19px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08); }
html[data-theme="dark"] .portfolio-cta { border-color:rgba(52,203,119,.38);color:#56dc92;background:linear-gradient(90deg,#141a1d 0%,#182023 30%,rgba(10,163,87,.16) 57%,rgba(10,163,87,.72) 83%,#0a9852 100%);box-shadow:0 7px 19px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08); }
html[data-theme="dark"] .portfolio-sync-label { border-color:rgba(92,222,149,.32);background:rgba(11,22,17,.72);color:#76e5a7;box-shadow:none; }
html[data-theme="dark"] .feature-cta-title { text-shadow:0 1px 2px rgba(0,0,0,.38); }
html[data-theme="dark"] .demo-trade-toggle-figures { background: rgba(51,144,205,.13); }
html[data-theme="dark"] .demo-trade-toggle-balance { background:#1b2930; }
html[data-theme="dark"] .demo-trade.is-profit .demo-trade-toggle-balance { background:#183126; }
html[data-theme="dark"] .demo-trade.is-loss .demo-trade-toggle-balance { background:#351f24; }
html[data-theme="dark"] .demo-trade-toggle-pnl small,
html[data-theme="dark"] .demo-trade-toggle-balance small { color: #aab5af; }
html[data-theme="dark"] .demo-trade-panel { border-color: #2a4035; background: linear-gradient(145deg,#171f1c 45%,#101815); box-shadow: 0 14px 28px rgba(0,0,0,.4); }
html[data-theme="dark"] .demo-trade-summary > div,
html[data-theme="dark"] .demo-order-controls,
html[data-theme="dark"] .demo-position-view { border-color: #34413b; background: #182023; }
html[data-theme="dark"] .demo-trade-summary strong { color: #f0f5f2; }
html[data-theme="dark"] .demo-order-controls label { color: #b4bdb8; }
html[data-theme="dark"] .demo-order-controls select { border-color: #3a4741; background: #101619; color: #f1f5f3; }
html[data-theme="dark"] .demo-market-price,
html[data-theme="dark"] .demo-position-details > div { background: #222b2e; }
html[data-theme="dark"] .demo-trade-note { color: #9ba6a0; }
html[data-theme="dark"] .demo-storage-warning { border-color:rgba(255,112,126,.38);background:rgba(220,37,53,.13);color:#ff98a2; }
html[data-theme="dark"] .storage-persistence-warning { border-color:rgba(255,112,126,.42);background:rgba(50,25,29,.96);color:#ffabb3; }

/* Remove the empty header gap and place display controls below the unchanged power-save navigation. */
.topbar,.topbar.gainers-collapsed{
  grid-template-columns:1fr;
  grid-template-rows:auto auto auto auto auto;
  min-height:0;
  gap:7px;
  padding:7px clamp(14px,3vw,32px) 8px;
}
.topbar .pulse-entry{grid-column:1;grid-row:1;margin-top:0}
.topbar .demo-trade{grid-column:1;grid-row:2}
.topbar .feature-cta-row,.topbar.gainers-collapsed .feature-cta-row{grid-column:1;grid-row:3}
.topbar .gainers-toggle{grid-column:1;grid-row:4}
.topbar .gainers-list{grid-column:1;grid-row:5}
.board-control-deck{display:grid;gap:5px;padding:6px clamp(10px,2vw,24px) 7px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94)}
.board-live-summary{display:flex;align-items:center;gap:7px;min-width:0}
.board-live-summary p{margin:0;overflow:hidden;color:var(--muted);font-size:.68rem;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.board-control-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.board-control-left,.board-control-row .actions{display:flex;align-items:center;gap:7px}
.board-control-row .actions{flex-direction:row;justify-content:flex-end}
.board-control-row .edit-button{height:34px}
.board-control-row .music-menu{z-index:95}
html[data-theme="dark"] .board-control-deck{border-color:#28322e;background:#101619}
@media(max-width:720px){
  .topbar,.topbar.gainers-collapsed{grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto;min-height:0;gap:6px;padding:6px 7px 7px}
  .topbar .pulse-entry{grid-column:1;grid-row:1}
  .topbar .demo-trade{grid-column:1;grid-row:2}
  .topbar .feature-cta-row,.topbar.gainers-collapsed .feature-cta-row{grid-column:1;grid-row:3}
  .topbar .gainers-toggle{grid-column:1;grid-row:4}
  .topbar .gainers-list{grid-column:1;grid-row:5}
  .board-control-deck{gap:4px;padding:5px 8px 6px}
  .board-live-summary{gap:6px}
  .board-live-summary p{font-size:.62rem}
  .board-control-row{gap:8px}
  .board-control-left,.board-control-row .actions{gap:5px}
  .board-control-row .currency-switch button{min-width:43px;height:34px}
  .board-control-row .music-toggle{width:38px;height:34px}
  .board-control-row .column-switch button{width:32px;height:34px}
  .board-control-row .edit-button{width:38px;min-width:38px;height:34px;padding:0}
  .board-control-row .edit-label{display:none}
}
html[data-theme="dark"] .demo-confirm-dialog { color: #f1f5f3; background: #171e21; }
html[data-theme="dark"] .demo-confirm-dialog p:not(.demo-confirm-kicker) { color: #b7c0bb; }
html[data-theme="dark"] .demo-confirm-cancel { color: #d5dcd8; background: #283034; }
html[data-theme="dark"] .demo-result { border-color: #28536c; color: #8dd5ff; background: #142936; }

html[data-theme="dark"] .notice { border-color: #6c5229; color: #e6c98f; background: #2a2113; }
html[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg,transparent,rgba(54,64,68,.8),transparent); }
html[data-theme="dark"] .skeleton .coin-icon-shell,
html[data-theme="dark"] .skeleton .coin-symbol,
html[data-theme="dark"] .skeleton .coin-name,
html[data-theme="dark"] .skeleton .currency,
html[data-theme="dark"] .skeleton .price,
html[data-theme="dark"] .skeleton .change,
html[data-theme="dark"] .skeleton .sparkline { background: #263034; }
html[data-theme="dark"] footer { color: #87928d; }
html[data-theme="dark"] .coingecko-credit { color: #70c95a; }
html[data-theme="dark"] .icon-credit,
html[data-theme="dark"] .legal-links a { color: #9ca6a1; }

/* Light mode: a quiet frosted-titanium stage below the fixed board bar. */
html:not([data-theme="dark"]),
html:not([data-theme="dark"]) body {
  background-color:#edf3f4;
  background-image:
    radial-gradient(circle at 8% 7%,rgba(255,157,24,.12) 0,rgba(255,157,24,0) 27%),
    radial-gradient(circle at 92% 12%,rgba(7,169,87,.11) 0,rgba(7,169,87,0) 31%),
    linear-gradient(rgba(21,74,68,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(21,74,68,.026) 1px,transparent 1px),
    linear-gradient(145deg,#f9fbfc 0%,#edf2f4 48%,#f4faf6 100%);
  background-size:auto,auto,56px 56px,56px 56px,auto;
  background-attachment:scroll;
}
html:not([data-theme="dark"]) .board-switch-bar {
  background:rgba(255,255,255,.97);
  box-shadow:0 5px 22px rgba(18,48,52,.09);
}
html:not([data-theme="dark"]) .topbar,
html:not([data-theme="dark"]) .board-control-deck {
  background:transparent;
}
html:not([data-theme="dark"]) .topbar {
  backdrop-filter:none;
}
html:not([data-theme="dark"]) .coin-card {
  border-color:rgba(65,92,98,.22);
  background:linear-gradient(160deg,rgba(255,255,255,.995),rgba(249,252,252,.985));
  box-shadow:
    0 3px 5px rgba(13,32,40,.30),
    0 16px 30px rgba(13,47,55,.24),
    inset 0 1px 0 rgba(255,255,255,.98);
}
html:not([data-theme="dark"]) .coin-card:hover {
  border-color:rgba(29,112,87,.30);
  box-shadow:
    0 4px 7px rgba(13,32,40,.32),
    0 20px 38px rgba(13,47,55,.28),
    inset 0 1px 0 #fff;
}

/* Final paired-board alignment: transparent scroller and centered power control. */
.topbar.gainers-collapsed{grid-template-rows:auto auto auto auto}
.topbar.gainers-collapsed .pulse-entry{grid-row:1}
.primary-site-nav{
  min-height:44px;
  padding:0 clamp(14px,3vw,32px) 6px;
  border-bottom:0;
  background:transparent;
}
.board-control-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
}
.board-control-left{justify-self:start}
.board-control-center{justify-self:center}
.board-control-row .actions{justify-self:end}
.board-control-center .power-save-control{min-height:34px;padding:3px 8px;border-radius:10px;background:rgba(255,255,255,.88)}
.board-control-center .power-save-toggle{width:44px;height:26px}
.board-control-center .power-save-thumb{width:20px;height:20px}
.board-control-center .power-save-toggle[aria-checked="true"] .power-save-thumb{transform:translateX(18px)}
html[data-theme="dark"] .board-control-center .power-save-control{background:rgba(23,30,33,.9)}

@media(max-width:820px){
  .primary-site-nav{
    padding:0 22px 6px 7px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%);
  }
}
@media(max-width:720px){
  .topbar.gainers-collapsed{grid-template-rows:auto auto auto auto}
  .board-control-deck{padding-top:3px;padding-bottom:4px}
  .board-control-row{gap:6px}
  .board-control-center .power-save-control{min-height:34px;gap:5px;padding:3px 6px}
  .board-control-center .power-save-label{font-size:.64rem}
  .board-control-center .power-save-state{font-size:.62rem}
  main{padding-top:3px}
}

@media (max-width: 720px) {
  html[data-theme="dark"] .demo-trade-toggle { background:linear-gradient(90deg,#f39800 0%,#f39800 34%,rgba(243,152,0,.7) 41%,rgba(243,152,0,.14) 49%,#182023 55%,rgba(10,163,87,.14) 67%,rgba(10,163,87,.64) 91%,#0a9852 100%); }
  html[data-theme="dark"] .my-chart-cta { background:linear-gradient(90deg,#c96f00 0%,rgba(201,111,0,.72) 21%,rgba(201,111,0,.16) 57%,#182023 100%); }
  html[data-theme="dark"] .portfolio-cta { background:linear-gradient(90deg,#182023 0%,rgba(10,163,87,.16) 43%,rgba(10,163,87,.72) 79%,#0a9852 100%); }
  .live-panel { column-gap: 5px; }
  .theme-toggle { width: 42px; height: 38px; }
  .theme-icon { width: 21px; height: 21px; }
}

/* Final top-board composition: controls share one axis and the cards carry equal visual weight. */
.demo-trade-toggle{
  background:linear-gradient(105deg,#d95700 0%,#f07800 34%,#ffad16 53%,#07904d 100%);
}
.my-chart-cta{
  color:#fff;
  background:linear-gradient(100deg,#d95700 0%,#f07800 52%,#ffad16 100%);
}
.portfolio-cta{
  color:#fff;
  background:linear-gradient(100deg,#045d36 0%,#078447 54%,#10b863 100%);
}
.feature-cta-copy{justify-items:start;text-align:left}
.feature-cta-title{justify-content:flex-start;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.28)}
.portfolio-sync-label{color:#fff;border-color:rgba(255,255,255,.42);background:rgba(0,71,37,.28);box-shadow:none}
.board-control-deck{gap:0;padding:1px clamp(10px,2vw,24px) 2px}
.board-control-row{min-height:53px}
.board-control-left{justify-self:start}
.board-control-left .power-save-control{min-height:34px;padding:3px 8px;border-radius:10px;background:rgba(255,255,255,.9)}
.board-control-left .power-save-toggle{width:44px;height:26px}
.board-control-left .power-save-thumb{width:20px;height:20px}
.board-control-left .power-save-toggle[aria-checked="true"] .power-save-thumb{transform:translateX(18px)}
.board-control-center{display:grid;gap:1px;justify-items:center}
.board-control-center .board-live-summary{width:auto;justify-content:center;line-height:1}
.board-control-center .board-live-summary p{font-size:.64rem}
.board-center-switches{display:flex;align-items:center;justify-content:center;gap:6px}
.primary-site-nav{padding-bottom:3px}
html[data-theme="dark"] .board-control-left .power-save-control{background:rgba(23,30,33,.9)}
html[data-theme="dark"] .demo-trade-toggle{
  background:linear-gradient(100deg,
    #713200 0%,
    #a94f00 34%,
    #c87900 47%,
    #315626 52%,
    #05643a 58%,
    #098e4d 100%);
}
html[data-theme="dark"] .my-chart-cta{color:#fff;background:linear-gradient(100deg,#713200 0%,#a94f00 52%,#c87900 100%)}
html[data-theme="dark"] .portfolio-cta{color:#fff;background:linear-gradient(100deg,#043d28 0%,#05643a 54%,#098e4d 100%)}

@media(max-width:720px){
  .demo-trade-toggle{background:linear-gradient(105deg,#d95700 0%,#f07800 34%,#ffad16 53%,#07904d 100%)}
  .my-chart-cta{background:linear-gradient(100deg,#d95700 0%,#f07800 52%,#ffad16 100%)}
  .portfolio-cta{background:linear-gradient(100deg,#045d36 0%,#078447 54%,#10b863 100%)}
  .feature-cta-copy{justify-items:start;text-align:left}
  .feature-cta-title,.portfolio-cta .feature-cta-title{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:.12em;color:#fff;font-size:clamp(.7rem,3.15vw,.84rem);white-space:nowrap}
  .board-control-deck{padding:0 8px 1px}
  .board-control-row{min-height:51px;gap:5px}
  .board-control-left .power-save-control{gap:5px;padding:3px 6px}
  .board-control-left .power-save-label{font-size:.64rem}
  .board-control-left .power-save-state{font-size:.62rem}
  .board-control-center .board-live-summary{gap:5px}
  .board-control-center .board-live-summary p{font-size:.58rem}
  .board-center-switches{gap:4px}
  .primary-site-nav{padding-bottom:3px}
  main{padding-top:0}
}

/* Keep the three control groups independent on every phone-width portrait.
   Wider iPhones previously crossed the old 390px cutoff and restored the
   power-save label, which made the left group overlap JPY/USD. */
@media(max-width:520px){
  .board-control-left .power-save-label{display:none}
}

@media(max-width:390px){
  .board-control-center .board-live-summary p{display:none}
}

/* Improve demo P/L visibility while keeping the balance as the primary figure. */
.demo-trade-toggle-figures{
  gap:7px;
  overflow:visible;
  background:transparent;
}
.demo-trade-toggle-pnl,
.demo-trade-toggle-balance{
  border:1px solid rgba(18,108,177,.18);
  border-radius:10px;
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 7px rgba(20,55,70,.09);
}
.demo-trade-toggle-pnl{border-right:1px solid rgba(18,108,177,.18)}

/* Give the animated balance room to grow and glow without clipping. */
.demo-trade-toggle-balance,
.demo-trade-summary>.demo-current-balance{
  overflow:visible;
}
.demo-trade-toggle-balance strong.demo-balance-value,
.demo-trade-summary>.demo-current-balance strong.demo-balance-value{
  display:inline-block;
  width:auto;
  max-width:calc(100% - 16px);
  padding:7px 8px;
  margin:-7px -8px;
  transform-origin:center;
}
html[data-theme="dark"] .demo-trade-toggle-figures{background:transparent}
html[data-theme="dark"] .demo-trade-toggle-pnl,
html[data-theme="dark"] .demo-trade-toggle-balance{
  border-color:#344851;
  background:#1b2930;
  box-shadow:0 2px 7px rgba(0,0,0,.22);
}

/* Final control layout after removing BGM. Chart controls stay on the leading
   edge, LIVE occupies the flexible middle, and board actions stay on the end. */
.board-control-row{position:relative;grid-template-columns:auto minmax(0,1fr) auto}
.board-control-left{min-width:0}
.board-control-center{
  position:absolute;
  top:50%;
  left:50%;
  min-width:0;
  transform:translate(-50%,6px);
}
.board-center-switches{width:auto;justify-content:flex-start}

@media(max-width:520px){
  .board-control-center{
    position:static;
    justify-self:center;
    transform:none;
  }
  .board-control-center .board-live-summary p{display:none}
}
.board-control-left{transform:translateY(6px)}
.board-control-row .actions{align-self:end}
.board-control-left .power-save-control{min-height:38px;padding:4px 8px}
.board-control-left .power-save-toggle{width:48px;height:30px}
.board-control-left .power-save-thumb{width:24px;height:24px}
.board-control-left .power-save-toggle[aria-checked="true"] .power-save-thumb{transform:translateX(18px)}

@media(max-width:720px){
  .board-control-left .power-save-control{min-height:38px;padding:4px 7px}
  .board-control-left{transform:translateY(8px)}
  .board-control-row{transform:translateY(2px)}
  .board-control-row .currency-switch button,
  .board-control-row .column-picker-toggle,
  .board-control-row .edit-button{
    width:44px;
    min-width:44px;
    height:38px;
    min-height:38px;
  }
  .board-control-row .chart-mode-switch button{
    width:34px;
    min-width:34px;
    height:38px;
    min-height:38px;
  }
  .board-control-row .edit-button{padding:0}
  main{padding-top:4px}
}

/* Center the utility buttons whenever the viewport has room. `safe center`
   keeps the row scrollable from the leading edge if more buttons are added. */
@media (min-width:721px), (orientation:landscape) and (min-width:560px){
  .primary-site-nav{
    justify-content:flex-start;
    padding-inline:clamp(14px,3vw,32px);
    -webkit-mask-image:none;
    mask-image:none;
  }
  .primary-site-nav-items{margin-inline:auto}
}

/* Four-column tablet/desktop cards keep the same icon-to-card ratio as the
   two-column split view: from above the symbol through below the change. */
@media(min-width:721px){
  html[data-columns="4"] .coin-card{--icon-size:clamp(78px,5.7vw,94px)}
}

/* Pair the transparent BitBull mark with the animated wordmark. */
.current-board-brand{
  --header-brand-icon-size:56px;
  /* The BitBull wordmark PNG has extra transparent space on its left edge. */
  --header-brand-gap:-3px;
  position:relative;
  display:block;
  width:264px;
  height:60px;
}
.current-board-brand img.current-board-icon{
  position:absolute;
  top:50%;
  left:0;
  display:block;
  width:var(--header-brand-icon-size);
  height:var(--header-brand-icon-size);
  object-fit:contain;
  filter:drop-shadow(0 4px 7px rgba(18,71,42,.15));
  transform:translateY(-50%);
}
.current-board-brand .brand-logo{
  position:absolute;
  top:0;
  left:calc(var(--header-brand-icon-size) + var(--header-brand-gap));
  width:calc(100% - var(--header-brand-icon-size) - var(--header-brand-gap));
  max-width:none;
  margin:0;
}
@media(max-width:720px){
  .current-board-brand{--header-brand-icon-size:37px;width:clamp(150px,46vw,180px);height:48px}
}

/* Phone landscape compact mode: preserve a complete two-card view without
   changing portrait phones, split-view iPads, or desktop layouts. */
@media (orientation:landscape) and (max-height:520px) and (hover:none) and (pointer:coarse) {
  html { scroll-padding-top:56px; }
  html[data-columns="2"],
  html[data-columns="2"] body {
    width:100%;
    max-width:100%;
    overflow-x:clip;
  }
  .board-switch-bar {
    min-height:50px;
    gap:5px;
    padding-top:max(3px,env(safe-area-inset-top));
    padding-right:max(9px,env(safe-area-inset-right));
    padding-bottom:3px;
    padding-left:max(9px,env(safe-area-inset-left));
  }
  .stockbull-switch-link { width:88px;height:34px;gap:4px;padding:3px 6px;border-radius:10px; }
  .stockbull-switch-link img { width:60px;height:22px; }
  .switch-direction { font-size:.82rem; }
  .current-board-brand { --header-brand-icon-size:34px;width:166px;height:40px; }
  .board-theme-toggle { width:34px;height:34px;border-radius:10px; }
  .board-theme-toggle .theme-icon { width:19px;height:19px; }
  html[data-columns="2"] main {
    width:min(90%,1320px);
    margin-inline:auto;
    padding:4px 0 8px;
  }
  html[data-columns="2"] .coin-grid { gap:7px; }
  html[data-columns="2"] .coin-card {
    --icon-size:clamp(76px,10vw,92px);
    scroll-margin-top:56px;
    padding:8px 9px 4px;
  }
  html[data-columns="2"] .coin-identity { gap:8px; }
  html[data-columns="2"] .coin-symbol { font-size:clamp(1.55rem,4vw,2.05rem); }
  html[data-columns="2"] .change-strip {
    min-height:40px;
    margin:calc(var(--icon-size) * -.58) -9px 0 calc(var(--icon-size) + 8px);
    padding:2px 8px;
  }
  html[data-columns="2"] .change { font-size:clamp(1.7rem,4.6vw,2.3rem); }
  html[data-columns="2"] .sparkline { aspect-ratio:18 / 10; }
  html[data-columns="2"] .price { font-size:clamp(1.55rem,4vw,2rem); }
  html[data-columns="3"] .coin-card { --icon-size:clamp(58px,7.5vw,72px); }

  /* Three- and four-column landscape boards keep only a slim visual gutter.
     Do not use the landscape safe-area value here: on iPhone it is wide
     enough to make these dense layouts look like the two-column board. */
  html:not([data-phone-landscape-split="true"])[data-columns="3"] main,
  html:not([data-phone-landscape-split="true"])[data-columns="4"] main {
    width:100%;
    max-width:none;
    padding-right:clamp(6px,1vw,10px);
    padding-left:clamp(6px,1vw,10px);
  }
}

/* Light-mode BitBull controls share the same pale green glass language as
   the utility links above them. Active green states keep white labels. */
html:not([data-theme="dark"]) .board-control-deck .power-save-control,
html:not([data-theme="dark"]) .board-control-deck .currency-switch,
html:not([data-theme="dark"]) .board-control-deck .chart-mode-switch,
html:not([data-theme="dark"]) .board-control-deck .column-picker-toggle,
html:not([data-theme="dark"]) .board-control-deck .edit-button {
  border-color:rgba(8,142,67,.32);
  color:#078b43;
  background:linear-gradient(145deg,rgba(255,255,255,.94) 18%,rgba(232,248,239,.92) 100%);
  box-shadow:0 4px 12px rgba(7,133,62,.12),inset 0 0 4px rgba(21,186,91,.18),inset 0 0 13px rgba(21,186,91,.1),inset 0 1px 0 rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
html:not([data-theme="dark"]) .board-control-deck .power-save-label,
html:not([data-theme="dark"]) .board-control-deck .power-save-state,
html:not([data-theme="dark"]) .board-control-deck .currency-switch button,
html:not([data-theme="dark"]) .board-control-deck .chart-mode-switch button,
html:not([data-theme="dark"]) .board-control-deck .column-switch button {
  color:#078b43;
}
html:not([data-theme="dark"]) .board-control-deck .currency-switch button,
html:not([data-theme="dark"]) .board-control-deck .chart-mode-switch button,
html:not([data-theme="dark"]) .board-control-deck .column-switch button,
html:not([data-theme="dark"]) .board-control-deck .column-picker-options {
  border-color:rgba(8,142,67,.18);
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(236,249,242,.94));
}
html:not([data-theme="dark"]) .board-control-deck .column-picker-options {
  box-shadow:0 8px 22px rgba(7,74,45,.18),inset 0 1px 0 rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
html:not([data-theme="dark"]) .board-control-deck .currency-switch button[aria-pressed="true"],
html:not([data-theme="dark"]) .board-control-deck .chart-mode-switch button[aria-pressed="true"],
html:not([data-theme="dark"]) .board-control-deck .column-switch button.active,
html:not([data-theme="dark"]) .board-control-deck .edit-button[aria-pressed="true"] {
  border-color:#087e42;
  color:#fff;
  background:linear-gradient(135deg,#0aac5d,#087e42);
  box-shadow:0 4px 12px rgba(7,126,66,.22),inset 0 1px 0 rgba(255,255,255,.28);
}

/* Optional BitBull + StockBull split view, beside the theme control. */
.board-header-actions{justify-self:end;display:flex;align-items:center;gap:7px}
.board-header-actions .header-power-save{min-height:48px;padding:5px 9px;border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(232,248,239,.92));box-shadow:0 4px 12px rgba(7,133,62,.13),inset 0 1px #fff}
.board-header-actions .header-power-save .power-save-toggle{width:44px;height:26px}
.board-header-actions .header-power-save .power-save-thumb{width:20px;height:20px}
.board-header-actions .header-power-save .power-save-toggle[aria-checked="true"] .power-save-thumb{transform:translateX(18px)}
html[data-theme="dark"] .board-header-actions .header-power-save{border-color:#35423c;background:linear-gradient(145deg,#1d2b25,#121d18);box-shadow:0 4px 12px rgba(0,0,0,.34)}
.board-header-actions .board-theme-toggle{width:48px;height:48px;border-radius:14px}
.split-view-button{display:inline-grid;width:98px;height:48px;padding:4px 8px;place-items:center;border:1px solid rgba(8,142,67,.3);border-radius:14px;color:#078b43;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(232,248,239,.92));box-shadow:0 4px 12px rgba(7,133,62,.13),inset 0 0 12px rgba(21,186,91,.08),inset 0 1px 0 rgba(255,255,255,.98);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.split-view-button img{display:block;width:82px;height:31px;object-fit:contain}
.split-view-button svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.split-view-button:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(7,133,62,.18),inset 0 1px 0 #fff}
.split-view-button:focus-visible{outline:3px solid rgba(8,142,67,.24);outline-offset:2px}
html[data-theme="dark"] .split-view-button{border-color:rgba(54,160,104,.46);color:#72e4a5;background:linear-gradient(145deg,#1d2b25,#121d18);box-shadow:0 4px 12px rgba(0,0,0,.34),inset 0 0 12px rgba(52,203,119,.08)}

/* Tax preparation guide entry */
.tax-support-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(18px,4vw,44px);
  margin:clamp(22px,3vw,38px) 0 10px;
  padding:clamp(22px,3.5vw,36px);
  overflow:hidden;
  border:1px solid rgba(243,152,0,.27);
  border-radius:clamp(18px,2vw,28px);
  background:linear-gradient(120deg,rgba(255,255,255,.98),rgba(255,249,234,.98) 48%,rgba(236,250,242,.98));
  box-shadow:0 12px 30px rgba(85,66,24,.1);
}
.tax-support-kicker { display:flex;align-items:center;gap:9px;margin:0 0 7px;color:#087c40;font-size:.76rem;font-weight:950;letter-spacing:.15em; }
.tax-support-kicker span { display:inline-grid;min-width:42px;min-height:28px;padding:4px 9px;place-items:center;border-radius:8px;color:#fff;background:#f39800;font-size:.72rem;letter-spacing:.08em; }
.tax-support-copy h2 { margin:0;color:#17201b;font-size:clamp(1.35rem,3vw,2rem);letter-spacing:-.035em; }
.tax-support-copy > p:not(.tax-support-kicker) { max-width:730px;margin:10px 0 5px;color:#59645e;font-size:.92rem;font-weight:700;line-height:1.75; }
.tax-support-copy small { color:#7a7f7c;font-size:.72rem;font-weight:700; }
.tax-support-link { display:flex;min-width:220px;min-height:58px;padding:12px 16px 12px 20px;align-items:center;justify-content:space-between;gap:18px;border:1px solid rgba(8,142,67,.32);border-radius:15px;color:#fff;background:linear-gradient(135deg,#0fb25e,#087e43);box-shadow:0 8px 18px rgba(8,126,67,.22),inset 0 1px 0 rgba(255,255,255,.2);font-size:.9rem;font-weight:950;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease; }
.tax-support-link b { position:relative;display:grid;width:32px;height:32px;place-items:center;border-radius:0;background:transparent;font-size:1.9rem;font-weight:700;line-height:1;transform:scaleX(1.12);transform-origin:center; }
.tax-support-arrow::before { content:"›";position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.7);font-weight:300;opacity:0;pointer-events:none;will-change:transform,opacity; }
html[data-power-save="false"] .tax-support-arrow::before { animation:portfolioTapTrail 1.65s linear infinite; }
.tax-support-link:hover,.tax-support-link:focus-visible { transform:translateY(-2px);box-shadow:0 11px 23px rgba(8,126,67,.27),inset 0 1px 0 rgba(255,255,255,.24); }
html[data-theme="dark"] .tax-support-card { border-color:rgba(229,151,35,.32);background:linear-gradient(120deg,#171e21,#252117 50%,#14251c);box-shadow:0 12px 30px rgba(0,0,0,.34); }
html[data-theme="dark"] .tax-support-copy h2 { color:#f1f5f3; }
html[data-theme="dark"] .tax-support-copy > p:not(.tax-support-kicker) { color:#b4bdb8; }
html[data-theme="dark"] .tax-support-copy small { color:#929c97; }
html[data-power-save="true"] .learning-hub-chevron::before,
html[data-power-save="true"] .tax-support-arrow::before { display:none !important; }
@media(prefers-reduced-motion:reduce){.learning-hub-chevron::before,.tax-support-arrow::before{display:none!important}}
@media (max-width:720px) {
  .tax-support-card { grid-template-columns:1fr; }
  .tax-support-link { width:100%;min-width:0; }
}
@media(max-width:759px){.split-view-button{display:none}.board-header-actions{gap:5px}.board-header-actions .header-power-save{min-height:44px;padding:4px 6px;border-radius:12px}.board-header-actions .header-power-save .power-save-label{display:none}.board-header-actions .header-power-save .power-save-state{font-size:.62rem}.board-header-actions .board-theme-toggle{width:44px;height:44px;border-radius:12px}}
@media(orientation:landscape) and (min-width:760px) and (max-height:520px){.board-header-actions{gap:5px}.split-view-button{display:inline-grid;width:88px;height:40px;padding:3px 7px;border-radius:11px}.split-view-button img{width:73px;height:28px}.split-view-button svg{width:19px;height:19px}.board-theme-toggle{width:40px;height:40px;border-radius:11px}.board-theme-toggle .theme-icon{width:21px;height:21px}}
html[data-split-pane="true"] .split-view-button{display:inline-grid;width:48px;height:48px;padding:0}
html[data-split-pane="true"] .split-view-button img{display:none}
html[data-split-pane="true"] .header-power-save .power-save-label{display:none}
@media(max-width:430px){.board-header-actions .header-power-save .power-save-state{display:none}.board-header-actions .header-power-save{padding-inline:5px}}

/* Compact mobile power-save control. Desktop keeps the full labelled switch. */
.mobile-power-glyph{display:none}
.power-save-notice{display:none;position:fixed;top:calc(env(safe-area-inset-top) + 62px);left:50%;z-index:10000;min-width:max-content;padding:8px 13px;border:1px solid rgba(8,126,66,.22);border-radius:999px;color:#18362a;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(5,75,46,.2);font-size:.74rem;font-weight:950;opacity:0;pointer-events:none;transform:translate(-50%,-8px);transition:opacity .18s ease,transform .18s ease}
.power-save-notice.is-visible{opacity:1;transform:translate(-50%,0)}
html[data-theme="dark"] .power-save-notice{border-color:#35423c;color:#eef8f3;background:rgba(18,29,24,.96)}
@media(max-width:759px){
  .board-switch-bar{position:sticky}
  .stockbull-switch-link{grid-column:1}
  .current-board-brand{position:absolute;top:50%;left:50%;grid-column:1/-1;z-index:1;transform:translate(-50%,-50%)}
  .board-header-actions{grid-column:3;justify-self:end}
  .board-header-actions .header-power-save{width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none}
  .board-header-actions .header-power-save>.power-save-label,.board-header-actions .header-power-save>.power-save-state{display:none}
  .board-header-actions .header-power-save .power-save-toggle{display:grid;width:44px;height:44px;place-items:center;border:1px solid rgba(8,130,82,.3);border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(232,248,239,.94));box-shadow:0 4px 12px rgba(7,133,62,.13),inset 0 1px #fff;color:#4f5a55}
  .board-header-actions .header-power-save .power-save-thumb{display:none}
  .board-header-actions .header-power-save .mobile-power-glyph{display:block;font-size:.78rem;font-weight:1000;line-height:1;letter-spacing:-.04em;text-transform:lowercase}
  .board-header-actions .header-power-save .power-save-toggle[aria-checked="true"]{color:#fff;background:linear-gradient(145deg,#079452,#12bf68);box-shadow:0 0 0 1px rgba(4,175,92,.22),0 0 14px rgba(11,211,111,.3),inset 0 1px rgba(255,255,255,.35)}
  html[data-theme="dark"] .board-header-actions .header-power-save .power-save-toggle{border-color:#35423c;background:linear-gradient(145deg,#1d2b25,#121d18);box-shadow:0 4px 12px rgba(0,0,0,.34);color:#cbd7d1}
  html[data-theme="dark"] .board-header-actions .header-power-save .power-save-toggle[aria-checked="true"]{color:#fff;background:linear-gradient(145deg,#078d4f,#10b961);box-shadow:0 0 14px rgba(13,207,107,.26)}
  .power-save-notice{display:block}
}
@media(max-width:430px){
  .board-header-actions .header-power-save,.board-header-actions .header-power-save .power-save-toggle{width:40px;height:40px;min-height:40px}
}
html[data-split-pane="true"] .install-app-prompt,
html[data-split-pane="true"] .install-app-overlay{display:none!important}

/* Keep the chart compact while reserving a small, consistent breathing space
   below the move strip. The gap keeps a high 24h baseline label clear of the
   symbol and gradient at every card width. */
.coin-card:not(.skeleton) .chart-wrap{
  margin-top:4px;
  margin-bottom:-4px;
}
.coin-card:not(.skeleton) .card-price-row{
  margin-top:-5px;
}
@media(max-width:720px){
  .coin-card:not(.skeleton) .chart-wrap{
    margin-top:3px;
    margin-bottom:-3px;
  }
  .coin-card:not(.skeleton) .card-price-row{
    margin-top:-4px;
  }
  html[data-columns="3"] .coin-card.demo-position-coin .chart-position-flame{
    top:calc(var(--icon-size) * -.36);
    left:calc(var(--icon-size) * -.23);
    width:calc(var(--icon-size) * 1.43);
  }
}

.split-view-button.is-expand-button .expand-corners-icon{fill:currentColor;stroke:none}

/* Phone landscape split only; preserve the full-screen column preference. */
html[data-phone-landscape-split="true"] .coin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-phone-landscape-split="true"] .column-picker{display:none}

/* Full-screen phones in landscape can offer four columns, but the desktop
   four-column artwork is too large for their short viewport. Keep the chart
   and price unchanged while giving the icon and move a calmer scale. */
@media (orientation:landscape) and (max-height:720px){
  html:not([data-phone-landscape-split="true"])[data-columns="4"] .coin-card{
    --icon-size:clamp(52px,13.5vh,62px);
  }
  html:not([data-phone-landscape-split="true"])[data-columns="4"] .change-strip{
    min-height:clamp(36px,9vh,42px);
  }
  html:not([data-phone-landscape-split="true"])[data-columns="4"] .change{
    font-size:clamp(.86rem,3.6vh,1rem);
  }
}

/* Leave a small outside gap above every chart grid so demo flames can clear
   the controls. This does not change the padding inside any chart card. */
main{
  padding-top:5px;
}

/* Reduce only the blank space inside the top of every chart card. */
.coin-card{
  padding-top:clamp(5px,.625vw,8px);
}
.editing .coin-card{
  padding-top:50px;
}
@media(max-width:720px){
  .coin-card{padding-top:4px}
  html[data-columns="3"] .coin-card{padding-top:3px}
  html[data-columns="4"] .coin-card{padding-top:2px}
}

/* Match StockBull's slimmer fixed header while preserving its compact phone
   and phone-landscape variants. */
.board-switch-bar{
  min-height:62px;
  padding-top:max(5px,env(safe-area-inset-top));
  padding-bottom:5px;
}
@media(max-width:720px){
  .board-switch-bar{
    min-height:54px;
    padding-top:max(4px,env(safe-area-inset-top));
    padding-bottom:4px;
  }
}
@media (orientation:landscape) and (max-height:520px) and (hover:none) and (pointer:coarse){
  .board-switch-bar{
    min-height:50px;
    padding-top:max(3px,env(safe-area-inset-top));
    padding-bottom:3px;
  }

  /* Match the reference card's move-strip proportions at each landscape
     density instead of shrinking the number and background at the same rate. */
  html[data-columns="2"] .change-strip{
    min-height:clamp(52px,14vh,58px);
    padding-block:3px;
  }
  html[data-columns="2"] .change{
    font-size:clamp(2.2rem,9.5vh,2.6rem);
  }
  /* Keep the two-column chart on the same width and vertical rhythm as
     StockBull. Extending it horizontally also made BitBull's cards taller. */
  html[data-columns="2"] .chart-wrap{
    margin-right:0;
  }
  html[data-columns="3"] .change-strip{
    margin-top:calc(var(--icon-size) * -.66);
    min-height:clamp(36px,9.5vh,42px);
    padding-block:2px;
  }
  html[data-columns="3"] .change{
    font-size:clamp(1.55rem,7vh,1.8rem);
  }
  html:not([data-phone-landscape-split="true"])[data-columns="4"] .change-strip{
    margin-top:calc(var(--icon-size) * -.67);
    min-height:clamp(27px,7.2vh,30px);
    padding-block:1px;
  }
  html:not([data-phone-landscape-split="true"])[data-columns="4"] .change{
    font-size:clamp(1.24rem,6vh,1.5rem);
  }
}
/* Bull Pulse entry */
.pulse-entry{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:78px;margin-top:12px;padding:10px 18px;overflow:hidden;border:1px solid rgba(10,178,87,.45);border-radius:18px;background:linear-gradient(105deg,#f57b00 0%,#ff9c00 34%,#f4b40e 49%,#0a9f52 76%,#087942 100%);box-shadow:0 10px 22px rgba(13,112,62,.18),inset 0 1px rgba(255,255,255,.75);color:#fff;text-decoration:none;isolation:isolate}
.pulse-entry:before{content:"";position:absolute;inset:1px;border:1px solid rgba(255,255,255,.45);border-radius:16px;pointer-events:none}
.pulse-entry-art{position:absolute;inset:-25% 20% -30% 43%;z-index:-1;opacity:.26;transform:rotate(-7deg)}
.pulse-entry-art i{position:absolute;width:74px;aspect-ratio:1.1547;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:rgba(255,255,255,.5)}
.pulse-entry-art i:nth-child(1){left:3%;top:12%}.pulse-entry-art i:nth-child(2){left:22%;top:48%;transform:scale(.72)}.pulse-entry-art i:nth-child(3){left:42%;top:2%;transform:scale(1.16)}.pulse-entry-art i:nth-child(4){left:61%;top:45%;transform:scale(.84)}.pulse-entry-art i:nth-child(5){left:82%;top:8%;transform:scale(.62)}
.pulse-entry-icon{display:grid;width:55px;height:55px;place-items:center;margin-right:13px;border:2px solid rgba(255,255,255,.88);border-radius:50%;background:rgba(255,255,255,.17);box-shadow:0 5px 14px rgba(0,0,0,.14),inset 0 0 0 5px rgba(255,255,255,.1)}
.pulse-entry-icon svg{width:38px;fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.pulse-entry-copy{display:grid;justify-items:start;line-height:1.05;text-shadow:0 2px 5px rgba(0,0,0,.18)}
.pulse-entry-copy small{font-size:.68rem;font-weight:950;letter-spacing:.22em}.pulse-entry-copy strong{margin-top:2px;font-size:clamp(1.32rem,2.7vw,2rem);font-weight:1000;letter-spacing:.075em}.pulse-entry-copy span{margin-top:4px;font-size:.78rem;font-weight:900}
.pulse-entry-status{display:flex;align-items:center;gap:13px}.pulse-entry-status b{padding:6px 10px;border:1px solid rgba(255,255,255,.48);border-radius:999px;background:rgba(0,53,31,.2);font-size:.68rem;letter-spacing:.12em}.pulse-entry-status b:before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#6bffac;box-shadow:0 0 8px #6bffac}.pulse-entry-status>span{font-size:2.5rem;font-weight:500;line-height:1}
.pulse-entry-arrow{position:relative;display:block;width:32px;text-align:right;transform:scaleX(1.12);transform-origin:right center}
.pulse-entry-arrow::before{content:"›";position:absolute;inset:0;color:rgba(255,255,255,.72);font-weight:300;text-align:right;opacity:0;pointer-events:none;will-change:transform,opacity}
html[data-power-save="false"] .pulse-entry-arrow::before{animation:portfolioTapTrail 1.65s linear infinite}
html[data-power-save="true"] .pulse-entry-arrow::before{display:none!important}
.pulse-entry:focus-visible{outline:4px solid rgba(24,207,102,.36);outline-offset:3px}.pulse-entry:active{transform:translateY(1px)}
html[data-theme="dark"] .pulse-entry{border-color:rgba(77,255,164,.45);background:linear-gradient(105deg,#a84800,#d16d00 38%,#6e6510 54%,#087845 78%,#075838);box-shadow:0 12px 28px rgba(0,0,0,.35),0 0 22px rgba(27,218,113,.11),inset 0 1px rgba(255,255,255,.18)}
@media(max-width:720px){.pulse-entry{min-height:59px;padding:5px 9px;border-radius:13px}.pulse-entry:before{border-radius:11px}.pulse-entry-icon{width:48px;height:48px;margin-right:10px}.pulse-entry-icon svg{width:33px}.pulse-entry-copy strong{font-size:1.3rem}.pulse-entry-copy span{font-size:.72rem}.pulse-entry-status b{display:none}.pulse-entry-status>span{font-size:2.1rem}}

/* Phone header: reserve a real right-hand column for both utility controls. */
@media(max-width:430px){
  .board-switch-bar{grid-template-columns:96px minmax(0,1fr) 96px;gap:3px;padding-right:max(6px,env(safe-area-inset-right));padding-left:max(6px,env(safe-area-inset-left))}
  .stockbull-switch-link{width:84px;padding-inline:4px}.stockbull-switch-link img{width:57px}
  .current-board-brand{--header-brand-icon-size:32px;width:140px;max-width:100%;height:42px}
  .board-header-actions{min-width:0;gap:3px}.board-header-actions .header-power-save{min-height:40px;padding-inline:4px}.board-header-actions .header-power-save .power-save-toggle{width:40px}.board-header-actions .header-power-save .power-save-toggle[aria-checked="true"] .power-save-thumb{transform:translateX(14px)}
  .board-header-actions .board-theme-toggle{width:40px;height:40px}
}

/* Local transparent artwork looks cleaner directly on the card without the
   shared circular icon plate. Bull Pulse already renders these marks transparently. */
.coin-card[data-id="bitcoin"] .coin-icon-shell,
.coin-card[data-id="bitcoin-cash"] .coin-icon-shell,
.coin-card[data-id="dogecoin"] .coin-icon-shell,
.coin-card[data-id="monacoin"] .coin-icon-shell,
.coin-card[data-id="oasys"] .coin-icon-shell,
.coin-card[data-id="symbol"] .coin-icon-shell,
.coin-card[data-id="ethereum"] .coin-icon-shell,
.coin-card[data-id="ripple"] .coin-icon-shell,
.coin-card[data-id="stellar"] .coin-icon-shell,
.coin-card[data-id="qtum"] .coin-icon-shell,
.coin-card[data-id="basic-attention-token"] .coin-icon-shell,
.coin-card[data-id="binancecoin"] .coin-icon-shell,
.coin-card[data-id="tron"] .coin-icon-shell,
.coin-card[data-id="zcash"] .coin-icon-shell,
.coin-card[data-id="hyperliquid"] .coin-icon-shell,
.coin-card[data-id="chainlink"] .coin-icon-shell,
.coin-card[data-id="monero"] .coin-icon-shell,
.coin-card[data-id="whitebit"] .coin-icon-shell,
.coin-card[data-id="leo-token"] .coin-icon-shell,
.coin-card[data-id="rain"] .coin-icon-shell,
.coin-card[data-id="near"] .coin-icon-shell,
.coin-card[data-id="avalanche-2"] .coin-icon-shell,
.coin-card[data-id="sui"] .coin-icon-shell,
.coin-card[data-id="dai"] .coin-icon-shell,
.coin-card[data-id="polkadot"] .coin-icon-shell,
.coin-card[data-id="sky"] .coin-icon-shell,
.coin-card[data-id="pepe"] .coin-icon-shell,
.coin-card[data-id="ethereum-classic"] .coin-icon-shell,
.reference-card[data-id="reference-btc-usd"] .coin-icon-shell,
.coin-card[data-id="solana"] .coin-icon-shell,
.coin-card[data-id="tezos"] .coin-icon-shell,
.coin-card[data-id="cardano"] .coin-icon-shell{
  overflow:visible;
  border-color:transparent;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.coin-card[data-id="bitcoin"] .coin-icon-shell::after,
.coin-card[data-id="bitcoin-cash"] .coin-icon-shell::after,
.coin-card[data-id="dogecoin"] .coin-icon-shell::after,
.coin-card[data-id="monacoin"] .coin-icon-shell::after,
.coin-card[data-id="oasys"] .coin-icon-shell::after,
.coin-card[data-id="symbol"] .coin-icon-shell::after,
.coin-card[data-id="ethereum"] .coin-icon-shell::after,
.coin-card[data-id="ripple"] .coin-icon-shell::after,
.coin-card[data-id="stellar"] .coin-icon-shell::after,
.coin-card[data-id="qtum"] .coin-icon-shell::after,
.coin-card[data-id="basic-attention-token"] .coin-icon-shell::after,
.coin-card[data-id="binancecoin"] .coin-icon-shell::after,
.coin-card[data-id="tron"] .coin-icon-shell::after,
.coin-card[data-id="zcash"] .coin-icon-shell::after,
.coin-card[data-id="hyperliquid"] .coin-icon-shell::after,
.coin-card[data-id="chainlink"] .coin-icon-shell::after,
.coin-card[data-id="monero"] .coin-icon-shell::after,
.coin-card[data-id="whitebit"] .coin-icon-shell::after,
.coin-card[data-id="leo-token"] .coin-icon-shell::after,
.coin-card[data-id="rain"] .coin-icon-shell::after,
.coin-card[data-id="near"] .coin-icon-shell::after,
.coin-card[data-id="avalanche-2"] .coin-icon-shell::after,
.coin-card[data-id="sui"] .coin-icon-shell::after,
.coin-card[data-id="dai"] .coin-icon-shell::after,
.coin-card[data-id="polkadot"] .coin-icon-shell::after,
.coin-card[data-id="sky"] .coin-icon-shell::after,
.coin-card[data-id="pepe"] .coin-icon-shell::after,
.coin-card[data-id="ethereum-classic"] .coin-icon-shell::after,
.reference-card[data-id="reference-btc-usd"] .coin-icon-shell::after,
.coin-card[data-id="solana"] .coin-icon-shell::after,
.coin-card[data-id="tezos"] .coin-icon-shell::after,
.coin-card[data-id="cardano"] .coin-icon-shell::after{
  display:none;
}
.coin-card[data-id="bitcoin"] .coin-icon,
.coin-card[data-id="bitcoin-cash"] .coin-icon,
.coin-card[data-id="dogecoin"] .coin-icon,
.coin-card[data-id="monacoin"] .coin-icon,
.coin-card[data-id="oasys"] .coin-icon,
.coin-card[data-id="symbol"] .coin-icon,
.coin-card[data-id="ethereum"] .coin-icon,
.coin-card[data-id="ripple"] .coin-icon,
.coin-card[data-id="stellar"] .coin-icon,
.coin-card[data-id="qtum"] .coin-icon,
.coin-card[data-id="basic-attention-token"] .coin-icon,
.coin-card[data-id="binancecoin"] .coin-icon,
.coin-card[data-id="tron"] .coin-icon,
.coin-card[data-id="zcash"] .coin-icon,
.coin-card[data-id="hyperliquid"] .coin-icon,
.coin-card[data-id="chainlink"] .coin-icon,
.coin-card[data-id="monero"] .coin-icon,
.coin-card[data-id="whitebit"] .coin-icon,
.coin-card[data-id="leo-token"] .coin-icon,
.coin-card[data-id="rain"] .coin-icon,
.coin-card[data-id="near"] .coin-icon,
.coin-card[data-id="avalanche-2"] .coin-icon,
.coin-card[data-id="sui"] .coin-icon,
.coin-card[data-id="dai"] .coin-icon,
.coin-card[data-id="polkadot"] .coin-icon,
.coin-card[data-id="sky"] .coin-icon,
.coin-card[data-id="pepe"] .coin-icon,
.coin-card[data-id="ethereum-classic"] .coin-icon,
.reference-card[data-id="reference-btc-usd"] .coin-icon,
.coin-card[data-id="solana"] .coin-icon,
.coin-card[data-id="tezos"] .coin-icon,
.coin-card[data-id="cardano"] .coin-icon{
  object-fit:contain;
  filter:drop-shadow(0 3px 5px rgba(13,42,61,.12));
}
.coin-card[data-id="solana"] .coin-icon{transform:scale(.97)}
.coin-card[data-id="tezos"] .coin-icon{transform:scale(.97)}
.coin-card[data-id="cardano"] .coin-icon{transform:scale(1.02)}
.coin-card[data-id="sui"] .coin-icon{transform:scale(.92)}
.coin-card[data-id="ethereum-classic"] .coin-icon{transform:scale(.9)}
.coin-card[data-id="sky"] .coin-icon{
  box-sizing:border-box;
  border:1px solid rgba(53,66,72,.12);
  border-radius:50%;
  filter:none;
}
html[data-theme="dark"] .coin-card[data-id="sky"] .coin-icon{
  border-color:rgba(255,255,255,.16);
}

.demo-migration { padding:16px;border:2px solid #ed9b25;border-radius:12px;background:#fff9eb;color:#20252b; }
.demo-migration h3 { margin:0 0 8px;font-size:1.05rem; }
.demo-migration p { margin:0 0 12px;line-height:1.6;font-size:.9rem; }
.demo-migration button { display:block;width:100%;min-height:48px;margin-top:8px;padding:12px;border:1px solid #178d50;border-radius:9px;background:#fff;color:#146f40;font-weight:800;text-align:left;cursor:pointer; }

/* Clip approved logo artwork independently of the surrounding demo flames. */
.demo-trade-toggle-icon{overflow:visible}
.demo-trade-logo-shell{position:relative;z-index:3;display:block;width:88%;height:88%;border-radius:12px;overflow:hidden}
.demo-trade-logo-shell:not(.listed-icon)>img{display:block;width:100%;height:100%;border-radius:0;object-fit:contain}
.demo-trade.has-position .demo-trade-logo-shell{width:104%;height:104%;border-radius:50%}
@media(max-width:720px){.demo-trade-logo-shell{border-radius:9px}}

/* Matched official affiliate banners on the crypto boards. */
.exchange-support-banner { display:flex;justify-content:center;min-width:0; }
.exchange-support-banner a { display:block;width:320px;max-width:100%;outline-offset:5px; }
.exchange-support-banner img { display:block;width:100%;height:auto; }
.exchange-support-banner a:focus-visible { outline:3px solid #087e43; }
@media (min-width:721px) { .exchange-support-card { grid-template-columns:minmax(0,1fr) 320px; } }

/* Related exchange partners share one compact PR section while each link remains independent. */
.tax-support-card.exchange-partners-card { display:block; }
.exchange-partners-heading { display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kicker disclosure" "title title";gap:8px 16px;margin-bottom:14px; }
.exchange-partners-heading .tax-support-kicker { grid-area:kicker;margin:0; }
.exchange-partners-heading h2 { grid-area:title;display:flex;align-items:center;gap:10px;margin:0;color:#17201b;font-size:clamp(1.35rem,3vw,2rem);font-weight:950;letter-spacing:-.035em;line-height:1.3; }
.exchange-partners-bull { width:clamp(42px,5vw,56px);height:auto;flex:0 0 auto;filter:drop-shadow(0 3px 7px rgba(238,112,18,.14)); }
.exchange-brand-bit { color:#f47700; }
.exchange-brand-bull { color:#08a63d; }
.exchange-partners-heading small { grid-area:disclosure;align-self:center;color:#7a7f7c;font-size:.72rem;font-weight:700; }
.exchange-partners-grid { display:grid;grid-template-columns:minmax(0,1fr);gap:14px; }
.exchange-partner-item { display:grid;grid-template-rows:auto 1fr auto;min-width:0;padding:16px;border:1px solid rgba(8,142,67,.18);border-radius:16px;background:rgba(255,255,255,.72); }
.exchange-partner-item h3 { margin:0;color:#17201b;font-size:clamp(1.18rem,2.6vw,1.55rem);font-weight:950;letter-spacing:-.025em; }
.exchange-partner-item p { margin:5px 0 13px;color:#59645e;font-size:.86rem;font-weight:700;line-height:1.55; }
html[data-theme="dark"] .exchange-partners-heading h2,html[data-theme="dark"] .exchange-partner-item h3 { color:#f1f5f3; }
html[data-theme="dark"] .exchange-partners-heading small { color:#929c97; }
html[data-theme="dark"] .exchange-partner-item { border-color:rgba(85,175,126,.25);background:rgba(12,24,19,.56); }
html[data-theme="dark"] .exchange-partner-item p { color:#b4bdb8; }
@media(max-width:720px){.exchange-partners-grid{grid-template-columns:1fr}.exchange-partners-heading{grid-template-columns:1fr;grid-template-areas:"kicker" "title" "disclosure"}.exchange-partners-heading small{width:100%}.exchange-partners-heading h2{align-items:flex-start}.exchange-partners-bull{margin-top:1px}.exchange-partner-item{padding:14px}}

.exchange-support-card { gap:clamp(14px,2vw,24px);padding:clamp(18px,2.5vw,28px); }

.tax-support-guide-link { display:flex;width:fit-content;min-height:44px;align-items:center;gap:6px;margin-top:6px;color:#087e43;font-size:.85rem;font-weight:900;text-underline-offset:4px; }
.tax-support-guide-link:focus-visible { outline:3px solid #087e43;outline-offset:3px;border-radius:3px; }
html[data-theme="dark"] .tax-support-guide-link { color:#72dfa2; }

/* Compact learning and PR cards, with matching title typography. */
.learning-hub-title,.exchange-support-card .tax-support-copy h2 { font-family:inherit;font-size:clamp(1.35rem,3vw,2rem);font-weight:950;letter-spacing:-.035em;line-height:1.3; }
.learning-hub { padding:clamp(16px,2vw,24px); }
.learning-hub-kicker { margin-bottom:3px; }
.exchange-support-card { gap:12px;padding:clamp(16px,2vw,24px); }
.exchange-support-card .tax-support-kicker { margin-bottom:5px; }
.exchange-support-card .tax-support-copy > p:not(.tax-support-kicker) { margin:4px 0 3px;line-height:1.5; }
.tax-support-topline { display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:5px; }
.exchange-support-card .tax-support-topline .tax-support-kicker { margin:0; }
.tax-support-topline .tax-support-guide-link { display:inline-flex;width:auto;min-height:34px;margin:0;padding:6px 10px;flex-shrink:0;gap:4px;border:1px solid rgba(8,126,67,.38);border-radius:9px;color:#fff;background:linear-gradient(135deg,#0d9e53,#087e43);box-shadow:0 2px 6px rgba(8,126,67,.16);font-size:.7rem;font-weight:900;letter-spacing:0;line-height:1.2;text-decoration:none; }
.tax-support-topline .tax-support-guide-link:hover { background:#066a37; }
.tax-support-topline .tax-support-guide-link span { font-size:1.1rem;line-height:1; }
html[data-theme="dark"] .tax-support-topline .tax-support-guide-link { color:#fff;border-color:#379464; }
@media(max-width:620px) { .learning-hub { padding:14px 13px; }.learning-hub-description { margin-top:4px;line-height:1.5; } }

/* One proportional card design, shared by world/domestic and every density.
   Coordinates use a 360 x 384 reference card; cqw measures each card itself. */
html[data-card-layout="proportional"][data-columns] main{width:min(1640px,100%);max-width:none;margin-inline:auto;padding:clamp(8px,1.25vw,18px)}
:is(#coinGrid,#referenceGrid){gap:8px;align-items:start}
:is(#coinGrid,#referenceGrid) .coin-card{container-type:inline-size;aspect-ratio:360 / 384;padding:0;min-height:0;--icon-size:25cqw;--card-edit-offset:0cqw}
:is(#coinGrid,#referenceGrid).editing .coin-card{aspect-ratio:360 / 430;--card-edit-offset:12.778cqw}
:is(#coinGrid,#referenceGrid) .coin-card .coin-heading{position:absolute;top:calc(3.333cqw + var(--card-edit-offset));left:3.333cqw;right:3.333cqw;min-height:0;height:25cqw;gap:3.889cqw}
:is(#coinGrid,#referenceGrid) .coin-card .coin-identity{height:100%;gap:3.889cqw;align-items:flex-start}
:is(#coinGrid,#referenceGrid) .coin-card .coin-identity>div:last-child{padding-top:0}
:is(#coinGrid,#referenceGrid) .coin-card .coin-icon-shell{width:25cqw;height:25cqw}
:is(#coinGrid,#referenceGrid) .coin-card .coin-symbol-row{gap:1.389cqw}
:is(#coinGrid,#referenceGrid) .coin-card .coin-symbol{font-size:9.444cqw;line-height:1;letter-spacing:-.035em}
:is(#coinGrid,#referenceGrid) .coin-card .coin-name{font-size:2.778cqw;line-height:1.2;margin-top:.833cqw}
:is(#coinGrid,#referenceGrid) .coin-card .currency{display:none}
:is(#coinGrid,#referenceGrid) .coin-card .change-strip{position:absolute;top:calc(13.333cqw + var(--card-edit-offset));left:31.111cqw;right:0;height:14.444cqw;min-height:0;margin:0;padding:.833cqw 3.333cqw;align-items:center;justify-content:flex-end}
:is(#coinGrid,#referenceGrid) .coin-card .change{font-size:10cqw;line-height:1;letter-spacing:-.045em;white-space:nowrap}
:is(#coinGrid,#referenceGrid) .coin-card .tick-arrow{left:1.111cqw;width:6.111cqw;height:7.778cqw;margin:auto 0}
:is(#coinGrid,#referenceGrid) .coin-card .chart-wrap{position:absolute;top:calc(30.833cqw + var(--card-edit-offset));left:3.333cqw;right:3.333cqw;height:62.222cqw;margin:0}
:is(#coinGrid,#referenceGrid) .coin-card .sparkline{width:100%;height:100%;aspect-ratio:auto;overflow:visible}
:is(#coinGrid,#referenceGrid) .coin-card .sparkline [vector-effect],
:is(#coinGrid,#referenceGrid) .coin-card .sparkline line,
:is(#coinGrid,#referenceGrid) .coin-card .sparkline path,
:is(#coinGrid,#referenceGrid) .coin-card .sparkline rect{vector-effect:none}
:is(#coinGrid,#referenceGrid) .coin-card .card-price-row{position:absolute;top:calc(93.889cqw + var(--card-edit-offset));left:3.333cqw;right:3.333cqw;height:12.222cqw;margin:0;gap:1.944cqw;align-items:center;justify-content:center;line-height:1}
:is(#coinGrid,#referenceGrid) .coin-card .price{font-size:10.417cqw;line-height:1;font-weight:900;letter-spacing:-.045em;white-space:nowrap}
:is(#coinGrid,#referenceGrid) .coin-card .card-price-row>span:empty{display:none}
.column-picker-options button[data-columns]{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;text-align:center}
.column-picker-options button[data-columns][hidden]{display:none}

:is(#coinGrid,#referenceGrid) .coin-card .sparkline .price-line{stroke-width:1.73}
:is(#coinGrid,#referenceGrid) .coin-card .sparkline .candle-wick{stroke-width:1.59}
:is(#coinGrid,#referenceGrid) .coin-card .sparkline .candle-body{stroke-width:1.11}
:is(#coinGrid,#referenceGrid) .coin-card .sparkline .grid-line{stroke-width:1.38}
:is(#coinGrid,#referenceGrid) .coin-card .sparkline .baseline-line{stroke-width:3.05}
:is(#coinGrid,#referenceGrid) .coin-card .sparkline .extrema-line{stroke-width:1.38}
:is(#coinGrid,#referenceGrid) .coin-card .sparkline .chart-indicator-line{stroke-width:1.59}

:is(#coinGrid,#referenceGrid) .coin-card .chart-wrap::after{font-size:2.778cqw;right:1.111cqw;padding:.556cqw 1.389cqw;border-radius:.833cqw}

/* Keep the document inside the viewport at every card density. `clip`
   prevents horizontal overflow without creating a scroll container around
   the sticky header; vertical scrolling remains on the document. */
html[data-card-layout="proportional"],
html[data-card-layout="proportional"] body{
  width:100%;max-width:100%;min-width:0;overflow-x:clip;
}

/* Explicit card heights avoid stale Safari grid rows during rotation.
   The grid owns cqw here; descendants still use their card container. */
:is(#coinGrid,#referenceGrid){container-type:inline-size;--card-grid-gap:clamp(7px,.8vw,12px);gap:var(--card-grid-gap);--card-row-width:calc((100cqw - (var(--columns) - 1)*var(--card-grid-gap))/var(--columns));align-items:start}
:is(#coinGrid,#referenceGrid) .coin-card{height:calc(var(--card-row-width)*384/360)}
:is(#coinGrid,#referenceGrid).editing .coin-card{height:calc(var(--card-row-width)*430/360)}

/* Readable, colorful chart controls and friendly navigation marks. */
.chart-mode-switch .chart-mode-bull-arrow { filter:drop-shadow(0 0 1px rgba(255,255,255,.9)); }
.chart-mode-switch .chart-mode-color-candles { stroke-linecap:round; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.domestic-timeframe-title h1 { display:flex; align-items:center; gap:7px; }
.domestic-flag-icon { flex:none; width:32px; height:26px; filter:drop-shadow(0 2px 3px rgba(21,80,48,.18)); }
@media(max-width:720px) { .domestic-flag-icon { width:24px; height:21px; } }
@media(max-width:360px) { .domestic-timeframe-title h1 { gap:4px; } .domestic-flag-icon { width:20px; height:18px; } }

html[data-theme="dark"] .chart-mode-color-candles .icon-body-down { fill:#ff6570; }
html[data-theme="dark"] .chart-mode-color-candles .icon-body-up { fill:#35d87c; }
html[data-theme="dark"] .chart-mode-color-candles .icon-wick-down { stroke:#ff6570; }
html[data-theme="dark"] .chart-mode-color-candles .icon-wick-up { stroke:#35d87c; }

/* Selected line-chart arrows reverse to white on the green button. */
.chart-mode-switch button[data-chart-mode="line"][aria-pressed="true"] .chart-mode-bull-arrow path:first-child { stroke:#fff; }
.chart-mode-switch button[data-chart-mode="line"][aria-pressed="true"] .chart-mode-bull-arrow path:last-child { fill:#fff; }

/* Fit the full Cryptact PR title without wrapping or truncation. */
.exchange-support-card .tax-support-copy { min-width:0; }
.exchange-support-card #taxSupportTitle { white-space:nowrap;max-width:100%; }

/* Social shortcuts share the footer's plain icon presentation in both themes. */
html body .primary-site-nav .primary-site-nav-items a:is(.x-nav-link,.youtube-nav-link,.line-nav-link),
html body .primary-site-nav .primary-site-nav-items a:is(.x-nav-link,.youtube-nav-link,.line-nav-link):is(:hover,:focus-visible,:active){border:0;background:transparent;box-shadow:none}
html body .primary-site-nav .primary-site-nav-items a:is(.x-nav-link,.youtube-nav-link,.line-nav-link):focus-visible{outline:2px solid #209858;outline-offset:2px}

/* Keep the chart indicator pair centered independently of the install action. */
html body .primary-site-nav{justify-content:center;overflow-x:visible}
html body .primary-site-nav-items{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;flex:1 1 auto;min-width:0;width:100%;margin-inline:0;gap:8px}
.primary-site-nav .board-indicator-controls{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
.primary-site-nav .board-indicator-controls .indicator-toggle{white-space:nowrap}
.primary-site-nav-items>.install-app-button{grid-column:1;grid-row:1;justify-self:start}
@media(max-width:720px){
 html body .primary-site-nav-items{grid-template-columns:minmax(0,1fr)}
 .primary-site-nav .board-indicator-controls{grid-column:1;gap:8px}
 .primary-site-nav-items>.install-app-button{grid-column:1;grid-row:2;justify-self:center}
}

/* Live SVG labels are replaced while quotes arrive. They must not become the
   browser's scroll anchor and pull a stationary viewport toward new labels. */
#coinGrid{overflow-anchor:none}