:root {
  color-scheme: dark;
  --bg:#060b18;
  --paper:#0e1a31;
  --ink:#e9f3ff;
  --muted:#8ea4c3;
  --line:#29405e;
  --accent:#60e3f3;
  --soft:#172f49;
  --up:#ff657f;
  --down:#29cba4;
  --shadow:0 18px 48px rgba(0,4,18,.32)
}

* {
  box-sizing:border-box
}
body {
  margin:0;
  min-height:100vh;
  background:radial-gradient(ellipse 55% 42% at 85% -4%,rgba(65,105,208,.25),transparent 80%),radial-gradient(ellipse 45% 42% at 0 50%,rgba(39,192,205,.1),transparent 85%),linear-gradient(180deg,#071126,var(--bg) 60%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
  line-height:1.5
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(98,157,224,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(98,157,224,.035) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(transparent,#000 12%,#000 72%,transparent)
}
button,input,select {
  font:inherit
}
button {
  cursor:pointer
}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px
}
.shell {
  position:relative;
  z-index:1;
  max-width:1490px;
  margin:auto;
  padding:0 25px 50px
}
.muted {
  color:var(--muted)
}
.small {
  font-size:11px
}
.pad {
  padding:16px 20px
}
.mast {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  padding:36px 4px 28px
}
.overline {
  font:700 10px Arial,sans-serif;
  letter-spacing:.22em;
  color:var(--accent)
}
h1 {
  font-size:34px;
  letter-spacing:.07em;
  margin:5px 0 3px
}
h2 {
  font-size:15px;
  margin:0
}
.mast p {
  font-size:12px;
  margin:0;
  color:var(--muted)
}
.mastright {
  display:flex;
  align-items:center;
  gap:10px
}
#notify[hidden],#alertsButton[hidden] { display:none!important; }
.status {
  font:11px Arial,sans-serif;
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:99px;
  background:#0e1a31;
  color:var(--muted)
}
.status.ok:before,.status.bad:before {
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:6px;
  border-radius:50%;
  background:#36a878
}
.status.bad:before {
  background:#c85d4d
}
@keyframes marketDisconnectedPulse {
  0%,100% { opacity:.48; box-shadow:0 0 0 0 rgba(232,77,99,.28),0 0 4px rgba(232,77,99,.4); }
  50% { opacity:1; box-shadow:0 0 0 5px rgba(232,77,99,0),0 0 11px rgba(232,77,99,.8); }
}
.status.bad:before { animation:marketDisconnectedPulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) {
  .status.bad:before { animation:none; opacity:1; }
}
.ghost,.accent {
  border-radius:8px;
  padding:8px 12px;
  font-size:11px;
  white-space:nowrap
}
.ghost {
  background:#0e1a31;
  border:1px solid var(--line);
  color:var(--ink)
}
.ghost:hover {
  border-color:var(--accent)
}
.accent {
  background:var(--accent);
  border:1px solid var(--accent);
  color:#0e1a31
}
.accent:hover {
  background:#4fc9df
}
.ghost:disabled {
  opacity:.45;
  cursor:not-allowed
}
.layout {
  display:grid;
  grid-template-columns:265px minmax(0,1fr);
  gap:20px;
  align-items:start
}
.sidebar,.workspace {
  min-width:0;
  display:grid;
  gap:18px
}
.panel {
  background:rgba(12,23,44,.88);
  border:1px solid var(--line);
  border-radius:13px;
  box-shadow:var(--shadow);
  overflow:hidden;
  backdrop-filter:blur(14px)
}
.hero {
  border-color:#32718a;
  background:linear-gradient(145deg,rgba(18,37,68,.98),rgba(8,19,39,.96) 70%)
}
.watch.selected {
  box-shadow:inset 2px 0 var(--accent)
}
.status.ok:before {box-shadow:0 0 9px #36a878}
.status.bad:before {box-shadow:0 0 9px #c85d4d}
.panelhead {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line);
  padding:15px 18px
}
.panelhead span {
  font:10px Arial,sans-serif;
  color:var(--muted)
}
.add {
  display:grid;
  grid-template-columns:76px minmax(0,1fr) 45px;
  gap:6px;
  padding:14px 13px 3px
}
.add input,.add select,.settings input[type=number],.settings select {
  min-width:0;
  width:100%;
  padding:8px 7px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#0e1a31;
  font:12px Arial,sans-serif;
  color:var(--ink)
}
.add button {
  padding:7px 2px
}
.error {
  color:#ff879a;
  font:11px Arial,sans-serif;
  min-height:17px;
  padding:0 14px
}
.watchlist {
  padding:0 9px
}
.watch {
  border-top:1px solid #263b56;
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 4px;
  min-width:0
}
.watch.selected {
  background:#163149;
  border-radius:7px
}
.watchmain {
  border:0;
  background:transparent;
  text-align:left;
  min-width:0;
  flex:1;
  color:var(--ink);
  padding:2px
}
.watchmain strong {
  font:700 13px Arial,sans-serif
}
.watchmain span {
  display:block;
  color:var(--muted);
  font:10px Arial,sans-serif;
  margin-top:2px
}
.watchprice {
  text-align:right;
  font:11px Arial,sans-serif;
  white-space:nowrap
}
.watchprice small {
  display:block;
  font-size:10px
}
.watchactions {
  display:flex;
  flex-direction:column
}
.watchactions button {
  border:0;
  background:transparent;
  color:#788eac;
  font:12px Arial,sans-serif;
  padding:0 2px
}
.watchactions button:hover {
  color:var(--accent)
}
.settings {
  padding-bottom:13px
}
.settings label {
  display:block;
  margin:12px 17px 0;
  font-size:11px;
  color:var(--muted)
}
.settings label select,.settings label input[type=number] {
  margin-top:5px
}
.settings .check {
  color:var(--ink);
  font-size:12px
}
.settings .check input {
  accent-color:var(--accent);
  vertical-align:middle
}
.settings p {
  margin:11px 17px 0;
  line-height:1.6
}
.assetHeading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 24px 14px;
  gap:10px
}
.assetLabel {
  font:700 23px Arial,sans-serif;
  letter-spacing:.01em
}
.heroPrice {
  text-align:right
}
.heroPrice strong {
  display:block;
  font:700 29px Georgia,serif
}
.heroPrice span {
  font:12px Arial,sans-serif
}
.up {
  color:var(--up)!important
}
.down {
  color:var(--down)!important
}
.toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:0 23px 13px
}
.segmented {
  display:flex;
  gap:3px;
  flex-wrap:wrap
}
.segmented button {
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:var(--muted);
  padding:5px 9px;
  font:11px Arial,sans-serif
}
.segmented button.active {
  background:var(--soft);
  border-color:#337183;
  color:var(--accent);
  font-weight:700
}
.chartStatus {
  padding:4px 24px 8px;
  color:var(--muted);
  font:11px Arial,sans-serif;
  min-height:27px
}
.chartBox {
  position:relative;
  height:480px;
  margin:0 10px 0 17px
}
canvas {
  display:block;
  width:100%;
  height:100%;
  touch-action:pan-y
}
.chartTip {
  position:absolute;
  pointer-events:none;
  background:#172a43;
  color:#0e1a31;
  border-radius:8px;
  padding:8px 10px;
  font:11px Arial,sans-serif;
  white-space:pre-line;
  z-index:2;
  box-shadow:0 6px 20px #0002
}
.legend {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  padding:11px 23px 16px;
  color:var(--muted);
  font:10px Arial,sans-serif
}
.swatch {
  display:inline-block;
  width:13px;
  height:3px;
  vertical-align:middle;
  margin-right:5px;
  border-radius:3px
}
.ma20 {
  background:#ffcf70
}
.ma60 {
  background:#79acff
}
.support {
  background:#31d7bf
}
.resistance {
  background:#f58fa7
}
.fib {
  background:#bc9eff
}
.lower {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.lower .pad {
  padding-top:12px
}
.lower p {
  line-height:1.7;
  margin:0 0 12px
}
.badge {
  background:#183748;
  color:var(--accent)!important;
  padding:4px 7px;
  border-radius:99px
}
.result {
  font-size:13px;
  font-weight:700;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#152842;
  margin:10px 0
}
.lesson #lessonDetails {
  line-height:1.65
}
.quizActions {
  display:flex;
  gap:7px;
  flex-wrap:wrap
}
.feed {
  max-height:260px;
  overflow:auto;
  padding:1px 20px 12px
}
.feeditem {
  border-bottom:1px solid #263b56;
  padding:10px 0;
  font-size:12px
}
.feeditem:last-child {
  border:0
}
.feeditem small {
  color:var(--muted);
  display:block;
  font:10px Arial,sans-serif;
  margin-top:4px
}
.feedempty {
  padding:20px 0;
  color:var(--muted);
  font-size:12px
}
footer {
  padding:24px 3px;
  color:var(--muted);
  font-size:11px;
  line-height:1.7
}

@media(max-width:1050px) {
  .layout {
  grid-template-columns:225px minmax(0,1fr)
}
.chartBox {
  height:420px
}
.lower {
  grid-template-columns:1fr
}

}
@media(max-width:720px) {
  .shell {
  padding:0 12px 35px
}
.mast {
  padding:24px 3px 20px;
  align-items:start
}
.mast h1 {
  font-size:29px
}
.mastright {
  flex-direction:column;
  align-items:end
}
.layout {
  grid-template-columns:1fr
}
.sidebar {
  grid-template-columns:1fr 1fr
}
.sidebar .panel:first-child {
  grid-row:span 2
}
.chartBox {
  height:390px
}
.assetHeading {
  padding:18px 15px 12px
}
.toolbar {
  padding:0 14px 12px
}
.legend {
  padding:10px 14px
}

}
@media(max-width:520px) {
  .sidebar {
  grid-template-columns:1fr
}
.sidebar .panel:first-child {
  grid-row:auto
}
.chartBox {
  height:350px
}
.heroPrice strong {
  font-size:23px
}
.assetLabel {
  font-size:20px
}

}

.feeditem a {
  color:var(--ink);
  text-decoration:none
}
.feeditem a:hover {
  color:var(--accent)
}

.miniButton {
  border:0;
  background:transparent;
  padding:0;
  display:block;
  width:62px;
  height:38px;
  flex:0 0 62px
}
.miniButton.pending {
  border-radius:6px;
  background:linear-gradient(100deg,rgba(123,165,182,.07) 20%,rgba(123,165,182,.2) 48%,rgba(123,165,182,.07) 76%);
  background-size:200% 100%;
  animation:miniPlaceholder 2s ease-in-out infinite
}
@keyframes miniPlaceholder {
  to { background-position-x:-200% }
}
@media (prefers-reduced-motion:reduce) {
  .miniButton.pending { animation:none }
}
.miniCanvas {
  display:block;
  width:62px;
  height:38px
}
.watchmain {
  max-width:65px
}
.watchprice {
  font-size:10px
}
.miniButton:hover {
  background:#163149;
  border-radius:5px
}

.sidebar>.panel:first-child {
  overflow:visible;
  position:relative;
  z-index:3
}
.add {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 52px;
  gap:7px;
  padding:14px 13px 4px
}
.searchWrap {
  grid-column:1/-1;
  position:relative
}
.searchWrap::before {
  content:"🔍";
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  line-height:1;
  pointer-events:none;
  z-index:1;
}
.searchWrap input {
  width:100%;
  padding-left:34px;
}
.add #addGroup {
  width:100%
}
.suggestions {
  position:absolute;
  top:calc(100% + 5px);
  left:0;
  right:0;
  max-height:310px;
  overflow:auto;
  background:#0e1a31;
  border:1px solid #426383;
  border-radius:10px;
  box-shadow:0 14px 28px #0007;
  z-index:10
}
.suggestions[hidden] {
  display:none
}
.suggestion {
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:9px 10px;
  border:0;
  border-bottom:1px solid #263b56;
  background:#0e1a31;
  text-align:left;
  color:var(--ink)
}
.suggestion .suggestLogo { width: 28px; height: 28px; flex: 0 0 28px; }
.suggestion:last-child {
  border:0
}
.suggestion:hover,.suggestion.active {
  background:#19344d
}
.suggestion .suggestName {
  flex:1;
  min-width:0
}
.suggestion strong {
  font:700 12px Arial,sans-serif
}
.suggestion small {
  display:block;
  font:10px Arial,sans-serif;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.suggestion .suggestType {
  font:10px Arial,sans-serif;
  color:var(--accent);
  white-space:nowrap
}
.suggestions .emptyHint {
  padding:12px;
  color:var(--muted);
  font-size:11px
}
.selectedAssetPreview { grid-column:1/-1; display:flex; align-items:center; gap:9px; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--field); }
.selectedAssetPreview[hidden] { display:none; }
.selectedAssetPreview .selectedAssetLogo { flex:none; width:28px; height:28px; }
.selectedAssetDetails { display:flex; flex:1; flex-direction:column; gap:2px; min-width:0; }
.selectedAssetDetails strong { color:var(--ink); font:700 12px Arial,sans-serif; }
.selectedAssetDetails small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font:10px Arial,sans-serif; }
.selectedAssetState { flex:none; color:var(--accent); font:10px Arial,sans-serif; }
.watchGroupStale { padding:8px 12px; color:var(--accent); font:11px Arial,sans-serif; }
.alreadyInGroupNotice {
  position:absolute;
  right:13px;
  bottom:43px;
  z-index:8;
  max-width:calc(100% - 26px);
  padding:0;
  color:#f6ce7e;
  font:700 12px Arial,sans-serif;
  text-shadow:0 0 9px rgba(245,195,106,.45);
  white-space:nowrap;
  overflow:visible;
  pointer-events:none;
  animation:alreadyInGroupRise 2.3s ease-out forwards;
}
.alreadyInGroupNotice::before,.alreadyInGroupNotice::after {
  content:"";
  position:absolute;
  left:38%;
  bottom:65%;
  width:19px;
  height:19px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(248,208,132,.5),rgba(109,197,199,.18) 48%,transparent 72%);
  filter:blur(4px);
  pointer-events:none;
  animation:alreadyInGroupWisp 2s ease-out forwards;
}
.alreadyInGroupNotice::after {
  left:63%;
  width:25px;
  height:25px;
  animation-delay:.15s;
}
@keyframes alreadyInGroupRise {
  0% { opacity:0; transform:translateY(8px) scale(.94); filter:blur(0); }
  8%,44% { opacity:1; filter:blur(0); }
  75% { opacity:.65; }
  100% { opacity:0; transform:translateY(-74px) scale(1.08); filter:blur(8px); }
}
@keyframes alreadyInGroupWisp {
  0% { opacity:0; transform:translate(0,4px) scale(.7); }
  18% { opacity:.85; }
  100% { opacity:0; transform:translate(-12px,-58px) scale(2.8); }
}
@media (prefers-reduced-motion:reduce) {
  .alreadyInGroupNotice,.alreadyInGroupNotice::before,.alreadyInGroupNotice::after { animation:none; }
}
.groupForm {
  display:flex;
  gap:7px;
  padding:14px 13px 4px
}
.groupForm input {
  min-width:0;
  flex:1;
  border:1px solid var(--line);
  border-radius:7px;
  padding:8px;
  font:12px Arial,sans-serif
}
.groupForm button {
  padding:7px 9px
}
.groupsPanel .pad {
  margin:0;
  padding-top:0
}
.watchGroup {
  padding:9px 4px 4px;
  display:flex;
  align-items:center;
  gap:6px;
  border-top:1px solid var(--line);
  margin-top:4px
}
.watchGroup strong {
  font:700 11px Arial,sans-serif;
  color:#a6d1e8;
  flex:1
}
.watchGroup button {
  border:0;
  background:none;
  color:#8ea4c3;
  font:10px Arial,sans-serif;
  padding:1px 3px
}
.watchGroup button:hover {
  color:var(--accent)
}
.watchGroupEmpty {
  font-size:11px;
  color:#788eac;
  padding:5px 4px 10px
}
.watchLogo,.heroLogo {
  display:grid;
  place-items:center;
  flex:none;
  background:#f1f7ff;
  border-radius:10px;
  overflow:hidden
}
.watchLogo {
  width:28px;
  height:28px
}
.watchLogo img {
  width:25px;
  height:25px;
  object-fit:contain
}
.heroLogo {
  width:48px;
  height:48px;
  border-radius:13px
}
.heroLogo img {
  width:40px;
  height:40px;
  object-fit:contain
}
.watchLogo .fallback,.heroLogo .fallback {
  color:#4f6780;
  font:700 17px Georgia,serif
}
.watchLogo .tickerFallback,.heroLogo .tickerFallback {
  font: 800 clamp(7px, 1vw, 10px) system-ui, sans-serif;
  letter-spacing: -.04em;
  color: #385c78;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.heroLogo .tickerFallback { font-size: 12px; }
.heroIdentity {
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0
}
.watch {
  gap:5px
}
.watchmain {
  max-width:47px
}
.miniButton,.miniCanvas {
  width:52px;
  flex-basis:52px
}
.watchprice {
  font-size:9px
}
.infoBody {
  padding:15px 20px 18px
}
.infoTitle {
  font:700 16px Arial,sans-serif;
  margin-bottom:5px
}
.infoGrid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:13px 0
}
.infoMetric {
  background:#172a43;
  border:1px solid #29405e;
  border-radius:8px;
  padding:10px
}
.infoMetric small {
  display:block;
  font:10px Arial,sans-serif;
  color:var(--muted);
  margin-bottom:4px
}
.infoMetric strong {
  font:12px Arial,sans-serif;
  word-break:break-word
}
.infoBody a {
  color:var(--accent);
  font-size:11px;
  text-decoration:none
}
.infoBody a:hover {
  text-decoration:underline
}

@media(max-width:1050px) {
  .infoGrid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

}
@media(max-width:520px) {
  .infoGrid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

}

.layout {
  grid-template-columns:305px minmax(0,1fr)
}
.watchmain {
  max-width:70px
}
.watchprice {
  font-size:10px
}
.watch .miniButton,.watch .miniCanvas {
  width:58px;
  flex-basis:58px
}

@media(max-width:1050px) {
  .layout {
  grid-template-columns:250px minmax(0,1fr)
}
.watchmain {
  max-width:52px
}
.watch .miniButton,.watch .miniCanvas {
  width:44px;
  flex-basis:44px
}
.watchLogo {
  width:25px;
  height:25px
}
.watchLogo img {
  width:23px;
  height:23px
}

}

@media(max-width:720px) {
  .layout {
  grid-template-columns:1fr
}
.watchmain {
  max-width:none
}
.watch .miniButton,.watch .miniCanvas {
  width:72px;
  flex-basis:72px
}
.watchprice {
  font-size:11px
}

}

/* Chart layout and palette follow the supplied light market reference. */
:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --paper: #ffffff;
  --ink: #182131;
  --muted: #758091;
  --line: #e7ebf0;
  --accent: #e64875;
  --soft: #fff0f5;
  --up: #e94872;
  --down: #28b878;
  --shadow: 0 8px 28px rgba(25, 48, 73, .055);
}
body {
  background: radial-gradient(circle at 88% 0%, #fff1f6, transparent 33%),
    linear-gradient(180deg, #fff, #f5f7fa 45%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}
body::before { display: none; }
.panel { background: var(--paper); backdrop-filter: none; }
.hero { background: #fff; border-color: #e9e9ed; }
.status, .ghost, .add input, .add select, .settings input[type=number],
.settings select, .groupForm input {
  background: #fff;
  color: var(--ink);
}
.status { border-color: var(--line); }
.accent { color: #fff; background: var(--accent); border-color: var(--accent); }
.accent:hover { background: #d93967; }
.ghost:hover { background: var(--soft); }
.watch.selected, .miniButton:hover { background: #fff2f5; }
.watchGroup strong { color: #596679; }
.watchGroup button, .watchactions button { color: #8c98a6; }
.watchGroupEmpty { color: #9ca5b0; }
.watchLogo, .heroLogo { background: #fff; border: 1px solid #e9edf1; }
.suggestions { background: #fff; border-color: #dfe6ed; box-shadow: 0 14px 28px #28415d20; }
.suggestion { background: #fff; border-bottom-color: #eef0f3; }
.suggestion:hover, .suggestion.active { background: #fff3f6; }
.infoMetric, .result { background: #f9fafc; border-color: var(--line); }
.badge { background: #fff1f5; color: var(--accent) !important; }
.chartTip { background: #fff; color: var(--ink); border: 1px solid #dfe5eb; box-shadow: 0 6px 18px #20334d22; }
.chartBox { height: 510px; margin: 0 12px; cursor: grab; touch-action: pan-y; }
.chartBox canvas { touch-action: pan-y; }
.chartBox:active { cursor: grabbing; }
.chartMetrics {
  position: absolute;
  z-index: 1;
  top: 11px;
  left: 22px;
  right: 76px;
  display: flex;
  flex-wrap: wrap;
  gap: 1px 12px;
  pointer-events: none;
  font: 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.chartMetrics span { white-space: nowrap; }
.chartHelp { margin: 0; padding: 0 23px 16px; color: #8b95a1; font-size: 11px; }
.chartStatus { color: #647084; }
.legend { border-top: 1px solid #f0f1f3; }
.ma5 { background: #dda742; }
.ma10 { background: #e36e9a; }
.ma20 { background: #43b9bd; }
.support { background: #dfab43; }
.resistance { background: #df5b87; }
.fib { background: #9585c5; }
#chartLatest { margin-left: auto; }
@media (max-width: 720px) {
  .chartBox { height: 385px; margin: 0 4px; }
  .chartMetrics { left: 13px; right: 57px; top: 8px; font-size: 10px; gap: 0 8px; }
  .chartHelp { padding: 0 14px 14px; }
  .toolbar { flex-wrap: wrap; }
}

/* Account access stays compact in the masthead and uses the same panel palette. */
.accountButton { white-space: nowrap; }
.detailDialog.authDialog { width: min(430px, calc(100vw - 28px)); background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.authPanel { padding: 24px; }
.authTop { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-right: 0; }
.authTop .dialogClose { position: static; flex: 0 0 32px; width: 32px; height: 32px; margin: 0; padding: 0; transform: none; display: grid; place-items: center; line-height: 0; border-radius: 10px; }
.authTop .dialogClose svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.authTop .dialogClose:focus-visible { outline-offset: -3px; }
.authTop small { color: var(--accent); letter-spacing: .15em; font-size: 10px; font-weight: 700; }
.authTop h2 { margin: 6px 0 18px; color: var(--ink); font-size: 23px; }
.authTop h2[hidden] { display: none; }
.authTabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; background: var(--field); border: 1px solid var(--line); border-radius: 12px; }
.authTabs button { padding: 9px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.authTabs button.active { background: var(--raised); color: var(--ink); box-shadow: 0 2px 12px #0002; }
.authForm { display: grid; gap: 13px; padding-top: 19px; }
.authForm[hidden], .authSigned[hidden], .authTabs[hidden] { display: none; }
.authForm label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
.authForm input { box-sizing: border-box; width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); color: var(--ink); font-size: 14px; }
.authForm input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.authNote { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.authError { min-height: 16px; margin: 0; color: #ff8ca5; font-size: 11px; }
.authSubmit { min-height: 42px; border-radius: 9px; font-weight: 700; cursor: pointer; }
.authSigned p { color: var(--muted); line-height: 1.5; }
.authSigned strong { color: var(--ink); }
.authSigned button { margin-top: 10px; }
.passwordDetails { margin-top: 14px; border-top: 1px solid var(--line); }
.passwordDetails summary { padding: 14px 0 2px; color: var(--ink); cursor: pointer; font-weight: 700; }
.passwordDetails .authForm { padding-top: 12px; }
.passwordDetails .authSubmit { margin-top: 0; }
@media (max-width: 720px) { .accountButton { padding: 5px 7px; font-size: 10px; } .authPanel { padding: 18px; } }

/* Compact watchlist controls and contextual exercise panel. */
.watchlist.scrolling {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd4df transparent;
}
.watchlist.scrolling::-webkit-scrollbar { width: 7px; }
.watchlist.scrolling::-webkit-scrollbar-thumb { background: #cbd4df; border-radius: 9px; }
.watch { min-height: 62px; border-top-color: #e9edf2; }
.watchactions {
  display: grid;
  grid-template-columns: repeat(2, 22px);
  gap: 3px;
  flex: 0 0 47px;
}
.watchactions button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #e8edf2;
  border-radius: 6px;
  background: #f7f9fb;
  color: #7a899b;
  transition: background .15s, color .15s, border-color .15s;
}
.watchactions button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.watchactions button:hover { background: #fff1f5; border-color: #f2bfd0; color: var(--accent); }
.watchactions button:disabled { opacity: .34; cursor: default; }
.watchactions button.removeWatch { grid-column: 1 / -1; width: 47px; height: 19px; }
.watchactions button.removeWatch:hover { background: #fff0f3; }
.infoSummary {
  margin: 11px 0 17px;
  padding: 13px 15px;
  border: 1px solid #e9edf2;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: #fbfcfe;
}
.infoSummary span { display: block; color: #718095; font-size: 11px; font-weight: 700; }
.infoSummary p { margin: 6px 0; color: var(--ink); font-size: 13px; line-height: 1.65; }
.infoSummary a { font-size: 11px; }
.chartQuizBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 22px 14px;
  padding: 10px 12px;
  border: 1px solid #f3c8d4;
  border-radius: 9px;
  background: #fff7f9;
}
.chartQuizBar[hidden] { display: none; }
.chartQuizPrompt { color: #743a50; font-size: 12px; line-height: 1.5; }
.chartQuizActions { display: flex; flex: none; gap: 6px; }
.chartQuizActions button { padding: 6px 9px; }
@media (max-width: 720px) {
  .chartQuizBar { align-items: stretch; flex-direction: column; margin: 4px 12px 12px; }
  .chartQuizActions { flex-wrap: wrap; }
}

/* Contextual commentary stays below the chart so the candles remain visible. */
.chartCrosshair {
  position: absolute;
  z-index: 1;
  top: 68px;
  bottom: 28px;
  width: 1px;
  border-left: 1px dashed rgba(66, 83, 106, .55);
  pointer-events: none;
}
.chartCrosshair[hidden] { display: none; }
.candleInsight {
  --insight-tone: #8a93a3;
  margin: 12px 22px 14px;
  padding: 16px 17px 14px;
  border: 1px solid #e8edf2;
  border-left: 3px solid var(--insight-tone);
  border-radius: 10px;
  background: linear-gradient(135deg, #fff, #fbfcfe);
  box-shadow: 0 5px 16px rgba(22, 43, 65, .035);
}
.candleInsight.positive { --insight-tone: #e94872; }
.candleInsight.negative { --insight-tone: #28b878; }
.insightHead { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.insightEyebrow { color: #8a95a5; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.insightHead h3 { margin: 3px 0 0; color: #263244; font-size: 16px; line-height: 1.35; }
.insightHead time { flex: none; margin-top: 2px; color: #8a95a5; font-size: 11px; white-space: nowrap; }
.insightSummary { margin: 9px 0 11px; color: #4c596b; font-size: 12px; line-height: 1.65; }
.insightMeasures { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.insightMeasure {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #e8edf2;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 11px;
}
.insightMeasure small { color: #8591a1; font-size: 10px; }
.insightMeasure strong { color: #334256; font-size: 11px; font-weight: 700; }
.insightEvidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.insightEvidence li { position: relative; padding-left: 11px; color: #566276; font-size: 11px; line-height: 1.6; }
.insightEvidence li::before { content: ""; position: absolute; top: .56em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--insight-tone); }
.insightFocus { margin: 12px 0 7px; padding: 8px 10px; border-radius: 6px; background: #fff5f7; color: #8b3d59; font-size: 11px; line-height: 1.6; }
.insightBasis { margin: 0; color: #9aa4b0; font-size: 10px; line-height: 1.5; }
.insightAudit { margin-top: 13px; padding-top: 12px; border-top: 1px solid #e8edf2; }
.insightAuditHead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.insightAuditHead span { color: #718096; font-size: 11px; font-weight: 700; }
.insightAuditHead strong { color: #344459; font-size: 12px; }
.insightAudit p { margin: 6px 0 0; color: #58687b; font-size: 11px; line-height: 1.65; }
.insightAudit #auditReliability { color: #8794a4; font-size: 10px; }
@media (max-width: 720px) {
  .chartCrosshair { top: 72px; }
  .candleInsight { margin: 10px 12px 12px; padding: 13px; }
  .insightHead { flex-direction: column; gap: 3px; }
  .insightEvidence { grid-template-columns: 1fr; }
}

/* An asset profile with the hierarchy of a dedicated overview screen. */
.infoBody { padding: 0 0 18px; }
#assetInfo {
  margin: 14px 18px 0;
  padding: clamp(18px, 2.5vw, 30px);
  border: 1px solid #25374e;
  border-radius: 16px;
  background: radial-gradient(circle at 93% 0%, rgba(47, 93, 124, .27), transparent 33%),
    linear-gradient(145deg, #111c2b, #101725 68%, #151b2a);
  color: #f2f5fa;
  box-shadow: 0 15px 34px rgba(14, 32, 52, .12);
}
.profileIdentity { display: flex; align-items: center; gap: 17px; min-width: 0; }
.profileLogo { display: grid; place-items: center; flex: none; }
.profileLogo .heroLogo {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 15px;
  border-color: #34465c;
  overflow: hidden;
}
.profileLogo .heroLogo img { max-width: 78%; max-height: 78%; object-fit: contain; }
.profileHeading { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 11px; min-width: 0; }
.profileKind { flex-basis: 100%; color: #77bed2; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.infoTitle { margin: 3px 0 0; color: #fff; font-size: clamp(21px, 2vw, 27px); line-height: 1.15; font-weight: 750; }
.profileName { color: #9daabe; font-size: clamp(13px, 1.4vw, 17px); line-height: 1.4; }
.infoSummary { margin: 28px 0 20px; padding: 0; border: 0; border-radius: 0; background: none; }
.infoSummary h4 { margin: 0 0 10px; color: #f5f7fc; font-size: 18px; font-weight: 700; }
.infoSummary p { max-width: 72ch; margin: 0; color: #c5cedb; font-size: 13px; line-height: 1.85; }
.infoGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 18px; }
.infoMetric { min-height: 60px; padding: 11px 12px; border-color: #304052; background: rgba(255, 255, 255, .04); }
.infoMetric small { margin-bottom: 6px; color: #8494aa; font-size: 10px; }
.infoMetric strong { color: #e2e8f0; font-size: 12px; line-height: 1.45; font-weight: 600; }
.profileLinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.infoBody .profileLinks a { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid #33475d; border-radius: 7px; color: #a8d8e8; background: #202f41; font-size: 11px; font-weight: 700; }
.infoBody .profileLinks a:hover { border-color: #6fbacb; background: #284357; text-decoration: none; }
@media (max-width: 800px) {
  .infoGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  #assetInfo { margin: 10px 11px 0; padding: 18px; }
  .profileIdentity { gap: 12px; }
  .profileLogo .heroLogo { width: 49px; height: 49px; }
  .profileName { flex-basis: 100%; }
  .infoSummary { margin-top: 24px; }
  .infoGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep watchlist actions pinned to the row edge regardless of quote width. */
.watch {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 52px minmax(0, max-content) 40px;
  column-gap: 6px;
}
.watchmain { width: 100%; max-width: none; overflow: hidden; }
.watchmain strong, .watchmain span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch .miniButton, .watch .miniCanvas { width: 52px; }
.watchprice { min-width: 0; max-width: 88px; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.watchactions { width: 40px; grid-template-columns: repeat(2, 19px); gap: 2px; justify-self: end; }
.watchactions button { width: 19px; height: 19px; }
.watchactions button.removeWatch { width: 40px; height: 19px; }
.watchHeadTools { display: flex; align-items: center; gap: 8px; }
.reorderToggle { border: 1px solid #dfe5ed; border-radius: 7px; padding: 5px 8px; background: #fff; color: #637286; font-size: 10px; cursor: pointer; }
.reorderToggle.active { background: #e9f1fa; border-color: #93acc9; color: #375a80; }
.watchactions { display: flex; align-items: center; justify-content: flex-end; }
.watchactions button.removeWatch { width: 26px; height: 26px; }
.watchactions button.dragHandle { width: 33px; height: 33px; border-radius: 9px; background: #edf2f7; border: 1px solid #cbd7e3; color: #60758b; cursor: grab; touch-action: none; box-shadow: inset 0 2px 5px #71849928, 0 1px 0 #fff; }
.watchactions button.dragHandle svg { width: 19px; height: 19px; stroke-width: 2.2; }
.watchactions button.dragHandle:active { cursor: grabbing; background: #dce8f4; box-shadow: inset 0 3px 8px #71849944; }
.watch.dragging { z-index: 2; position: relative; border: 1px solid #97afc8; border-radius: 10px; background: #eef4fa; box-shadow: inset 0 3px 8px #7d93aa40, 0 7px 18px #536b8430; transform: scale(.985); }
.rrTier { display: inline-block; padding: 1px 5px; border-radius: 5px; }
.rrTier.rrBase { color: #44546b; }
.rrTier.rr10 { color: #277caa; background: #e8f5fc; }
.rrTier.rr20 { color: #7950af; background: #f3ecfd; }
.rrTier.rr50 { color: #a86b17; background: #fff2d7; box-shadow: 0 0 0 1px #eac879 inset; }
@media (max-width: 1050px) and (min-width: 721px) {
  .watch { grid-template-columns: 25px minmax(0, 1fr) 39px minmax(0, max-content) 40px; column-gap: 5px; }
  .watch .miniButton, .watch .miniCanvas { width: 39px; }
  .watchprice { font-size: 9px; max-width: 78px; }
}
@media (max-width: 720px) {
  .watch { grid-template-columns: 28px minmax(0, 1fr) 64px minmax(0, max-content) 40px; }
  .watch .miniButton, .watch .miniCanvas { width: 64px; }
}

/* Display preferences now sit immediately above the chart. */
.workspace > .settings { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 21px; padding: 0 19px 15px; }
.workspace > .settings .panelhead { flex: 1 0 100%; margin: 0 -19px 1px; }
.workspace > .settings label { margin: 0; white-space: nowrap; }
.workspace > .settings label:first-of-type { display: flex; align-items: center; gap: 8px; }
.workspace > .settings label select { width: 140px; margin: 0; }
.workspace > .settings .check input { margin: 0 6px 0 0; }

.strategyPanel {
  margin: 0 22px 14px;
  padding: 15px 17px 13px;
  border: 1px solid #e6eaf0;
  border-radius: 11px;
  background: linear-gradient(120deg, #fcfdff, #f7f9fc);
}
.strategyTop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.strategyEyebrow { color: #8c98a9; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.strategyTop h3 { margin: 2px 0 0; color: #263346; font-size: 17px; }
.strategyStamp { color: #8b97a7; font-size: 10px; white-space: nowrap; }
.strategySummary { margin: 8px 0 12px; color: #576578; font-size: 12px; line-height: 1.6; }
.maOrder { display: inline-flex; align-items: center; max-width: 100%; margin: 0 0 12px; padding: 7px 10px; border-radius: 7px; background: #eef2f6; color: #566478; font-size: 11px; font-weight: 700; line-height: 1.5; }
.maOrder.bullish { background: #fff0f4; color: #c53761; }
.maOrder.bearish { background: #eaf8f1; color: #218765; }
.maOrder.mixed { background: #eef2f6; color: #566478; }
.strategyGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.strategyGrid > div { min-width: 0; padding: 10px 11px; border: 1px solid #e8edf2; border-radius: 8px; background: #fff; }
.strategyGrid span { display: block; color: #8895a5; font-size: 10px; }
.strategyGrid strong { display: block; margin-top: 4px; color: #273449; font-size: 17px; font-variant-numeric: tabular-nums; }
.strategyGrid > div:first-child strong { color: #e94872; }
.strategyGrid > div:nth-child(3) strong { color: #28a878; }
.strategyCall { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 11px; border: 1px solid #dfe6ee; border-radius: 9px; background: #f7f9fc; color: #536176; font-size: 11px; line-height: 1.5; }
.strategyCall strong { flex: 0 0 auto; color: #263346; font-size: 13px; }
.strategyCall.long { border-color: #f2b9ca; background: #fff0f5; color: #87314d; }
.strategyCall.long strong { color: #c52f5b; }
.strategyCall.short { border-color: #a9dfcb; background: #ebfaf3; color: #246d55; }
.strategyCall.short strong { color: #13805d; }
.strategyPlans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.strategyPlan { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border: 1px solid; border-radius: 10px; font-size: 11px; line-height: 1.5; box-shadow: inset 3px 0 0 currentColor; }
.strategyPlan.long { color: #bc365f; border-color: #f4cad6; background: #fff3f6; }
.strategyPlan.short { color: #168463; border-color: #bce8d9; background: #effaf5; }
.strategyPlan > strong { color: inherit; font-size: 13px; }
.planContents { color: #59687a; font-variant-numeric: tabular-nums; }
.planPrices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.planPrice { min-width: 0; padding: 8px 9px; border: 1px solid; border-radius: 8px; }
.planPrice small, .planPrice b { display: block; }
.planPrice small { font-size: 10px; }
.planPrice b { margin-top: 2px; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.planPrice.take { color: #087b52; background: #ddf7e9; border-color: #9bdfbb; }
.planPrice.stop { color: #b5482d; background: #fff0e7; border-color: #f6c7ad; }
.planReference { display: block; margin-top: 6px; font-size: 10px; color: #67768a; }
.strategyBasis { margin: 11px 0 0; color: #929eac; font-size: 10px; line-height: 1.6; }
@media (max-width: 850px) {
  .strategyGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strategyPlans { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .workspace > .settings { gap: 9px 15px; padding: 0 13px 14px; }
  .workspace > .settings .panelhead { margin: 0 -13px 1px; }
  .workspace > .settings label:first-of-type { flex-basis: 100%; }
  .strategyPanel { margin: 0 12px 12px; padding: 12px; }
  .strategyTop { flex-direction: column; gap: 4px; }
  .strategyGrid { gap: 5px; }
  .strategyGrid > div { padding: 8px; }
  .strategyGrid strong { font-size: 15px; }
}

/* Keep secondary controls available without filling the market view. */
.compactDetails { display: block; }
.compactDetails > summary, .insightDisclosure > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; list-style: none; cursor: pointer; font-weight: 700; font-size: 12px;
}
.compactDetails > summary::-webkit-details-marker, .insightDisclosure > summary::-webkit-details-marker { display: none; }
.compactDetails > summary::after, .insightDisclosure > summary::after { content: '⌄'; color: #8090a1; font-size: 16px; }
.compactDetails[open] > summary::after, .insightDisclosure[open] > summary::after { content: '⌃'; }
.compactDetails > summary span, .insightDisclosure > summary span { margin-left: auto; color: #92a0ad; font-size: 10px; font-weight: 500; }
.compactDetails .detailInner { padding-bottom: 13px; border-top: 1px solid #edf0f3; }
.compactDetails .detailInner > .panelhead { display: none; }
.insightDisclosure { margin: 9px 15px; border: 1px solid #e8edf2; border-radius: 9px; background: #fbfcfe; }
.insightDisclosure .candleInsight { margin: 0; border: 0; border-top: 1px solid #e8edf2; border-radius: 0 0 9px 9px; box-shadow: none; }
.heroLinks { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.heroLinks .ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 29px; padding: 5px 9px; border-radius: 7px; text-decoration: none; white-space: nowrap; font-size: 11px; }
.detailDialog { width: min(760px, calc(100vw - 28px)); max-height: min(88vh, 900px); padding: 0; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 25px 75px #15243d55; overflow: auto; }
.detailDialog::backdrop { background: #111d30a8; backdrop-filter: blur(3px); }
.detailDialog:focus, .detailDialog:focus-visible { outline: none; }
.detailDialog .panel { border: 0; border-radius: 0; box-shadow: none; }
.detailDialog .panelhead { position: relative; padding-right: 52px; }
.dialogClose { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #dfe5ea; border-radius: 8px; background: #fff; color: #58677a; font-size: 21px; cursor: pointer; }
.dialogClose:focus, .dialogClose:focus-visible { outline: none; }
.alertsDialog { width: min(620px, calc(100vw - 28px)); }
.watchPlaceholder { margin: 5px 8px; border: 1px dashed #83a8cf; border-radius: 10px; background: #eaf3fc; box-shadow: inset 0 3px 8px #6c90b225; }
.watch.dragging { box-sizing: border-box; opacity: .97; transform: rotate(-1deg) scale(1.02); cursor: grabbing; }

@media (min-width: 1100px) {
  .shell { padding-bottom: 18px; }
  .mast { padding: 13px 4px 12px; }
  .mast h1 { font-size: 25px; }
  .layout { gap: 12px; }
  .sidebar, .workspace { gap: 10px; }
  .workspace > .settings { gap: 8px 15px; padding-bottom: 8px; }
  .workspace > .settings .panelhead { padding-top: 8px; padding-bottom: 8px; }
  .assetHeading { padding: 10px 16px 8px; }
  .toolbar { padding: 0 15px 7px; }
  .strategyPanel { margin: 0 15px 8px; padding: 9px 12px; }
  .strategySummary { margin: 4px 0 6px; }
  .maOrder { margin-bottom: 6px; padding: 4px 7px; }
  .strategyGrid > div { padding: 6px 9px; }
  .strategyGrid strong { font-size: 14px; margin-top: 2px; }
  .strategyPlans { margin-top: 5px; }
  .strategyPlan { gap: 4px; padding: 7px 9px; }
  .planPrice { padding: 5px 7px; }
  .planPrice b { font-size: 12px; }
  .strategyBasis { margin-top: 5px; }
  .chartBox { height: clamp(260px, 35vh, 370px); }
  .legend { padding-top: 6px; padding-bottom: 6px; }
  .chartHelp { padding-bottom: 8px; }
  footer { margin-top: 8px; }
}

.newsPage { max-width: 1050px; margin: 0 auto; padding: 27px 22px 50px; }
.newsHeader { display: flex; align-items: center; gap: 18px; padding-bottom: 21px; border-bottom: 1px solid #e5eaf0; }
.newsHeader > div { flex: 1; }
.newsHeader h1 { margin: 2px 0 3px; font-size: 27px; }
.newsHeader p { margin: 0; color: #718095; font-size: 12px; }
.newsHeader .ghost { padding: 9px 12px; border: 1px solid #dfe5ed; border-radius: 8px; text-decoration: none; white-space: nowrap; font-size: 11px; }
.newsNotice { padding: 17px 2px; color: #758498; font-size: 12px; }
.newsCards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.newsCard { padding: 19px; border: 1px solid #e2e8ef; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px #1728410a; }
.newsMeta { color: #8996a6; font-size: 10px; }
.newsCard h2 { margin: 9px 0; line-height: 1.45; font-size: 17px; }
.newsCard a { color: #25384f; text-decoration: none; }
.newsCard a:hover { color: #de3e6c; }
.newsCard p { margin: 0; color: #667487; font-size: 12px; line-height: 1.65; }
.sidebarNews { min-width: 0; }
.sidebarNews .panelhead { display: flex; align-items: center; gap: 8px; }
.sidebarNews .panelhead h2 { margin-right: auto; }
.sidebarNews .panelhead span { color: #8390a2; font-size: 10px; }
.sidebarNews .panelhead a { flex: none; color: #d6406c; font-size: 10px; font-weight: 700; text-decoration: none; }
.sidebarNews .panelhead a:hover { text-decoration: underline; }
.sidebarNewsList { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sidebarNewsItem { padding: 10px 14px; border-top: 1px solid #e9edf2; }
.sidebarNewsItem a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #263447; font-size: 11px; font-weight: 600; line-height: 1.45; text-decoration: none; }
.sidebarNewsItem a:hover { color: #d6406c; }
.sidebarNewsItem small { display: block; margin-top: 4px; color: #8996a6; font-size: 10px; }
.sidebarNewsEmpty { margin: 0; padding: 16px 14px; color: #8996a6; font-size: 11px; line-height: 1.55; }
.compactDetails { border-color: #e2e8ef; border-radius: 13px; background: #fff; box-shadow: 0 5px 18px rgba(30, 49, 75, .05); }
.compactDetails.settings { padding-bottom: 0; }
.compactDetails > summary {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; align-items: center;
  gap: 11px; min-height: 56px; padding: 9px 13px; list-style: none;
  color: #243348; background: linear-gradient(115deg, #fff, #fbfcfe);
  transition: background .18s ease;
}
.compactDetails > summary::marker { content: ''; }
.compactDetails > summary::-webkit-details-marker { display: none; }
.compactDetails > summary::after { content: none; }
.compactDetails[open] > summary::after { content: none; }
.compactDetails > summary:hover { background: #f7f9fc; }
.compactDetails > summary:focus-visible { outline: 2px solid #e64875; outline-offset: -3px; }
.compactDetails > summary > span { margin-left: 0; }
.compactIcon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #edf3fa; color: #4e78aa; }
.compactIcon svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar > .settings .compactIcon { background: #fff0f5; color: #d74b76; }
.compactDetails .compactText { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.compactText strong { color: #253449; font-size: 12px; font-weight: 750; line-height: 1.2; }
.compactText small { color: #8a97a7; font-size: 10px; font-weight: 500; line-height: 1.2; }
.compactChevron { justify-self: end; width: 8px; height: 8px; border-right: 1.8px solid #8190a2; border-bottom: 1.8px solid #8190a2; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.compactDetails[open] .compactChevron { transform: rotate(225deg) translateY(-2px); }
.compactDetails[open] > summary { border-bottom: 1px solid #edf0f4; background: #fbfcfe; }
.heroLogoButton, .watchLogoButton { display: grid; place-items: center; flex: none; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.heroLogoButton { width: 48px; height: 48px; border: 1px solid #e4eaf0; border-radius: 13px; background: #fff; overflow: hidden; }
.heroLogoButton img { width: 40px; height: 40px; object-fit: contain; }
.heroLogoButton:disabled { cursor: default; }
.watchLogoButton { width: 28px; height: 28px; border-radius: 9px; }
.heroLogoButton:hover:not(:disabled), .watchLogoButton:hover { box-shadow: 0 0 0 2px #e9497830; }
.heroLogoButton:focus-visible, .watchLogoButton:focus-visible { outline: 2px solid #e64875; outline-offset: 2px; }
.watchLogo .tickerFallback, .heroLogo .tickerFallback, .heroLogoButton .tickerFallback {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 8px; color: #fff; font: 800 8px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.04em; text-shadow: 0 1px 2px #0004;
}
.heroLogo .tickerFallback, .heroLogoButton .tickerFallback { border-radius: 11px; font-size: 12px; }
.tickerFallback.long { font-size: 6px; }
.heroLogo .tickerFallback.long, .heroLogoButton .tickerFallback.long { font-size: 9px; }
@media (min-width: 800px) {
  .assetHeading { display: grid; grid-template-columns: minmax(0,1fr) max-content minmax(0,1fr); }
  .heroIdentity { grid-column: 1; }
  .heroPrice { grid-column: 2; text-align: center; font-variant-numeric: tabular-nums; }
}
.strategyMethod { margin-top: 5px; }
.strategyMethod > summary { width: max-content; color: #8b97a6; font-size: 10px; cursor: pointer; }
.strategyMethod .strategyBasis { margin: 5px 0 0; }
@media (min-width: 1100px) {
  .mast { height: 67px; padding: 7px 4px; align-items: center; }
  .mast .overline { font-size: 9px; }
  .mast h1 { margin: 1px 0; font-size: 23px; }
  .workspace > .settings { padding: 7px 14px; gap: 8px 14px; }
  .workspace > .settings .panelhead { flex: 0 0 auto; width: auto; margin: 0 8px 0 0; padding: 0; border: 0; }
  .workspace > .settings .panelhead h2 { font-size: 12px; }
  .workspace > .settings label { font-size: 10px; }
  .workspace > .settings label select { width: 105px; height: 28px; }
  .assetHeading { padding: 8px 15px 6px; }
  .assetLabel { font-size: 20px; }
  .heroPrice strong { font-size: 24px; }
  .toolbar { padding-bottom: 4px; }
  .strategyPanel { margin-bottom: 5px; padding: 7px 10px; }
  .strategyTop h3 { font-size: 14px; }
  .strategySummary { margin: 3px 0 4px; font-size: 11px; line-height: 1.35; }
  .maOrder { padding: 3px 6px; margin-bottom: 4px; line-height: 1.3; }
  .strategyGrid > div { padding: 4px 7px; }
  .strategyGrid strong { font-size: 13px; }
  .strategyCall { margin-top: 5px; padding: 5px 8px; }
  .strategyPlan { flex-direction: row; align-items: center; padding: 5px 7px; gap: 7px; }
  .strategyPlan > strong { flex: 0 0 64px; font-size: 11px; }
  .strategyPlan .planContents { flex: 1; min-width: 0; }
  .planPrice { padding: 3px 5px; }
  .planPrice small { font-size: 9px; }
  .planPrice b { font-size: 11px; }
  .planReference { margin-top: 2px; font-size: 9px; }
  .chartBox { height: clamp(220px, 32vh, 330px); }
  .chartStatus { padding-top: 4px; padding-bottom: 4px; }
  .insightDisclosure { margin-top: 5px; margin-bottom: 5px; }
  .insightDisclosure > summary { padding: 7px 10px; }
}
@media (max-width: 720px) { .newsHeader { flex-wrap: wrap; } .newsHeader > div { order: -1; flex-basis: 100%; } .newsCards { grid-template-columns: 1fr; } .heroLinks { order: 3; flex-basis: 100%; margin-left: 0; } .assetHeading { flex-wrap: wrap; } }

/* Unified cyber and black-gold palette. Ambient layers remain behind content. */
html[data-theme="fusion"] {
  color-scheme: dark;
  --bg: #070b13; --paper: rgba(12, 19, 30, .93); --ink: #f0f3ee; --muted: #99a9b6;
  --line: #34414b; --accent: #e8bd6a; --soft: #243239;
  --surface: rgba(19, 29, 40, .94); --raised: #20313f; --field: #0e1823;
  --highlight: #273640; --glow: rgba(63, 214, 224, .16); --rule: #45545d;
  --shadow: 0 16px 40px #02050bc4;
}
html[data-theme] body {
  background: radial-gradient(ellipse 58% 50% at 100% 0%, #28657735, transparent 73%),
    radial-gradient(ellipse 44% 45% at 0% 85%, #8f6b2b2a, transparent 80%), var(--bg);
  color: var(--ink);
}
html[data-theme] body::before {
  display: block; inset: -18%; opacity: .72;
  background-image: linear-gradient(#56cbd918 1px, transparent 1px),
    linear-gradient(90deg, #56cbd918 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(transparent 3%, #000 28%, #000 75%, transparent 98%);
  animation: ambientGrid 90s linear infinite alternate;
}
html[data-theme] body::after {
  content: ""; position: fixed; inset: -28%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 25% 30% at 16% 34%, #2aafc333, transparent 74%),
    radial-gradient(ellipse 24% 28% at 77% 56%, #c3903530, transparent 76%),
    radial-gradient(ellipse 18% 22% at 44% 83%, #346b8b2c, transparent 78%),
    linear-gradient(122deg, transparent 39%, #3bcbda13 47%, transparent 56%),
    linear-gradient(128deg, transparent 61%, #e0b14b13 67%, transparent 74%);
  animation: ambientFlow 60s ease-in-out infinite alternate;
}
@keyframes ambientGrid {
  from { transform: translate3d(-5px, -4px, 0); }
  to { transform: translate3d(6px, 5px, 0); }
}
@keyframes ambientFlow {
  0% { transform: translate3d(-.4%, .4%, 0) scale(1); opacity: .58; }
  50% { transform: translate3d(.4%, -.4%, 0) scale(1.01); opacity: .9; }
  100% { transform: translate3d(-.2%, -.7%, 0) scale(1.02); opacity: .67; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body::before, html[data-theme] body::after { animation: none; }
}
html[data-theme] .panel,
html[data-theme] .compactDetails,
html[data-theme] .hero {
  background: var(--paper); border-color: var(--line); box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
html[data-theme] .hero {
  border-color: #576056;
  background: linear-gradient(135deg, #263337f2, var(--paper) 27%, var(--paper) 82%, #29271fef);
}
html[data-theme] .mast h1 { text-shadow: 0 0 25px var(--glow); }
html[data-theme] .status,
html[data-theme] .ghost,
html[data-theme] .add input,
html[data-theme] .add select,
html[data-theme] .settings input[type=number],
html[data-theme] .settings select,
html[data-theme] .groupForm input,
html[data-theme] .dialogClose {
  background: var(--field); color: var(--ink); border-color: var(--line);
}
html[data-theme] input::placeholder { color: var(--muted); opacity: .72; }
html[data-theme] .accent { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 750; }
html[data-theme] .accent:hover { filter: brightness(1.1); }
html[data-theme] .ghost:hover,
html[data-theme] .suggestion:hover,
html[data-theme] .suggestion.active,
html[data-theme] .miniButton:hover,
html[data-theme] .watch.selected { background: var(--highlight); }
html[data-theme] .watch.selected { box-shadow: inset 3px 0 var(--accent); }
html[data-theme] .reorderToggle { background: var(--field); color: var(--muted); border-color: var(--line); }
html[data-theme] .reorderToggle.active { background: var(--soft); color: var(--accent); border-color: var(--accent); }
html[data-theme] .panelhead,
html[data-theme] .watch,
html[data-theme] .sidebarNewsItem,
html[data-theme] .newsHeader,
html[data-theme] .legend { border-color: var(--line); }
html[data-theme] .watchGroup strong,
html[data-theme] .assetLabel,
html[data-theme] .compactText strong,
html[data-theme] .newsCard a,
html[data-theme] .sidebarNewsItem a { color: var(--ink); }
html[data-theme] .watchGroup button,
html[data-theme] .watchactions button,
html[data-theme] .watchGroupEmpty,
html[data-theme] .chartHelp,
html[data-theme] .chartStatus { color: var(--muted); }
html[data-theme] .watchLogo,
html[data-theme] .heroLogo,
html[data-theme] .heroLogoButton,
html[data-theme] .watchactions button,
html[data-theme] .infoMetric,
html[data-theme] .result,
html[data-theme] .insightMeasure,
html[data-theme] .strategyGrid > div,
html[data-theme] .newsCard {
  background: var(--surface); border-color: var(--line); color: var(--ink);
}
html[data-theme] .suggestions,
html[data-theme] .suggestion,
html[data-theme] .chartTip {
  background: var(--raised); color: var(--ink); border-color: var(--line);
}
html[data-theme] .suggestion { border-bottom-color: var(--line); }
html[data-theme] .badge { background: var(--soft); color: var(--accent) !important; }
html[data-theme] .chartMetrics { text-shadow: 0 1px 5px var(--bg); }
html[data-theme] .chartCrosshair { border-color: var(--muted); }
html[data-theme] .infoSummary,
html[data-theme] .chartQuizBar,
html[data-theme] .candleInsight,
html[data-theme] .strategyPanel,
html[data-theme] .insightDisclosure,
html[data-theme] .strategyCall,
html[data-theme] .newsCard,
html[data-theme] .compactDetails > summary {
  background: var(--surface); border-color: var(--line); color: var(--ink);
}
html[data-theme] .compactDetails > summary:hover,
html[data-theme] .compactDetails[open] > summary { background: var(--raised); border-color: var(--line); }
html[data-theme] .compactDetails .detailInner,
html[data-theme] .insightDisclosure .candleInsight,
html[data-theme] .insightAudit { border-color: var(--line); }
html[data-theme] .compactIcon,
html[data-theme] .sidebar > .settings .compactIcon,
html[data-theme] .maOrder,
html[data-theme] .maOrder.mixed { background: var(--soft); color: var(--accent); }
html[data-theme] .compactText small,
html[data-theme] .strategyEyebrow,
html[data-theme] .strategyStamp,
html[data-theme] .strategyGrid span,
html[data-theme] .insightEyebrow,
html[data-theme] .insightHead time,
html[data-theme] .insightBasis,
html[data-theme] .insightAudit #auditReliability,
html[data-theme] .newsMeta,
html[data-theme] .newsCard p,
html[data-theme] .newsHeader p,
html[data-theme] .newsNotice,
html[data-theme] .sidebarNewsItem small,
html[data-theme] .sidebarNewsEmpty { color: var(--muted); }
html[data-theme] .strategyTop h3,
html[data-theme] .insightHead h3,
html[data-theme] .strategyGrid strong,
html[data-theme] .strategyCall strong,
html[data-theme] .insightMeasure strong,
html[data-theme] .insightAuditHead strong,
html[data-theme] .infoSummary p { color: var(--ink); }
html[data-theme] .strategySummary,
html[data-theme] .strategyCall,
html[data-theme] .planContents,
html[data-theme] .planReference,
html[data-theme] .insightSummary,
html[data-theme] .insightEvidence li,
html[data-theme] .insightAudit p,
html[data-theme] .infoSummary span,
html[data-theme] .chartQuizPrompt { color: var(--muted); }
html[data-theme] .insightFocus { background: var(--highlight); color: var(--ink); }
html[data-theme] .strategyPlan.long,
html[data-theme] .strategyCall.long,
html[data-theme] .maOrder.bullish { background: #ca477320; border-color: #c75d78; color: #ff8ea9; }
html[data-theme] .strategyPlan.short,
html[data-theme] .strategyCall.short,
html[data-theme] .maOrder.bearish { background: #2faa8220; border-color: #3ca987; color: #73dbad; }
html[data-theme] .strategyCall.long strong { color: #ff8ea9; }
html[data-theme] .strategyCall.short strong { color: #73dbad; }
html[data-theme] .planPrice.take { background: #174332; border-color: #397c5b; color: #8ef0b7; }
html[data-theme] .planPrice.stop { background: #482b24; border-color: #945942; color: #ffad86; }
html[data-theme] .strategyGrid > div:first-child strong { color: #ff8ea9; }
html[data-theme] .strategyGrid > div:nth-child(3) strong { color: #73dbad; }
/* Risk/reward tiers use dark fills so the figures stay legible in every range. */
html[data-theme] .strategyGrid .rrTier.rrBase { color: var(--ink); background: transparent; }
html[data-theme] .strategyGrid .rrTier.rr10 { color: #8ddfff; background: #173746; box-shadow: inset 0 0 0 1px #35738c; }
html[data-theme] .strategyGrid .rrTier.rr20 { color: #d0b0ff; background: #342546; box-shadow: inset 0 0 0 1px #70528e; }
html[data-theme] .strategyGrid .rrTier.rr50 { color: #ffe2a0; background: #483519; box-shadow: inset 0 0 0 1px #9b7437; }
html[data-theme] .detailDialog { background: var(--paper); border: 1px solid var(--line); }
html[data-theme] .detailDialog::backdrop { background: #020509bd; }
html[data-theme] .watchPlaceholder { background: var(--highlight); border-color: var(--accent); }
html[data-theme] .sidebarNews .panelhead a,
html[data-theme] .newsCard a:hover,
html[data-theme] .sidebarNewsItem a:hover { color: var(--accent); }
html[data-theme] .profileKind,
html[data-theme] .infoBody .profileLinks a { color: var(--accent); }
html[data-theme] #assetInfo { background: linear-gradient(145deg, var(--raised), var(--field)); border-color: var(--line); }
html[data-theme] .infoBody .profileLinks a { background: var(--surface); border-color: var(--line); }
html[data-theme] .infoBody .profileLinks a:hover { background: var(--highlight); border-color: var(--accent); }
html[data-theme] .watchlist.scrolling { scrollbar-color: var(--rule) transparent; }
html[data-theme] .watchlist.scrolling::-webkit-scrollbar-thumb { background: var(--rule); }

/* The 3D rings are projected inside a stationary full-screen canvas, so no
   rotated layer edge can cross the viewport. The SVG keeps faint pointer cues. */
.ambientField { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient3D, .ambientCamera { position: absolute; inset: 0; width: 100%; height: 100%; }
.ambientCamera { opacity: .28; }
.ambientField svg { display: block; width: 100%; height: 100%; opacity: .95; }
.ambientCamera .orbitalStationSecondary, .ambientCamera .orbitalMegastructure,
.ambientConstellation > :not(.ambientBeacon) { opacity: 0; }
.ambientOrbit { fill: none; stroke: #d6be79; stroke-opacity: .2; stroke-width: 1;
  stroke-dasharray: 7 19; animation: signalTravel 32s linear infinite reverse; }
.ambientTrack { fill: none; stroke: #70cbd0; stroke-opacity: .34; stroke-width: 1.2; }
.ambientSignal { fill: none; stroke: url(#flowCyan); stroke-width: 3; stroke-linecap: round;
  filter: drop-shadow(0 0 5px #49d9e9a8);
  stroke-dasharray: 90 680; animation: signalTravel 11s linear infinite; }
.ambientSignal.gold { stroke: url(#flowGold); filter: drop-shadow(0 0 5px #f4c16caa);
  stroke-dasharray: 110 850; animation-duration: 16s; animation-direction: reverse; }
.ambientSignal.slow { stroke-width: 1.5; stroke-dasharray: 65 920; animation-duration: 21s; }
.ambientNode { fill: #4de4ef; filter: drop-shadow(0 0 8px #38dce9); animation: nodePulse 4s ease-in-out infinite; }
.ambientNode.gold { fill: #ffd077; filter: drop-shadow(0 0 8px #ebb953); animation-delay: -1.4s; }
@keyframes signalTravel { to { stroke-dashoffset: -1540; } }
@keyframes nodePulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .ambientCamera,.ambientCamera svg { animation:none; }
  .ambientSignal, .ambientNode, .ambientOrbit { animation: none; }
}
html[data-theme] .mast h1 {
  width: max-content; max-width: 100%; margin-bottom: 2px;
  background: linear-gradient(96deg, #effbfa 5%, #d3e9e8 47%, #f1c778 100%);
  background-clip: text; -webkit-background-clip: text; color: transparent;
  font-weight: 780; letter-spacing: .055em;
}
html[data-theme] .mast { position: relative; }
html[data-theme] .mast::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, #62dce17d 28%, #e6bd7280 57%, transparent 86%);
  background-size: 180% 100%; animation: headerFlow 12s linear infinite;
}
@keyframes headerFlow { to { background-position: -180% 0; } }
@media (prefers-reduced-motion: reduce) { html[data-theme] .mast::after { animation: none; } }
html[data-theme] .overline { color: #6cdae1; }
html[data-theme] .panel { box-shadow: 0 16px 40px #03070fc0, inset 0 1px 0 #ffffff12; }
html[data-theme] .hero { box-shadow: 0 18px 46px #03070fdf, 0 0 0 1px #6bdbe310 inset; }
html[data-theme] .newsPage { position: relative; z-index: 1; }

/* Center metric and plan content regardless of the browser's font metrics. */
html[data-theme] .strategyGrid > div {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 64px; text-align: center;
}
html[data-theme] .strategyGrid > div span { width: 100%; text-align: center; }
html[data-theme] .strategyGrid > div strong { width: max-content; max-width: 100%; align-self: center; text-align: center; }
html[data-theme] .strategyPlan > strong { display: grid; place-items: center; text-align: center; }
html[data-theme] .planPrice { display: flex; flex-direction: column; justify-content: center; text-align: center; }
html[data-theme] .strategyCall { justify-content: center; text-align: center; }
@media (max-width: 850px) {
  html[data-theme] .strategyGrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html[data-theme] .strategyGrid > div:nth-child(-n+3) { grid-column: span 2; }
  html[data-theme] .strategyGrid > div:nth-child(n+4) { grid-column: span 3; }
  html[data-theme] .strategyCall { flex-direction: column; align-items: center; gap: 3px; }
  html[data-theme] .strategyPlan { align-items: stretch; }
}
@media (max-width: 520px) {
  html[data-theme] .strategyGrid > div { min-height: 58px; }
  .ambientField svg { opacity: .55; }
}

.chartStatusRow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chartStatusRow .chartStatus { flex: 1; min-width: 0; }
.chartStatusRow { justify-content: flex-end; padding: 0 4px; }
.chartStatusRow .chartStatus { display: none; }
.chartStatusRow .historyMore { margin-right: 0; }
.chartBox { margin-left: 4px; margin-right: 4px; }
.historyMore { flex: none; margin-right: 18px; padding: 3px 8px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--field); color: var(--accent); font: 10px Arial,sans-serif; }
.historyMore:hover:not(:disabled) { border-color: var(--accent); background: var(--soft); }
.historyMore:disabled { color: var(--muted); opacity: .66; cursor: default; }

/* One aligned control across browsers, independent of native select arrows. */
.workspace > .settings .schemeControl {
  display: inline-grid; grid-template-columns: max-content 136px;
  align-items: center; gap: 12px; line-height: 1;
}
.schemeControl > span:first-child { display: inline-flex; align-items: center; min-height: 36px; }
.selectShell { position: relative; display: block; width: 100%; height: 36px; }
.selectShell::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.workspace > .settings .selectShell #colorScheme {
  appearance: none; -webkit-appearance: none; display: block;
  box-sizing: border-box; width: 100%; height: 36px; margin: 0;
  padding: 0 31px 0 12px; line-height: 34px; font-size: 12px;
  text-align: left; text-align-last: left; border-radius: 10px;
}
@media (min-width: 1100px) {
  .workspace > .settings .schemeControl { grid-template-columns: max-content 122px; gap: 9px; }
  .workspace > .settings .selectShell, .workspace > .settings .selectShell #colorScheme { height: 32px; }
  .workspace > .settings .selectShell #colorScheme { line-height: 30px; font-size: 11px; }
}

/* Probability tiles double as the three-position decision display. */
html[data-theme] .strategyGrid > .probabilityCard {
  position: relative; isolation: isolate; overflow: hidden; min-height: 76px;
  background: linear-gradient(155deg, #152838, #101c2a 75%);
  border-color: #35505c; transition: border-color .3s, box-shadow .3s, transform .3s;
}
html[data-theme] .strategyGrid > .probabilityCard::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 50% 105%, var(--probGlow), transparent 68%);
  opacity: .22; pointer-events: none;
}
html[data-theme] .strategyGrid > .probabilityCard::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: var(--prob, 0%); height: 3px;
  background: var(--probColor); box-shadow: 0 0 13px var(--probColor);
  transition: width .8s cubic-bezier(.2,.7,.2,1); pointer-events: none;
}
.probabilityCard.long { --probColor: #ff7d9e; --probGlow: #fa567b; }
.probabilityCard.watch { --probColor: #e7c976; --probGlow: #c8a84a; }
.probabilityCard.short { --probColor: #67dbad; --probGlow: #3ec994; }
html[data-theme] .strategyGrid > .probabilityCard.active {
  border-color: var(--probColor); box-shadow: inset 0 0 0 1px #ffffff12, 0 0 17px color-mix(in srgb, var(--probColor) 25%, transparent);
  transform: translateY(-1px);
}
html[data-theme] .strategyGrid > .probabilityCard span {
  color: #a9b9c7; font-size: 11px; font-weight: 700; letter-spacing: .05em;
}
html[data-theme] .strategyGrid > .probabilityCard strong {
  color: var(--probColor); font-size: clamp(18px, 1.6vw, 25px); line-height: 1.1;
  text-shadow: 0 0 15px color-mix(in srgb, var(--probColor) 28%, transparent);
}
.probabilityCard.changed strong { animation: probabilityReveal .55s ease-out; }
@keyframes probabilityReveal { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }

html[data-theme] .strategyCall.entry {
  position: relative; border-color: #5bdcab; color: #c5f4dc;
  background: linear-gradient(95deg, #123628, #153d36 55%, #15332d);
  animation: entryBreath 2.7s ease-in-out infinite;
}
html[data-theme] .strategyCall.entry::before {
  content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
  background: #85ffd0; box-shadow: 0 0 10px #73f7be, 0 0 20px #4af0ab;
}
html[data-theme] .strategyCall.entry strong { color: #a8ffcf; font-size: 14px; }
html[data-theme] .strategyCall.entry span { color: #c5e9db; }
@keyframes entryBreath {
  0%,100% { box-shadow: inset 0 0 0 1px #66e8b519, 0 0 8px #54d89a35; }
  50% { box-shadow: inset 0 0 0 1px #80ffd466, 0 0 19px #65efaa88, 0 0 36px #40d58b42; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .strategyCall.entry, .probabilityCard.changed strong { animation: none; }
  html[data-theme] .strategyGrid > .probabilityCard::after { transition: none; }
}

/* Give the regular chart the unused space below the left column. */
@media (min-width: 1100px) {
  .shell { max-width: 1900px; padding-left: clamp(16px, 1.4vw, 30px); padding-right: clamp(16px, 1.4vw, 30px); }
  .layout { grid-template-columns: clamp(280px, 22vw, 380px) minmax(0, 1fr); }
  .chartBox { height: clamp(420px, 52vh, 770px); }
}
.chartExpand { flex: none; padding: 5px 10px; border-color: var(--line); color: var(--ink); }
.chartExpand[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 15px #5fd4d433; }
@media (min-width: 900px) {
  body.chartExpanded .strategyPanel { display: none; }
  body.chartExpanded .chartBox { height: var(--expandedChartHeight, 650px); }
}

/* Asset management is available from a hold gesture or the discreet menu button. */
.watchActionDialog { width: min(330px, calc(100vw - 28px)); }
.watchActionPanel { padding: 10px; background: var(--paper); }
.watchActionHead { position: relative; padding: 10px 42px 14px 9px; border-bottom: 1px solid var(--line); }
.watchActionHead strong { color: var(--ink); font-size: 15px; }
.watchActionPanel > button { display: block; width: 100%; margin-top: 5px; padding: 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; }
.watchActionPanel > button:hover { background: var(--highlight); }
.watchActionPanel > button.danger { color: #ff8ca5; }
.watch.pinned .watchmain strong::before { content: '✦'; margin-right: 4px; color: #ebc66f; font-size: 11px; }
.watchactions button.watchMenuButton { width: 28px; height: 27px; border-radius: 8px; font-size: 17px; line-height: 1; font-weight: 700; letter-spacing: -2px; }
.mobileMoreButton, .mobileAddButton { display: none; }

/* A brighter field lets the flowing traces remain visible behind translucent panels. */
html[data-theme="fusion"] {
  --bg: #0b1622; --paper: rgba(18, 32, 45, .86); --surface: rgba(26, 43, 57, .9);
  --raised: #254255; --field: #142634; --highlight: #294657; --line: #4a6975;
  --muted: #b1c2cb; --rule: #567580; --glow: rgba(67, 221, 233, .27);
}
html[data-theme] body { background: radial-gradient(ellipse 55% 55% at 88% 12%, #278a9a55, transparent 72%), radial-gradient(ellipse 52% 55% at 4% 82%, #ba873542, transparent 78%), var(--bg); }
html[data-theme] body::before { opacity: .95; background-image: linear-gradient(#73d9e02a 1px, transparent 1px),linear-gradient(90deg,#73d9e02a 1px,transparent 1px); }
html[data-theme] body::after { filter: saturate(1.45) brightness(1.25); }
.ambientField svg { opacity: 1; }
.ambientTrack { stroke-opacity: .58; stroke-width: 1.7; }
.ambientSignal { stroke-width: 4; filter: drop-shadow(0 0 9px #4ee4f0); }
.ambientSignal.gold { filter: drop-shadow(0 0 9px #f5cd75); }

@media (max-width: 720px) {
  .shell { padding: 0 8px 12px; }
  .mast { min-height: 53px; padding: calc(env(safe-area-inset-top) + 5px) 4px 8px; align-items: center; }
  .mast .overline, .mast p, .mast .status, .mast #notify, .mast #alertsButton { display: none; }
  .mast h1 { font-size: 19px; margin: 0; }
  .mobileMoreButton, .mobileAddButton { display: inline-flex; align-items: center; justify-content: center; }
  .mastright { flex-direction: row; align-items: center; }
  .layout { display: flex; flex-direction: column; gap: 6px; }
  .sidebar, .workspace { display: flex; flex-direction: column; width: 100%; min-width: 0; gap: 6px; }
  .sidebar > :not(:first-child), .workspace > .settings { display: none; }
  .sidebar > .panel:first-child { width: 100%; min-width: 0; border-radius: 12px; }
  .workspace > .hero { order: 1; width: 100%; min-width: 0; border-radius: 12px; overflow: hidden; }
  .sidebar .panelhead { padding: 6px 10px; }
  .sidebar .panelhead h2 { font-size: 12px; }
  .watchHeadTools { gap: 5px; }
  .watchHeadTools .reorderToggle { padding: 4px 6px; font-size: 9px; }
  #addForm, #addError { display: none; }
  .watchlist, .watchlist.scrolling { display: flex; gap: 5px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 4px 7px 6px; scrollbar-width: thin; }
  .watchGroup, .watchGroupEmpty { display: none; }
  .watch { flex: 0 0 calc((100% - 5px)/2); display: grid; grid-template-columns: 24px minmax(0,1fr); grid-template-rows: 24px 18px; min-height: 52px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
  .watchLogoButton { grid-column: 1; grid-row: 1; width: 24px; height: 24px; }
  .watchmain { grid-column: 2; grid-row: 1; }
  .watchmain strong { font-size: 11px; }
  .watchmain span, .miniButton, .watchactions { display: none !important; }
  .watchprice { grid-column: 1 / -1; grid-row: 2; max-width: 100%; font-size: 10px; text-align: center; }
  .assetHeading { padding: 6px 9px 2px; gap: 4px; }
  .heroLogoButton { width: 29px; height: 29px; }
  .heroLogoButton img { width: 25px; height: 25px; }
  .assetLabel { font-size: 15px; }
  .heroPrice strong { font-size: 17px; }
  .heroPrice span, #assetMeta { font-size: 9px; }
  .heroLinks { display: none; }
  .toolbar { width: 100%; min-width: 0; padding: 0 6px 3px; gap: 2px; overflow: hidden; }
  .toolbar .segmented { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; }
  .segmented button { flex: none; padding: 4px 6px; font-size: 9px; }
  #chartLatest, #reload { display: none; }
  .strategyPanel { min-width: 0; margin: 3px 6px; padding: 6px; }
  .strategyTop { flex-direction: row; align-items: center; }
  .strategyEyebrow, .strategyStamp, .strategySummary, .maOrder, .strategyPlans, .strategyMethod { display: none; }
  .strategyTop h3 { font-size: 11px; }
  html[data-theme] .strategyGrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 3px; }
  html[data-theme] .strategyGrid > div:nth-child(-n+3) { grid-column: auto; min-height: 48px; padding: 3px; }
  html[data-theme] .strategyGrid > div:nth-child(n+4) { display: none; }
  html[data-theme] .strategyGrid > .probabilityCard span { font-size: 9px; }
  html[data-theme] .strategyGrid > .probabilityCard strong { font-size: 16px; }
  .strategyCall { margin-top: 3px; padding: 4px; font-size: 10px; }
  html[data-theme] .strategyCall { flex-direction: row; align-items: center; gap: 6px; }
  .strategyCall strong { white-space: nowrap; }
  .strategyCall span { line-height: 1.25; }
  .chartStatusRow { padding: 0 4px; }
  .chartStatus { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
  .historyMore { display: none; }
  .chartExpand { padding: 3px 5px; font-size: 9px; }
  .chartBox { width: calc(100% - 6px); min-width: 0; height: clamp(255px, 39vh, 430px); margin: 0 3px; }
  body.chartExpanded .chartBox { height: 68dvh; }
  .insightDisclosure, .legend, .chartHelp, footer { display: none; }
  .mobileMoreDialog { width: 100vw; max-width: none; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
  .mobileMoreHead { position: sticky; top: 0; z-index: 2; padding: 13px 15px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .mobileMoreHead .dialogClose { right: 12px; }
  .mobileMoreBody { display: grid; gap: 10px; padding: 12px; }
  .mobileMoreBody > * { display: block !important; }
  .mobileMoreBody > section.settings { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 0 12px 14px; }
  .mobileMoreBody > section.settings .panelhead { grid-column: 1 / -1; width: auto; margin: 0 -12px; padding: 11px 12px; }
  .mobileMoreBody > section.settings .schemeControl { grid-column: 1 / -1; display: grid; grid-template-columns: 88px minmax(0,1fr); align-items: center; gap: 8px; }
  .mobileMoreBody > section.settings .selectShell { height: 34px; }
  .mobileMoreBody > section.settings #colorScheme { width: 100%; height: 34px; }
  .mobileMoreBody > section.settings .check { display: flex; align-items: center; white-space: normal; font-size: 10px; }
  .mobileMoreBody > details.settings { display: block !important; }
  .mobileMoreBody .compactDetails > summary { width: 100%; }
  .mobileMoreBody .insightDisclosure { display: block !important; }
  .mobileMoreBody #addForm { display: grid !important; }
  .mobileMoreBody #addError { display: block !important; }
}

/* Show the asset artwork itself, without a second tile around it. */
.watchLogo, .heroLogo, .heroLogoButton, .profileLogo .heroLogo,
html[data-theme] .watchLogo, html[data-theme] .heroLogo,
html[data-theme] .heroLogoButton {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.watchLogo img, .heroLogo img, .heroLogoButton img,
.profileLogo .heroLogo img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.symbolMark {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  box-sizing: border-box;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 50%;
  background: linear-gradient(145deg,hsl(var(--markHue) 58% 38%),hsl(var(--markHue) 55% 22%));
}
.symbolMark svg { display: block; width: 76%; height: 76%; }
.symbolLetters { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 88%; color: #f8fbff; font-weight: 800; text-align: center; white-space: nowrap; line-height: 1.02; }
.symbolLetters span { display: block; }
.symbolLetters.gold { color: #ffe6a0; font-family: Georgia, serif; font-size: clamp(13px, 1.5vw, 22px); letter-spacing: -.04em; }
.symbolMark.unverified { background: #344554; border: 1px solid #8095a5; box-sizing: border-box; }
.symbolMark.unverified { background: #101820; border-color: #5e7884; box-shadow: inset 0 0 0 1px #ffffff10; }
.symbolMark.unverified .symbolLetters { color: #e8f2f5; font-weight: 750; letter-spacing: -.025em; }
.symbolMark.unverified .symbolLetters.short { font-size: clamp(8px, 35cqw, 18px); }
.symbolMark.unverified .symbolLetters.medium { font-size: clamp(5px, 21cqw, 12px); }
.symbolMark.unverified .symbolLetters.length-4 { font-size: clamp(8px, 28cqw, 16px); }
.symbolMark.unverified .symbolLetters.length-5 { font-size: clamp(6px, 25cqw, 14px); }
.symbolMark.unverified .symbolLetters.length-6 { font-size: clamp(5px, 22cqw, 12px); }
.symbolMark.unverified .symbolLetters.long { font-size: clamp(6px, 24cqw, 13px); }
.watchmain strong.compactSymbol { font-size: 12px; letter-spacing: -.035em; }
.watchmain strong.denseSymbol { font-size: 10px; }
.assetTitle { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
.perpetualBadge { display: inline-grid; place-items: center; flex: none; padding: 2px 7px; border: 1px solid #a37a2c; border-radius: 6px; background: #4b351b; color: #ffe2a0; font-size: 11px; font-weight: 800; line-height: 1.5; }
.perpetualBadge[hidden] { display: none; }
footer a { margin-left: 8px; color: var(--accent); }
@media (max-width: 720px) { footer { display: block; padding: 8px 14px; font-size: 9px; line-height: 1.45; } }

/* News stays in the left column and scrolls inside its own card. */
@media (min-width: 900px) {
  .sidebarNews { display: flex; flex-direction: column; height: clamp(300px, 42vh, 520px); resize: vertical; }
  .sidebarNews .panelhead { flex: none; }
  .sidebarNewsList { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
}

/* Account data is never shown before the session has been checked. */
body.authLocked .mast #mobileMoreButton,
body.authLocked .mast #notify, body.authLocked .mast #alertsButton { display: none !important; }
body.authLocked .layout { pointer-events: none; filter: saturate(.8); }
body.authLocked #authDialog .dialogClose { display: none; }
body.accountOverlay .mast,
body.accountOverlay .layout,
body.accountOverlay footer { display: none !important; }
.watchLogo, .heroLogo, .heroLogoButton { position: relative; overflow: hidden; }
.watchLogo img, .heroLogo img, .heroLogoButton img { position: absolute; inset: 0; }
.dialogClose,
.infoPanel .panelhead .dialogClose {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  line-height: 0;
  vertical-align: middle;
}
.dialogClose svg,
.authTop .dialogClose svg {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-theme] .strategyGrid > .probabilityCard::before { opacity: 0; transition: opacity .3s; }
html[data-theme] .strategyGrid > .probabilityCard.active::before { opacity: .34; animation: probBreath 2.6s ease-in-out infinite; }
html[data-theme] .strategyGrid > .probabilityCard strong { text-shadow: none; }
html[data-theme] .strategyGrid > .probabilityCard.active strong { text-shadow: 0 0 15px color-mix(in srgb, var(--probColor) 34%, transparent); }
@keyframes probBreath { 50% { opacity: .58; } }
.strategyGrid .rrTier { display: flex !important; flex-direction: column; align-items: center; gap: 3px; width: 100% !important; max-width: none !important; }
.strategyGrid .rrTier > span:first-child { font-size: inherit; }
.strategyGrid .rrDetail { font-size: 9px; line-height: 1.2; color: var(--muted); font-weight: 500; white-space: nowrap; }
.strategyGrid .rrRange { display: flex; width: 100%; height: 6px; border-radius: 4px; overflow: hidden; background: #c16062; box-shadow: inset 0 0 0 1px #ffffff24; }
.strategyGrid .rrRange i { display: block; height: 100%; background: #52d69f; }
@media (min-width: 721px) {
  .watch { grid-template-columns: 28px minmax(0,1fr) 50px 88px 24px; }
  .watch .miniButton, .watch .miniCanvas { width: 50px; }
  .watchprice { width: 88px; max-width: 88px; text-align: right; }
}
@media (max-width: 720px) {
  html[data-theme] .strategyGrid { grid-template-columns: repeat(6,minmax(0,1fr)); }
  html[data-theme] .strategyGrid > div:nth-child(-n+3) { grid-column: span 2; }
  html[data-theme] .strategyGrid > div:nth-child(n+4) { display: flex; flex-direction: column; align-items: center; grid-column: span 3; min-height: 42px; padding: 5px; }
  html[data-theme] .strategyGrid > div:nth-child(n+4) strong { margin-top: 2px; font-size: 12px; }
  .strategyGrid .rrDetail { font-size: 8px; }
  .strategyPlans { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px; }
  .strategyPlan { display: flex; flex-direction: column; align-items: stretch; padding: 5px; gap: 3px; }
  .strategyPlan > strong { flex: none; font-size: 9px; }
  .planPrices { gap: 3px; }
  .planPrice { padding: 3px; }
  .planPrice small, .planReference { font-size: 8px; }
  .planPrice b { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .strategyGrid > .probabilityCard.active::before { animation: none; }
}

/* Account screens show only the interactive orbit field behind the dialog. */
html[data-theme] .authDialog::backdrop {
  background: rgba(2, 11, 20, .24);
  backdrop-filter: none;
}
html[data-theme] body.accountOverlay .authDialog::backdrop { background: rgba(2, 11, 20, .08); }
html[data-theme] .authDialog {
  background: #102030;
  box-shadow: 0 24px 70px #020810c9, 0 0 0 1px #64dce523;
}
.ambientField { transition: opacity .25s ease; }
body.authLocked .ambientField { z-index: 1; }
body.authLocked .shell { z-index: 1; }
.ambientOrbit.second { stroke: #80dce4; stroke-opacity: .3; stroke-dasharray: 3 12; animation-duration: 45s; }
.ambientOrbit.third { stroke: #e4bd74; stroke-opacity: .24; stroke-dasharray: 4 16; animation-duration: 53s; }
.ambientTrace { fill: none; stroke: #6acbd3; stroke-width: .75; stroke-opacity: .19; stroke-dasharray: 2 9; }
.ambientTrack.secondary { stroke-width: .9; stroke-opacity: .3; }
.ambientStarMap path { fill: none; stroke: #8fc9c8; stroke-width: .7; stroke-opacity: .23; stroke-dasharray: 2 8; }
.ambientBeacon { --near: 0; }
.ambientBeacon.gold { color: #ffd37c; }
.ambientBeacon.cyan { color: #65edf2; }
.ambientBeacon .ambientNode {
  fill: currentColor;
  opacity: calc(.55 + var(--near) * .45);
  filter: drop-shadow(0 0 6px currentColor);
}
.ambientBeacon .ambientRing {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: calc(.18 + var(--near) * .7);
  transform: scale(calc(1 + var(--near) * .8));
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .18s ease, opacity .18s ease;
}
.ambientBeacon .ambientHalo {
  fill: currentColor;
  opacity: calc(.04 + var(--near) * .22);
  filter: blur(10px);
  transform: scale(calc(1 + var(--near) * 2));
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .2s ease, opacity .2s ease;
}
.ambientReaction { opacity: 0; transition: opacity .25s ease; }
.ambientAwake .ambientReaction { opacity: 1; }
.ambientLink { stroke: #98edf0; stroke-width: 1.2; stroke-dasharray: 4 7; filter: drop-shadow(0 0 5px #78eaf0); }
@media (max-width: 720px) {
  html[data-theme] .authDialog::backdrop { background: rgba(2, 11, 20, .55); }
  html[data-theme] body.accountOverlay .authDialog::backdrop { background: rgba(2, 11, 20, .08); }
  .ambientStarMap { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .ambientReaction { display: none; }
  .ambientBeacon .ambientRing, .ambientBeacon .ambientHalo { transition: none; }
}

/* Group tabs share the watchlist border so the selected group reads as one panel. */
.groupBar { display:flex; align-items:stretch; min-width:0; padding:0 9px; border-bottom:1px solid var(--line); }
.groupTabs { display:flex; flex:1; min-width:0; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.groupTab { flex:none; position:relative; padding:10px 12px 9px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font:700 12px Arial,sans-serif; white-space:nowrap; cursor:pointer; }
.groupTab.active { background:var(--highlight); color:var(--ink); border-bottom-color:var(--accent); border-radius:8px 8px 0 0; }
.groupTab:hover { color:var(--ink); }
.groupIconButton { display:grid; place-items:center; flex:none; width:34px; height:34px; margin:4px 0 4px 5px; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--field); color:var(--muted); font:22px/1 Arial,sans-serif; cursor:pointer; }
.groupIconButton:hover { background:var(--highlight); }
.groupManageDialog { width:min(500px,calc(100vw - 24px)); max-height:min(76vh,680px); }
.groupManagePanel { padding:12px; background:var(--paper); }
.groupManagePanel .groupForm { display:grid; gap:8px; padding:12px 2px 0; }
.groupManageDialog[data-mode="create"] .groupManageList { display:none; }
.groupManageDialog[data-mode="manage"] .groupForm { display:none; }
.groupCreateFromManage { display:block; margin:8px 2px 10px auto; padding:7px 10px; border:1px solid var(--line); border-radius:7px; background:var(--field); color:var(--muted); font:700 11px Arial,sans-serif; cursor:pointer; }
.groupCreateFromManage:hover { background:var(--highlight); color:var(--ink); }
.groupManageDialog[data-mode="create"] .groupCreateFromManage { display:none; }
.groupCreateRow { display:flex; gap:8px; }
.groupManagePanel .groupCreateRow input { flex:1; min-width:0; }
.groupManagePanel .groupForm button { flex:none; padding:7px 14px; }
.groupSeedField { min-width:0; margin:0; padding:6px 9px 8px; border:1px solid var(--line); border-radius:8px; }
.groupSeedField legend { padding:0 5px; color:var(--muted); font:700 11px Arial,sans-serif; }
.groupSeedSearchWrap { position:relative; margin-bottom:7px; }
.groupManagePanel .groupSeedSearch { display:block; width:100%; min-width:0; margin:0; padding:7px 9px; border:1px solid var(--line); border-radius:7px; background:var(--field); color:var(--ink); font:11px Arial,sans-serif; }
.groupSeedSuggestions { top:calc(100% + 4px); max-height:235px; background:var(--paper); border-color:var(--line); }
.groupManagePanel .groupSeedSuggestions .suggestion { display:flex; width:100%; padding:7px 9px; background:var(--paper); border-bottom-color:var(--line); cursor:pointer; }
.groupManagePanel .groupSeedSuggestions .suggestion:hover,
.groupManagePanel .groupSeedSuggestions .suggestion.active { background:var(--highlight); }
.groupManagePanel .groupSeedSuggestionInfo { display:flex; flex:1; align-items:center; gap:9px; min-width:0; padding:0; border:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.groupManagePanel .groupSeedSuggestionInfo:hover .suggestName strong,
.groupManagePanel .groupSeedSuggestionInfo:focus-visible .suggestName strong { color:var(--accent); }
.groupManagePanel .groupSeedSuggestionAdd { flex:none; padding:5px 7px; border:0; border-radius:5px; background:transparent; color:var(--accent); font:700 10px Arial,sans-serif; cursor:pointer; }
.groupManagePanel .groupSeedSuggestionAdd:hover { background:var(--field); }
.groupSeedSuggestions .suggestLogo { width:25px; height:25px; flex-basis:25px; }
.groupSeedSelected { display:grid; gap:7px; margin:0 0 9px; padding:9px; border:1px solid var(--line); border-radius:8px; background:var(--field); }
.groupSeedSelectedTitle { color:var(--ink); font:700 11px Arial,sans-serif; }
.groupSeedSelectedEmpty { color:var(--muted); font:10px Arial,sans-serif; }
.groupSeedChips { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; max-height:108px; overflow-y:auto; }
.groupSeedChip { display:grid; flex:0 0 170px; box-sizing:border-box; grid-template-columns:26px minmax(0,1fr) 22px; align-items:center; column-gap:8px; width:170px; max-width:100%; min-height:44px; min-width:0; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--raised); color:var(--ink); font:700 11px Arial,sans-serif; }
.groupSeedChip .groupSeedChipLogo { width:22px; height:22px; }
.groupManagePanel .groupForm button.groupSeedChipLogoButton { display:grid; place-items:center; width:26px; height:26px; min-width:26px; padding:0; border:0; border-radius:6px; background:transparent; cursor:pointer; }
.groupManagePanel .groupSeedChipLogoButton:hover,
.groupManagePanel .groupSeedChipLogoButton:focus-visible { background:var(--highlight); outline:1px solid var(--accent); }
.groupSeedChipText { display:flex; flex-direction:column; justify-content:center; gap:2px; min-width:0; overflow:hidden; white-space:nowrap; }
.groupManagePanel .groupSeedChipText { color:var(--ink); text-align:left; }
.groupSeedChipText strong,.groupSeedChipText small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.groupSeedChipText small { color:var(--muted); font:9px Arial,sans-serif; }
.groupManagePanel .groupSeedChip > button:last-child { display:grid; place-items:center; width:22px; height:22px; min-width:0; padding:0; border:0; border-radius:4px; background:transparent; color:var(--muted); font:16px Arial,sans-serif; cursor:pointer; }
.groupManagePanel .groupSeedChip > button:last-child:hover { background:var(--highlight); color:var(--ink); }
.groupSeedResultTitle { margin:0 2px 4px; color:var(--muted); font:700 10px Arial,sans-serif; }
.groupSeedList { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 10px; max-height:152px; overflow-y:auto; }
.groupSeedOption { display:grid; grid-template-columns:22px minmax(0,1fr); align-items:center; column-gap:9px; min-width:0; min-height:38px; padding:4px 8px; border-radius:7px; color:var(--ink); }
.groupSeedOption:has(input:checked) { background:color-mix(in srgb,var(--raised) 55%,transparent); }
.groupSeedOption:focus-within { outline:1px solid var(--line); }
.groupManagePanel .groupSeedOptionInfo { display:flex; align-items:center; gap:6px; min-width:0; color:var(--ink); text-align:left; }
.groupManagePanel .groupSeedOption input { justify-self:center; width:16px; height:16px; min-width:16px; margin:0; padding:0; border:0; accent-color:var(--accent); cursor:pointer; }
html[data-theme] .groupManagePanel .groupSeedOption input { appearance:auto; background:initial; border:0; }
.groupSeedOption strong { flex:none; font:700 11px Arial,sans-serif; }
.groupSeedOptionInfo > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font:10px Arial,sans-serif; }
.groupSeedEmpty { grid-column:1/-1; margin:3px; color:var(--muted); font:11px Arial,sans-serif; }
.groupManageList { display:grid; gap:7px; max-height:30vh; overflow-y:auto; padding:4px 2px 8px; }
.groupManageRow { display:flex; gap:5px; align-items:center; }
.groupManageRow input { flex:1; min-width:0; padding:8px; border:1px solid var(--line); border-radius:7px; background:var(--field); color:var(--ink); }
.groupManageRow button { flex:none; padding:7px 9px; border:1px solid var(--line); border-radius:7px; background:var(--field); color:var(--ink); cursor:pointer; }
.groupManageRow button:disabled { opacity:.35; cursor:default; }
.hiddenAlertsSettings { display:none!important; }
.heroPrice strong { font-family:Arial,Helvetica,sans-serif; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:-.025em; line-height:1.08; white-space:nowrap; }
#chartLatest { margin-left:0; }
.chartStatusRow #chartLatest,.chartStatusRow #reload { flex:none; padding:5px 9px; font-size:11px; }
@media (min-width:900px) {
  .layout { align-items:stretch; }
  .sidebar { display:flex; flex-direction:column; }
  .sidebarNews { flex:1 1 300px; min-height:300px; height:auto; resize:none; }
}
@media (max-width:720px) {
  .groupBar { padding:0 5px; }
  .groupTab { padding:8px 9px; font-size:10px; }
  .groupIconButton { width:34px; }
  .chartStatusRow #chartLatest,.chartStatusRow #reload { display:inline-flex; font-size:9px; padding:3px 5px; }
  .chartStatusRow { flex-wrap:wrap; }
}

/* Slow orbital machinery remains behind panels and follows the pointer subtly. */
.orbitalMegastructure { opacity:.62; filter:drop-shadow(0 0 22px #59dcdf3d); transition:translate .35s ease-out; }
.orbitalOuter,.orbitalInner,.orbitalCore { transform-box:fill-box; transform-origin:center; }
.orbitalOuter { animation:orbitalTurn 150s linear infinite; }
.orbitalInner { animation:orbitalTurn 105s linear infinite reverse; }
.orbitalCore { animation:orbitalTurn 75s linear infinite; }
.orbitalRim { fill:none; stroke:#76dce0; stroke-width:3; stroke-opacity:.43; }
.orbitalFine { fill:none; stroke:#efd18d; stroke-width:1.4; stroke-opacity:.36; stroke-dasharray:5 13; }
.orbitalSegments { fill:none; stroke:#94f4ee; stroke-width:14; stroke-opacity:.33; stroke-dasharray:46 74 8 43; }
.orbitalSegments.inner { stroke:#ecc77d; stroke-width:10; stroke-opacity:.4; stroke-dasharray:24 51 68 29; }
.orbitalSpokes { fill:none; stroke:#8ee2e0; stroke-opacity:.45; stroke-width:8; stroke-linecap:square; }
.orbitalFrame { fill:none; stroke:#e1c580; stroke-opacity:.34; stroke-width:2; }
.orbitalHub { fill:#e6d299; opacity:.64; filter:drop-shadow(0 0 20px #efdb9c); }
@keyframes orbitalTurn { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  .orbitalOuter,.orbitalInner,.orbitalCore { animation:none; }
  .orbitalMegastructure { transition:none; }
}

@media (min-width:900px) and (max-width:1399px) {
  .watch { grid-template-columns:28px minmax(58px,1fr) 40px minmax(0,max-content) 24px; column-gap:4px; }
  .watch .miniButton,.watch .miniCanvas { width:40px; }
  .watchprice { max-width:72px; font-size:10px; letter-spacing:-.03em; }
  .watchactions { width:30px; }
}

/* The selected tab and its list share one continuous surface. */
.sidebar .panel:first-child { --groupSurface: #203a47; }
.groupBar { border-bottom:0; padding-bottom:0; }
.groupTabs { align-items:stretch; }
.groupTab { margin-top:5px; padding:10px 12px; border:1px solid transparent; border-bottom:0; border-radius:10px 10px 0 0; }
.groupTab.active { background:var(--groupSurface); border-color:transparent; border-bottom:0; border-radius:10px 10px 0 0; box-shadow:0 1px 0 0 var(--groupSurface); }
.groupTabName { color:var(--muted); }
.groupTabSeparator { margin:0 5px; color:var(--rule); }
.groupTabCount { color:#8cdbe0; font-variant-numeric:tabular-nums; }
.groupTab.active .groupTabName { color:var(--ink); }
.groupTab.active .groupTabCount { color:#8cdbe0; }
.watchlist { background:var(--groupSurface); border-radius:0 0 10px 10px; padding-top:10px; margin-top:-1px; }
.watchlist .watch:first-child { margin-top:3px; }
.watchlist .watch:first-child { border-top:0; }
.groupIconButton { align-self:center; height:34px; }
/* Long and short calls fit the original watch-state box without stretching it. */
.strategyCall.long,.strategyCall.short { box-sizing:border-box; width:100%; max-width:100%; min-width:0; min-height:62px; }
.strategyCall.long span,.strategyCall.short span { min-width:0; overflow-wrap:anywhere; }
.groupManageRow { display:grid; grid-template-columns:minmax(0,1fr) 56px 56px 38px; gap:8px; padding:4px 0; }
.groupManageName { flex:1; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:var(--field); color:var(--ink); font-size:13px; }
.groupManageRow input { flex:1; padding:9px 10px; font-size:13px; }
.groupManageRow .groupEditButton,.groupManageRow .groupDeleteButton { min-width:0; padding:7px 6px; color:var(--ink); font-size:13px; white-space:nowrap; }
.groupManageRow .groupDeleteButton { color:#ff8ca5; }
.groupManageRow .groupDragHandle { width:38px; height:38px; padding:8px; color:var(--muted); touch-action:none; cursor:grab; }
.groupManageRow .groupDragHandle svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.groupManageRow.dragging { background:var(--highlight); border-radius:8px; box-shadow:inset 3px 0 var(--accent); }
.groupManageRow.dragging .groupDragHandle { cursor:grabbing; }
.groupConfirmDialog { width:min(340px,calc(100vw - 28px)); }
.groupConfirmPanel { padding:18px; background:var(--paper); }
.groupConfirmPanel h2 { margin:0 0 14px; font-size:16px; color:var(--ink); }
.groupConfirmPanel p { margin:0 0 14px; color:var(--muted); line-height:1.5; }
.groupConfirmPanel p:empty { display:none; }
.groupConfirmMove { display:flex; align-items:center; gap:9px; margin:0 0 18px; color:var(--ink); cursor:pointer; }
.groupConfirmMove[hidden] { display:none; }
.groupConfirmMove input { flex:none; width:16px; height:16px; margin:0; accent-color:var(--accent); }
.groupConfirmMove span { font-size:12px; }
.groupConfirmPanel .groupConfirmError { margin:-4px 0 12px; color:#ff879a; font-size:11px; }
.groupConfirmError:empty { display:none; }
.groupConfirmActions { display:flex; justify-content:flex-end; gap:10px; }
.groupConfirmActions button { min-width:84px; padding:9px 14px; border:1px solid var(--line); border-radius:8px; background:var(--field); color:var(--ink); cursor:pointer; }
.groupConfirmActions #groupConfirmAccept { border-color:var(--accent); background:var(--accent); color:#102030; font-weight:700; }
.groupConfirmActions #groupConfirmAccept.danger { border-color:#c45e78; background:#713647; color:#fff; }
.groupFixedLabel { grid-column:2/4; display:grid; place-items:center; min-height:38px; color:var(--muted); font-size:13px; white-space:nowrap; }
@media (max-width:520px) {
  .groupManageRow { grid-template-columns:minmax(0,1fr) 34px 34px 30px; gap:4px; }
  .groupManageRow .groupEditButton,.groupManageRow .groupDeleteButton { min-width:34px; padding:7px 5px; font-size:10px; }
  .groupManageRow .groupDragHandle { width:30px; height:34px; padding:6px; }
}

@media (min-width:721px) {
  .groupBar { padding-inline:4px; }
  .groupBar .groupTabs { gap:4px; padding-inline:2px; }
  .groupIconButton { width:27px; height:27px; margin-left:4px; font-size:19px; }
}
@media (max-width:720px) {
  #groupAddButton { display:none; }
}

/* Two huge counter-rotating orbital assemblies give the field depth. */
.orbitalStationSecondary { opacity:.72; filter:drop-shadow(0 0 22px #59c5d044); }
.orbitalStationGyro,.orbitalStationCounter,.stationCore { transform-box:fill-box; transform-origin:center; }
.orbitalStationGyro { animation:orbitalTurn 190s linear infinite reverse; }
.orbitalStationCounter { animation:orbitalTurn 125s linear infinite; }
.stationCore { animation:orbitalTurn 96s linear infinite reverse; }
.stationArmor { fill:none; stroke:url(#stationMetal); stroke-width:18; stroke-opacity:.65; }
.stationFine { fill:none; stroke:#a3d4d7; stroke-width:2; stroke-opacity:.42; stroke-dasharray:5 11; }
.stationRail { fill:none; stroke:#ebd19a; stroke-width:4; stroke-opacity:.4; }
.stationArmorSegments { fill:none; stroke:#a9d7db; stroke-width:31; stroke-opacity:.52; stroke-dasharray:28 35 85 22; }
.stationArmorSegments.inner { stroke:#dfc58d; stroke-width:22; stroke-dasharray:46 21 8 33; }
.stationTruss { fill:none; stroke:#b2d7d9; stroke-width:12; stroke-opacity:.48; stroke-linecap:square; }
.stationTruss.thin { stroke-width:5; stroke-opacity:.34; }
.stationSignal { fill:none; stroke:#a7f2e4; stroke-width:5; stroke-opacity:.7; stroke-dasharray:60 280; filter:drop-shadow(0 0 10px #85f3e2); }
.stationHub { fill:#d2e6df; opacity:.65; filter:drop-shadow(0 0 28px #b0f1e6); }
@media (prefers-reduced-motion:reduce) {
  .orbitalStationGyro,.orbitalStationCounter,.stationCore { animation:none; }
}

/* Brushed metal finish for the two observation plans. */
html[data-theme] .strategyPlan.long,
html[data-theme] .strategyPlan.short {
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(112deg,rgba(255,255,255,.09),transparent 18%,rgba(255,255,255,.025) 46%,transparent 72%,rgba(255,255,255,.04)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.01) 0 1px,transparent 1px 5px),
    linear-gradient(155deg,var(--metal-top),var(--metal-bottom));
  border-color:var(--metal-rim);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.16),inset 3px 0 0 var(--metal-rim),inset 0 -1px 0 rgba(0,0,0,.3),0 5px 14px rgba(0,0,0,.2);
}
html[data-theme] .strategyPlan.long { --metal-top:#433641; --metal-bottom:#211f2c; --metal-rim:#dd7897; }
html[data-theme] .strategyPlan.short { --metal-top:#244943; --metal-bottom:#142b2d; --metal-rim:#66cfaa; }
html[data-theme] .strategyPlan.long::before,
html[data-theme] .strategyPlan.short::before {
  content:"";position:absolute;inset:1px 9px auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
}
html[data-theme] .strategyPlan .planPrice.take,
html[data-theme] .strategyPlan .planPrice.stop {
  background:
    linear-gradient(115deg,rgba(255,255,255,.1),transparent 20%,rgba(255,255,255,.025) 55%,transparent 80%),
    linear-gradient(165deg,var(--metal-tile-top),var(--metal-tile-bottom));
  border-color:var(--metal-tile-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.16);
}
html[data-theme] .strategyPlan .planPrice.take { --metal-tile-top:#2b4852; --metal-tile-bottom:#1c303a; --metal-tile-edge:#597c87; color:#aad8e1; }
html[data-theme] .strategyPlan .planPrice.stop { --metal-tile-top:#4a3c38; --metal-tile-bottom:#302b2d; --metal-tile-edge:#886a5d; color:#e7b9a0; }

/* The condition verdict has its own cool steel surface, separate from frequency and price plans. */
html[data-theme] .strategyCall,
html[data-theme] .strategyCall.long,
html[data-theme] .strategyCall.short,
html[data-theme] .strategyCall.entry {
  --call-accent:#94bed1;
  width:100%;min-width:0;min-height:78px;box-sizing:border-box;
  padding:11px 17px;gap:14px;border:1px solid #637a89;border-radius:11px;
  background:
    linear-gradient(112deg,rgba(255,255,255,.13),transparent 17%,rgba(255,255,255,.035) 52%,transparent 83%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.013) 0 1px,transparent 1px 5px),
    linear-gradient(145deg,#263845,#142531 65%,#1c3040);
  color:#c0d1d9;
  box-shadow:inset 4px 0 0 var(--call-accent),inset 0 1px 0 #ffffff3b,inset 0 -2px 0 #07131bb0,0 6px 18px #020a12a6;
  animation:none;
}
html[data-theme] .strategyCall.long { --call-accent:#e899ad; }
html[data-theme] .strategyCall.short { --call-accent:#83dabc; }
html[data-theme] .strategyCall strong,
html[data-theme] .strategyCall.long strong,
html[data-theme] .strategyCall.short strong,
html[data-theme] .strategyCall.entry strong { flex:0 0 48px;color:var(--call-accent);font-size:14px; }
html[data-theme] .strategyCall span,
html[data-theme] .strategyCall.entry span { flex:1;min-width:0;color:#c0d1d9;font-size:11px;line-height:1.65; }
html[data-theme] .strategyCall.entry::before { display:none; }
html[data-theme] .strategyCall {
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:5px 14px;
  align-items:center;
}
html[data-theme] .strategyCall > strong { grid-column:1; grid-row:1; }
html[data-theme] .strategyCall > #strategyCallDetail { grid-column:2; grid-row:1; overflow-wrap:anywhere; }
html[data-theme] .strategyCall > .strategyCallConclusion {
  grid-column:1/-1;
  grid-row:2;
  margin:0;
  color:#f3ca75;
  font-size:12px;
  font-weight:700;
  line-height:1.55;
  text-align:center;
}

/* Keep the four chart commands in one evenly sized control. */
.chartStatusRow { justify-content:flex-end; flex-wrap:nowrap; }
.chartActions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:min(100%,440px); overflow:hidden; border:1px solid var(--line); border-radius:9px; background:var(--field); }
html[data-theme] .chartActions > button {
  display:flex; align-items:center; justify-content:center; min-width:0; min-height:34px;
  box-sizing:border-box; margin:0; padding:5px 7px; border:0; border-right:1px solid var(--line);
  border-radius:0; background:transparent; color:var(--ink); font:11px Arial,sans-serif;
  line-height:1.2; white-space:nowrap; cursor:pointer;
}
html[data-theme] .chartActions > button:last-child { border-right:0; }
html[data-theme] .chartActions > button:hover:not(:disabled) { background:var(--highlight); color:var(--accent); }
html[data-theme] .chartActions > button:disabled { opacity:.55; cursor:default; }
html[data-theme] .chartActions > #chartExpand[aria-pressed="true"] { background:var(--highlight); color:var(--accent); }
.chartActions #chartLatest { margin:0; }
/* In the expanded view, the timeframe strip and four commands form one chart header. */
body.chartExpanded .chartStatusRow {
  box-sizing:border-box;
  width:calc(100% - 8px);
  min-height:48px;
  margin:0 4px;
  padding:5px 8px;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:10px 10px 0 0;
  background:#0b111d;
}
body.chartExpanded .chartStatusRow > .toolbar {
  flex:1 1 auto;
  box-sizing:border-box;
  width:auto;
  min-width:0;
  margin:0;
  padding:0;
  overflow:hidden;
  flex-wrap:nowrap;
}
body.chartExpanded .chartStatusRow .segmented {
  display:flex;
  flex-wrap:nowrap;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:thin;
}
body.chartExpanded .chartStatusRow .segmented button { flex:none; }
body.chartExpanded .chartStatusRow .chartActions {
  flex:0 0 clamp(280px,38%,440px);
  width:auto;
}
body.chartExpanded .chartBox {
  box-sizing:border-box;
  width:calc(100% - 8px);
  margin:0 4px;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 10px 10px;
  overflow:hidden;
  background:#0b111d;
}
@media (max-width:720px) {
  body.chartExpanded .chartStatusRow { min-height:40px; gap:5px; padding:3px 4px; }
  body.chartExpanded .chartStatusRow .chartActions { flex-basis:min(62%,240px); }
  body.chartExpanded .chartStatusRow .historyMore { display:flex; }
}
@media (max-width:520px) {
  html[data-theme] .chartActions > button { min-height:31px; padding:4px 3px; font-size:9px; }
}

/* Equal-width tabs meet the list through a small, quiet shoulder. */
.groupTabs { box-sizing:border-box; gap:7px; padding-inline:6px; scroll-padding-inline:6px; }
.groupTab {
  display:grid; grid-template-columns:20px minmax(0,1fr) 20px; align-items:center;
  flex:0 0 100px; box-sizing:border-box; width:100px; min-width:100px; max-width:100px; padding-inline:0;
}
.groupTab:not(.active) {
  margin-bottom:0;
  border-color:transparent;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.groupTab:not(.active)::after {
  content:"";
  position:absolute;
  top:32%; right:-3px;
  width:1px; height:36%;
  background:color-mix(in srgb,var(--line) 36%,transparent);
  pointer-events:none;
}
.groupTab:not(.active):last-child::after { display:none; }
.groupTab:not(.active):hover { color:var(--ink); }
.groupTab:not(.active) .groupTabName { color:color-mix(in srgb,var(--muted) 75%,var(--ink)); }
.groupTab:not(.active) .groupTabCount { color:color-mix(in srgb,#8cdbe0 70%,var(--muted)); }
.groupTabName { display:block; grid-column:2; justify-self:center; min-width:0; max-width:calc(100% - 8px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
.groupTabMeta { position:absolute; top:50%; right:6px; display:flex; align-items:center; gap:3px; transform:translateY(-50%); pointer-events:none; }
.groupTabFire { font-size:14px; line-height:1; }
.groupTabSeparator { flex:none; margin:0; }
.groupTabCount { flex:none; }
.groupTab.active { isolation:isolate; border-radius:9px 9px 0 0; }
.groupTab.active::before,.groupTab.active::after {
  content:""; position:absolute; bottom:-1px; width:7px; height:7px;
  pointer-events:none; background:var(--groupSurface);
}
.groupTab.active::before { left:-7px; mask:radial-gradient(circle at 0 0,transparent 6px,#000 6.5px); }
.groupTab.active::after { right:-7px; mask:radial-gradient(circle at 100% 0,transparent 6px,#000 6.5px); }
@media (min-width:721px) {
  .groupBar { position:relative; }
  .groupBar.hasGroupOverflow { padding-top:9px; }
  .groupTabs { scrollbar-width:none; }
  .groupTabs::-webkit-scrollbar { display:none; }
  .groupTabs .groupTab { padding-bottom:9px; }
  .groupScrollRail {
    position:absolute; z-index:2; top:2px; left:8px; right:42px;
    height:4px; border-radius:999px; background:color-mix(in srgb,var(--line) 28%,transparent);
    cursor:grab; touch-action:none;
  }
  .groupScrollRail[hidden] { display:none; }
  .groupScrollRail:active { cursor:grabbing; }
  .groupScrollThumb {
    display:block; width:52px; max-width:35%; height:4px; border-radius:999px;
    background:var(--rule); box-shadow:0 0 5px color-mix(in srgb,var(--rule) 40%,transparent);
  }
}
.selectedAssetPreview:not([hidden]) { cursor:pointer; }
.selectedAssetPreview:not([hidden]):hover,
.selectedAssetPreview:not([hidden]):focus-visible { border-color:var(--accent); background:var(--highlight); }

/* The full strategy explanation is for desktop; keep the mobile chart clear. */
@media (max-width:720px) {
  .strategyPanel { display:none !important; }
}

/* Rank badge for the 热门 list is desktop-only to keep mobile cards compact. */
.hotRank { display:none; }
/* Every watch item has its own quiet surface, including unselected items. */
@media (min-width:721px) {
  .watchlist .watch {
    box-sizing:border-box;
    margin:0 0 6px;
    padding:9px 8px;
    border:1px solid color-mix(in srgb,var(--line) 58%,transparent);
    border-radius:10px;
    background:color-mix(in srgb,var(--groupSurface) 68%,var(--field));
    box-shadow:inset 0 1px rgba(255,255,255,.035);
  }
  .watchlist .watch:first-child { margin-top:0; border-top:1px solid color-mix(in srgb,var(--line) 58%,transparent); }
  .watchlist .watch:last-child { margin-bottom:0; }
  .watchlist .watch.hot { position:relative; padding-left:26px; }
  .watchlist .watch.hot .hotRank {
    display:block; position:absolute; left:8px; top:50%; transform:translateY(-50%);
    min-width:14px; text-align:center; font:700 11px/1 Arial,sans-serif;
    color:var(--muted); font-variant-numeric:tabular-nums;
  }
  html[data-theme] .watchlist .watch.hot .hotRank { color:var(--rule); }
  html[data-theme] .watchlist .watch.hot.selected .hotRank { color:var(--accent); }
  html[data-theme] .watchlist .watch.selected {
    border-color:color-mix(in srgb,var(--accent) 48%,var(--line));
    background:var(--highlight);
    box-shadow:inset 3px 0 var(--accent),inset 0 1px rgba(255,255,255,.06);
  }
  .watchlist .watch:not(.selected):hover {
    border-color:var(--line);
    background:color-mix(in srgb,var(--groupSurface) 50%,var(--raised));
  }
}

/* Direction colours track the user's red-up or green-up setting. */
html[data-theme] .probabilityCard.long { --probColor:var(--up,#e94872); --probGlow:var(--up,#e94872); }
html[data-theme] .probabilityCard.short { --probColor:var(--down,#28b878); --probGlow:var(--down,#28b878); }
html[data-theme] .strategyGrid > div:first-child strong,
html[data-theme] .maOrder.bullish { color:var(--up,#e94872); }
html[data-theme] .strategyGrid > div:nth-child(3) strong,
html[data-theme] .maOrder.bearish { color:var(--down,#28b878); }
html[data-theme] .strategyPlan.long {
  --metal-top:color-mix(in srgb,var(--up,#e94872) 15%,#26333c);
  --metal-bottom:color-mix(in srgb,var(--up,#e94872) 5%,#19252f);
  --metal-rim:color-mix(in srgb,var(--up,#e94872) 62%,#60737b);
  color:var(--up,#e94872);
}
html[data-theme] .strategyPlan.short {
  --metal-top:color-mix(in srgb,var(--down,#28b878) 15%,#26333c);
  --metal-bottom:color-mix(in srgb,var(--down,#28b878) 5%,#19252f);
  --metal-rim:color-mix(in srgb,var(--down,#28b878) 62%,#60737b);
  color:var(--down,#28b878);
}
html[data-theme] .strategyPlan .planPrice.take small { color:#8fb7c3; }
html[data-theme] .strategyPlan .planPrice.stop small { color:#caa18d; }
html[data-theme] .strategyCall.long { --call-accent:var(--up,#e94872); }
html[data-theme] .strategyCall.short { --call-accent:var(--down,#28b878); }

/* Give asset names room and let the small K-line use a wider slot. */
@media (min-width:1400px) {
  .watch { grid-template-columns:28px minmax(0,1fr) 72px minmax(0,max-content) 24px; column-gap:5px; }
  .watch .miniButton,.watch .miniCanvas { width:70px; }
  .watch .miniButton { justify-self:end; }
  .watchprice { max-width:72px; font-size:10px; }
}
@media (min-width:1100px) and (max-width:1399px) {
  .watch { grid-template-columns:28px minmax(0,1fr) 50px minmax(0,max-content) 24px; column-gap:4px; }
  .watch .miniButton,.watch .miniCanvas { width:48px; }
  .watch .miniButton { justify-self:end; }
  .watchprice { max-width:68px; font-size:10px; }
}

/* Keep menu and drag controls equally compact at the row edge. */
@media (min-width:721px) {
  .watchlist .watch { padding-right:5px; }
  .watchactions { width:24px; flex-basis:24px; justify-self:end; }
  .watchactions button.watchMenuButton,
  .watchactions button.dragHandle {
    box-sizing:border-box;
    width:23px;
    height:23px;
    border-radius:7px;
  }
  .watchactions button.watchMenuButton { font-size:15px; }
  .watchactions button.dragHandle svg { width:15px; height:15px; }
}

/* ===== 宠物主屏（移动端新增；经典版保留） ===== */
#petHome,#petDeck{display:none}
.petHomeEntry{display:none}
@media (max-width:720px){
.petHomeEntry{display:block;width:calc(100% - 24px);margin:12px 12px 6px;padding:13px;border-radius:14px;font-size:15px;text-align:center}
body.petHomeMode .mast,body.petHomeMode .layout{display:none}
body.petHomeMode .shell{padding:0 0 35px}
#petHome{position:fixed;inset:0;z-index:40;display:none;flex-direction:column;overflow:hidden;color:var(--ink);
  /* 恒暗表面：覆盖后段 :root 的浅色主题变量，保证文字对比度 */
  --ink:#e9f3ff;--muted:#9fb2c9;--line:rgba(255,255,255,.14);
  background:radial-gradient(80% 50% at 85% -6%,rgba(96,227,243,.12),transparent 60%),
    radial-gradient(70% 46% at 8% 108%,rgba(255,110,180,.1),transparent 65%),
    linear-gradient(180deg,#0a1226,#070d1d 55%,#05080f)}
body.petHomeMode #petHome{display:flex}
.petHead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 14px) 16px 6px}
.petOverline{display:block;font:700 9px Arial,sans-serif;letter-spacing:.22em;color:var(--accent)}
.petHeadBrand strong{font-size:19px;letter-spacing:.06em}
.petHeadRight{display:flex;align-items:center;gap:8px}
.petStatus{font:10px Arial,sans-serif;padding:6px 9px;border-radius:99px;border:1px solid var(--line);color:var(--muted);background:rgba(14,26,49,.6)}
.petStatus:before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#36a878}
.petStatus.bad:before{background:#c85d4d}
.petHeadAccount{border:1px solid var(--line);background:rgba(14,26,49,.6);color:var(--ink);border-radius:99px;padding:7px 11px;font-size:11px}
.petStage{flex:1;min-height:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr 1fr;gap:4px 2px;padding:10px 58px 0 14px}
.petSlot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:0 0 6px;border:0;background:none;color:var(--ink);touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.petSlot:nth-child(1){--hue:330;grid-column:1/3;grid-row:1}
.petSlot:nth-child(2){--hue:30;grid-column:3/5;grid-row:1}
.petSlot:nth-child(3){--hue:222;grid-column:5/7;grid-row:1}
.petSlot:nth-child(4){--hue:140;grid-column:2/4;grid-row:2}
.petSlot:nth-child(5){--hue:268;grid-column:4/6;grid-row:2}
.petIsland{position:absolute;left:50%;bottom:24px;width:90%;height:36px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at 50% 34%,hsl(var(--hue) 42% 30%/.95),hsl(var(--hue) 55% 14%/.95) 72%);
  border:1px solid hsl(var(--hue) 45% 40%/.45);
  box-shadow:0 10px 24px rgba(0,0,0,.5),inset 0 3px 8px hsl(var(--hue) 60% 45%/.35)}
.petSlot.active .petIsland{box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 0 2px var(--accent),inset 0 3px 8px hsl(var(--hue) 60% 45%/.35)}
.petActor{position:relative;z-index:1;width:84%;max-width:132px;aspect-ratio:1;margin-bottom:12px}
.petTilt,.petFlipper,.petFloat{display:block;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.petSvg{width:100%;height:100%;display:block;filter:drop-shadow(0 12px 12px rgba(0,0,0,.42))}
.petShadow{position:absolute;left:50%;bottom:18px;width:58%;height:12px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 68%);animation:petShadowBob 3.6s ease-in-out infinite}
.petFloat{animation:petFloat 3.6s ease-in-out infinite}
.petEye{transform-box:fill-box;transform-origin:center;animation:petBlink 4.6s infinite}
.petSlot:nth-child(2) .petEye{animation-delay:.7s}
.petSlot:nth-child(3) .petEye{animation-delay:1.5s}
.petSlot:nth-child(4) .petEye{animation-delay:2.1s}
.petSlot:nth-child(5) .petEye{animation-delay:2.9s}
.petPocket{position:absolute;right:0;bottom:4%;width:36px;height:32px;z-index:3;transform:rotate(6deg);
  background:linear-gradient(165deg,#d8b078,#93622f);border:2px solid #5c3c17;
  border-radius:38% 38% 48% 48%/32% 32% 62% 62%;
  box-shadow:0 4px 10px rgba(0,0,0,.45),inset 0 2px 3px rgba(255,255,255,.35);
  display:grid;place-items:center}
.petPocket:before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:20px;height:9px;border:2px solid #5c3c17;border-bottom:0;border-radius:10px 10px 0 0}
.petPocketCount{font:800 13px/1 system-ui,sans-serif;color:#fff6e0;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.petMeta{position:relative;z-index:2;text-align:center}
.petName{display:block;font-size:13px;font-weight:700}
.petCountText{display:block;font-size:10px;color:var(--muted)}
.petEmptyPlus{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;
  border:2px dashed #3a5578;color:#7f9cc0;display:grid;place-items:center;background:rgba(14,26,49,.55)}
.petEmptyPlus svg{width:22px;height:22px}
.petSlot:not(.empty) .petEmptyPlus{display:none}
.petSlot.empty .petActor{display:none}
.petFlipAnim{animation:petFlip .78s cubic-bezier(.34,1.45,.45,1)}
.petPocketBounce{animation:petPocketBounce .7s ease}
.petHint{display:flex;justify-content:center;gap:14px;padding:6px 12px calc(env(safe-area-inset-bottom) + 12px);font-size:10px;color:var(--muted)}
.petDock{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px;z-index:6}
.petDockButton{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:rgba(14,26,49,.78);color:#9db4d6;display:grid;place-items:center;backdrop-filter:blur(6px);touch-action:manipulation}
.petDockButton svg{width:20px;height:20px}
.petDockButton:active{color:var(--accent);border-color:var(--accent)}
@keyframes petFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes petShadowBob{0%,100%{transform:translateX(-50%) scaleX(1);opacity:.6}50%{transform:translateX(-50%) scaleX(.85);opacity:.35}}
@keyframes petBlink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}97%{transform:scaleY(1)}}
@keyframes petFlip{0%{transform:rotateY(0) scale(1)}30%{transform:rotateY(130deg) scale(1.1,.9)}55%{transform:rotateY(250deg) scale(.92,1.08)}100%{transform:rotateY(360deg) scale(1)}}
@keyframes petPocketBounce{0%{transform:rotate(6deg) translateY(0)}30%{transform:rotate(-5deg) translateY(-9px) scale(1.18)}60%{transform:rotate(10deg) translateY(1px)}100%{transform:rotate(6deg)}}
/* —— 卡组（王者万象棋牌面风格，循环翻动） —— */
#petDeck{position:fixed;inset:0;z-index:46;display:none;flex-direction:column;color:var(--ink);
  /* 恒暗表面：覆盖后段 :root 的浅色主题变量，保证牌面文字对比度 */
  --ink:#e9f3ff;--muted:#9fb2c9;--line:rgba(255,255,255,.14);
  background:radial-gradient(120% 90% at 50% 0%,#2a3468,#171e3f 45%,#0a0e22)}
#petDeck:not([hidden]){display:flex}
.deckHead{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 14px 10px}
.deckBack,.deckAdd{width:40px;height:40px;border-radius:13px;border:1px solid rgba(255,255,255,.14);background:rgba(14,26,49,.7);color:var(--ink);display:grid;place-items:center}
.deckBack svg,.deckAdd svg{width:20px;height:20px}
.deckHeadTitle{display:flex;flex-direction:column;min-width:0}
.deckHeadTitle strong{font-size:16px}
.deckHeadTitle span{font-size:10px;color:var(--muted)}
.deckCount{margin-left:auto;font:700 12px system-ui,sans-serif;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.deckStage{flex:1;min-height:0;position:relative;display:grid;place-items:center;perspective:1100px;touch-action:none}
.deckStage:before,.deckStage:after{content:"";position:absolute;left:50%;top:50%;border-radius:24px;pointer-events:none;
  border:1px solid rgba(255,255,255,.06);background:rgba(10,14,34,.55)}
.deckStage:before{width:min(70vw,306px);height:calc(min(58dvh,470px) - 18px);transform:translate(-50%,calc(-50% + 16px)) scale(.97)}
.deckStage:after{width:min(64vw,280px);height:calc(min(58dvh,470px) - 34px);transform:translate(-50%,calc(-50% + 30px)) scale(.92);opacity:.6}
.deckCard{position:relative;z-index:1;width:min(76vw,330px);height:min(58dvh,470px);transform-style:preserve-3d;will-change:transform}
.deckFrame{width:100%;height:100%;border-radius:26px;padding:12px 12px 14px;display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden;
  background:linear-gradient(165deg,#23242b,#0d0e13 60%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06)}
.deckFrame:before{content:"";position:absolute;inset:0 0 auto;height:38%;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);pointer-events:none}
.deckArt{position:relative;flex:0 0 25%;border-radius:18px;overflow:hidden;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);
  background:radial-gradient(90% 90% at 50% 18%,hsl(var(--hue) 70% 62%/.85),hsl(var(--hue) 75% 34%/.92) 58%,hsl(var(--hue) 80% 16%))}
.deckWatermark{position:absolute;top:2px;left:50%;transform:translateX(-50%);font:900 42px Georgia,serif;letter-spacing:.04em;color:rgba(255,255,255,.14);white-space:nowrap}
.deckLogo{position:relative;width:72px;height:72px;display:grid;place-items:center;z-index:1;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.deckLogo:after{content:"";position:absolute;inset:-9px;border-radius:50%;pointer-events:none;
  border:1.5px solid hsl(var(--hue) 85% 72%/.55);animation:deckHalo 2.8s ease-in-out infinite}
.deckLogo .heroLogo{width:66px;height:66px;border-radius:17px;background:#fff}
.deckLogo .heroLogo img{width:56px;height:56px}
.deckLogo .heroLogo .tickerFallback{font-size:13px}
.deckTitleRow{display:flex;align-items:baseline;gap:9px;min-width:0}
.deckTitleRow strong{font:800 23px/1.1 Georgia,serif}
.deckTitleRow span{font-size:11px;color:#aebdd8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deckBody{flex:1;min-height:0;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.deckPriceRow{display:flex;align-items:baseline;gap:10px}
.deckPriceStrong{font:700 26px Georgia,serif}
.deckPct{font:700 12px system-ui,sans-serif;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.07)}
.deckKind{font:600 9.5px Arial,sans-serif;letter-spacing:.14em;color:#67799c;text-transform:uppercase}
.deckDesc{margin:0;min-height:0;font-size:11.5px;line-height:1.45;color:#c8d6ee;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.deckFoot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.deckFoot span{font:600 8.5px Arial,sans-serif;letter-spacing:.16em;color:#67799c;text-transform:uppercase}
.deckChartButton{border:0;border-radius:99px;padding:9px 16px;font:700 12px system-ui,sans-serif;background:linear-gradient(135deg,#6fe7f5,#3bb7d8);color:#052330}
.deckNav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:68px;border-radius:16px;z-index:3;
  border:1px solid rgba(255,255,255,.14);background:rgba(14,26,49,.62);color:var(--ink);display:grid;place-items:center;backdrop-filter:blur(4px)}
.deckNavPrev{left:8px}
.deckNavNext{right:8px}
.deckNav svg{width:20px;height:20px}
.deckNav:active{background:rgba(96,227,243,.18)}
.deckHint{text-align:center;font-size:10px;color:var(--muted);padding:8px 12px calc(env(safe-area-inset-bottom) + 12px)}
.deckEmpty{display:grid;place-content:center;justify-items:center;gap:16px;height:100%;color:var(--muted)}
.deckOutNext{transform-origin:50% 0;animation:deckOutNext .26s cubic-bezier(.5,0,.9,.4) forwards}
.deckInNext{transform-origin:50% 100%;animation:deckInNext .34s cubic-bezier(.2,.8,.3,1.12) forwards}
.deckOutPrev{transform-origin:50% 100%;animation:deckOutPrev .26s cubic-bezier(.5,0,.9,.4) forwards}
.deckInPrev{transform-origin:50% 0;animation:deckInPrev .34s cubic-bezier(.2,.8,.3,1.12) forwards}
.deckNudge{animation:deckNudge .4s ease}
@keyframes deckOutNext{to{transform:rotateX(-88deg) scale(.97);opacity:0}}
@keyframes deckInNext{from{transform:rotateX(88deg) scale(.97);opacity:0}to{transform:rotateX(0) scale(1);opacity:1}}
@keyframes deckOutPrev{to{transform:rotateX(88deg) scale(.97);opacity:0}}
@keyframes deckInPrev{from{transform:rotateX(-88deg) scale(.97);opacity:0}to{transform:rotateX(0) scale(1);opacity:1}}
@keyframes deckNudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px) rotate(-1deg)}75%{transform:translateX(8px) rotate(1deg)}}
/* —— 卡面增强：类别徽章 / logo 光环 / 迷你K线 / 数据格 / 盈亏比（布局先行，样式后续指导细化） —— */
.deckKindBadge{position:absolute;top:9px;right:9px;z-index:1;font:600 8.5px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  padding:2px 7px;border-radius:6px;background:#4b351b;border:1px solid #a37a2c;
  color:#ffe2a0;font-size:11px;font-weight:800;line-height:1.5;letter-spacing:normal}
@keyframes deckHalo{0%,100%{transform:scale(.92);opacity:.3}50%{transform:scale(1.08);opacity:.85}}
.deckSparkWrap{position:relative;flex:0 0 auto;height:46px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.28)),rgba(8,12,28,.55)}
.deckSparkWrap:before{content:none;display:none}
.deckSpark{display:block;width:100%;height:100%;opacity:0;transform:translateY(5px);
  transition:opacity .55s ease,transform .55s ease}
.deckSpark.ready{opacity:1;transform:none}
.deckStats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.deckStat{display:flex;flex-direction:column;gap:2px;padding:6px 8px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.deckStat span{font:600 8.5px Arial,sans-serif;letter-spacing:.1em;color:#8fa2c2}
.deckStat strong{font:700 12px Georgia,serif;color:#e9f3ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deckRatio{display:flex;flex-direction:column;gap:5px;padding:7px 10px 8px;border-radius:13px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(0,0,0,.2));
  border:1px solid rgba(255,255,255,.09)}
.deckRatioHead{display:flex;align-items:center;justify-content:space-between}
.deckRatioHead>span:first-child{font:600 8.5px Arial,sans-serif;letter-spacing:.16em;color:#8fa2c2;text-transform:uppercase}
.deckCallBadge{font:700 10px system-ui,sans-serif;padding:2px 9px;border-radius:99px}
.deckCallBadge.up{background:rgba(52,211,153,.16);color:#5eead4;border:1px solid rgba(52,211,153,.35)}
.deckCallBadge.down{background:rgba(248,113,113,.14);color:#fca5a5;border:1px solid rgba(248,113,113,.35)}
.deckCallBadge.watch{background:rgba(255,255,255,.08);color:#b7c5de;border:1px solid rgba(255,255,255,.14)}
.deckRatioRow{display:grid;grid-template-columns:46px 56px 1fr;align-items:center;gap:8px}
.deckRatioDir{font:600 10px system-ui,sans-serif;color:#aebdd8}
.deckRatioRow.long .deckRatioDir{color:#5eead4}
.deckRatioRow.short .deckRatioDir{color:#fca5a5}
.deckRatioVal{font:700 12px Georgia,serif;text-align:right;color:#e9f3ff}
.deckRatioRow.empty .deckRatioVal{color:#67799c}
.deckRatioBar{height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.deckRatioBar i{display:block;height:100%;width:6%;border-radius:99px;transition:width .8s cubic-bezier(.2,.8,.3,1)}
.deckRatioRow.long .deckRatioBar i{background:linear-gradient(90deg,#34d399,#6fe7f5)}
.deckRatioRow.short .deckRatioBar i{background:linear-gradient(90deg,#f87171,#fbbf24)}
.deckRatio.pending .deckRatioVal{color:#67799c}
.deckRatio.pending .deckRatioBar{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.13),rgba(255,255,255,.05));
  background-size:200% 100%;animation:deckShimmer 1.4s linear infinite}
.deckRatio.pending .deckRatioBar i{width:0}
@keyframes deckShimmer{to{background-position:-200% 0}}
/* —— 登录页（iPhone 12 Pro Max 触控优化） —— */
.authMascot{display:none}
@media (max-width:720px){
  .authDialog{width:calc(100vw - 22px);border-radius:22px;max-height:calc(100dvh - 40px)}
  .authPanel{max-height:calc(100dvh - 40px);overflow:auto;padding:18px 16px 22px}
  .authMascot{display:flex;justify-content:center;margin:0 0 2px;pointer-events:none}
  .authMascot svg{width:84px;height:84px;animation:petFloat 3.6s ease-in-out infinite}
  .authForm label{font-size:13px;gap:7px}
  .authForm input{font-size:16px;min-height:48px;border-radius:13px}
  .authTabs{padding:5px}
  .authTabs button{padding:11px;font-size:14px;border-radius:10px}
  .authSubmit{min-height:50px;border-radius:13px;font-size:16px}
  .authTop h2{font-size:20px}
}
}
@media (prefers-reduced-motion:reduce){
  .petFloat,.petShadow,.petEye,.authMascot svg,.petFlipAnim,.petPocketBounce,.deckOutNext,.deckInNext,.deckOutPrev,.deckInPrev,.deckNudge,.deckLogo:after,.deckRatio.pending .deckRatioBar{animation:none}
}

/* 手机独立界面：完整视口、横向跟手切页、触控分组表单。 */
@media (max-width:720px){
  body.petHomeMode{overflow:hidden;overscroll-behavior:none}
  #petHome,#petDeck{box-sizing:border-box;width:100%;height:100dvh;max-width:100vw;overflow:hidden}
  #petHome *,#petDeck *{box-sizing:border-box;min-width:0}
  .petHead{flex:none;flex-wrap:wrap;padding:calc(env(safe-area-inset-top) + 16px) 18px 12px}
  .petHeadBrand{flex:1}
  .petHeadRight{gap:5px}
  .petHeadAccount{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:40px}
  .petStage{align-content:center;flex:1;grid-template-rows:repeat(2,minmax(160px,230px));gap:20px 4px;padding:12px 62px 12px 12px}
  .petSlot{justify-content:center;min-height:160px;gap:8px;border-radius:24px;touch-action:none;perspective:650px}
  .petSlot:active{background:rgba(255,255,255,.045)}
  .petActor{width:100%;max-width:140px;margin:0;flex:none}
  .petModel{display:block;width:100%;height:100%;background-image:url('/assets/icons/crypto/petsatlas3d.png?v=20261011-pet-visible');background-repeat:no-repeat;background-size:500% auto;background-position:var(--pet-position) center;filter:drop-shadow(0 14px 9px rgba(0,0,0,.4))}
  .petIsland{bottom:38px;height:26px;width:96%}
  .petMeta{width:100%;padding:0 3px}
  .petName{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .petCountText{font-size:11px;margin-top:3px}
  .petEmptyPlus{order:-1;position:relative;left:auto;top:auto;transform:none;width:74px;height:74px;margin:15px 0;border-style:dashed}
  .petHint{flex:none;flex-wrap:wrap;gap:5px 12px;padding:10px 12px calc(env(safe-area-inset-bottom) + 16px)}
  .petDock{right:10px;gap:8px}
  .petDockButton{width:44px;height:44px;min-height:44px}
  .deckHead{flex:none;padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;background:rgba(10,14,28,.6)}
  .deckHeadTitle strong{font-size:18px}
  .deckHeadTitle span{font-size:11px}
  .deckStage{display:flex;align-items:stretch;perspective:none;overflow:hidden;touch-action:pan-y;min-height:0}
  .deckStage:before,.deckStage:after{display:none}
  .deckCard{width:100%;height:100%;min-height:0;transform-style:flat;will-change:transform;flex:none}
  .deckFrame{border-radius:0;border:0;padding:16px 20px 18px;gap:12px;box-shadow:none;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(160deg,#1c2235,#0a0e19 65%)}
  .deckArt{flex:0 0 clamp(110px,19dvh,180px);border-radius:24px}
  .deckLogo{width:92px;height:92px}
  .deckLogo .heroLogo img{width:70px;height:70px}
  .deckTitleRow{flex:none;gap:12px}
  .deckTitleRow strong{font-size:30px}
  .deckTitleRow span{font-size:13px}
  .deckBody{flex:1 0 auto;overflow:visible;gap:12px}
  .deckPriceStrong{font-size:clamp(28px,8vw,36px)}
  .deckPct{font-size:14px}
  .deckSparkWrap{height:clamp(78px,12dvh,112px);flex-shrink:0}
  .deckStats{gap:8px;flex-shrink:0}
  .deckStat{padding:10px 8px;gap:6px}
  .deckStat span{font-size:10px}
  .deckStat strong{font-size:15px}
  .deckRatio{gap:12px;padding:14px;flex-shrink:0}
  .deckRatioHead{gap:8px;min-height:24px}
  #petDeck .deckCallBadge{flex:0 0 auto;display:inline-flex;align-items:center;min-height:0;height:auto;width:auto;padding:4px 10px;font-size:11px;line-height:1.3}
  .deckRatioHead>span:first-child{font-size:10px}
  .deckRatioRow{grid-template-columns:58px 68px minmax(0,1fr);gap:10px}
  .deckRatioDir{font-size:12px}
  .deckRatioVal{font-size:15px}
  .deckRatioBar{height:7px}
  .deckDesc{font-size:12px;line-height:1.6;-webkit-line-clamp:3}
  .deckFoot{flex:none;padding-top:4px}
  .deckFoot span{font-size:8px}
  .deckChartButton{min-height:44px;font-size:14px;padding:10px 20px}
  .deckHint{flex:none;font-size:11px;padding:8px 12px calc(env(safe-area-inset-bottom) + 10px);background:#0a0e19}
  .groupManageDialog{box-sizing:border-box;width:calc(100vw - 24px);max-width:428px;max-height:calc(var(--mobile-viewport-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));top:calc(var(--mobile-viewport-top,0px) + env(safe-area-inset-top) + 12px);bottom:auto;margin:0 auto;padding:0;border-radius:26px;overflow:auto}
  .groupManagePanel{box-sizing:border-box;width:100%;padding:20px 16px;max-height:none;overflow:visible}
  .groupManagePanel .watchActionHead{min-height:44px;margin-bottom:14px}
  .groupManagePanel .watchActionHead strong{font-size:21px}
  .groupManagePanel .dialogClose{width:44px;height:44px}
  .groupManagePanel .groupForm{gap:16px;padding:0}
  .groupManagePanel .groupCreateRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .groupManagePanel .groupCreateRow input,.groupManagePanel .groupSeedSearch,.groupManagePanel .groupManageRow input{font-size:16px;min-height:48px;border-radius:14px;min-width:0;width:100%;box-sizing:border-box;padding:12px}
  .groupManagePanel .groupCreateRow button{min-height:48px;padding:12px 20px;border-radius:14px;font-size:15px}
  .groupManagePanel .groupSeedField{min-width:0;padding:14px 0;border:0}
  .groupManagePanel .groupSeedField legend{font-size:13px;margin-bottom:12px}
  .groupManagePanel .groupSeedList{grid-template-columns:1fr;max-height:clamp(160px,32dvh,320px);gap:6px;margin-top:8px}
  .groupManagePanel .groupSeedOption{min-height:52px;padding:8px 12px;border-radius:13px;grid-template-columns:24px minmax(0,1fr)}
  .groupManagePanel .groupSeedOption strong{font-size:14px}
  .groupManagePanel .groupSeedOptionInfo>span{font-size:12px}
  .groupManagePanel .groupSeedOption input{width:20px;height:20px}
  .groupManagePanel .groupSeedSelected{gap:8px;margin:12px 0}
  .groupManagePanel .groupManageList{max-height:48dvh;gap:10px}
  .groupManagePanel .groupManageRow{flex-wrap:wrap}
  .groupManagePanel .groupManageRow button,.groupCreateFromManage{min-height:44px;border-radius:12px;font-size:13px}
}
@media (max-width:370px){
  .petStatus{display:none}
  .deckFrame{padding:12px 14px;gap:10px}
}

@media (max-width:720px) and (prefers-reduced-motion:reduce){.deckCard{transition:none!important}}

/* 手机控件：统一立体图标与按压反馈，保持原始图标/品牌内容。 */
@media (max-width:720px){
  :where(button,a[href],[role="button"],summary,select,input[type="checkbox"],input[type="radio"],input[type="range"],label:has(input[type="checkbox"]),label:has(input[type="radio"])){touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:scale 120ms ease,filter 120ms ease,box-shadow 160ms ease,background-color 160ms ease}
  :where(button,a[href],[role="button"],summary,select,input[type="checkbox"],input[type="radio"],.groupSeedOption).touchPressed{scale:.95;filter:brightness(1.14);box-shadow:inset 0 2px 7px rgba(0,0,0,.32),0 0 0 2px rgba(111,231,245,.24)}
  :where(button,a[href],[role="button"],summary,select,input[type="checkbox"],input[type="radio"],.groupSeedOption).touchReleased{animation:mobileRelease 260ms cubic-bezier(.2,.8,.2,1)}
  button:disabled,[aria-disabled="true"]{opacity:.45;cursor:default}
  :where(button,a[href],input,select,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  :where(input:not([type="checkbox"]):not([type="radio"]),select):focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
  .touchInvalid{outline:2px solid #f28a8a;outline-offset:2px}
  .petDockButton,.deckBack,.deckAdd,.dialogClose,.groupIconButton{
    --control-tint:#7bbfff;min-width:44px;min-height:44px;
    background:radial-gradient(90% 80% at 20% 0%,color-mix(in srgb,var(--control-tint) 25%,transparent),transparent),linear-gradient(150deg,#273952,#101a2d);
    color:var(--control-tint);border:1px solid color-mix(in srgb,var(--control-tint) 32%,transparent);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.22),inset 0 -3px 4px rgba(0,0,0,.28),0 4px 10px rgba(0,0,0,.2);
  }
  .petDockButton[data-act="add"],.deckAdd{--control-tint:#7eecd9}
  .petDockButton[data-act="hot"]{--control-tint:#ffba7b}
  .petDockButton[data-act="bell"]{--control-tint:#f5d58d}
  .petDockButton[data-act="more"]{--control-tint:#99baff}
  .petDockButton[data-act="classic"]{--control-tint:#c3abff}
  .petDockButton[data-act="account"]{--control-tint:#ffb5d3}
  .petDockButton svg,.deckBack svg,.deckAdd svg,.dialogClose svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.24)) drop-shadow(0 3px 2px rgba(0,0,0,.4));stroke-width:2.2}
  .deckChartButton,.authSubmit,.groupCreateRow>button,.petHomeEntry{box-shadow:inset 0 2px 1px rgba(255,255,255,.36),inset 0 -3px 0 rgba(0,0,0,.16),0 5px 16px rgba(0,0,0,.2)}
  .petHeadAccount,.petEmptyPlus,.authTabs,.groupTab,.groupSeedChip{box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 3px 8px rgba(0,0,0,.18)}
  .petEmptyPlus{background:radial-gradient(circle at 30% 20%,#253d61,#101a2d);border-color:#6384ad;color:#b0d2ff}
  .petSlot.touchPressed{scale:.97;background:rgba(255,255,255,.045);box-shadow:none;filter:none}
  .petSlot.touchPressed .petModel{filter:brightness(1.09) drop-shadow(0 7px 6px rgba(0,0,0,.5))}
  .groupSeedOption:has(input:checked){background:color-mix(in srgb,var(--accent) 12%,var(--paper));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent)}
  input[type="checkbox"],input[type="radio"],input[type="range"]{accent-color:var(--accent)}
  .groupTab.active,.authTabs button.active,button[aria-pressed="true"]{box-shadow:inset 0 1px 1px rgba(255,255,255,.2),0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent)}
  .watchLogo,.heroLogo,.selectedAssetLogo,.suggestLogo{filter:drop-shadow(0 3px 3px rgba(0,0,0,.22))}
  .authMascot .petModel{width:112px;height:112px;animation:petFloat 3.6s ease-in-out infinite}
  .deckCount,.deckPct,.deckCallBadge{box-shadow:inset 0 1px 1px rgba(255,255,255,.1)}
}
@keyframes mobileRelease{0%{scale:.96;filter:brightness(1.12)}65%{scale:1.025}100%{scale:1;filter:none}}
@media (max-width:720px) and (prefers-reduced-motion:reduce){
  .touchPressed{scale:1!important}
  .touchReleased,.authMascot .petModel{animation:none!important}
  :where(button,a[href],[role="button"],summary,input,select,label){transition:none!important}
}

@media (max-width:720px){
  .petModel{background-position:var(--pet-position,0%) center}
  .petSlot:nth-child(1) .petModel{--pet-position:0%}
  .petSlot:nth-child(2) .petModel{--pet-position:25%}
  .petSlot:nth-child(3) .petModel{--pet-position:50%}
  .petSlot:nth-child(4) .petModel{--pet-position:75%}
  .petSlot:nth-child(5) .petModel{--pet-position:100%}
  #deckStage[hidden],#deckChartView[hidden],#deckAdd[hidden]{display:none}
  .deckSparkWrap[role="button"]{cursor:pointer;touch-action:manipulation}
  .deckChartView{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px;background:#0a0e19;color:#e9f3ff}
  .deckChartView .assetHeading{gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .deckChartView .assetLabel{color:#e9f3ff;font-size:24px}
  .deckChartView .assetMeta,.deckChartView .muted{color:#9fb2c9}
  .deckChartView .heroPrice{margin-left:auto}
  .deckChartView .heroPrice strong{color:#e9f3ff;font-size:28px}
  .deckChartView .toolbar{display:block;margin:12px 0}
  .deckChartView #timeframes{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:4px;gap:4px;scrollbar-width:none}
  .deckChartView #timeframes button{flex:none;min-height:44px;min-width:48px;color:#b8c8dd;background:#19263b;border:0;border-radius:12px}
  .deckChartView #timeframes button.active{color:#082331;background:#6fe7f5}
  .deckChartView .chartStatusRow{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .deckChartView .chartStatus{color:#9fb2c9;font-size:11px}
  .deckChartView .chartActions{display:flex;flex-wrap:wrap;gap:6px}
  .deckChartView .chartActions button{min-height:44px;background:#19263b;color:#c8d6ee;border:1px solid rgba(255,255,255,.1);border-radius:12px}
  .deckChartView #chartExpand{display:none}
  .deckChartView .chartBox{height:clamp(300px,52dvh,560px);margin-top:14px;background:#101a2b;border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden}
  .deckChartView #chart{width:100%;height:100%;touch-action:none}
  .deckChartView .legend{display:flex;flex-wrap:wrap;gap:10px;font-size:10px;color:#b8c8dd;margin:14px 0}
  .deckChartView .insightDisclosure{margin-top:14px}
  .deckChartView .insightDisclosure>summary{color:#b8c8dd;min-height:44px;display:flex;align-items:center}
  .deckChartView .chartTip{max-width:calc(100% - 16px)}
}


/* 手机侧栏功能：一个图标返回，提醒保留关闭图标。 */
.mobileClassicBack{display:none}
@media (max-width:720px){
  #petHomeEntry{display:none}
  .mobileClassicBack{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--field);color:var(--ink)}
  .mobileClassicBack svg{width:22px;height:22px}
  .petHomeMode .mobileClassicBack{display:none}
  .detailDialog:not(.alertsDialog) .dialogClose{left:12px;right:auto;width:44px;height:44px}
  .detailDialog:not(.alertsDialog) .dialogClose svg{display:none}
  .detailDialog:not(.alertsDialog) .dialogClose:before{content:"";width:10px;height:10px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateX(2px) rotate(45deg)}
  .mobileMoreHead,.groupManagePanel .watchActionHead,.watchActionPanel .watchActionHead,.infoPanel>.panelhead{padding-left:68px;min-height:64px;display:flex;align-items:center}
  .authTop .dialogClose{position:static;order:-1;flex:0 0 44px}
  #mobileMoreDialog[data-section="add"] .mobileMoreBody>section.settings,
  #mobileMoreDialog[data-section="add"] .mobileMoreBody>.sidebarNews,
  #mobileMoreDialog[data-section="add"] .mobileMoreBody>.insightDisclosure{display:none!important}
  #mobileMoreDialog[data-section="settings"] .mobileMoreBody>#addForm,
  #mobileMoreDialog[data-section="settings"] .mobileMoreBody>#addError{display:none!important}
}

/* 手机专用周期和新闻入口，电脑工具栏原样保留。 */
@media (max-width:720px){
  .deckPeriods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:16px 0}
  .deckPeriods[hidden]{display:none}
  .deckPeriods button,.deckPeriodSlots button,.deckPeriodOptions button{min-height:44px;border:0;border-radius:13px;background:#19263b;color:#b8c8dd;font-size:13px}
  .deckPeriods button.active,.deckPeriodSlots button.active,.deckPeriodOptions button.active{background:#6fe7f5;color:#082331}
  .deckPeriods button:last-child{background:transparent;color:#aebdd8}
  .deckChartView .chartBox{height:clamp(320px,58dvh,620px)}
  .mobileSheet{box-sizing:border-box;width:calc(100vw - 24px);max-width:440px;max-height:calc(var(--mobile-viewport-height,100dvh) - 24px);padding:18px;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:#101a2b;color:#e9f3ff;overflow:auto}
  .mobileSheet::backdrop{background:rgba(0,0,0,.58);backdrop-filter:blur(8px)}
  .mobileSheetHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
  .mobileSheetHead strong{font-size:19px}
  .mobileSheetHead button{min-width:44px;min-height:44px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:#19263b;color:#b8c8dd;font-size:24px}
  .deckPeriodSlots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
  .deckPeriodOptions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .petDockButton[data-act="news"]{--control-tint:#a7e4ed}
  .petDock{max-height:calc(100dvh - 150px);overflow-y:auto;scrollbar-width:none}
  dialog.petNewsDialog{position:fixed;inset:0;margin:0;box-sizing:border-box;width:100vw;max-width:none;height:var(--mobile-viewport-height,100dvh);max-height:none;padding:0;border:0;border-radius:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
  .petNewsHead{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:14px;margin:0;padding:calc(env(safe-area-inset-top) + 12px) 18px 12px;background:#101a2b}
  .petNewsHead strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .petNewsHead button{display:grid;place-items:center;padding:0}
  .petNewsHead svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .petNewsDialog .petNewsList,.petNewsPicker{padding:12px 18px calc(env(safe-area-inset-bottom) + 24px)}
  .petNewsDialog [hidden]{display:none!important}
  .petNewsPicker input{box-sizing:border-box;width:100%;min-height:48px;font-size:16px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#19263b;color:#e9f3ff;padding:12px 14px}
  .petNewsChoices{display:grid;gap:10px;margin-top:16px}
  .petNewsChoice{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:#19263b;color:#e9f3ff;padding:12px 14px;text-align:left}
  .petNewsChoice>span:last-child{display:grid;gap:4px;min-width:0}
  .petNewsChoice small{font-size:12px;color:#9fb2c9}
  .petNewsChoiceHeading{margin:0 0 4px;font-size:13px;color:#6b8aaa;font-weight:600}
  .petNewsList{display:grid;gap:10px}
  .petNewsItem{padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:#19263b}
  .petNewsItem small{display:block;font-size:11px;color:#9fb2c9;margin-bottom:8px}
  .petNewsItem a{display:block;font-size:15px;line-height:1.6;color:#e9f3ff;text-decoration:none}
  .petNewsEmpty{padding:30px 0;text-align:center;color:#9fb2c9;font-size:14px}
}

/* 五槽宠物与单宠物管理：移动端独立交互，保持每个形象在槽位内。 */
@media (max-width:720px){
  .petStage{padding:16px 14px;gap:20px 8px;grid-template-rows:repeat(2,minmax(170px,230px));align-content:center}
  .petSlot{overflow:hidden;contain:paint;min-width:0;min-height:0;border-radius:26px;gap:8px}
  .petActor{width:min(100%,112px);max-width:112px;overflow:hidden;isolation:isolate}
  .petSlot .petTilt{transform-origin:50% 100%}
  .petIsland{width:calc(100% - 12px);height:28px;bottom:26px}
  .petPocket{right:4px;bottom:10px;width:30px;height:28px}
  .petSlot.empty{min-height:170px;background:radial-gradient(ellipse at 50% 75%,rgba(118,150,198,.09),transparent 65%)}
  .petSlot.empty .petIsland{border:1px solid rgba(154,183,226,.24);background:radial-gradient(ellipse at 35% 20%,#283a58,#131d31);bottom:44px;height:38px}
  .petSlot.empty .petMeta{display:none}
  .petSlot[data-pet-kind="0"] .petModel{--pet-position:0%}
  .petSlot[data-pet-kind="1"] .petModel{--pet-position:25%}
  .petSlot[data-pet-kind="2"] .petModel{--pet-position:50%}
  .petSlot[data-pet-kind="3"] .petModel{--pet-position:75%}
  .petSlot[data-pet-kind="4"] .petModel{--pet-position:100%}
  .petHolding .petActor{scale:.94;filter:brightness(1.1);transition:scale 160ms ease,filter 160ms ease}
  .petHolding .petIsland{box-shadow:0 0 0 2px #ffda93,0 0 20px rgba(255,218,147,.25)}
  .petDropTarget{background:rgba(111,231,245,.09);box-shadow:inset 0 0 0 2px rgba(111,231,245,.5);transition:background 140ms ease,box-shadow 140ms ease}
  .petSwap .petActor,.petSwap .petMeta{animation:petSwapIn 280ms cubic-bezier(.2,.8,.2,1)}
  .petHeadRight{gap:6px;max-width:100%}
  .petOverline{display:none}
  .petHomeHot,.petHeadAccount,.petManagerBack,.petManager button{
    min-height:44px;border-radius:16px;border:1px solid rgba(255,255,255,.2);color:#e9f3ff;
    background:linear-gradient(155deg,#405277,#1b2941);box-shadow:inset 0 2px 1px rgba(255,255,255,.2),inset 0 -3px 1px rgba(0,0,0,.2),0 4px 10px rgba(0,0,0,.2);font-size:13px;padding:10px 14px;
  }
  .petHomeHot{background:linear-gradient(150deg,#8b5d41,#4c3029);color:#ffdfb7}
  .petHeadAccount{max-width:104px}
  #petManager[hidden]{display:none}
  .petManager{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;background:linear-gradient(170deg,#17233b,#090f1e);color:#e9f3ff;overflow:hidden}
  .petManagerHead{flex:none;display:flex;gap:14px;align-items:center;padding:calc(env(safe-area-inset-top) + 14px) 16px 12px}
  .petManagerHead strong{font-size:21px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .petManagerBack{width:44px;height:44px;font-size:30px!important;padding:0!important}
  .petManagerBody{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 18px calc(env(safe-area-inset-bottom) + 18px)}
  .petManager label,.petSearchLabel{display:block;font-size:13px;color:#b6c6de;margin-bottom:9px}
  .petNameRow{display:flex;gap:8px}
  .petManager input{box-sizing:border-box;min-width:0;width:100%;min-height:48px;padding:12px;border:1px solid #405373;border-radius:16px;background:#122139;color:#e9f3ff;font-size:16px;outline:none}
  .petNameRow input{flex:1}
  .petNameRow button{flex:none;color:#172239;background:linear-gradient(155deg,#ffdd9a,#e8b667)}
  #petManagerMessage{min-height:20px;margin:10px 0;font-size:12px;color:#9ecad6}
  .petHoldingsHead{display:flex;justify-content:space-between;align-items:center;margin:20px 0 10px}
  .petHoldingsHead span{font-size:12px;color:#9fb2c9}
  .petOwnAsset{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:56px;padding:6px 2px;border-bottom:1px solid rgba(255,255,255,.08)}
  .petOwnAsset .watchLogo{width:32px;height:32px}
  .petOwnAsset strong{font-size:15px;color:#e9f3ff}
  .petOwnAsset button{min-width:64px;font-size:12px}
  .petOwnAsset .petOwnDelete{color:#ffd0d6;background:linear-gradient(155deg,#643343,#351d31)}
  .petOwnActions{display:flex;align-items:center;gap:8px}
  .petOwnAsset .petOwnDrag{min-width:44px;width:44px;height:44px;padding:10px;touch-action:none;cursor:grab}
  .petOwnDrag svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  .petOwnPlaceholder{box-sizing:border-box;border:1px dashed #76cddd;border-radius:12px;background:rgba(94,196,216,.12)}
  .petOwnDragging{position:fixed;z-index:1001;box-sizing:border-box;pointer-events:none;border-radius:12px;background:#1b2d47;box-shadow:0 12px 30px #0008;opacity:.95}
  .petOwnEmpty{color:#9fb2c9;font-size:13px;line-height:1.6}
  body.petHomeMode #alertsButton,body.petHomeMode .hiddenAlertsSettings{display:none}
}
@keyframes petSwapIn{from{opacity:.3;translate:0 8px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@media (max-width:720px) and (prefers-reduced-motion:reduce){.petSwap .petActor,.petSwap .petMeta{animation:none}.petHolding .petActor,.petDropTarget{transition:none}}
@media (max-width:720px){.petDock.petNewsDock{top:calc(env(safe-area-inset-top) + 105px);transform:none}}

/* 手机悬浮卡牌：邻牌露边、实体牌沿与横向转动，页码随卡牌浮动、不贴手机底。 */
@media (max-width:720px){
  #petDeck .deckStage{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:6px 0 calc(env(safe-area-inset-bottom) + 44px);perspective:1100px;isolation:isolate;overflow:hidden}
  #petDeck .deckCard{width:calc(100% - 56px);max-width:420px;flex:1 1 auto;min-height:0;height:auto;transform-style:preserve-3d;transform:translateZ(24px);z-index:2}
  #petDeck .deckCard:before{content:"";position:absolute;inset:0;border-radius:var(--deck-edge-radius,24px);background:linear-gradient(120deg,#657386,#263142 32%,#111925 68%,#566276);border:.5px solid #8b9aaa55;transform:translate(var(--deck-core-x,1.5px),6px);box-shadow:0 1px 0 #8793a466,0 2px 0 #182131,0 3px 2px #0007,0 18px 30px #0005;z-index:-1;pointer-events:none}
  #petDeck .deckFrame{border-radius:28px;border:1px solid rgba(194,215,244,.3);padding:14px;gap:10px;background:linear-gradient(155deg,#283247,#111722 55%,#080e19);box-shadow:inset 0 2px 1px rgba(255,255,255,.16),inset -2px -2px 2px rgba(0,0,0,.5),0 12px 28px rgba(0,0,0,.25)}
  #petDeck .deckArt{flex-basis:clamp(96px,16dvh,150px);border-radius:20px}
  #petDeck .deckLogo{width:76px;height:76px}
  #petDeck .deckSparkWrap{height:clamp(70px,10dvh,96px)}
  #petDeck .deckBody{gap:10px}
  #petDeck .deckRatio{padding:12px;gap:10px}
  #petDeck .deckRatioRow{grid-template-columns:52px 60px minmax(0,1fr);gap:8px}
  #petDeck .deckStat{padding:9px 6px}
  #petDeck .deckStat strong{font-size:14px}
  #petDeck .deckCount{flex:none;margin:12px 0 0;min-width:76px;text-align:center;padding:8px 16px;height:34px;line-height:16px;box-sizing:border-box;font-size:14px;letter-spacing:.08em;background:rgba(35,48,76,.65);border-color:rgba(165,195,235,.24);box-shadow:0 5px 16px rgba(0,0,0,.2);z-index:3}
  .deckNeighbor{position:absolute;top:26px;bottom:76px;width:calc(100% - 62px);max-width:420px;padding:16px;border:1px solid rgba(157,187,229,.3);border-radius:28px;background:linear-gradient(150deg,#27324b,#0d1424 70%);box-shadow:4px 5px 0 #141c2a,0 18px 36px rgba(0,0,0,.32);pointer-events:none;overflow:hidden;opacity:.72;z-index:0;display:flex;flex-direction:column;gap:14px}
  .deckNeighbor[hidden]{display:none}
  .deckNeighbor.previous{transform:translateX(-22px) rotateY(7deg) rotateZ(-3deg) scale(.96)}
  .deckNeighbor.next{transform:translateX(22px) rotateY(-7deg) rotateZ(3deg) scale(.96);z-index:1}
  .deckNeighborArt{height:clamp(96px,16dvh,150px);display:grid;place-items:center;border-radius:20px;background:linear-gradient(135deg,#255960,#172742)}
  .deckNeighborArt .heroLogo{width:66px;height:66px}
  .deckNeighbor>strong{font-size:30px;color:#d9e6fc}
  .deckNeighbor>span{font-size:26px;font-weight:700;color:#a9c2dc}
  .deckNeighborLines{flex:1;border-radius:18px;background:repeating-linear-gradient(180deg,rgba(131,165,215,.1) 0 42px,transparent 42px 55px)}
}
@media (max-width:720px) and (prefers-reduced-motion:reduce){
  #petDeck .deckCard{transform:none}
  .deckNeighbor.previous{transform:translateX(-18px) scale(.96)}
  .deckNeighbor.next{transform:translateX(18px) scale(.96)}
}

/* Mobile login: self-contained mascot and no home controls before authentication. */
@media (max-width:720px){
  body.authLocked #petHome,body.authLocked #petDeck{display:none!important}
  body.authLocked #authDialog .mobilePageHeader,body.authLocked #authDialog .dialogClose{display:none!important}
  #authDialog .authMascot{display:flex;justify-content:center;align-items:center;width:100%;height:190px;margin:0 auto 18px;pointer-events:none;background:radial-gradient(ellipse at 50% 70%,rgba(111,231,245,.12),transparent 62%)}
  #authDialog .authMascot > *{display:none!important}
  #authDialog .authMascot:after{content:"";display:block;width:180px;height:180px;background-image:var(--auth-pet-image,url('/assets/icons/crypto/spacerabbit.png?v=20261012-crystal43'))!important;background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 12px 12px rgba(0,0,0,.22));animation:petFloat 4s ease-in-out infinite}
}
@media (max-width:720px) and (prefers-reduced-motion:reduce){#authDialog .authMascot:after{animation:none}}

/* 完整标的卡内展开图表：牌框、Logo、报价与页码保持原位。 */
@media (max-width:720px){
  #petDeck button.deckLogo{padding:0;border:0;background:transparent;color:inherit;flex:none;cursor:pointer}
  #petDeck .deckRatio{padding:22px 16px;gap:20px;min-height:174px;background:linear-gradient(145deg,rgba(43,58,79,.85),rgba(14,25,40,.95))}
  #petDeck .deckRatioHead>span:first-child{font-size:12px;letter-spacing:.12em}
  #petDeck .deckRatioRow{grid-template-columns:64px 86px minmax(0,1fr);gap:10px;min-height:32px}
  #petDeck .deckRatioDir{font-size:15px}
  #petDeck .deckRatioVal{font-size:22px}
  #petDeck .deckRatioBar{height:10px}
  #petDeck .deckChartView{flex:none;min-height:0;padding:0;overflow:visible;background:transparent;width:100%}
  #petDeck.deckChartMode .deckBody>.deckSparkWrap,
  #petDeck.deckChartMode .deckBody>.deckCardPeriods{display:none}
  #petDeck.deckChartMode .deckBody{flex:1;min-height:0;gap:8px}
  #petDeck.deckChartMode .deckPeriods{margin:4px 0 10px;gap:4px}
  #petDeck.deckChartMode .deckPeriods button{font-size:12px;border-radius:10px;min-height:40px}
  #petDeck.deckChartMode .deckChartView .chartBox{height:clamp(280px,43dvh,460px);margin-top:0;border-radius:16px}
  #petDeck.deckChartMode .deckChartView .legend{margin:10px 0;gap:8px}
  #petDeck.deckChartMode .deckChartView .insightDisclosure{margin-top:8px}
}
@media (max-width:370px){
  #petDeck .deckRatio{padding:18px 12px}
  #petDeck .deckRatioRow{grid-template-columns:56px 76px minmax(0,1fr);gap:8px}
  #petDeck .deckRatioVal{font-size:20px}
}

/* Compact mobile password page; login mascot remains on the sign-in page. */
.mobilePasswordHeading{display:none}
@media (max-width:720px){
  #authDialog #authLogout{display:none!important}
  #authDialog.mobilePasswordView{position:fixed;inset:0;width:100vw;max-width:none;height:var(--mobile-viewport-height,100dvh);max-height:none;margin:0;border:0;border-radius:0;padding:0;overflow:hidden;box-sizing:border-box}
  #authDialog.mobilePasswordView .authPanel{height:100%;max-height:none;width:100%;box-sizing:border-box;padding:calc(env(safe-area-inset-top) + 12px) 20px calc(env(safe-area-inset-bottom) + 16px);overflow:hidden}
  #authDialog.mobilePasswordView .authMascot,#authDialog.mobilePasswordView .authTop,#authDialog.mobilePasswordView > .mobilePageHeader,#authDialog.mobilePasswordView #authSigned>p,#authDialog.mobilePasswordView #passwordDetails>summary{display:none!important}
  #authDialog.mobilePasswordView #authSigned{margin:0;gap:0}
  #authDialog.mobilePasswordView #authSigned[hidden]{display:none}
  #authDialog.mobilePasswordView .mobilePasswordHeading{display:flex;align-items:center;gap:12px;height:48px;margin:0 0 16px;font-size:19px}
  .mobilePasswordHeading button{width:44px;height:44px;margin:0!important;font-size:30px;border:0;background:transparent;color:var(--ink);padding:0}
  #authDialog.mobilePasswordView #passwordDetails{margin:0;padding:0;border:0;background:none}
  #authDialog.mobilePasswordView #passwordForm{display:grid!important;margin:0;padding:0;gap:12px}
  #authDialog.mobilePasswordView #passwordForm label{font-size:13px;gap:4px}
  #authDialog.mobilePasswordView #passwordForm input{min-height:44px;height:44px;font-size:16px}
  #authDialog.mobilePasswordView #passwordSubmit{min-height:44px;margin:4px 0 0}
  #authDialog.mobilePasswordView #passwordError{margin:0;font-size:12px;line-height:1.4}
  #authDialog.mobilePasswordView #passwordError:empty{display:none}
  #mobilePasswordPage{overflow:hidden!important}
  #mobilePasswordPage #passwordForm{gap:12px}
}

/* Mobile cards float the artwork itself, without a breathing outer ring. */
@media (max-width:720px){
  #petDeck .deckLogo:before,#petDeck .deckLogo:after{content:none;display:none;animation:none}
  #petDeck .deckLogo > .heroLogo{background:transparent;border:0;box-shadow:none;animation:deckLogoBob 3.8s ease-in-out infinite;will-change:transform}
}
@keyframes deckLogoBob{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}
@media (max-width:720px) and (prefers-reduced-motion:reduce){
  #petDeck .deckLogo > .heroLogo{animation:none;transform:none;will-change:auto}
}

/* 手机卡牌按周期呈现三方向概率与盈亏比。 */
@media (max-width:720px){
  #petDeck .deckCardPeriods{margin:0;gap:4px}
  #petDeck .deckCardPeriods button{font-size:12px;min-height:40px}
  #petDeck .deckProbabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #petDeck .deckProbability{display:flex;flex-direction:column;gap:8px;align-items:center;padding:12px 6px;border:1px solid rgba(152,177,213,.16);border-radius:15px;background:rgba(7,16,30,.36)}
  #petDeck .deckProbability span{font-size:12px;color:#aebdd3}
  #petDeck .deckProbability strong{font-size:24px;color:#e4efff}
  #petDeck .deckProbability.up strong{color:#6ee2cc}
  #petDeck .deckProbability.down strong{color:#ffa2ad}
  #petDeck .deckProbability.active{border-color:rgba(152,219,229,.6);background:rgba(103,192,203,.08)}
  #petDeck .deckProbabilityNote{font-size:11px;color:#99aec8;line-height:1.5}
  #petDeck .deckRatio{gap:14px;padding:18px 14px}
  #petDeck .deckRatioHead>span:first-child{letter-spacing:.04em}
}

/* 手机卡面只展示行情与分析，简介通过顶部 Logo 打开。 */
@media (max-width:720px){
  #petDeck .deckDesc{display:none}
  #petDeck .deckRatio{padding:22px 16px;gap:18px}
  #petDeck .deckProbabilities{gap:10px}
  #petDeck .deckProbability{padding:16px 8px;gap:10px}
  #petDeck .deckProbability span{font-size:14px}
  #petDeck .deckProbability strong{font-size:clamp(24px,6.5vw,28px)}
  #petDeck .deckRatioRow{min-height:40px}
  #petDeck .deckRatioDir{font-size:16px}
  #petDeck .deckRatioVal{font-size:24px}
  #petDeck .deckRatioBar{height:12px}
}
@media (max-width:370px){
  #petDeck .deckRatio{padding:18px 12px;gap:16px}
  #petDeck .deckProbability{padding:14px 4px}
  #petDeck .deckRatioVal{font-size:21px}
}

/* 手机整张牌固定排版：三块概率沿用桌面样式，分析贴合牌面。 */
@media (max-width:720px){
  #petDeck .deckFrame{min-height:0;overflow:hidden;padding:12px 12px 12px;gap:8px}
  #petDeck .deckArt{flex:0 0 clamp(58px,11dvh,96px);border-radius:18px}
  #petDeck .deckLogo{width:56px;height:56px}
  #petDeck .deckLogo .heroLogo,#petDeck .deckLogo .heroLogo img{width:46px;height:46px}
  #petDeck .deckTitleRow strong{font-size:25px;line-height:1.15}
  #petDeck .deckTitleRow span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #petDeck .deckBody{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;gap:8px}
  #petDeck .deckPriceRow{flex:none;min-height:30px}
  #petDeck .deckPriceStrong{font-size:27px;line-height:1.15}
  #petDeck .deckPct{font-size:12px}
  #petDeck .deckSparkWrap{flex:0 0 clamp(54px,12dvh,96px);height:auto}
  #petDeck .deckRatio{flex:1 1 0;min-height:0;justify-content:space-evenly;padding:0;gap:6px;background:none;border:0;border-radius:0;box-shadow:none;overflow:hidden}
  #petDeck .deckRatioHead{min-height:18px;flex:none}
  #petDeck .deckRatioHead>span:first-child{font-size:11px}
  #petDeck .deckCallBadge{background:transparent;border:0;box-shadow:none;padding:0!important;font-size:11px!important}
  #petDeck .deckProbabilities{flex:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard{min-height:48px;padding:8px 4px;border-radius:10px;gap:5px;background:linear-gradient(155deg,#152838,#101c2a 75%);border:1px solid #35505c}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard span{font-size:10px}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard strong{font-size:18px;color:var(--probColor);line-height:1.1}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard.active{border-color:var(--probColor);box-shadow:inset 0 0 0 1px #ffffff12;transform:none}
  #petDeck .deckRatioRow{flex:none;grid-template-columns:52px 76px minmax(0,1fr);gap:4px 8px;min-height:0;padding:4px 0}
  #petDeck .deckRatioDir{font-size:12px}
  #petDeck .deckRatioVal{font-size:18px;line-height:1.2}
  #petDeck .deckRatioBar{height:5px}
  /* 展开 K 线沿用卡面的顶部区域与 Logo 尺寸，不另外缩放。 */
  #petDeck.deckChartMode .deckBody{flex:1 1 0;min-height:0;gap:6px}
  #petDeck.deckChartMode .deckRatio{flex:0 0 166px;justify-content:flex-start;gap:6px}
  #petDeck.deckChartMode .deckChartView{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;padding:0}
  #petDeck.deckChartMode .deckChartView .deckPeriods{flex:none;margin:0 0 5px;gap:3px}
  #petDeck.deckChartMode .deckPeriods button{min-height:32px;font-size:11px}
  #petDeck.deckChartMode .deckChartView .chartBox{flex:1 1 0;height:auto;min-height:0;margin:0}
  #petDeck.deckChartMode .deckChartView .insightDisclosure,#petDeck.deckChartMode .deckChartView .legend{display:none}
}
@media (max-width:720px) and (max-height:680px){
  #petDeck .deckStage{padding-top:10px;padding-bottom:calc(env(safe-area-inset-bottom) + 28px)}
  #petDeck .deckCount{margin-top:8px;padding:6px 12px;height:30px;line-height:14px;box-sizing:border-box;font-size:12px}
  #petDeck .deckFrame{padding:9px 9px 10px;gap:6px}
  #petDeck .deckTitleRow strong{font-size:22px}
  #petDeck .deckPriceStrong{font-size:23px}
  #petDeck.deckChartMode .deckRatio{flex-basis:154px;gap:4px}
  #petDeck .deckRatioRow{padding:2px 0}
}

/* Mobile pets: planted feet, attached bags, and the small flame hot entry. */
@media (max-width:720px){
  #petHomeHot{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:66px;min-height:44px;padding:4px 5px;border:0;border-radius:12px;background:transparent;box-shadow:none;color:#ffdaa0;font-size:14px;font-weight:750;white-space:nowrap}
  #petHomeHot .petHotFlame{display:block;width:27px;height:34px;overflow:visible;filter:drop-shadow(0 2px 5px rgba(255,107,44,.45));transform-origin:50% 95%;animation:petFireFlicker 2.2s ease-in-out infinite}
  #petHomeHot.touchPressed .petHotFlame{filter:brightness(1.2) drop-shadow(0 2px 8px #ff7b3d)}
  #petHome .petActor{overflow:visible;margin-bottom:0}
  #petHome .petFloat{position:relative;transform-origin:50% 100%;animation:petGroundBreath 3.8s ease-in-out infinite}
  #petHome .petSlot:nth-child(2) .petFloat{animation-delay:-.8s}
  #petHome .petSlot:nth-child(3) .petFloat{animation-delay:-1.7s}
  #petHome .petSlot:nth-child(4) .petFloat{animation-delay:-2.5s}
  #petHome .petSlot:nth-child(5) .petFloat{animation-delay:-3.1s}
  #petHome .petModel{filter:drop-shadow(3px 6px 3px rgba(0,0,0,.4))}
  #petHome .petShadow{z-index:0;bottom:0;width:72%;height:13px;animation:none;opacity:.9;background:radial-gradient(ellipse,rgba(0,0,0,.8) 10%,rgba(0,0,0,.35) 46%,transparent 72%)}
  #petHome .petSlot:not(.empty) .petIsland{bottom:29px;height:30px;border-color:hsl(var(--hue) 40% 57%/.4);background:radial-gradient(ellipse at 36% 24%,hsl(var(--hue) 36% 37%/.9),hsl(var(--hue) 42% 16%/.95) 70%);box-shadow:0 5px 0 hsl(var(--hue) 30% 10%),0 12px 18px rgba(0,0,0,.5),inset 0 2px 2px rgba(255,255,255,.15)}
  #petHome .petSlot.active .petIsland{border-color:#e2be73;box-shadow:0 5px 0 hsl(var(--hue) 30% 10%),0 12px 18px rgba(0,0,0,.5),0 0 0 1px #e2be73,inset 0 2px 2px rgba(255,255,255,.15)}
  #petHome .petPocket{right:5px;bottom:13px;transform:rotate(5deg);animation:none;box-shadow:-3px 2px 3px rgba(0,0,0,.35),1px 4px 4px rgba(0,0,0,.4),inset 2px 2px 3px rgba(255,245,199,.45),inset -3px -3px 5px rgba(88,49,18,.3)}
  #petHome .petPocketStrap{position:absolute;z-index:-1;right:18px;bottom:22px;width:24px;height:31px;border:3px solid #a2753f;border-right-color:#684620;border-radius:50%;transform:rotate(-29deg);box-shadow:1px 1px 2px rgba(0,0,0,.3)}
  #petHome .petPocketCount{position:relative;z-index:1}
}
@keyframes petGroundBreath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.008,.985)}}
@keyframes petFireFlicker{0%,100%{transform:rotate(-3deg) scale(1)}45%{transform:rotate(3deg) scale(.96,1.05)}70%{transform:rotate(-1deg) scale(1.02,.98)}}
@media (max-width:720px) and (prefers-reduced-motion:reduce){#petHome .petFloat,#petHomeHot .petHotFlame{animation:none}}

/* Complete pet silhouettes; feet meet their own island, labels stay below. */
@media (max-width:720px){
  #petHome .petSlot{padding:18px 6px 14px;justify-content:flex-end;gap:12px;box-sizing:border-box}
  #petHome .petActor{width:calc(100% - 8px);max-width:112px;aspect-ratio:1;margin:0;overflow:visible}
  #petHome .petModel{background-image:none;overflow:visible;filter:drop-shadow(2px 3px 2px rgba(0,0,0,.35))}
  #petHome .petArtwork{display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}
  #petHome .petMeta{height:40px;flex:none;padding:0;width:100%;box-sizing:border-box}
  #petHome .petName{display:block;line-height:20px}
  #petHome .petCountText{display:block;line-height:16px;margin-top:2px}
  #petHome .petSlot:not(.empty) .petIsland{bottom:52px;height:30px;width:calc(100% - 14px)}
  #petHome .petPocket{right:3px;bottom:9px;width:27px;height:26px}
}

/* 星轨手机品牌与共同概率图：精简卡面，图表页专注 K 线。 */
@media (max-width:720px){
  #petHome .petHead{flex-wrap:nowrap;gap:10px;padding-top:calc(env(safe-area-inset-top) + 10px);padding-bottom:8px;min-height:92px}
  #petHome .petBrandBadge{flex:0 0 54px;position:relative;display:block;width:54px;height:72px}
  #petHome .petBrandBadge>svg{width:54px;height:72px;filter:drop-shadow(0 4px 6px #0007)}
  #petHome .petBrandText{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #petHome .petHeadRight{flex:1;justify-content:flex-end;gap:8px;flex-wrap:nowrap;min-width:0}
  #petHome .petStatus{width:7px;padding:0;font-size:0;overflow:hidden;border:0;background:transparent;flex:none}
  #petHome .petHomeHot,#petHome .petHomeNews{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:38px;min-height:54px;padding:2px;border:0;border-radius:12px;background:transparent;box-shadow:none;font-size:10px;color:#d9c5a0;flex:none}
  #petHome .petHomeHot .petHotFlame{width:25px;height:33px}
  #petHome .petHomeNews img{width:31px;height:32px;object-fit:contain;filter:sepia(.85) saturate(.7) brightness(.9) drop-shadow(1px 2px 2px #0007);transform:rotate(-8deg)}
  #petHome .petHeadAccount{position:relative;flex:0 1 118px;max-width:118px;min-width:70px;min-height:36px;padding:9px 14px;border:1px solid #d1d6dc;border-radius:8px;background:linear-gradient(118deg,#b1b8c1 0%,#f0f3f6 21%,#adb6c2 43%,#dce1e7 66%,#949eaa 100%);color:#273341;text-shadow:0 1px #ffffffb3;font-size:12px;font-weight:750;letter-spacing:.025em;box-shadow:inset 0 1px 1px #fff,inset 0 -2px 2px #626e8070,0 3px 7px #0005}
  #petHome .petHeadAccount:before,#petHome .petHeadAccount:after{content:"";position:absolute;top:50%;width:3px;height:3px;margin-top:-1px;border-radius:50%;background:#667381;box-shadow:0 1px 1px #fff9}
  #petHome .petHeadAccount:before{left:5px}#petHome .petHeadAccount:after{right:5px}
  #petDeck .deckRatio{justify-content:flex-start;gap:6px}
  #petDeck .deckRatioHead{justify-content:space-between}
  #petDeck .deckCallBadge{font-size:10px!important;color:#dbc69d}
  #petDeck .deckCardPeriods{display:grid;margin:0;gap:3px;flex:none}
  #petDeck .deckCardPeriods button{min-height:30px;padding:4px 2px;font-size:10px;background:rgba(123,145,181,.09);color:#aab9ce;border:1px solid transparent;border-radius:7px}
  #petDeck .deckCardPeriods button.active{background:rgba(206,179,121,.13);border-color:rgba(222,194,138,.35);color:#ecd4a7}
  #petDeck .deckCardPeriods button:last-child{background:transparent;font-size:10px}
  #petDeck .deckProbabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:124px;flex:0 0 auto;gap:10px;margin:0;padding:0 10px 3px;position:relative;border-bottom:1px solid rgba(183,202,228,.15)}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-height:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard:before,html[data-theme] #petDeck .deckProbabilities>.probabilityCard:after{display:none}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard.active{border:0;box-shadow:none;transform:none}
  #petDeck .deckProbability.long{--probColor:#e5a29d}#petDeck .deckProbability.watch{--probColor:#d1bf91}#petDeck .deckProbability.short{--probColor:#89c8b4}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard strong{font-size:17px;line-height:1.1;font-weight:650;letter-spacing:.02em;text-shadow:none}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard span{font-size:10px;color:#aab9ce;font-weight:500;letter-spacing:.06em}
  #petDeck .deckProbabilityTrack{height:78px;width:28px;display:flex;align-items:flex-end;position:relative;border-radius:5px 5px 0 0;background:rgba(184,204,235,.035)}
  #petDeck .deckProbabilityColumn{display:block;width:100%;height:var(--prob,0%);min-height:0;border-radius:5px 5px 0 0;background:linear-gradient(90deg,color-mix(in srgb,var(--probColor) 35%,transparent),var(--probColor) 48%,color-mix(in srgb,var(--probColor) 60%,transparent));box-shadow:inset 0 1px 0 #ffffff45;transition:height 700ms cubic-bezier(.2,.7,.2,1);opacity:.82}
  #petDeck .probabilityCard.active .deckProbabilityColumn{opacity:1;box-shadow:inset 0 1px 0 #fff6,0 -2px 12px color-mix(in srgb,var(--probColor) 15%,transparent)}
  #petDeck .deckRatioRow{padding:7px 0;gap:4px 8px;border-top:1px solid rgba(183,202,228,.08);flex:0 0 auto}
  #petDeck .deckRatioVal{font-size:16px;font-weight:650}
  /* 做多/做空行第二行：止盈 / 止损参考价（与分析页 plans 同源） */
  #petDeck .deckRatioPrices{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 2px}
  #petDeck .deckRatioPrices em{display:flex;align-items:baseline;gap:5px;font-style:normal;min-width:0}
  #petDeck .deckRatioPrices small{font:500 9px system-ui,sans-serif;letter-spacing:.1em;color:#7f92b3}
  #petDeck .deckRatioPrices b{font:650 13px Georgia,serif;color:#dfe9f8;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #petDeck .deckRatioRow.long .deckRatioGain b{color:#8ef0d2}
  #petDeck .deckRatioRow.short .deckRatioLoss b{color:#ffb3a0}
  #petDeck .deckRatioPrices.none b{color:#67799c}
  #petDeck.deckChartMode .deckBody>.deckRatio{display:none!important}
  #petDeck.deckChartMode .deckChartView{flex:1 1 0;min-height:0}
  #petDeck.deckChartMode .deckChartView .chartBox{flex:1 1 0;height:auto;min-height:0}
  #petDeck .deckArt:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(110deg,transparent 24%,#ffffff09 48%,transparent 72%);background-size:220% 100%;animation:deckArtSheen 8s ease-in-out infinite}
}
@keyframes deckArtSheen{0%,100%{background-position:110% 0}50%{background-position:-10% 0}}
@media (max-width:720px) and (prefers-reduced-motion:reduce){#petDeck .deckArt:after{animation:none}#petDeck .deckProbabilityColumn{transition:none}}

@media (max-width:720px) and (max-height:760px){
  #petDeck .deckArt{flex-basis:64px}
  #petDeck:not(.deckChartMode) .deckSparkWrap{flex-basis:64px}
  #petDeck .deckProbabilities{height:80px}
  #petDeck .deckProbabilityTrack{height:44px}
}
@media (max-width:720px) and (max-height:680px){
  #petDeck .deckProbabilities{height:74px}
  #petDeck .deckProbabilityTrack{height:38px}
  #petDeck .deckRatio{gap:5px}
  #petDeck .deckRatioRow{padding:3px 0;gap:3px 6px}
  #petDeck:not(.deckChartMode) .deckSparkWrap{flex-basis:50px}
}

/* Eight mobile interaction modules: direct pet drag, compact probabilities and card pouch. */
@media(max-width:720px){
  #petStage .petSlot{touch-action:none;-webkit-touch-callout:none}
  #petStage.petDragActive,#petStage.petDragActive .petSlot{overflow:visible;contain:none}
  #petStage .petDragging{z-index:20}
  #petStage .petDragging .petActor{filter:drop-shadow(0 16px 10px #0009);will-change:transform}
  #petStage .petDragging .petFloat{animation-play-state:paused}
  #petStage .petDropTarget .petIsland{transform:translateX(-50%) scale(1.12,.86);transition:transform 140ms cubic-bezier(.18,1.5,.35,1)}
  #petStage .petManageShortcut{position:absolute;top:9px;right:6px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:24px;color:#adbed4;background:#17274180}
  #petStage .empty .petManageShortcut{display:none}
  #petDeck .deckArt{background:linear-gradient(145deg,hsl(var(--hue) var(--card-saturation,70%) calc(var(--card-lightness,40%) + 9%)),hsl(var(--hue) var(--card-saturation,70%) var(--card-lightness,40%)) 48%,hsl(var(--hue) var(--card-saturation,70%) 15%))}
  #petDeck .deckRatioHead{gap:8px;align-items:center}
  #petDeck .deckRatioHead>span{font-size:11px}
  #petDeck .deckProbabilityTrack{height:70px;width:28px}
  #petDeck .deckProbabilityColumn{min-height:4px;transition:height 650ms cubic-bezier(.22,.8,.25,1),filter 400ms,box-shadow 400ms;opacity:.65}
  #petDeck .probabilityCard.active .deckProbabilityColumn{opacity:1;filter:brightness(1.25) saturate(1.5);box-shadow:0 0 15px color-mix(in srgb,var(--probColor) 45%,transparent),inset 0 1px 0 #fffc}
  #petDeck .deckProbability.unknown .deckProbabilityColumn{background:#64758b;box-shadow:none;filter:none;opacity:.3}
  #petManager{position:fixed;inset:0;z-index:100;touch-action:pan-y;overscroll-behavior:none;width:100%;height:var(--mobile-viewport-height,100dvh)}
  body.authLocked #petManager{display:none!important}
  #petManager .petManagerBody{touch-action:pan-y;overscroll-behavior:contain}
  #petOwnSearch{box-sizing:border-box;display:block;width:100%;height:54px;padding:0 16px;border:1px solid #526581;border-radius:17px;font:16px system-ui;background:linear-gradient(150deg,#23344f,#17243a);color:#edf4ff;outline:none;box-shadow:inset 0 1px 0 #ffffff0d}
  #petOwnSearch:focus{border-color:#81dbea;box-shadow:0 0 0 3px #81dbea1c}
  .petSearchCards{display:grid;gap:10px;margin:12px 0;min-height:16px}
  #petManager .petSearchResultCard{box-sizing:border-box;width:100%;display:flex;align-items:center;gap:12px;min-height:70px;padding:12px 14px;border:1px solid #42607c;border-radius:16px;text-align:left;background:linear-gradient(150deg,#253b55,#15253b)}
  .petSearchResultCard>span{display:grid;gap:4px}.petSearchResultCard small{font-size:12px;color:#afc2d8}
  .petSearchResultCard:disabled{opacity:.4}
  .petCardPouch{position:relative;margin:18px 0 24px;padding:12px 12px 30px;background:linear-gradient(145deg,#233f55,#102231);border:1px solid #5b8a9f;border-radius:8px 18px 18px 18px;box-shadow:inset 0 2px 0 #b7e7ff20,0 8px 20px #0003}
  .petCardPouch:before{content:'';position:absolute;left:-1px;top:-9px;width:35%;height:12px;border:1px solid #5b8a9f;border-bottom:0;border-radius:8px 8px 0 0;background:#233f55}
  .petPouchHead{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:12px;color:#b8d5e3}
  .petPouchCards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;height:78px;align-items:end}
  .petPouchCard{box-sizing:border-box;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:flex-start;padding:8px 2px;height:70px;min-width:0;border:1px dashed #547084;border-radius:8px 8px 0 0;color:#daf1fa;font-size:10px;font-weight:650;background:#122535}
  .petPouchCard.filled{border-style:solid;background:linear-gradient(160deg,#3d6b80,#234254);animation:petPouchSettle 360ms cubic-bezier(.2,1.45,.35,1)}
  .petPouchCard .assetLogo,.petPouchCard .heroLogo{width:26px;height:26px}
  .petPouchLip{position:absolute;bottom:9px;left:7px;right:7px;height:32px;border:1px solid #57859b;border-radius:7px 7px 12px 12px;background:linear-gradient(180deg,#355c71,#1e3b4c);box-shadow:0 -4px 7px #0004,inset 0 2px 1px #ffffff17;pointer-events:none}
  .petCardPouch.full .petPouchHead span{color:#ffd299}
  .petFlyingCard{position:fixed;z-index:1005;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #8bd9e9;border-radius:14px;background:#244158;color:#eefaff;box-shadow:0 12px 24px #0005;pointer-events:none;transform-origin:0 0}
}
@keyframes petPouchSettle{0%{transform:translateY(-12px) rotate(-5deg)}70%{transform:translateY(3px) rotate(2deg)}100%{transform:translateY(0) rotate(0)}}
@media(max-width:720px) and (prefers-reduced-motion:reduce){#petDeck .deckProbabilityColumn{transition:none}.petPouchCard.filled{animation:none}}

/* Compact mobile directions stay side by side; their bars grow horizontally. */
@media(max-width:720px){
  #petDeck .deckRatio{justify-content:flex-start;gap:10px}
  #petDeck .deckProbabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:column;height:auto;min-height:62px;gap:12px;padding:4px 0 12px;flex:none}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;justify-items:start;gap:5px;min-width:0;padding:0;min-height:0}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard span{font-size:11px;line-height:1.2}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard strong{font-size:20px;line-height:1.2;font-variant-numeric:tabular-nums}
  #petDeck .deckProbabilityTrack{width:100%;height:5px;align-items:stretch;border-radius:99px;background:rgba(184,204,235,.1);overflow:hidden}
  #petDeck .deckProbabilityColumn{width:var(--prob,0%);height:100%;min-height:0;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--probColor) 55%,transparent),var(--probColor));transition:width 650ms cubic-bezier(.22,.8,.25,1),filter 400ms,box-shadow 400ms}
  #petDeck .deckRatioRow{padding:7px 0;gap:6px 8px}
  #petDeck.deckChartMode .deckCardPeriods,#petDeck.deckChartMode .deckBody>.deckRatio,#petDeck.deckChartMode .deckSparkWrap{display:none!important}
}
@media(max-width:720px) and (max-height:680px){
  #petDeck .deckRatio{gap:6px}
  #petDeck .deckProbabilities{min-height:54px;padding-bottom:8px;gap:9px}
  #petDeck .deckRatioRow{padding:4px 0;gap:4px 6px}
}
@media(max-width:720px) and (prefers-reduced-motion:reduce){#petDeck .deckProbabilityColumn{transition:none}}

@media(max-width:720px){
  #petDeck .deckMaControls{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:none;margin:0 0 6px}
  #petDeck .deckMaControls button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:32px;padding:5px 9px;border:1px solid #ffffff15;border-radius:8px;background:#142132;color:#8292a7;font-size:10px;font-weight:600}
  #petDeck .deckMaControls button:before{content:'';width:12px;height:2px;border-radius:2px;background:currentColor}
  #petDeck .deckMaControls button.active{border-color:color-mix(in srgb,var(--ma-color) 40%,transparent);color:var(--ma-color);background:color-mix(in srgb,var(--ma-color) 8%,#142132)}
  #petDeck.deckChartMode .deckChartView .chartBox{overflow:hidden;isolation:isolate}
  #petDeck.deckChartMode .chartMetrics{display:none}
}

/* 星际伙伴：反馈落在角色上，拖动跨越槽位不会裁切。 */
@media(max-width:720px){
  #petHome .petSlot,#petHome .petSlot:active,#petHome .petSlot.touchPressed,#petHome .petSlot.petDropTarget{background:transparent;box-shadow:none;scale:1;-webkit-tap-highlight-color:transparent;outline:none;user-select:none;-webkit-user-select:none}
  #petHome .petSlot:focus-visible .petIsland{box-shadow:0 0 0 2px #aee8ff}
  #petHome .petSlot .petTilt{perspective:400px;transform-origin:50% 100%}
  #petHome .petHolding .petActor{scale:1;filter:none}
  #petHome .petHolding .petFloat{animation:spacePetPress 900ms ease-in-out infinite;transform-origin:50% 100%}
  #petHome .petHolding .petIsland{box-shadow:inset 0 2px 5px #ffffff14,0 4px 8px #0005}
  #petHome .petDropTarget .petIsland{box-shadow:0 0 16px #8ddbe54d;transform:translateX(-50%) scale(1.08,.92)}
  #petHome .petArtwork{overflow:visible;display:block}
  #petHome .petFloat{animation:spacePetRock 4.6s ease-in-out infinite;transform-origin:50% 100%}
  #petHome .petSlot:nth-child(2n) .petFloat{animation-delay:-1.4s}
  #petHome .petSlot:nth-child(3n) .petFloat{animation-delay:-2.7s}
  .spacePetEyes{transform-box:fill-box;transform-origin:center;animation:spacePetBlink 6s infinite}
  #petHome .petShadow{bottom:0;width:68%;height:10px;opacity:.7;filter:blur(2px)}
  .petDragGhost{position:fixed!important;z-index:1002;pointer-events:none;max-width:none!important;margin:0!important;overflow:visible!important;filter:drop-shadow(0 12px 9px #0008);will-change:transform}
  .petDragGhost .petTilt,.petDragGhost .petFlipper,.petDragGhost .petFloat,.petDragGhost .petModel{display:block;position:absolute;inset:0;width:100%;height:100%;background:none;overflow:visible;animation:none;transform:none}
  .petDragGhost .petArtwork{width:100%;height:100%;display:block;overflow:visible}
  .petDragGhost .petShadow{display:none}
  #petManager [hidden]{display:none!important}
  #petManager .petChoices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0}
  #petManager .petChoice{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:8px 3px;background:#15243a;border:1px solid #ffffff12;box-shadow:none;border-radius:14px}
  #petManager .petChoice svg{display:block;width:100%;max-width:72px;aspect-ratio:160/156}
  #petManager .petChoice span{font-size:10px;line-height:1.4;white-space:normal}
  #petManager .petChoice[aria-pressed="true"]{border-color:#a9d8ea;background:#24374e;box-shadow:inset 0 0 15px #8edfff12}
  #petManager .petChoice.used{opacity:1;cursor:default;background:#111b2a;border-color:#ffffff0a;box-shadow:inset 0 0 22px #0005}
  #petManager .petChoice.used svg{filter:grayscale(.8) brightness(.45);opacity:.65}
  #petManager .petChoice.used .spacePetEyes{animation:none}
  #petManager .petChoice .petChoiceStamp{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%) rotate(-17deg);z-index:1;white-space:nowrap;padding:3px 5px;border:2px solid #be8377;border-radius:4px;outline:1px solid #be837766;outline-offset:2px;color:#dcaa9f;background:#291d2280;font-size:12px;font-weight:800;letter-spacing:.08em;line-height:1.2;text-shadow:0 1px #0006;pointer-events:none}
  #petCreateConfirm,#petGroupDelete{display:block;width:100%;margin-top:18px;min-height:48px}
  /* 新建分组：创建按钮固定在页面顶部，不再挂在最底下，故改为上无边距、下方留出间距 */
  #petManager #petCreateConfirm{background:linear-gradient(145deg,#bceef3,#78c1d2);color:#12243b;font-weight:700;margin:0 0 14px}
  #petManager #petCreateConfirm:disabled{opacity:.4;box-shadow:none}
  #petManager #petGroupDelete{color:#ffc1c9;background:#3b2534;box-shadow:none;border-color:#ffffff0c}
}
@keyframes spacePetRock{0%,100%{transform:rotate(-1.2deg) scale(1,.995)}50%{transform:rotate(1.2deg) scale(1.012,1)}}
@keyframes spacePetPress{0%,100%{transform:rotateX(8deg) rotate(-2deg) scale(1.04,.96)}50%{transform:rotateX(-7deg) rotate(2deg) scale(.98,1.02)}}
@keyframes spacePetBlink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.08)}}
@media(max-width:720px) and (prefers-reduced-motion:reduce){#petHome .petFloat,#petHome .petHolding .petFloat,.spacePetEyes{animation:none}#petHome .petHolding .petFloat{transform:scale(1.03,.97)}}

/* Mobile probability tiles share fixed baselines and desktop direction colors. */
@media(max-width:720px){
  #petDeck .deckProbabilities{align-items:stretch;gap:8px;padding:3px 0 8px;border-bottom:0}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard{position:relative;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:14px 24px 5px;align-content:center;align-items:center;justify-items:center;gap:6px;min-width:0;min-height:75px;padding:9px 7px;border:1px solid #ffffff15;border-radius:11px;background:linear-gradient(150deg,#1b2937,#111d2a);overflow:hidden;transition:border-color .35s,background .35s,box-shadow .35s}
  html[data-theme] #petDeck .deckProbability.long{--probColor:var(--up,#e94872);--probGlow:var(--up,#e94872)}
  html[data-theme] #petDeck .deckProbability.watch{--probColor:#e7c976;--probGlow:#c8a84a}
  html[data-theme] #petDeck .deckProbability.short{--probColor:var(--down,#28b878);--probGlow:var(--down,#28b878)}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard span{display:block;margin:0;line-height:14px;font-size:11px;text-align:center;white-space:nowrap;color:var(--probColor)}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard strong{display:block;margin:0;line-height:24px;font-size:20px;text-align:center;color:var(--probColor)}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard.active{border:1px solid var(--probColor);box-shadow:inset 0 0 0 1px #ffffff08,0 0 12px color-mix(in srgb,var(--probColor) 20%,transparent);background:linear-gradient(150deg,color-mix(in srgb,var(--probColor) 9%,#1b2937),#111d2a);transform:none}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard.active:before{content:'';display:block;position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--probColor) 25%,transparent),transparent 80%);pointer-events:none;animation:deckProbabilityBreath 2.6s ease-in-out infinite}
  #petDeck .deckProbabilityTrack{position:relative;justify-self:stretch;width:100%;height:5px}
  #petDeck .deckRatioRow.long .deckRatioDir{color:var(--up,#e94872)}
  #petDeck .deckRatioRow.short .deckRatioDir{color:var(--down,#28b878)}
  #petDeck .deckRatioBar{position:relative;height:8px;background:var(--down,#28b878);border-radius:99px;box-shadow:inset 0 1px 2px #0004}
  #petDeck .deckRatioBar i{position:relative;height:100%;min-width:0;border-radius:99px 0 0 99px;background:var(--up,#e94872)}
  #petDeck .deckRatioBar i:after{content:'';position:absolute;right:0;top:0;bottom:0;width:2px;background:#fff9}
  #petDeck .deckRatioRow.short .deckRatioBar{background:var(--up,#e94872)}
  #petDeck .deckRatioRow.short .deckRatioBar i{background:var(--down,#28b878)}
  #petDeck .deckRatio.pending .deckRatioBar,#petDeck .deckRatioRow.empty .deckRatioBar{background:#ffffff0c;animation:none}
  #petDeck .deckRatioRow.empty .deckRatioBar i:after{display:none}
}
@keyframes deckProbabilityBreath{0%,100%{opacity:.25}50%{opacity:1}}
@media(max-width:720px) and (prefers-reduced-motion:reduce){html[data-theme] #petDeck .deckProbabilities>.probabilityCard.active:before{animation:none;opacity:.55}}

/* Mobile probability columns: height represents probability, including a visible zero. */
@media(max-width:720px){
  #petDeck .deckProbabilities{height:88px;min-height:88px;align-items:stretch;grid-template-columns:repeat(3,minmax(0,1fr));padding:3px 0;gap:10px}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard{display:grid;grid-template-columns:1fr;grid-template-rows:13px 21px 44px;justify-items:center;align-content:start;gap:3px}
  #petDeck .deckProbabilityTrack{display:flex;align-items:flex-end;width:26px;height:44px;overflow:visible;border-radius:7px;background:#b8cceb0d}
  #petDeck .deckProbabilityColumn{display:block;width:100%;height:var(--prob,0%);min-height:4px;border-radius:6px 6px 3px 3px;background:linear-gradient(0deg,color-mix(in srgb,var(--probColor) 55%,transparent),var(--probColor));transition:height 650ms cubic-bezier(.22,.8,.25,1),filter 400ms,box-shadow 400ms}
  #petManager,#petManager .petManagerBody{touch-action:pan-y}
}
@media(max-width:720px) and (prefers-reduced-motion:reduce){#petDeck .deckProbabilityColumn{transition:none}}

@media(max-width:720px){
  #petHome .petPocketStrap,.petDragGhost .petPocketStrap{right:20px;bottom:10px;width:10px;height:25px;border:0;border-left:3px solid #8b6538;border-radius:50%;transform:rotate(-15deg);box-shadow:none}
  #petHome .petSlot.empty .petIsland:after{content:"+";position:absolute;inset:0;display:grid;place-items:center;color:#95aac8;font-size:25px;line-height:1}
}

@media(max-width:720px) and (max-height:760px){
  #petDeck .deckProbabilities{height:102px;min-height:102px}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard{grid-template-rows:14px 20px 50px}
  #petDeck .deckProbabilityTrack{height:50px}
  #petDeck .deckRatio{gap:5px}
  #petDeck .deckRatioRow{padding:3px 0;gap:3px 6px}
}
@media(max-width:720px) and (max-height:680px){
  #petDeck .deckProbabilities{height:90px;min-height:90px}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard{grid-template-rows:14px 20px 40px}
  #petDeck .deckProbabilityTrack{height:40px}
  #petDeck .deckRatioHead{min-height:14px}
}

/* Amounts use lining figures: every digit shares the same baseline and height. */
@media(max-width:720px){
  #petDeck .deckPriceStrong,#petDeck .deckPct,#petDeck .deckRatioVal,#petDeck .deckProbability strong{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
  #petDeck .deckPriceRow{align-items:baseline;flex-wrap:nowrap}
  #petDeck .deckPriceStrong,#petDeck .deckRatioVal{font-family:"Times New Roman","Noto Serif",serif}
  #petDeck .deckPriceStrong{display:block;margin:0;line-height:1.2;white-space:nowrap}
  #petDeck .deckPct{flex:none;line-height:1.2;white-space:nowrap}
  #petDeck .deckRatioVal{line-height:22px;white-space:nowrap}
}

/* Center solid probability columns without a full-height background column. */
@media(max-width:720px){
  #petDeck .deckProbabilities{--deck-bar-space:46px;flex:0 0 auto;height:calc(56px + var(--deck-bar-space));min-height:calc(56px + var(--deck-bar-space));padding:0;gap:8px}
  html[data-theme] #petDeck .deckProbabilities>.probabilityCard{height:100%;min-height:0;grid-template-rows:14px 24px minmax(0,1fr);gap:4px;padding:8px 7px;justify-items:center;align-content:stretch}
  #petDeck .deckProbabilityTrack{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;justify-self:center;align-self:stretch;width:26px;height:100%;min-height:0;margin:0 auto;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
  #petDeck .deckProbabilityColumn{flex:none;width:100%;height:var(--prob,0%);min-height:12px;max-height:100%;margin:0;border-radius:5px 5px 2px 2px;background:linear-gradient(0deg,color-mix(in srgb,var(--probColor) 75%,#142132),var(--probColor));opacity:1;filter:none;box-shadow:inset 0 1px 0 #ffffff55;transition:height 650ms cubic-bezier(.22,.8,.25,1)}
  #petDeck .probabilityCard.active .deckProbabilityColumn{opacity:1;filter:none;box-shadow:inset 0 1px 0 #ffffff66}
  #petDeck .deckProbability.unknown .deckProbabilityColumn{height:3px;min-height:3px;background:#64758b;opacity:.5;box-shadow:none}
}
@media(max-width:720px) and (max-height:760px){#petDeck .deckProbabilities{--deck-bar-space:32px}}
@media(max-width:720px) and (max-height:680px){#petDeck .deckProbabilities{--deck-bar-space:26px}}
@media(max-width:720px) and (prefers-reduced-motion:reduce){#petDeck .deckProbabilityColumn{transition:none}}

/* 名片进入个人信息页，修改密码由单独入口打开。 */
@media(max-width:720px){
  #authDialog:not(.mobilePasswordView) #authLogout{display:block!important;min-height:48px;margin-top:8px;color:#ffcad2;background:#352333;border-color:#d898a633}
  #authDialog:not(.mobilePasswordView) .authPanel{overflow:auto}
  #authDialog:not(.mobilePasswordView) #authSigned>p{display:block}
  #authDialog:not(.mobilePasswordView) #passwordDetails{border:0;background:transparent;padding:0}
  #authDialog:not(.mobilePasswordView) #passwordDetails>summary{display:flex!important;min-height:48px;align-items:center}
  #authDialog:not(.mobilePasswordView) #passwordDetails:not([open]) #passwordForm{display:none!important}
}

/* 手机皮革卡兜：五张在前，所有标的按五列向后叠，容量仍为 50。 */
@media(max-width:720px){
  #petManager .petCardPouch{isolation:isolate;margin:22px 0 26px;padding:15px 14px 28px;border:1px solid #976548;border-radius:21px;background:radial-gradient(ellipse at 30% 0,#c2936429,transparent 65%),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cfilter%20id%3D%22grain%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.72%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22linear%22%20slope%3D%22.16%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23grain%29%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(135deg,#684833,#34251e 60%,#4b3425);box-shadow:inset 0 2px 2px #ffe2af26,inset 0 -4px 8px #170e0c66,0 10px 22px #0005;overflow:hidden}
  #petManager .petCardPouch:before{inset:6px;top:6px;width:auto;height:auto;border:1px dashed #d3a77670;border-radius:15px;background:transparent;pointer-events:none;z-index:35}
  #petManager .petPouchHead{position:relative;z-index:40;margin-bottom:10px;color:#e3c8a3;font-size:12px;text-shadow:0 1px 1px #0008}
  #petManager .petPouchHead strong{letter-spacing:.12em}
  #petManager .petPouchCards{position:relative;display:block;height:160px;overflow:visible;perspective:500px}
  #petManager .petPouchCard{position:absolute;left:calc(var(--lane)*20% + var(--depth)*.45px + 2px);top:calc(72px - var(--depth)*7px);width:calc(20% - 8px);height:104px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:4px 2px 8px;border:1px solid #9ba9b27a;border-radius:8px 8px 5px 5px;color:#e5edf3;background:linear-gradient(145deg,#415263,#23313e 70%);box-shadow:0 -1px 0 #eaf5ff30,2px 2px 5px #0006;animation:none;transform:rotate(calc((var(--lane) - 2)*1deg));transform-origin:50% 100%;font-size:10px;line-height:1.2;overflow:hidden}
  #petManager .petPouchCard .assetLogo,#petManager .petPouchCard .watchLogo,#petManager .petPouchCard .heroLogo{flex:none;width:25px;height:25px;margin:0;filter:drop-shadow(0 1px 1px #0006)}
  #petManager .petPouchCard>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #petManager .petPouchLip{z-index:30;bottom:8px;left:8px;right:8px;height:59px;border:1px solid #a37350;border-radius:9px 9px 15px 15px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cfilter%20id%3D%22grain%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.72%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22linear%22%20slope%3D%22.16%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23grain%29%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(180deg,#926442,#6b472f 18%,#513522 80%,#3e281d);box-shadow:0 -5px 8px #0007,inset 0 2px 1px #ffdfb444,inset 0 -3px 4px #170d0a66}
  #petManager .petPouchLip:before{content:'';position:absolute;inset:7px;border:1px dashed #d8ae7980;border-radius:5px 5px 9px 9px}
  #petManager .petPouchLip:after{content:'星轨';position:absolute;inset:0;display:grid;place-items:center;color:#d0a27690;text-shadow:0 1px #1f120d;font-size:12px;letter-spacing:.4em}
  #petManager .petPouchEmpty{position:absolute;inset:20px 4px 0;border-radius:12px;background:linear-gradient(#170f0c88,#241913);box-shadow:inset 0 5px 12px #0008}
  #petManager .petCardPouch.full .petPouchHead span{color:#f5cf9b}
}

/* 手机名片账户页采用实色背景，遮住底层行情与伙伴内容。 */
@media(max-width:720px){
  html[data-theme] #authDialog,html[data-theme] #mobilePasswordPage,#authDialog,#mobilePasswordPage{--paper:#102030;background:#102030;opacity:1;backdrop-filter:none;-webkit-backdrop-filter:none}
  html[data-theme] #authDialog::backdrop,html[data-theme] #mobilePasswordPage::backdrop,#authDialog::backdrop,#mobilePasswordPage::backdrop{background:#102030;opacity:1;backdrop-filter:none;-webkit-backdrop-filter:none}
  #authDialog>.mobilePageHeader,#mobilePasswordPage>.mobilePageHeader{background:#102030}
}

@media(max-width:720px){#petManager .petPouchCard:not([data-depth="0"]) .watchLogo,#petManager .petPouchCard:not([data-depth="0"]) .assetLogo,#petManager .petPouchCard:not([data-depth="0"]) .heroLogo{position:absolute;top:0;left:5px;width:17px;height:17px}#petManager .petPouchCard:not([data-depth="0"])>span:last-child{visibility:hidden}}
/* 手机选择标的：适度放大卡片、Logo 与文字，保持整行可点击。 */
@media(max-width:720px){
  #petManager #petOwnSearch{height:58px}
  #petManager .petSearchLabel{font-size:15px}
  #petManager #petOwnResults{display:grid;gap:12px;margin:14px 0}
  #petManager #petOwnResults .petSearchResultCard{min-height:88px;padding:16px;gap:14px;border-radius:18px}
  #petManager #petOwnResults .petSearchResultCard>.watchLogo,
  #petManager #petOwnResults .petSearchResultCard>.assetLogo,
  #petManager #petOwnResults .petSearchResultCard>.heroLogo{width:42px;height:42px;flex:0 0 42px}
  #petManager #petOwnResults .petSearchResultCard>span:last-child{flex:1;min-width:0;gap:6px}
  #petManager #petOwnResults .petSearchResultCard strong{font-size:18px;line-height:1.3;overflow-wrap:anywhere}
  #petManager #petOwnResults .petSearchResultCard small{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
}

/* 后排露出代码；输入框只在输入后显示结果，结果不挤动页面。 */
@media(max-width:720px){
  #petManager .petPouchCards{height:calc(112px + var(--pouch-layers,0)*14px)}
  #petManager .petPouchCard{top:calc(12px + (var(--pouch-layers,0) - var(--depth))*14px)}
  #petManager .petPouchCard:not([data-depth="0"]) .watchLogo,#petManager .petPouchCard:not([data-depth="0"]) .assetLogo,#petManager .petPouchCard:not([data-depth="0"]) .heroLogo{top:0;left:2px;width:12px;height:12px}
  #petManager .petPouchCard:not([data-depth="0"])>span:last-child{visibility:visible;position:absolute;top:1px;left:16px;right:1px;max-width:none;line-height:11px;font-size:8px;font-weight:650;text-align:left;text-overflow:ellipsis}
  #petManager .petSearchField{position:relative;z-index:60}
  #petManager #petOwnResults{position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:min(240px,35dvh);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:4px 8px;border:1px solid #53667e;border-radius:14px;background:#16263a;box-shadow:0 9px 25px #0008}
  #petManager #petOwnResults:empty,#petManager #petOwnResults[hidden]{display:none!important}
  #petManager #petOwnResults .petSearchResultCard{margin:4px 0;min-height:48px}
  #petManager #petOwnResults p{font-size:12px;color:#b6c6d9;margin:12px 4px}
}

/* 空位是开放光圈圆台；已有伙伴使用银白色太空基座。 */
@media(max-width:720px){
  #petHome .petVacancyLight{display:none}
  #petHome .petSlot.empty .petIsland{bottom:44px;width:calc(100% - 6px);height:92px;border:0;border-radius:0;background:radial-gradient(ellipse at 50% 80%,#8edbff13,transparent 54%);box-shadow:none;overflow:visible}
  #petHome .petSlot.empty .petIsland:before,#petHome .petSlot.empty .petIsland:after{display:none;content:none}
  #petHome .petSlot.empty .petVacancyLight{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 3px #a7ddff99) drop-shadow(0 0 8px #6bb5f066);animation:petVacancyGlow 3.6s ease-in-out infinite}
  #petHome .petSlot:not(.empty) .petIsland{border:1px solid #e3eff8;background:radial-gradient(ellipse at 34% 20%,#fff 0%,#dbe6ee 28%,#a6b5c4 61%,#687e94 100%);box-shadow:0 5px 0 #677b8d,0 6px 0 #c2d0db,0 12px 18px #0007,inset 0 2px 2px #ffffffb3,inset 0 -3px 4px #4b60764d}
  #petHome .petSlot.active:not(.empty) .petIsland{border-color:#f2faff;box-shadow:0 5px 0 #677b8d,0 6px 0 #d8e7f1,0 12px 18px #0007,0 0 12px #b6e1f933,inset 0 2px 2px #fff,inset 0 -3px 4px #4b60764d}
  #petHome .petDropTarget:not(.empty) .petIsland{box-shadow:0 5px 0 #677b8d,0 6px 0 #d8e7f1,0 0 18px #b1e9ff80,inset 0 2px 2px #ffffffb3}
}
@keyframes petVacancyGlow{0%,100%{opacity:.72}50%{opacity:1}}
@media(max-width:720px) and (prefers-reduced-motion:reduce){#petHome .petSlot.empty .petVacancyLight{animation:none}}

/* 空位改为收窄的深空隧道入口，取消圆台/碗形轮廓。 */
@media(max-width:720px){
  #petHome .petSlot.empty .petIsland{bottom:54px;width:68%;max-width:82px;height:62px;background:transparent}
  #petHome .petSlot.empty .petVacancyLight{filter:drop-shadow(0 0 2px #a8e8ff99) drop-shadow(0 0 6px #649ec855)}
}

/* 单排皮革卡兜：独立小卡，横向滚动，拖柄调整顺序。 */
@media(max-width:720px){
  #petManager,#petManager .petManagerBody{touch-action:pan-x pan-y}
  #petManager .petPouchCards{display:flex;gap:10px;align-items:flex-start;height:126px;padding:8px 4px 16px;overflow-x:auto;overflow-y:hidden;box-sizing:border-box;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#c79e70 #2d211a;perspective:none}
  #petManager .petPouchCard{position:relative;flex:0 0 72px;width:72px;height:98px;top:auto;left:auto;z-index:auto!important;transform:none;padding:7px 4px 4px;overflow:hidden;border-radius:10px;gap:5px}
  #petManager .petPouchCard .watchLogo,#petManager .petPouchCard .assetLogo,#petManager .petPouchCard .heroLogo{position:static;width:25px;height:25px}
  #petManager .petPouchCard.selected{border-color:#ffe2ab;box-shadow:0 0 0 1px #ffe2ab80}
  #petManager .petPouchCard .petPouchSymbol{position:static;visibility:visible;max-width:100%;font-size:11px;line-height:15px;text-align:center}
  #petManager .petPouchCard .petPouchDrag{flex:none;min-height:28px;min-width:44px;height:28px;padding:0 9px;line-height:24px;border:0;border-radius:5px;box-shadow:none;background:#ffffff0b;color:#d4dfec;font-size:23px;touch-action:none;cursor:grab}
  #petManager .petPouchLip{height:17px;bottom:8px;pointer-events:none}
  #petManager .petPouchLip:before{inset:4px;border-top:0;border-left:0;border-right:0}
  #petManager .petPouchLip:after{display:none}
  #petManager .petHoldingsHead,#petManager #petOwnHoldings{display:none}
  #petManager .petPouchEmpty{position:static;width:100%;height:80px;flex:none}
  #petManager .petPouchTools{display:flex;justify-content:flex-end;margin-top:-12px;margin-bottom:16px;min-height:0}
  #petManager #petPouchDelete{min-height:44px;color:#ffcbd2;background:#452a35}
  .petPouchPlaceholder{flex:0 0 72px;height:98px;box-sizing:border-box;border:1px dashed #dec099;border-radius:10px;background:#ffffff0b}
  .petPouchDragging{position:fixed!important;z-index:1002!important;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;padding:7px 4px 4px;box-sizing:border-box;border:1px solid #eed9b6;border-radius:10px;background:#253647;box-shadow:0 8px 18px #0008;pointer-events:none}
  .petPouchDragging .watchLogo{width:25px;height:25px}.petPouchDragging .petPouchSymbol{font-size:11px;color:#edf3ff}.petPouchDragging .petPouchDrag{display:none}
}

/* 卡兜内直接排卡：左上到右下，最后留添加空位。 */
@media(max-width:720px){
  #petManager .petPouchCards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:68px;gap:0 7px;align-content:start;align-items:start;height:auto;max-height:308px;min-height:94px;padding:8px 4px 16px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;touch-action:pan-y}
  #petManager .petPouchCard{position:relative;left:auto;top:auto;width:100%;height:88px;min-width:0;margin:0;flex:none;transform:none;padding:7px 2px;touch-action:none;cursor:grab;z-index:auto!important;box-shadow:0 2px 4px #0006}
  #petManager .petPouchCard .petPouchSymbol{font-size:10px;line-height:14px}
  #petManager .petPouchCard:focus-visible{outline:2px solid #eed2a7;outline-offset:-2px}
  #petManager .petPouchAdd{width:100%;height:62px;min-width:0;min-height:0;align-self:start;padding:0;border:1px dashed #d8bb936e;border-radius:10px;background:#ffffff05;color:#dac39e;font-size:29px;box-shadow:none}
  #petManager .petPouchCard.petPouchVacant{opacity:.16;border-style:dashed}
  #petManager .petPouchTools,#petManager .petHoldingsHead,#petManager #petOwnHoldings{display:none!important}
  #petManager .petCardPouch.removing{border-color:#e8a899}
  #petManager .petCardPouch.removing .petPouchHead strong:after{content:' · 松手移除';color:#ffd0c6;font-size:11px;letter-spacing:0}
  .petPouchDragging{touch-action:none;opacity:.95;transition:opacity 100ms}
  .petPouchDragging.removing{opacity:.45;border-color:#ffbfb4}
}
@media(max-width:360px){#petManager .petPouchCards{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Mobile cards reveal their contents through physical overlap, without delayed fading. */
@media(max-width:720px){
  #petDeck .deckNeighbor{opacity:1;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(150deg,#27324b,#0d1424 70%);transform-style:flat}
  #petDeck .deckNeighbor.deckNeighborInactive{visibility:hidden}
  #petDeck .deckNeighbor> *{opacity:1;transition:none}
  #petDeck .deckNeighborArt{flex:none;height:clamp(58px,11dvh,96px);overflow:hidden;position:relative}
  #petDeck .deckNeighborArt .heroLogo{position:relative;inset:auto;width:42px;height:42px;min-width:42px;max-width:42px;max-height:42px;flex:none;overflow:hidden;opacity:1;transform:none;animation:none}
  #petDeck .deckNeighborArt .heroLogo img{position:absolute;inset:auto;left:50%;top:50%;width:34px;height:34px;max-width:34px;max-height:34px;object-fit:contain;transform:translate(-50%,-50%);opacity:1;animation:none}
  #petDeck .deckNeighborArt .heroLogo svg{width:34px;height:34px;max-width:34px;max-height:34px}
  #petDeck .deckNeighbor>strong{font-size:25px;line-height:1.15}
  #petDeck .deckNeighbor>span{font-size:23px}
}
@media(max-width:720px) and (prefers-reduced-motion:reduce){#petDeck .deckNeighbor> *{transition:none}}

/* 输入管理页始终独立遮住主屏；键盘改变可视窗口时仍保持覆盖。 */
@media(max-width:720px){
  body.petManagerOpen:before{content:'';position:fixed;inset:0;z-index:99;background:#0c1627;pointer-events:auto}
  body.petManagerOpen #petHome,body.petManagerOpen #petDeck{visibility:hidden!important;pointer-events:none!important}
  #petManager{top:var(--mobile-viewport-top,0px);bottom:auto;height:var(--mobile-viewport-height,100dvh);background:#0c1627;isolation:isolate}
  #petManager .petPouchCards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:74px;gap:8px;align-items:start;align-content:start;height:auto;min-height:98px;max-height:340px;overflow-x:hidden;overflow-y:auto;touch-action:pan-y;padding:8px 4px 16px}
  #petManager .petPouchCard{flex:none;width:calc(100% - 8px);justify-self:center;height:74px;max-width:none;min-width:0;position:relative;left:auto;top:auto;margin:0;transform:none;touch-action:none;padding:5px 2px 4px;gap:3px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  #petManager .petPouchCard img{pointer-events:none;-webkit-user-drag:none}
  #petManager .petPouchCard .petPouchNumber{align-self:flex-start;font-size:10px;line-height:12px;color:#e9cc9c;font-variant-numeric:tabular-nums}
  #petManager .petPouchCard .petPouchSymbol{font-size:9px;line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #petManager .petPouchAdd{flex:none;width:100%;min-width:0;height:74px;align-self:start}
  .petPouchDragging .petPouchNumber{font-size:10px;line-height:12px;color:#e9cc9c;align-self:flex-start}
}

/* 邻牌复用完整卡面，在主牌最终位置按真实遮挡露出。 */
@media(max-width:720px){
  #petDeck .deckStage{perspective:none}
  #petDeck .deckNeighbor{top:6px;bottom:calc(env(safe-area-inset-bottom) + 90px);width:calc(100% - 56px);max-width:420px;padding:0;border:0;border-radius:28px;gap:0;background:#111722;opacity:1;transform:none;box-shadow:none}
  #petDeck .deckNeighbor.previous,#petDeck .deckNeighbor.next{transform:none}
  #petDeck .deckNeighbor .deckFrame{flex:1;min-height:0}
}
@media(max-width:720px) and (max-height:680px){#petDeck .deckNeighbor{top:10px;bottom:calc(env(safe-area-inset-bottom) + 66px)}}

/* 独立透明伙伴图：完整保留耳朵、翅膀、轮子与尾巴。 */
@media(max-width:720px){
  #petManager .petChoices{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #petManager .petChoice{padding:10px 8px;gap:8px}
  #petManager .petChoice svg{max-width:138px;aspect-ratio:1;overflow:visible}
  #petManager .petChoice span{font-size:12px}
}

@media(max-width:720px){#petDeck .deckSparkWrap[role="button"]{touch-action:pan-y;cursor:grab}}

@media(max-width:720px){#authDialog .authMascot:after{background-image:var(--auth-pet-image,url('/assets/icons/crypto/spacerabbit.png?v=20261012-crystal43'))!important}}

/* 悬浮实体牌：弧线拖动与错落牌边，底层牌背不带标的内容。 */
@media(max-width:720px){
  #petDeck .deckStage{perspective:1100px}
  #petDeck .deckCard{transform:translate3d(0,0,0);transform-style:flat;transform-origin:50% 78%}
  #petDeck .deckStack{position:absolute;top:6px;bottom:calc(env(safe-area-inset-bottom) + 90px);width:calc(100% - 56px);max-width:420px;z-index:0;pointer-events:none}
  #petDeck .deckStack[hidden],#petDeck .deckStack i[hidden]{display:none}
  #petDeck .deckStack i{position:absolute;inset:0;display:block;border-radius:28px;border:1px solid #65778f;background:linear-gradient(145deg,#354459,#151f30 55%,#29354a);box-shadow:2px 4px 0 #101825,0 14px 23px #0005;transform-origin:50% 82%}
  #petDeck .deckStack i:nth-child(1){transform:translate(-12px,5px) rotate(-2.6deg) scale(.985)}
  #petDeck .deckStack i:nth-child(2){transform:translate(13px,9px) rotate(2.4deg) scale(.975)}
  #petDeck .deckStack i:nth-child(3){transform:translate(-7px,13px) rotate(-1.6deg) scale(.965)}
  #petDeck .deckStack i:nth-child(4){transform:translate(9px,17px) rotate(1.8deg) scale(.955)}
  #petDeck .deckNeighbor{z-index:1}
}
@media(max-width:720px) and (max-height:680px){#petDeck .deckStack{top:10px;bottom:calc(env(safe-area-inset-bottom) + 66px)}}
@media(max-width:720px) and (prefers-reduced-motion:reduce){#petDeck .deckStage{perspective:none}}

/* 卡兜加号打开独立搜索，卡片之间留出滚动空隙。 */
.petAssetSearchDialog{position:fixed;inset:var(--mobile-viewport-top,0px) 0 auto;margin:24px auto;width:min(420px,calc(100% - 32px));max-height:calc(var(--mobile-viewport-height,100dvh) - 48px);box-sizing:border-box;padding:18px;border:1px solid #53667e;border-radius:20px;background:#142238;color:#e9f0fb;overflow:auto;box-shadow:0 20px 70px #0009}
.petAssetSearchDialog::backdrop{background:#08111dbb}
.petAssetSearchDialog>header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.petAssetSearchDialog>header label{font-size:17px;font-weight:650}
.petAssetSearchDialog>header button{width:44px;height:44px;border:0;border-radius:12px;background:#ffffff0b;color:#dbe8fa;font-size:25px}
.petAssetSearchDialog .petSearchField{position:static}
.petAssetSearchDialog #petOwnSearch{width:100%;box-sizing:border-box;min-height:48px;font-size:16px;background:#0e1a2c;color:#eef4ff;border:1px solid #627b98;border-radius:12px;padding:10px 12px}
.petAssetSearchDialog #petOwnResults{position:static;display:grid;gap:8px;margin-top:12px}
.petAssetSearchDialog #petOwnResults[hidden]{display:none}
.petAssetSearchDialog .petSearchResultCard{display:flex;align-items:center;gap:12px;min-height:64px;width:100%;box-sizing:border-box;text-align:left;padding:10px;border:1px solid #3b526a;border-radius:12px;background:#1c3047;color:#edf4ff}
.petAssetSearchDialog .petSearchResultCard>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.petAssetSearchDialog .petSearchResultCard strong{font-size:16px}.petAssetSearchDialog .petSearchResultCard small{font-size:12px;color:#b7c9dd}
.petAssetSearchDialog .petSearchResultCard .watchLogo,.petAssetSearchDialog .petSearchResultCard .assetLogo,.petAssetSearchDialog .petSearchResultCard .heroLogo{position:static;width:32px;height:32px;flex:0 0 32px}
.petAssetSearchDialog .petSearchResultCard .petSearchAdded{color:#b5dab6}
.petAssetSearchDialog .petSearchResultCard:disabled{opacity:.45}
.petAlreadyPuff{position:fixed;z-index:1100;pointer-events:none;white-space:nowrap;transform:translateX(-50%);padding:8px 12px;border-radius:20px;background:#e8edf0;color:#33495a;font-size:13px;box-shadow:0 0 18px #dce8ef66;animation:petPuffRise 1.2s ease-out both}
.petAlreadyPuff:before,.petAlreadyPuff:after{content:'';position:absolute;width:26px;height:22px;border-radius:50%;background:#e8edf0aa;filter:blur(4px);z-index:-1;top:-8px;left:8px}
.petAlreadyPuff:after{width:38px;height:27px;top:-13px;left:auto;right:6px}
@keyframes petPuffRise{0%{opacity:0;transform:translate(-50%,0) scale(.85)}15%{opacity:1}65%{opacity:.9}100%{opacity:0;transform:translate(-50%,-65px) scale(1.15);filter:blur(3px)}}
@media(prefers-reduced-motion:reduce){.petAlreadyPuff{animation:none}}

/* 缓慢后转，收拢牌堆与稳定 Logo 加载。 */
@media(max-width:720px){
  #petDeck .deckCard{transform-origin:50% 56%}
  #petDeck .deckCard:after{content:'';position:absolute;inset:.5px;border-radius:calc(var(--deck-edge-radius,24px) - .5px);border:.5px solid #d9e4f014;box-shadow:inset .5px .5px 0 #eef4ff25,inset -.5px -.5px 0 #050a1580;z-index:3;pointer-events:none}
  #petDeck .deckStack i{border-color:#4c5a70;box-shadow:1px 3px 0 #101825,0 10px 16px #0004}
  #petDeck .deckStack i:nth-child(1){transform:translate(5px,5px) rotate(.5deg) scale(.993)}
  #petDeck .deckStack i:nth-child(2){transform:translate(-4px,9px) rotate(-.6deg) scale(.986)}
  #petDeck .deckStack i:nth-child(3){transform:translate(5px,13px) rotate(.7deg) scale(.978)}
  #petDeck .deckStack i:nth-child(4){transform:translate(-3px,16px) rotate(-.5deg) scale(.970)}
}
.logoPending{background:radial-gradient(circle at 35% 30%,#53607866,#26324855 65%);border-radius:50%}
.logoArrived img{animation:logoSoftArrival 180ms ease-out both}
@keyframes logoSoftArrival{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.logoArrived img{animation:none}}

/* 人物候选：独立水晶玻璃柜，状态放在柜外名牌上。 */
@media(max-width:720px){
 #petManager .petChoices{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;align-items:start}
 #petManager .petChoice{display:flex;align-items:stretch;gap:0;padding:0 0 10px;border:0;background:transparent;border-radius:16px;box-shadow:none;opacity:1;overflow:visible;text-align:center}
 #petManager .petCrystalCabinet{position:relative;display:grid;place-items:center;isolation:isolate;aspect-ratio:5/6;padding:15px 10px 24px;box-sizing:border-box;border:1px solid #b5efff52;border-radius:18px 18px 12px 12px;background:linear-gradient(115deg,#dbfaff16,transparent 24%,#10243318 65%,#b4dcff12),radial-gradient(ellipse at 50% 92%,#83cee71e,transparent 62%);box-shadow:inset 2px 0 3px #e4ffff24,inset -2px 0 4px #bdbeff16,inset 0 1px #eaffff80,0 10px 18px #0004;overflow:hidden}
 #petManager .petCrystalCabinet:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(116deg,transparent 10%,#efffff15 11%,#efffff06 20%,transparent 21%,transparent 76%,#e2f8ff09 77%,transparent 80%);border:3px solid #d3edff09;border-radius:inherit}
 #petManager .petCrystalCabinet:after{content:'';position:absolute;inset:5px;z-index:2;pointer-events:none;border:1px solid #def6ff1c;border-radius:13px 13px 8px 8px;box-shadow:inset 1px 0 #c6ffff1a,inset -1px 0 #cbcbff18}
 #petManager .petCrystalCabinet svg{position:relative;z-index:1;display:block;max-width:none;width:100%;height:auto;aspect-ratio:1;overflow:visible;filter:drop-shadow(0 7px 5px #0004);opacity:1}
 #petManager .petCrystalCeiling{position:absolute;top:7px;left:12px;right:12px;height:5px;border:1px solid #d3ffff28;border-radius:50%;background:linear-gradient(90deg,transparent,#e7ffff26,transparent);box-shadow:0 8px 19px #9ddfff0c}
 #petManager .petCrystalPedestal{position:absolute;z-index:0;bottom:12px;left:15%;width:70%;height:16px;box-sizing:border-box;border-radius:50%;border:1px solid #c9faff5c;background:radial-gradient(ellipse,#e0fbff2b,#87b8e41a 58%,#556a892b);box-shadow:0 4px 0 #192a3b,0 5px 0 #bfe8f735,0 0 12px #8abbed20}
 #petManager .petChoice .petChoiceName{margin:10px 3px 4px;color:#d6e7f1;font-size:12px;font-weight:650;line-height:1.5}
 #petManager .petChoice .petChoiceStatus{position:static;display:block;margin:0 5px;padding:3px 5px;border:1px solid transparent;border-radius:7px;font-size:10px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#839cae;min-height:22px;box-sizing:border-box}
 #petManager .petChoice .petChoiceStatus.current{color:#f9e6ad;background:#e7b85f17;border-color:#e7c78240}
 #petManager .petChoice .petChoiceStatus.occupied{color:#a5b1c5;background:#a8badb0a;border-color:#a8badb18}
 #petManager .petChoice[aria-pressed="true"]{background:transparent;border:0;box-shadow:none}
 #petManager .petChoice[aria-pressed="true"] .petCrystalCabinet{border-color:#f6de9f;box-shadow:inset 0 1px #fff4d8,inset 2px 0 6px #ffe7bb21,0 0 0 1px #eed19c35,0 0 20px #d9bb7621,0 8px 16px #0005}
 #petManager .petChoice.used{background:transparent;border:0;box-shadow:none;opacity:1}
 #petManager .petChoice.used .petCrystalCabinet{border-color:#71879940;background:linear-gradient(115deg,#a8c3d609,transparent 35%,#0a162b30);box-shadow:inset 1px 0 3px #b7ced310,0 7px 14px #0003}
 #petManager .petChoice.used svg{filter:saturate(.25) brightness(.58) drop-shadow(0 5px 4px #0004);opacity:.7}
 #petManager .petChoice.used .petCrystalCeiling,#petManager .petChoice.used .petCrystalPedestal{opacity:.4}
 #petManager .petChoice.used .petChoiceName{color:#8695a5}
 #petManager .petChoice:focus-visible{outline:2px solid #a9eafa;outline-offset:4px}
}

/* 精细卡牌边缘：共用圆角、连续薄牌芯与覆膜倒角。 */
@media(max-width:720px){
  #petDeck{--deck-edge-radius:24px}
  #petDeck .deckCard{border-radius:var(--deck-edge-radius);isolation:isolate}
  #petDeck .deckFrame{border-radius:var(--deck-edge-radius);border:1px solid #adc0d133;background-clip:padding-box;box-shadow:inset 0 .5px 0 #f3f6ff24,inset .5px 0 0 #d9e5f014,inset 0 -1px 0 #0006;isolation:isolate}
  #petDeck .deckFrame:before{inset:0 0 auto;height:30%;border-radius:inherit;background:linear-gradient(160deg,#eff6ff06,transparent 68%)}
  #petDeck .deckNeighbor{border-radius:var(--deck-edge-radius);overflow:visible;background:transparent;box-shadow:1px 2px 0 #344153,0 3px 4px #0004}
  #petDeck .deckStack i{border-radius:var(--deck-edge-radius);border:.5px solid #8291a044;background:linear-gradient(145deg,#344054,#182234 55%,#243043);box-shadow:inset 0 .5px 0 #dfe8f025,1px 2px 0 #111a27,0 8px 14px #0003}
}

/* 连续实体牌芯：转动时侧边投影变宽，牌面倒角保持精细。 */
@property --deck-core-x{syntax:'<length>';inherits:true;initial-value:1.5px}
@media(max-width:720px){
  #petDeck .deckCard{transition:--deck-core-x 180ms ease-out}
  #petDeck .deckCard:before{background:linear-gradient(100deg,#738094,#354052 18%,#1b2637 64%,#738092);border:1px solid #8b9aaa55;transition:transform 180ms ease-out}
  #petDeck .deckNeighbor{box-shadow:1.5px 4px 0 #435063,1.5px 5px 0 #172232,0 7px 7px #0004}
}
@media(prefers-reduced-motion:reduce){#petDeck .deckCard:before{transition:none}}

/* 皮革卡兜右侧的宽幅金属滑轨。 */
@media(max-width:720px){
  #petManager .petPouchViewport{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:8px;align-items:stretch}
  #petManager .petPouchCards{scrollbar-width:none}
  #petManager .petPouchCards::-webkit-scrollbar{display:none}
  #petManager .petPouchScrollRail{position:relative;align-self:stretch;min-height:98px;border:1px solid #9b7351;border-radius:13px;background:linear-gradient(90deg,#261a14,#4e3526 55%,#302117);box-shadow:inset 0 2px 5px #0d0808aa,0 1px 0 #e0b88033;box-sizing:border-box;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;overflow:hidden}
  #petManager .petPouchScrollThumb{position:absolute;top:4px;left:4px;right:4px;min-height:0;border:1px solid #dec39988;border-radius:9px;background:linear-gradient(90deg,#806343,#c7a57a 45%,#a38054 75%,#6c5135);box-shadow:inset 0 1px 2px #ffedc488,0 3px 7px #0007;box-sizing:border-box;pointer-events:none}
  #petManager .petPouchScrollThumb:after{content:'';position:absolute;top:50%;left:4px;right:4px;height:12px;transform:translateY(-50%);background:repeating-linear-gradient(180deg,#463221bb 0 1px,#e8cda055 1px 2px,transparent 2px 5px);border-radius:2px}
  #petManager .petPouchScrollRail.dragging .petPouchScrollThumb{filter:brightness(1.15)}
  #petManager .petPouchScrollRail:focus-visible{outline:2px solid #e8c99a;outline-offset:2px}
  #petManager .petPouchScrollRail.inactive{opacity:.45;cursor:default}
}

/* 手机页面共用低细节蓝灰星云底，角色和行情保持前景主角。 */
@media(max-width:720px){
 #petHome,#petDeck,#petManager,body.petManagerOpen:before,html[data-theme] #authDialog,html[data-theme] #mobilePasswordPage,#authDialog,#mobilePasswordPage,html[data-theme] #authDialog::backdrop,html[data-theme] #mobilePasswordPage::backdrop{background-color:#263c58;background-image:linear-gradient(180deg,#162c4666,#1c355477),url('/assets/icons/crypto/crystalbg.png?v=20261012-crystal43');background-size:cover;background-position:center}
 #petHome .petHead,#petDeck .deckHead,#petManager .petManagerHead{background:linear-gradient(180deg,#2b435c55,#2b435c00)}
 #petDeck .deckHead{border-bottom:0}
 #petManager .petManagerHead{border-bottom:1px solid #d6e7f00c}
 #authDialog .authPanel{background:transparent}
 #authDialog .authMascot{background:radial-gradient(ellipse at 50% 70%,#b2e3f020,transparent 65%)}
 #petManager .petNameRow input,#petManager .petNameRow button{background-color:#2c435be6;border-color:#c5dfed35;color:#f1f5fb}
 #petManager .petSearchField input{background-color:#2c435be6;border-color:#c5dfed35}
 #petHome .petName{color:#f3f7fd;text-shadow:0 1px 3px #17304799}
 #petHome .petCountText{color:#ccdae7}
}

/* 牌芯略厚、后层细化；手机返回箭头统一居中。 */
@media(max-width:720px){
  #petDeck .deckNeighbor{box-shadow:1.5px 5px 0 #4e5b70,1.5px 6px 0 #172232,0 8px 9px #0004}
  #petDeck .deckStack i{box-shadow:inset 0 .5px 0 #dfe8f025,1px 2px 0 #536176,1px 3px 0 #111a27,0 8px 14px #0003}
  .mobilePageBack,.deckBack,.petManagerBack,.mobileClassicBack,.mobilePasswordHeading button,#petNewsBack{display:grid;place-items:center;box-sizing:border-box;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;line-height:0;gap:0;align-self:center}
  #petManager .petManagerBack{display:grid;place-items:center;min-height:44px;padding:0!important;line-height:0}
  .mobilePageBack svg,.deckBack svg,.petManagerBack svg,.mobileClassicBack svg,.mobilePasswordHeading button svg,#petNewsBack svg{display:block;width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  #authDialog #authSigned>p:not(.authError){position:relative;border-bottom:0}
  #authDialog #authSigned>p:not(.authError):after{content:'';position:absolute;bottom:0;left:16px;right:16px;height:1px;background:var(--line);pointer-events:none}
}

/* Logo 是牌面图案：触摸反馈不描出按钮矩形。 */
@media(max-width:720px){
  #petDeck button.deckLogo,#petDeck button.deckLogo:active,#petDeck button.deckLogo:focus,#petDeck button.deckLogo.touchPressed,#petDeck button.deckLogo.touchReleased{background:transparent;border:0;box-shadow:none;outline:none;scale:1;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 5px 8px #0004)}
  #petDeck .deckLogo.touchPressed>.heroLogo{animation:none;transform:translateY(2px) scale(.96);filter:brightness(1.08)}
  #petDeck .deckLogo:focus-visible>.heroLogo{outline:1px solid #d9e9dd;outline-offset:4px;border-radius:50%}
  #petDeck .deckLogo.deckInfoLoading>.heroLogo{animation:deckInfoGlow 1.6s ease-in-out infinite}
  #petDeck .deckLogo .logoPending{background:transparent;box-shadow:none}
  #petDeck .deckInfoHint{position:absolute;bottom:5px;left:8px;right:8px;color:#c8d5dd;font-size:10px;line-height:1.4;text-align:center;pointer-events:none}
}
@keyframes deckInfoGlow{0%,100%{filter:brightness(1);transform:translateY(0)}50%{filter:brightness(1.12);transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){#petDeck .deckLogo.deckInfoLoading>.heroLogo{animation:none}}
@media(max-width:720px){
 /* Keyboard overlays the stable panel; no focus-triggered mascot or panel reflow. */
 .petAssetSearchDialog #petOwnResults{padding-bottom:12px}
}
@media(max-width:720px){
  .authPetPicker{min-width:0;margin:8px 0 4px;padding:12px;border:1px solid #9eafc733;border-radius:16px}
  .authPetPicker[hidden]{display:none}
  .authPetPicker legend{color:#c5d6e9;font-size:13px;padding:0 6px}
  .authPetChoices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .authPetChoices button{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:6px 2px;border:1px solid transparent;border-radius:12px;background:#ffffff06;color:#cbd8ea}
  .authPetChoices button[aria-pressed="true"]{background:#b9d6e418;border-color:#e8cc91;box-shadow:inset 0 0 12px #e6d8a511}
  .authPetChoices img{width:56px;height:56px;object-fit:contain}.authPetChoices span{font-size:10px;line-height:1.4;text-align:center}
}

/* 移动端修正：页头透出背景，牌面与进度使用同一套空间。 */
@media(max-width:720px){
  #petDeck .deckHead{background:transparent;box-shadow:none;backdrop-filter:none}
  #petDeck:not(.deckChartMode) .deckStage{padding:8px 0 calc(env(safe-area-inset-bottom) + 32px);gap:16px}
  #petDeck:not(.deckChartMode) .deckCount{margin:0;height:34px;flex:0 0 34px}
  #petDeck:not(.deckChartMode) .deckNeighbor,#petDeck:not(.deckChartMode) .deckStack{top:8px;bottom:calc(env(safe-area-inset-bottom) + 82px)}
  #petDeck:not(.deckChartMode) .deckCard{animation:deckQuietSway 4.8s ease-in-out infinite}
  #petDeck .deckCard[data-busy="1"],#petDeck .deckCard.deckDragging{animation-play-state:paused}
  #petDeck .deckBody{flex:1;justify-content:space-evenly;min-height:0}
  #petDeck .deckLogo{position:relative;z-index:5;min-width:76px;min-height:76px;touch-action:manipulation}
  #petDeck .deckLogo>*{pointer-events:none}
  #authDialog:has(#authSigned:not([hidden])){overflow:hidden;overscroll-behavior:none;touch-action:none}
  #authDialog:has(#authSigned:not([hidden])) .authPanel{height:calc(100% - 64px);overflow:hidden;padding-top:8px;padding-bottom:12px}
  #authDialog:has(#authSigned:not([hidden])) .authMascot{height:clamp(80px,19dvh,150px);margin-bottom:8px}
  #authDialog:has(#authSigned:not([hidden])) .authMascot:after{width:140px;height:140px}
  #authDialog #accountAvatarDetails[open]{min-height:0;overflow:auto;max-height:38dvh;touch-action:pan-y;overscroll-behavior:contain}
}
@keyframes deckQuietSway{0%,100%{rotate:-.45deg;translate:-1px 0}50%{rotate:.45deg;translate:1px -4px}}
@media(prefers-reduced-motion:reduce){#petDeck:not(.deckChartMode) .deckCard{animation:none}}

/* 修改密码入口、关闭与返回控件不显示焦点亮框或触摸光圈。 */
#authDialog #passwordDetails>summary,
#authDialog .dialogClose,
#authDialog .mobilePasswordHeading button,
#authDialog>.mobilePageHeader .mobilePageBack,
#mobilePasswordPage .mobilePageBack,
#mobilePasswordPage .dialogClose{
  outline:none!important;
  box-shadow:none!important;
  -webkit-tap-highlight-color:transparent;
}
#authDialog .dialogClose,
#authDialog .mobilePasswordHeading button,
#authDialog>.mobilePageHeader .mobilePageBack,
#mobilePasswordPage .mobilePageBack,
#mobilePasswordPage .dialogClose{
  background:transparent!important;
  border:0!important;
}

/* 操作提示：整条提示持续上浮，逐渐淡化消散，连续点击形成独立提示串。 */
.petAlreadyPuff.petNoticePuff{left:50%;top:calc(var(--mobile-viewport-top,0px) + env(safe-area-inset-top) + 96px);z-index:2147483000;width:max-content;max-width:calc(100vw - 48px);box-sizing:border-box;white-space:normal;text-align:center;line-height:1.5;animation:petNoticeSmoke 2.4s linear both}
.petNoticePuff:before,.petNoticePuff:after{content:none;animation:none}
@keyframes petNoticeSmoke{0%{opacity:0;transform:translate(-50%,8px) scale(.98);filter:blur(0)}10%{opacity:1;transform:translate(-50%,0) scale(1);filter:blur(0)}50%{opacity:.8;transform:translate(-50%,-32px) scale(1.02);filter:blur(.3px)}100%{opacity:0;transform:translate(-50%,-72px) scale(1.08);filter:blur(4px)}}
@media(prefers-reduced-motion:reduce){.petAlreadyPuff.petNoticePuff{animation:none}.petNoticePuff:before,.petNoticePuff:after{animation:none}}

/* 翻动的牌沿可越过舞台边界，屏幕外仍由整页裁切。 */
@media(max-width:720px){
  #petDeck:not(.deckChartMode){overflow:hidden}
  #petDeck:not(.deckChartMode) .deckStage{overflow:visible;padding-top:18px}
  #petDeck:not(.deckChartMode) .deckNeighbor,#petDeck:not(.deckChartMode) .deckStack{top:18px}
  #petDeck:not(.deckChartMode) .deckStage:before,#petDeck:not(.deckChartMode) .deckStage:after{display:none;content:none}
}

/* 邻牌与正面保持同相位的轻摆，接替时不重新启动动画。 */
@media(max-width:720px){
  #petDeck:not(.deckChartMode) .deckNeighbor{animation:deckQuietSway 4.8s ease-in-out infinite}
  #petDeck .deckStage:has(.deckCard[data-busy="1"]) .deckNeighbor,
  #petDeck .deckStage:has(.deckCard.deckDragging) .deckNeighbor{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){#petDeck:not(.deckChartMode) .deckNeighbor{animation:none}}

/* 未开放的两个形象：荧光玻璃柜内仅展示黑色剪影。 */
@media(max-width:720px){
  .petComingSoon{--mystery-glow:#65eced;display:flex;flex-direction:column;text-align:center;gap:8px;pointer-events:none;opacity:1!important}
  .petComingSoon.violet{--mystery-glow:#bd96ff}
  .petComingSoon .petCrystalCabinet{position:relative;display:grid;place-items:center;isolation:isolate;aspect-ratio:5/6;padding:15px 10px 24px;box-sizing:border-box;overflow:hidden;border:1px solid color-mix(in srgb,var(--mystery-glow) 45%,transparent);border-radius:18px 18px 12px 12px;background:linear-gradient(115deg,#dbfaff18,transparent 28%,#0c172c55 68%,#b4dcff12);box-shadow:inset 2px 0 4px #e4ffff22,0 0 18px color-mix(in srgb,var(--mystery-glow) 12%,transparent)}
  .petComingSoon .petMysteryGlow{position:absolute;inset:8% 6%;z-index:0;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--mystery-glow) 48%,transparent),transparent 70%)}
  #petManager .petComingSoon .petCrystalCabinet svg,.petComingSoon .petCrystalCabinet svg{position:relative;z-index:1;width:100%;height:auto;fill:#08111e;filter:drop-shadow(0 0 8px var(--mystery-glow));opacity:.96}
  .petComingSoon .petChoiceName{color:#c3d8e5;font-size:12px;line-height:1.5;letter-spacing:.08em}
  .authPetChoices .petComingSoon{grid-column:span 2;padding:6px 12px}
  .authPetChoices .petComingSoon .petCrystalCabinet{width:100%;max-width:130px;align-self:center}
  .authPetChoices .petComingSoon .petCrystalCeiling{position:absolute;top:8px;left:15%;right:15%;height:3px;border-radius:50%;background:var(--mystery-glow);opacity:.5}
  .authPetChoices .petComingSoon .petCrystalPedestal{position:absolute;bottom:12px;left:15%;right:15%;height:12px;border-radius:50%;border:1px solid var(--mystery-glow);background:#bcefff18;box-shadow:0 0 12px color-mix(in srgb,var(--mystery-glow) 35%,transparent)}
}

/* 个人页：身份信息成组，操作入口留白，减少逐行分隔线。 */
@media(max-width:720px){
  #authDialog:not(.mobilePasswordView):has(#authSigned:not([hidden]))>.mobilePageHeader{background:transparent;border-bottom:0}
  #authDialog:not(.mobilePasswordView) #authSigned{gap:10px;max-width:420px;margin:0 auto}
  #authDialog:not(.mobilePasswordView) #authSigned p{border:0;padding:0}
  #authDialog:not(.mobilePasswordView) #authSigned>p:not(.authError){display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;background:#dceaff0b;color:#c2d1e0;font-size:13px;line-height:1.5}
  #authDialog:not(.mobilePasswordView) #authSigned>p:not(.authError):after{content:none}
  #authDialog:not(.mobilePasswordView) #authSigned>p:has(#authSignedName){border-radius:18px 18px 0 0;padding-bottom:9px}
  #authDialog:not(.mobilePasswordView) #authSigned>p:has(#accountId){margin-top:-10px;border-radius:0 0 18px 18px;padding-top:9px;margin-bottom:8px}
  #authDialog #authSignedName{font-size:16px;font-weight:600;color:#f0f5fb;text-align:right;overflow-wrap:anywhere}
  #authDialog #accountId{font-size:12px;color:#bdccdc;overflow-wrap:anywhere;text-align:right;min-width:0}
  #authDialog:not(.mobilePasswordView) #accountAvatarDetails,
  #authDialog:not(.mobilePasswordView) #passwordDetails{margin:0;padding:0 16px;border:0;border-radius:16px;background:#dceaff0b}
  #authDialog:not(.mobilePasswordView) #accountAvatarDetails>summary,
  #authDialog:not(.mobilePasswordView) #passwordDetails>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:0;border:0;background:transparent;font-size:15px;font-weight:500;color:#edf3fa;list-style:none;cursor:pointer}
  #authDialog #accountAvatarDetails>summary::-webkit-details-marker{display:none}
  #authDialog:not(.mobilePasswordView) #accountAvatarDetails>summary:after{content:'›';font-size:24px;color:#aebfd0;transition:rotate .2s ease}
  #authDialog #accountAvatarDetails[open]>summary:after{rotate:90deg}
  #authDialog #accountAvatarDetails[open]{padding-bottom:14px}
  #authDialog #accountAvatarDetails>p{margin:8px 0;font-size:12px;line-height:1.5;color:#bfcede}
  #authDialog #accountAvatarChoices{margin:12px 0}
  #authDialog #accountAvatarSave{margin-top:4px;width:100%;min-height:42px;border-radius:12px}
  #authDialog:not(.mobilePasswordView) #authSignedError:empty{display:none}
  #authDialog:not(.mobilePasswordView) #authLogout{margin-top:14px;min-height:46px;border:0;border-radius:14px;background:#dceaff08;color:#c9d6e5;font-size:14px}
  /* 报纸轻轻迎风倾斜、起伏；只动画图标，不移动按钮与文字。 */
  #petHome .petHomeNews img{transform-origin:50% 85%;animation:petPaperBreeze 4.8s ease-in-out infinite;backface-visibility:hidden}
}
@keyframes petPaperBreeze{
  0%,100%{transform:translateY(0) rotate(-8deg) skewX(0)}
  28%{transform:translateY(-1.5px) rotate(-3deg) skewX(-2deg)}
  48%{transform:translateY(-.5px) rotate(-6deg) skewX(1deg)}
  72%{transform:translateY(-2px) rotate(-11deg) skewX(2deg)}
}
@media(prefers-reduced-motion:reduce){#petHome .petHomeNews img{animation:none}#authDialog #accountAvatarDetails>summary:after{transition:none}}

/* 下一张牌从纵深内侧浮向展示平面，透视提供逐渐靠近的体积感。 */
@media(max-width:720px){
  #petDeck:not(.deckChartMode) .deckStage{perspective:1000px;perspective-origin:50% 45%}
  #petDeck:not(.deckChartMode) .deckNeighbor{transform-origin:50% 50%;will-change:transform}
}
@media(max-width:720px) and (prefers-reduced-motion:reduce){#petDeck:not(.deckChartMode) .deckStage{perspective:none}}

/* Logo 主辅色融入牌面，暗底保留文字对比；同色品牌用渐变比例细分。 */
@media(max-width:720px){
 #petDeck .deckArt{background:radial-gradient(ellipse at 18% 12%,hsl(var(--hue) var(--card-saturation,18%) 43%/.75),transparent 65%),linear-gradient(135deg,hsl(var(--hue) var(--card-saturation,18%) var(--card-lightness,27%)),hsl(var(--card-secondary-hue,220) var(--card-secondary-saturation,14%) 24%) var(--card-color-mix,45%),hsl(var(--hue) 24% 12%))}
 #petDeck .deckFrame{background:radial-gradient(ellipse at 100% 0%,hsl(var(--card-secondary-hue,220) var(--card-secondary-saturation,14%) 24%/.25),transparent 58%),linear-gradient(155deg,hsl(var(--hue) 18% 18%),#111722 55%,#080e19)}
}

/* 实体卡牌：减小浮动幅度，独立牌边与分层投影。 */
@media(max-width:720px){
  #petDeck:not(.deckChartMode) .deckCard,#petDeck:not(.deckChartMode) .deckNeighbor{animation-duration:5.2s}
  #petDeck .deckCard:before{transform:translate(var(--deck-core-x,1.5px),8px);border-color:#9caec077;box-shadow:0 1px 0 #b5c5d488,0 3px 0 #4d5e72,0 5px 0 #182334,0 9px 12px #0006,0 20px 28px #0004}
  #petDeck .deckNeighbor{box-shadow:1.5px 5px 0 #8190a3,1.5px 8px 0 #354459,1.5px 10px 0 #121c2c,0 16px 22px #0006}
  #petDeck .deckStack i{border:1px solid #91a4b066;box-shadow:inset 0 1px 0 #e3eff044,1px 3px 0 #7b8ca0,1px 6px 0 #344458,1px 8px 0 #111a27,0 13px 17px #0005}
  #petDeck .deckStack i:nth-child(1){transform:translate(7px,8px) rotate(.8deg) scale(.99)}
  #petDeck .deckStack i:nth-child(2){transform:translate(-6px,15px) rotate(-.9deg) scale(.98)}
  #petDeck .deckStack i:nth-child(3){transform:translate(7px,22px) rotate(1deg) scale(.97)}
  #petDeck .deckStack i:nth-child(4){transform:translate(-5px,29px) rotate(-.8deg) scale(.96)}
}
@keyframes deckQuietSway{0%,100%{rotate:-.5deg;translate:-3.5px .5px}50%{rotate:.5deg;translate:3.5px -2px}}

/* 随机动作在人物层播放，与拖动、翻身和卡兜反馈的外层变换分开。 */
@media(max-width:720px){#petHome .petModel{transform-origin:50% 76%;backface-visibility:hidden}}

/* 卡牌独立实体：只保留当前牌与真实邻牌，统一牌芯厚度和前后遮挡。 */
@media(max-width:720px){
  #petDeck:not(.deckChartMode) .deckStack{display:none!important}
  #petDeck:not(.deckChartMode) .deckCard,
  #petDeck:not(.deckChartMode) .deckNeighbor{
    isolation:isolate;
    border-radius:var(--deck-edge-radius,24px);
    box-shadow:0 9px 14px #0005,0 20px 28px #0003;
  }
  #petDeck:not(.deckChartMode) .deckCard:before,
  #petDeck:not(.deckChartMode) .deckNeighbor:before{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
    border:.5px solid #62718466;
    background:linear-gradient(90deg,#49596c,#2b384a 28%,#1b2637 50%,#2b384a 72%,#49596c);
    transform:translate(0,9px) scaleX(1.015);
    box-shadow:inset 0 -2px 1px #070d18a0,inset 1px 0 1px #9aafc055,inset -1px 0 1px #9aafc055,0 1px 0 #111b2b;transition:none;
  }
  #petDeck:not(.deckChartMode) .deckFrame{box-sizing:border-box}
  #petDeck:not(.deckChartMode) .deckNeighbor.previous,
  #petDeck:not(.deckChartMode) .deckNeighbor.next{z-index:1}
  #petDeck:not(.deckChartMode) .deckCard:after{box-shadow:inset 0 .5px 0 #eef4ff25,inset .5px 0 0 #d9e4f014,inset -.5px 0 0 #d9e4f014,inset 0 -.5px 0 #050a1580}
  #petDeck:not(.deckChartMode) .deckNeighbor.deckNeighborInactive{visibility:hidden}
}

/* 动作时才显示表情；结束和触摸取消恢复原插画神态。 */
#petHome .petExpression{pointer-events:none}
.petExpression>g{opacity:0;transition:opacity 140ms ease}
#petHome .petModel[data-pet-mood="happy"] .petMoodHappy,
#petHome .petModel[data-pet-mood="excited"] .petMoodHappy,
#petHome .petModel[data-pet-mood="wink"] .petMoodHappy,
#petHome .petModel[data-pet-mood="focused"] .petMoodFocused,
#petHome .petModel[data-pet-mood="curious"] .petMoodCurious,
#petHome .petModel[data-pet-mood="surprised"] .petMoodCurious{opacity:1}
#petHome .petModel[data-pet-mood="excited"] .petMoodSpark,
#petHome .petModel[data-pet-mood="curious"] .petMoodQuestion,
#petHome .petModel[data-pet-mood="surprised"] .petMoodSurprised{opacity:1;animation:petMoodAccent 850ms ease-in-out 2}
#petHome .petModel[data-pet-mood="wink"] .petMoodHappy{animation:petMoodWink 900ms ease-in-out 2}
@keyframes petMoodAccent{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes petMoodWink{0%,15%,75%,100%{opacity:0}28%,58%{opacity:1}}
@media(prefers-reduced-motion:reduce){#petHome .petExpression{display:none}}

/* 卡兜作为随身挂件：与身体共用动作层，各体型使用独立挂点。 */
.petRig{position:relative;display:block;width:100%;height:100%;transform-origin:50% 76%;backface-visibility:hidden}
@media(max-width:720px){
  #petHome .petSlot,.petDragGhost{--pouch-right:9%;--pouch-bottom:19%;--pouch-size:22%;--pouch-angle:3deg}
  #petHome .petSlot[data-pet-kind="0"],.petDragGhost[data-pet-kind="0"]{--pouch-right:10%;--pouch-bottom:20%}
  #petHome .petSlot[data-pet-kind="1"],.petDragGhost[data-pet-kind="1"]{--pouch-right:5%;--pouch-bottom:18%}
  #petHome .petSlot[data-pet-kind="2"],.petDragGhost[data-pet-kind="2"]{--pouch-right:14%;--pouch-bottom:25%;--pouch-size:20%;--pouch-angle:0deg}
  #petHome .petSlot[data-pet-kind="3"],.petDragGhost[data-pet-kind="3"]{--pouch-right:11%;--pouch-bottom:20%}
  #petHome .petSlot[data-pet-kind="4"],.petDragGhost[data-pet-kind="4"]{--pouch-right:15%;--pouch-bottom:19%;--pouch-angle:-5deg}
  #petHome .petSlot[data-pet-kind="5"],.petDragGhost[data-pet-kind="5"]{--pouch-right:11%;--pouch-bottom:18%;--pouch-angle:0deg}
  #petHome .petSlot[data-pet-kind="6"],.petDragGhost[data-pet-kind="6"]{--pouch-right:12%;--pouch-bottom:20%;--pouch-size:20%}
  #petHome .petSlot[data-pet-kind="7"],.petDragGhost[data-pet-kind="7"]{--pouch-right:10%;--pouch-bottom:22%;--pouch-angle:-4deg}
  #petHome .petPocket,.petDragGhost .petPocket{
    right:var(--pouch-right);bottom:var(--pouch-bottom);width:var(--pouch-size);height:auto;aspect-ratio:1.05;
    box-sizing:border-box;border:1px solid #624729;border-radius:7px 7px 10px 10px;z-index:2;
    transform:rotate(var(--pouch-angle));transform-origin:20% 0;animation:none;
    background:linear-gradient(140deg,#ba9467,#926b42 55%,#765232);
    box-shadow:-1px 1px 2px #10182755,inset 0 1px #e4c79c66,inset 0 -1px #51381e55;
  }
  #petHome .petPocket:before,.petDragGhost .petPocket:before{content:none;display:none}
  #petHome .petPocketStrap,.petDragGhost .petPocketStrap{
    top:-13px;left:-4px;right:auto;bottom:auto;width:8px;height:18px;border:0;border-left:2px solid #906b43;
    border-radius:6px 0 0 0;transform:rotate(-20deg);transform-origin:100% 100%;box-shadow:none;z-index:-1;
  }
  #petHome .petPocketCount,.petDragGhost .petPocketCount{font-size:11px;font-weight:650;text-shadow:0 1px 1px #48331d80}
  .petDragGhost .petRig{position:absolute;inset:0;transform:none;animation:none}
}

/* 每次触发保留已有提示，并向上让出下一条的位置。 */
.petAlreadyPuff.petNoticePuff{transition:top 180ms ease-out}
@media(prefers-reduced-motion:reduce){.petAlreadyPuff.petNoticePuff{transition:none}}

/* 空位沿用原有位置和点击范围，仅换成青色全息投影底座。 */
@media(max-width:720px){
 #petHome .petSlot.empty .petVacancyLight{filter:drop-shadow(0 0 2px #48f5e799) drop-shadow(0 0 5px #1adbd866)}
}

/* 仅有宠物的动作位临时换地面；空位全息底座保持原样。 */
#petHome .petActionScene{position:absolute;inset:auto -12px -9px;height:76px;display:block;pointer-events:none;opacity:0;transition:opacity 180ms ease;overflow:visible}
#petHome .petActionScene svg{display:block;width:100%;height:100%;overflow:visible}
@media(max-width:720px){
 #petHome .petSlot:not(.empty)[data-action-scene] .petActionScene{opacity:1}
 #petHome .petSlot:not(.empty)[data-action-scene] .petIsland{background:transparent;border-color:transparent;box-shadow:none}
 #petHome .petSlot:not(.empty)[data-action-scene] .petSceneDust{transform-box:fill-box;transform-origin:center;animation:petSceneDust 850ms ease-out 2}
 #petHome .petSlot[data-action-scene="nebula"] .petSceneMist{animation:petSceneMist 1.1s ease-in-out 2}
 #petHome .petSlot[data-action-scene="orbit"] .petSceneOrbit{animation:petSceneOrbit 1.1s ease-in-out 2}
}
@keyframes petSceneDust{0%{opacity:0;transform:translateY(0) scale(.7)}35%{opacity:.7}100%{opacity:0;transform:translateY(-9px) scale(1.25)}}
@keyframes petSceneMist{0%,100%{opacity:.35;transform:translateX(-2px)}50%{opacity:.85;transform:translateX(2px)}}
@keyframes petSceneOrbit{0%,100%{opacity:.4}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){#petHome .petActionScene{display:none}}

/* 按住与拖动保留原图比例，拖动副本绝不显示动作表情。 */
.petDragGhost .petExpression{display:none!important}
#petHome .petHolding .petExpression,#petHome .petDragging .petExpression{display:none!important}
#petHome .petHolding .petFloat,#petHome .petDragging .petFloat{animation:none!important;transform:none!important}

/* 卡兜固定在名字旁，离开人物动作层，避免穿模。 */
@media(max-width:720px){
 #petHome .petLabelRow{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;max-width:100%;height:28px}
 #petHome .petLabelRow .petName{min-width:0;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #petHome .petLabelRow .petPocket{position:relative;inset:auto;flex:0 0 24px;width:24px;height:24px;aspect-ratio:auto;transform:none;animation:none}
 #petHome .petLabelRow .petPocket:before{content:none;display:none}
 #petHome .petLabelRow .petPocketCount{font-size:10px}
}

/* 手机只为当前界面绘制动效，减少后台页面和多层合成的开销。 */
@media(max-width:720px){
 #petHome .petTilt,#petHome .petFlipper,#petHome .petFloat{will-change:auto}
 body:has(#petDeck:not([hidden])) #petHome *,body.petManagerOpen #petHome *,body:has(dialog[open]) #petHome *{animation-play-state:paused!important}
}
html[data-page-hidden="true"] *{animation-play-state:paused!important}

/* 全屏背景与安全区分开：背景铺满，控件避开状态栏、刘海与底部手势区。 */
:root{--ui-safe-top:env(safe-area-inset-top,0px);--ui-safe-bottom:env(safe-area-inset-bottom,0px)}
html[data-device="phone"]{--ui-safe-top:max(env(safe-area-inset-top,0px),24px)}
@media(max-width:720px){
 html{min-height:100%;background:#263c58 url('/assets/icons/crypto/crystalbg.png?v=20261012-crystal43') center/cover no-repeat}
 body{min-height:100dvh;background:transparent}
 #petHome,#petDeck,#petManager{background-size:cover;background-repeat:no-repeat;background-position:center;box-sizing:border-box}
 #petHome .petHead{padding-top:calc(var(--ui-safe-top) + 10px);min-height:calc(var(--ui-safe-top) + 92px)}
 #petDeck .deckHead,#petManager .petManagerHead,.petNewsDialog .petNewsHead{padding-top:calc(var(--ui-safe-top) + 12px)}
 dialog.detailDialog>.mobilePageHeader{padding-top:calc(var(--ui-safe-top) + 12px);min-height:calc(var(--ui-safe-top) + 60px)}
 #petHome .petStage{padding-bottom:calc(var(--ui-safe-bottom) + 16px)}
 /* 卡牌及 K 线模式复用同一几何布局，页头、Logo、报价和进度不跳位。 */
 #petDeck .deckStage{padding:18px 0 calc(var(--ui-safe-bottom) + 32px);gap:16px;overflow:visible;perspective:1000px}
 #petDeck .deckCount{margin:0;height:34px;flex:0 0 34px}
 #petDeck:not(.deckChartMode) .deckCard,#petDeck.deckChartMode .deckCard{animation:deckQuietSway 5.2s ease-in-out infinite;border-radius:24px;box-shadow:2px 9px 0 #17202c,3px 12px 9px #060b1460,0 22px 34px #0005}
 #petDeck.deckChartMode .deckNeighbor,#petDeck.deckChartMode .deckStack{display:none!important}
 #petDeck .deckFrame{box-sizing:border-box;border:1px solid #b5c3cf55;box-shadow:inset 0 1px 0 #edf4fa40,inset 1px 0 0 #d0dce514,inset 0 -1px 0 #0008;border-radius:24px}
 #petDeck:not(.deckChartMode) .deckCard:before,#petDeck.deckChartMode .deckCard:before{inset:0;transform:translate(3px,7px);background:linear-gradient(90deg,#586574,#293542 25%,#131d29 65%,#465464);border:1px solid #778b9d80;border-radius:24px;box-shadow:0 2px 0 #101923;transition:none}
 #petDeck .deckBody,#petDeck.deckChartMode .deckBody{justify-content:flex-start;gap:8px}
 #petDeck .deckPriceRow{flex:0 0 auto}
 #petDeck.deckChartMode .deckChartView{display:flex;flex-direction:column;gap:6px;flex:1 1 0;min-height:0;overflow:hidden;width:100%}
 #petDeck.deckChartMode .deckChartView .deckPeriods{display:flex;flex-wrap:wrap;gap:4px;margin:0;flex:none}
 #petDeck.deckChartMode .deckPeriods button{min-height:30px;padding:4px 8px;border-radius:8px;background:#ffffff07;border:1px solid #b4c8dc19;color:#aabacc;font-size:11px}
 #petDeck.deckChartMode .deckPeriods button.active{background:#93b5cb20;border-color:#bed4e855;color:#eff6fc;box-shadow:none}
 #petDeck.deckChartMode .deckMaControls{margin:0;gap:6px}
 #petDeck.deckChartMode .deckMaControls button{min-height:26px;padding:3px 6px;background:transparent;border:0}
 #petDeck.deckChartMode .deckChartView .chartBox{flex:1 1 0;min-height:0;height:auto;width:100%;margin:0;border-radius:12px;border:1px solid #c5d7e51c;background:linear-gradient(180deg,#14202c,#0e1722);box-shadow:inset 0 1px 0 #d3e4f40b}
 #petDeck.deckChartMode .deckChartView .chartBox canvas{display:block;width:100%;height:100%}
 #petDeck .deckLogo,#petDeck .deckArt{flex-shrink:0}
 #petHome button.petBrandBadge{padding:0;margin:0;border:0;background:transparent;box-shadow:none;color:inherit;cursor:pointer}
 #petHome button.petBrandBadge:focus-visible{outline:1px solid #d9eaf1;outline-offset:3px;border-radius:12px}
}
/* 卷轴外框和双轴固定，只有纸面在两端之间卷动。 */
.petLoreDialog{color:#3d3024}
#petLoreDialog[open]{display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none}
#petLoreDialog>.mobilePageHeader{flex:0 0 auto;position:relative}
.petLoreScroll{--roll-phase:0px;--roll-progress:0;position:relative;flex:1 1 0;min-height:0;margin:20px 12px calc(var(--ui-safe-bottom) + 26px);padding:0;isolation:isolate;filter:drop-shadow(0 12px 16px #0007)}
.petLoreViewport{position:absolute;inset:14px 10px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:none;background:#b28c54;border-inline:1px solid #6a4627;outline:none}
.petLoreViewport::-webkit-scrollbar{display:none}
.petLoreViewport:focus,.petLoreViewport:focus-visible{outline:none;box-shadow:none}
.petLoreViewport:focus-visible .petLoreIntro h2{text-decoration:none}
.petLorePaper{box-sizing:border-box;min-height:100%;padding:32px 20px 38px;
 background:radial-gradient(ellipse at 0 3%,#58371275,transparent 26%),radial-gradient(ellipse at 100% 13%,#70411362,transparent 23%),radial-gradient(ellipse at 10% 38%,#76511e28,transparent 15%),radial-gradient(ellipse at 76% 63%,#714c252f,transparent 18%),radial-gradient(ellipse at 97% 98%,#5431136b,transparent 24%),radial-gradient(ellipse at 28% 24%,#71482118,transparent 9%),radial-gradient(ellipse at 56% 79%,#6845211c,transparent 12%),repeating-linear-gradient(17deg,#3b260d05 0 .5px,transparent .5px 6px),repeating-linear-gradient(153deg,#5b381404 0 .5px,transparent .5px 9px),linear-gradient(90deg,#96713e,#c7a86b 5%,#dcc28b 18%,#d8be83 62%,#c4a065 94%,#8e6538);
 box-shadow:inset 10px 0 18px #57361538,inset -10px 0 18px #57361538;color:#47321d}
.petLoreScroll:before,.petLoreScroll:after{content:'';position:absolute;left:10px;right:10px;height:30px;z-index:3;pointer-events:none}
.petLoreScroll:before{top:14px;height:calc(22px + 12px * var(--roll-progress));background:linear-gradient(180deg,#39220cc7,#66431870 25%,#d5b78030 70%,transparent)}
.petLoreScroll:after{bottom:14px;height:calc(34px - 12px * var(--roll-progress));background:linear-gradient(0deg,#39220cc7,#66431870 25%,#d5b78030 70%,transparent)}
.petLoreRoll{position:absolute;left:0;right:0;height:30px;z-index:4;border:1px solid #38200e;border-radius:12px;background:linear-gradient(180deg,#29190f,#5b3c22 18%,#a17c44 37%,#856038 51%,#4b2d19 78%,#24150c);box-shadow:inset 0 1px #c5a16a80,inset 0 -2px #1d100bcc,0 4px 7px #0006;pointer-events:none}
.petLoreRollTop{top:0}.petLoreRollBottom{bottom:0}
.petLoreRoll:before,.petLoreRoll:after{content:'';position:absolute;top:-3px;bottom:-3px;width:13px;border:1px solid #402919;border-radius:5px;background:repeating-linear-gradient(0deg,#251a1233 0 1px,transparent 1px 5px),linear-gradient(90deg,#573c23,#b2955a 38%,#897145 57%,#3f2a17);box-shadow:inset 0 1px #d5bf8466,0 2px 3px #0005}
.petLoreRoll:before{left:-2px}.petLoreRoll:after{right:-2px}
.petLoreRollGrain{position:absolute;inset:2px 14px;border-radius:8px;background:repeating-linear-gradient(0deg,#d0af7040 0 1px,#2b180b30 2px 3px,transparent 4px 8px);background-position:0 var(--roll-phase);box-shadow:inset 0 4px 5px #1a100b55,inset 0 -5px 6px #1a100b99}
.petLoreIntro{text-align:center;margin-bottom:20px;border-bottom:1px solid #78542860;padding-bottom:18px}
.petLoreIntro>span{font-size:10px;letter-spacing:.2em;color:#70502b}.petLoreIntro h2{font-family:Georgia,'Songti SC',serif;font-size:24px;margin:8px 0;color:#432b17;text-shadow:0 1px #ecd7a340}.petLoreIntro p{font-size:12px;line-height:1.8;margin:0;color:#604726}
.petLoreGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
.petLoreEntry{min-width:0;text-align:center;border-bottom:1px solid #78542840;padding-bottom:14px}.petLoreEntry img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 5px 5px #5c381a40)}.petLoreEntry h3{font-family:Georgia,'Songti SC',serif;font-size:14px;margin:8px 0;color:#432c17}.petLoreEntry p{margin:0;font-size:11px;line-height:1.8;color:#604726;text-align:left}
.petLoreSoon{grid-column:1/-1;padding:18px 12px;border:1px dashed #7c592f;border-radius:5px}.petLoreSoon p{text-align:center}.petLoreMystery{display:block;font-size:48px;line-height:1;color:#806031;text-shadow:0 0 18px #e8c985}
@media(max-width:720px){#petLoreDialog{background:radial-gradient(ellipse at 50% 45%,#283d4d,#111e2c)}#petLoreDialog .mobilePageHeader{--ink:#e9f3ff;--line:#b5ccdd30;--raised:#24384e;background:transparent;color:#e9f3ff;border:0}}
@media(min-width:721px){#petLoreDialog{height:min(780px,90vh);width:min(520px,90vw)}}

@media(max-width:720px) and (prefers-reduced-motion:reduce){#petDeck:not(.deckChartMode) .deckCard,#petDeck.deckChartMode .deckCard{animation:none}#petDeck .deckStage{perspective:none}}

/* Group asset picking uses the spacious news-picker layout. */
@media(max-width:720px){
 dialog.petAssetSearchDialog{inset:var(--mobile-viewport-top,0px) 0 auto;margin:0;width:100vw;max-width:none;height:var(--mobile-viewport-height,100dvh);max-height:none;padding:0;border:0;border-radius:0;background:#101a2b;overflow:hidden;overscroll-behavior:contain}
 dialog.petAssetSearchDialog[open]{display:flex;flex-direction:column}
 .petAssetSearchDialog>header{flex:none;justify-content:flex-start;gap:14px;margin:0;padding:calc(env(safe-area-inset-top) + 12px) 18px 12px;background:#101a2b}
 .petAssetSearchDialog>header button{flex:none;display:grid;place-items:center;padding:0;font-size:0}
 .petAssetSearchDialog>header svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
 .petAssetSearchDialog .petSearchField{display:flex;flex-direction:column;flex:1;min-height:0;padding:12px 18px 0}
 #petAssetSearchForm{flex:none;margin:0}
 .petAssetSearchDialog #petOwnResults{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;align-content:start;gap:10px;margin-top:16px;padding-bottom:calc(env(safe-area-inset-bottom) + 24px)}
 .petAssetSearchDialog .petSearchResultCard{min-height:64px;padding:12px 14px;border-radius:16px;background:#19263b}
 .petAssetSearchDialog .petSearchResultCard.touchPressed,.petAssetSearchDialog .petSearchResultCard.touchReleased{transform:none;scale:1}
}

/* 银色名片偶尔接到一道掠光，间隔留白，反光层不占点击区域。 */
@media(max-width:720px){
 #petHome .petHeadAccount{isolation:isolate;overflow:hidden}
 #petHome .petAccountLabel{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1}
 #petHome .petAccountGlint{position:absolute;inset:1px;z-index:2;pointer-events:none;border-radius:7px;overflow:hidden;contain:paint;clip-path:inset(0 round 7px);animation:none;transform:none}
 #petHome .petAccountGlint:before{content:"";position:absolute;inset:-10% 0;width:70%;pointer-events:none;background:linear-gradient(110deg,transparent 34%,#ffffff10 43%,#ffffff80 49%,#e9f5ff50 53%,#ffffff10 59%,transparent 68%);opacity:0;transform:translateX(-145%) skewX(-18deg);animation:petMetalGlint 21s linear 2.4s infinite}
}
@keyframes petMetalGlint{
 0%,5%{opacity:0;transform:translateX(-145%) skewX(-18deg)}
 5.2%{opacity:.55;transform:translateX(-145%) skewX(-18deg)}
 8.6%{opacity:.55;transform:translateX(195%) skewX(-18deg)}
 8.8%,61%{opacity:0;transform:translateX(-145%) skewX(-18deg)}
 61.2%{opacity:.45;transform:translateX(-145%) skewX(-18deg)}
 64%{opacity:.45;transform:translateX(195%) skewX(-18deg)}
 64.2%,100%{opacity:0;transform:translateX(-145%) skewX(-18deg)}
}
@media(prefers-reduced-motion:reduce){#petHome .petAccountGlint{display:none;animation:none}}

/* 滑动与回弹时整组暂停轻摆，避免后面的 animation 简写重置暂停状态。 */
@media(max-width:720px){
 #petDeck .deckStage:has(.deckCard.deckDragging) .deckCard,
 #petDeck .deckStage:has(.deckCard.deckDragging) .deckNeighbor,
 #petDeck .deckStage:has(.deckCard[data-busy="1"]) .deckCard,
 #petDeck .deckStage:has(.deckCard[data-busy="1"]) .deckNeighbor{animation-play-state:paused}
}







/* 新闻旁的使用指南：星轨指南针，只动画图案，保持触点稳定。 */
@media(max-width:720px){
 #petHome .petHomeHelp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:none;min-width:38px;min-height:54px;padding:2px;border:0;border-radius:12px;background:transparent;box-shadow:none;color:#d9c5a0;font-size:10px}
 #petHome .petHomeHelp svg{width:32px;height:32px;filter:drop-shadow(0 2px 3px #0006);pointer-events:none}
 #petHome .petGuideNeedle{transform-origin:20px 20px;animation:petGuideBearing 5s ease-in-out infinite}
 #petHome .petGuideHalo,#petHome .petGuideStar{animation:petGuideGlow 3.8s ease-in-out infinite}
 #petHome .petHeadAccount{flex-shrink:1;min-width:44px}
 #petHelpDialog{background:linear-gradient(160deg,#1c3042,#111e2d);color:#e9f3ff}
 #petHelpDialog .mobilePageHeader{background:#142536;color:#e9f3ff}
}
.petHelpPanel{padding:18px;max-width:480px;margin:auto}
.petHelpIntro{margin:2px 0 18px;color:#b8cedb;font-size:14px;line-height:1.7}
.petHelpSteps{list-style:none;counter-reset:guide;padding:0;margin:0;display:grid;gap:12px}
.petHelpSteps li{counter-increment:guide;position:relative;padding:14px 14px 14px 48px;border:1px solid #aecdd524;border-radius:16px;background:#cde5ef08}
.petHelpSteps li:before{content:counter(guide);position:absolute;top:15px;left:14px;display:grid;place-items:center;width:24px;height:24px;border:1px solid #d6b57955;border-radius:50%;color:#e7c792;font-size:12px}
.petHelpSteps h3{margin:0 0 6px;font-size:15px;color:#ecd4a9}
.petHelpSteps p{margin:0;font-size:13px;line-height:1.8;color:#c0d0dc}
.petHelpAction{font-weight:700}
.petHelpTap{color:#f0ce91}
.petHelpDoubleTap{color:#93e0e7}
.petHelpMotion{color:#d1b6ef}
@keyframes petGuideBearing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(18deg)}}
@keyframes petGuideGlow{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){#petHome .petGuideNeedle,#petHome .petGuideHalo,#petHome .petGuideStar{animation:none}}

/* 按各手机可用宽高分配空间，伙伴行和卡面不受单一机型尺寸上限限制。 */
@media(max-width:720px){
 #petHome,#petDeck,#petManager{height:var(--mobile-viewport-height,100dvh)}
 #petHome .petStage{grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch;min-height:0}
 #petHome .petSlot{min-height:0}
 #petHome .petActor{max-width:clamp(92px,28vw,148px)}
 #petDeck .deckCard,#petDeck .deckNeighbor{max-width:none}
}

/* Preserve the full-size companions; lift only the two lower platforms and labels. */
@media(max-width:720px){
 #petHome .petStage{grid-template-rows:repeat(2,minmax(0,1fr));row-gap:20px;align-content:stretch}
 #petHome .petActor{width:calc(100% - 8px)}
 #petHome .petSlot:nth-child(n+4){padding-bottom:calc(14px + var(--pet-lower-lift,40px))}
 #petHome .petSlot:nth-child(n+4):not(.empty) .petIsland{bottom:calc(52px + var(--pet-lower-lift,40px))}
 #petHome .petSlot:nth-child(n+4).empty .petIsland{bottom:calc(54px + var(--pet-lower-lift,40px))}
}

/* A continuous sheet feeds under parchment wraps; wooden spindle details stay still. */
.petLoreScroll{--paper-feed:0px}
.petLoreRollGrain{background-position:0 0}
.petLoreRoll{height:34px;background:linear-gradient(180deg,#47311c,#b69761 16%,#ecdbab 38%,#c7a56d 66%,#694624);border-color:#674527}
.petLoreRollGrain{inset:1px 18px;background:repeating-linear-gradient(17deg,#3b260d08 0 1px,transparent 1px 6px),linear-gradient(90deg,#96713e,#dcc28b 18%,#d8be83 62%,#8e6538);background-position:0 var(--paper-feed);box-shadow:inset 0 5px 6px #f5e3b280,inset 0 -8px 7px #57361580}
.petLoreRollTop{height:calc(30px + 9px * var(--roll-progress));border-radius:50% / 26%}
.petLoreRollBottom{height:calc(39px - 9px * var(--roll-progress));border-radius:50% / 26%}
.petLoreScroll:before{top:25px;height:20px;background:linear-gradient(180deg,#543315a8,#dbc18a88 35%,transparent);z-index:5}
.petLoreScroll:after{bottom:25px;height:20px;background:linear-gradient(0deg,#543315a8,#dbc18a88 35%,transparent);z-index:5}
button.petLoreEntry{display:block;appearance:none;width:100%;padding:0 0 14px;border:0;border-bottom:1px solid #78542840;border-radius:0;background:transparent;font:inherit;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}
button.petLoreEntry:focus,button.petLoreEntry:focus-visible{outline:none;box-shadow:none}
button.petLoreEntry:focus-visible h3{text-decoration:none}
/* Parchment entries must not inherit the mobile button's rectangular press shadow. */
#petLoreDialog button.petLoreEntry,
#petLoreDialog button.petLoreEntry:active,
#petLoreDialog button.petLoreEntry.touchPressed,
#petLoreDialog button.petLoreEntry.touchReleased{background:transparent;box-shadow:none;outline:none;scale:1;filter:none;animation:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
button.petLoreEntry:active img,button.petLoreEntry.touchPressed img{transform:scale(.96)}


/* Lightweight dimensional glass display: shared illustration, no WebGL canvas. */
html[data-theme] #petWorldDialog,#petWorldDialog{background:radial-gradient(ellipse at 35% 25%,#29475a,#0c1725 75%);color:#e9f1f5;border:0}
#petWorldDialog[open]{display:flex;flex-direction:column;overflow:hidden}
#petWorldDialog>.mobilePageHeader{flex:none;background:#102032;color:#e9f1f5;border:0;position:relative}
#petWorldDialog .mobilePageBack{color:#e9f1f5;background:transparent;border:0}
.petWorldBody{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:12px;padding:18px 20px calc(var(--ui-safe-bottom,0px) + 24px)}
.petWorldExhibit{position:relative;min-width:0;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center}
.petWorldStars{position:absolute;inset:0;background:radial-gradient(circle at 12% 25%,#c6e0ed80 0 1px,transparent 2px),radial-gradient(circle at 80% 17%,#c6e0ed80 0 1px,transparent 2px),radial-gradient(circle at 89% 64%,#c6e0ed60 0 1px,transparent 2px);pointer-events:none}
.petGlassCase{position:relative;width:min(100%,280px);aspect-ratio:1/1.04;perspective:800px;isolation:isolate}
.petGlassWall{position:absolute;inset:9% 7% 18%;border:1px solid #c4ecf080;border-top:0;border-radius:8% 8% 28% 28% / 5% 5% 12% 12%;background:linear-gradient(100deg,#c6f6ff22,transparent 22%,transparent 66%,#c6f6ff1c);box-shadow:inset 12px 0 14px #b6e3ee12,inset -6px 0 8px #b6e3ee1c;z-index:3;pointer-events:none}
.petGlassRoof{position:absolute;inset:3% 7% auto;height:16%;border:1px solid #e2ffffa0;border-radius:50%;background:linear-gradient(145deg,#e5f7fa22,#a6dbe608);box-shadow:0 3px 6px #050d1680;z-index:4}
.petGlassFloor{position:absolute;inset:auto 7% 15%;height:19%;border-radius:50%;border:1px solid var(--world-accent);background:radial-gradient(ellipse,var(--world-accent),#183344 65%);opacity:.55;box-shadow:0 0 24px var(--world-accent);z-index:0}
.petGlassBase{position:absolute;inset:auto 5% 7%;height:22%;border-radius:50%;background:linear-gradient(180deg,#65838e,#203b4c 46%,#0c1c29 52%,#4b6776 90%,#152d3d);box-shadow:0 14px 20px #0008;z-index:-1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;box-sizing:border-box}
.petGlassBase span{font-size:8px;letter-spacing:.15em;color:#bdd3da}
.petWorldCharacter{position:absolute;inset:auto 16% 24%;width:68%;height:64%;object-fit:contain;filter:drop-shadow(0 9px 8px #0007);z-index:2;animation:petWorldHover 5s ease-in-out infinite}
.petGlassReflection{position:absolute;inset:13% auto 27% 14%;width:7%;border-radius:99px;background:linear-gradient(180deg,#fff8,#fff0);transform:skewY(-12deg);z-index:4;pointer-events:none}
.petWorldPlaque{margin:0;color:var(--world-accent);font-size:11px;letter-spacing:.12em;line-height:1.6;text-align:center}
.petWorldInfo{min-width:0;max-width:520px;width:100%;margin:auto}
.petWorldEyebrow{font-size:10px;letter-spacing:.2em;color:var(--world-accent)}
.petWorldInfo h2{font-size:23px;margin:8px 0 12px;font-weight:600;color:#f0f6fa}
.petWorldStory{font-size:13px;line-height:1.9;color:#b8cdd9;margin:0 0 18px}
.petWorldStats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.petWorldStats>div{padding:12px;border:1px solid #a8c7d326;border-radius:12px;background:#c9e9f008;min-width:0}
.petWorldStats dt{font-size:11px;color:#91acbe;margin-bottom:7px}
.petWorldStats dd{margin:0;font-size:14px;color:#e0edf4;overflow-wrap:anywhere;line-height:1.5}
.petWorldFiction{font-size:10px;color:#7895a7;letter-spacing:.05em;margin:18px 0 0}
@keyframes petWorldHover{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@media(max-height:700px){.petGlassCase{width:min(100%,210px)}.petWorldBody{padding-top:10px;gap:8px}.petWorldInfo h2{font-size:20px}.petWorldStats>div{padding:10px}}
@media(min-width:600px){.petWorldBody{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px}#petWorldDialog{width:min(900px,94vw);height:min(760px,90vh)}}
@media(prefers-reduced-motion:reduce){.petWorldCharacter{animation:none}}

/* Mobile card bottom clearance: lengthen the face and lower the separate page counter. */
@media(max-width:720px){
 #petDeck:not(.deckChartMode) .deckStage{padding-top:10px;padding-bottom:calc(var(--ui-safe-bottom) + 14px);gap:22px}
 #petDeck:not(.deckChartMode) .deckCount{margin:0;flex:0 0 34px;position:relative}
 #petDeck:not(.deckChartMode) .deckNeighbor,#petDeck:not(.deckChartMode) .deckStack{top:10px;bottom:calc(var(--ui-safe-bottom) + 70px)}
 #petDeck:not(.deckChartMode) .deckFrame{gap:8px;padding-bottom:18px}
 #petDeck:not(.deckChartMode) .deckBody{gap:6px}
 #petDeck:not(.deckChartMode) .deckBody>.deckRatio{gap:4px}
 #petDeck:not(.deckChartMode) .deckSparkWrap{flex-shrink:1;min-height:40px}
 #petDeck:not(.deckChartMode) .deckArt{flex-shrink:1;min-height:76px}
 #petDeck:not(.deckChartMode) .deckRatioRow{flex-shrink:0}
}
#petWorldDialog .mobilePageTitle{color:#e9f1f5}
#petLoreDialog .mobilePageTitle{color:#e9f3ff}

/* Let the two direction panels occupy the taller card's remaining body space. */
@media(max-width:720px){
 #petDeck:not(.deckChartMode) .deckFrame{container-type:size}
 #petDeck:not(.deckChartMode) .deckBody>.deckRatio{flex:1 1 0;min-height:0;gap:8px}
 #petDeck:not(.deckChartMode) .deckRatioHead,#petDeck:not(.deckChartMode) .deckCardPeriods{flex:none}
 #petDeck:not(.deckChartMode) .deckProbabilities{height:clamp(80px,17cqh,140px);min-height:0;flex:0 0 auto;--deck-bar-space:46px}
 html[data-theme] #petDeck:not(.deckChartMode) .deckProbabilities>.probabilityCard{grid-template-rows:16px 30px minmax(0,1fr);padding:10px 8px;gap:5px}
 html[data-theme] #petDeck:not(.deckChartMode) .deckProbabilities>.probabilityCard span{font-size:13px;line-height:16px}
 html[data-theme] #petDeck:not(.deckChartMode) .deckProbabilities>.probabilityCard strong{font-size:26px;line-height:30px}
 #petDeck:not(.deckChartMode) .deckRatioRow{flex:1 1 0;min-height:0;grid-template-columns:62px 82px minmax(0,1fr);align-content:center;gap:8px;padding:10px 0}
 #petDeck:not(.deckChartMode) .deckRatioDir{font-size:15px;line-height:22px}
 #petDeck:not(.deckChartMode) .deckRatioVal{font-size:24px;line-height:28px}
 #petDeck:not(.deckChartMode) .deckRatioBar{height:10px}
 #petDeck:not(.deckChartMode) .deckRatioPrices{font-size:13px;line-height:20px;gap:12px}
 #petDeck:not(.deckChartMode) .deckRatioPrices small{font-size:11px}
}
@container(max-height:520px){
 #petDeck:not(.deckChartMode) .deckBody>.deckRatio{gap:4px}
 #petDeck:not(.deckChartMode) .deckProbabilities{height:74px}
 html[data-theme] #petDeck:not(.deckChartMode) .deckProbabilities>.probabilityCard{grid-template-rows:14px 24px minmax(0,1fr);padding:5px 6px;gap:3px}
 html[data-theme] #petDeck:not(.deckChartMode) .deckProbabilities>.probabilityCard span{font-size:12px;line-height:14px}
 html[data-theme] #petDeck:not(.deckChartMode) .deckProbabilities>.probabilityCard strong{font-size:22px;line-height:24px}
 #petDeck:not(.deckChartMode) .deckRatioRow{padding:3px 0;gap:4px;grid-template-columns:52px 68px minmax(0,1fr)}
 #petDeck:not(.deckChartMode) .deckRatioDir{font-size:13px;line-height:18px}
 #petDeck:not(.deckChartMode) .deckRatioVal{font-size:20px;line-height:22px}
 #petDeck:not(.deckChartMode) .deckRatioPrices{font-size:11px;line-height:18px;gap:8px}
 #petDeck:not(.deckChartMode) .deckRatioPrices small{font-size:10px}
 #petDeck:not(.deckChartMode) .deckRatioBar{height:8px}
}

/* Companion sanctuary: optical shell, suspended rings and a lit ceramic plinth. */
html[data-theme] #petWorldDialog,#petWorldDialog{--world-yaw:0deg;--world-light-x:50%;--world-reflection-x:0px;background:#070d18;background-image:radial-gradient(ellipse at 50% 17%,#183141 0,transparent 56%),linear-gradient(180deg,#070d18,#0b1423);background-repeat:no-repeat;background-size:100% 100%;box-sizing:border-box}
#petWorldDialog::backdrop{background:#070d18;backdrop-filter:none}
#petWorldDialog>.mobilePageHeader{background:transparent}
#petWorldDialog .petWorldBody{background:transparent;padding-top:12px}
#petWorldDialog .petWorldExhibit{padding:8px 0 4px}
#petWorldDialog .petGlassCase{width:min(100%,302px);aspect-ratio:1/1.12;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
#petWorldDialog .petGlassCase:focus-visible{outline:1px solid var(--world-accent);outline-offset:4px;border-radius:20px}
#petWorldDialog .petGlassCase.petWorldTurning{cursor:grabbing}
#petWorldDialog .petWorldOrbit{position:absolute;inset:10% -4% 12%;border:1px solid #9fbfd220;border-radius:50%;transform:rotate(-22deg);pointer-events:none}
#petWorldDialog .petWorldOrbit:after{content:'';position:absolute;inset:10% -5%;border:1px solid #9fbfd214;border-radius:50%;transform:rotate(50deg)}
#petWorldDialog .petGlassWall{inset:10% 9% 20%;border:1px solid #b8e8ed40;border-top:0;border-bottom:0;border-radius:18% 18% 25% 25% / 6% 6% 8% 8%;background:linear-gradient(100deg,#b1e7ff16,transparent 14%,transparent 85%,#d9f3ff15),radial-gradient(ellipse at var(--world-light-x) 80%,color-mix(in srgb,var(--world-accent) 12%,transparent),transparent 65%);box-shadow:inset 1px 0 0 #e7ffff4d,inset -1px 0 0 #e7ffff20,inset 10px 0 24px #c3ebf508;transition:background-position .15s}
#petWorldDialog .petGlassWall:before,#petWorldDialog .petGlassWall:after{content:'';position:absolute;top:8%;bottom:10%;width:2px;border-radius:99px;background:linear-gradient(180deg,transparent,var(--world-accent),transparent);box-shadow:0 0 8px var(--world-accent);opacity:.5}
#petWorldDialog .petGlassWall:before{left:-1px}#petWorldDialog .petGlassWall:after{right:-1px}
#petWorldDialog .petGlassRoof{inset:4% 9% auto;height:13%;border:1px solid #c9e9f36b;background:linear-gradient(170deg,#efffff10,#1027364d);box-shadow:0 2px 0 #070d18,0 4px 0 #71929e33,inset 0 1px 5px #c1f2ff14}
#petWorldDialog .petGlassRoof:after{content:'';position:absolute;inset:11% 4%;border:1px solid color-mix(in srgb,var(--world-accent) 65%,transparent);border-radius:50%;box-shadow:0 0 10px color-mix(in srgb,var(--world-accent) 22%,transparent)}
#petWorldDialog .petGlassFloor{inset:auto 9% 18%;height:18%;background:radial-gradient(ellipse at var(--world-light-x) 50%,color-mix(in srgb,var(--world-accent) 30%,#0d2130),#0c1725 68%);border-color:#a7d3dd66;opacity:1;box-shadow:inset 0 0 16px #070e18,0 0 22px color-mix(in srgb,var(--world-accent) 13%,transparent)}
#petWorldDialog .petGlassHalo{position:absolute;inset:auto 14% 21%;height:13%;border:2px solid var(--world-accent);border-radius:50%;opacity:.7;box-shadow:0 0 12px color-mix(in srgb,var(--world-accent) 45%,transparent),inset 0 0 10px color-mix(in srgb,var(--world-accent) 20%,transparent);pointer-events:none;z-index:1}
#petWorldDialog .petGlassHalo:after{content:'';position:absolute;inset:13% 7%;border:1px dashed var(--world-accent);border-radius:50%;opacity:.45}
#petWorldDialog .petGlassBase{inset:auto 6% 9%;height:19%;background:linear-gradient(180deg,#425965,#132635 38%,#09131d 42%,#192b39 75%,#344b59 90%,#0a1722);box-shadow:0 14px 22px #0009,inset 0 1px 1px #b7d9e766;z-index:0}
#petWorldDialog .petGlassBase:before{content:'';position:absolute;inset:5% 4% 24%;border-radius:50%;border-bottom:2px solid var(--world-accent);box-shadow:0 4px 10px color-mix(in srgb,var(--world-accent) 25%,transparent);opacity:.75}
#petWorldDialog .petGlassBase span{font-size:7px;letter-spacing:.2em;color:#adc6d1}
#petWorldDialog .petWorldSubject{position:absolute;inset:auto 15% 25%;width:70%;height:63%;z-index:2;transform:rotateY(var(--world-yaw));transform-origin:50% 65%;transform-style:preserve-3d;transition:transform 180ms ease-out;pointer-events:none}
#petWorldDialog .petWorldTurning .petWorldSubject{transition:none}
#petWorldDialog .petGlassReflection{inset:17% auto 35% 14%;width:3%;background:linear-gradient(180deg,#d8f7ff60,#d8f7ff08);transform:translateX(var(--world-reflection-x)) skewY(-12deg);transition:transform 180ms ease-out}
#petWorldDialog .petWorldTurning .petGlassReflection{transition:none}
#petWorldDialog .petWorldPlaque{margin-top:2px;font-size:12px;letter-spacing:.14em}
#petWorldDialog .petWorldControls{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 4px;max-width:100%;flex-wrap:wrap}
#petWorldDialog .petWorldControls span{font-size:10px;color:#8aa8b9;letter-spacing:.08em}
#petWorldDialog .petWorldControls button{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid #8daebb30;border-radius:50%;background:#aecfdd08;color:#c8dde5;font-size:20px;padding:0;cursor:pointer}
#petWorldDialog .petWorldControls button[data-world-turn="front"]{font-size:11px;border-radius:99px;padding:0 12px}
#petWorldDialog .petWorldControls button:active{background:#aecfdd20}
#petWorldDialog .petWorldStats>div{background:linear-gradient(145deg,#aacad909,#aacad902);border-color:#aacad920}
@media(max-width:720px){
 html[data-theme] #petWorldDialog,#petWorldDialog{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100dvh;min-height:100dvh;max-height:none;border-radius:0}
 body:has(#petWorldDialog[open]){background-color:#070d18;background-image:none}
}
@media(max-height:700px){#petWorldDialog .petGlassCase{width:min(100%,230px)}#petWorldDialog .petWorldExhibit{padding-top:0}#petWorldDialog .petWorldControls{margin-top:6px}}
@media(prefers-reduced-motion:reduce){#petWorldDialog .petWorldSubject,#petWorldDialog .petGlassReflection{transition:none}}
@media(max-width:720px){
 #petDeck:not(.deckChartMode) .deckRatioRow{min-height:54px}
 #petDeck:not(.deckChartMode) .deckRatioPrices b{font-size:14px}
}
@container(max-height:520px){
 #petDeck:not(.deckChartMode) .deckRatioRow{min-height:46px}
 #petDeck:not(.deckChartMode) .deckRatioPrices b{font-size:12px}
}
@container(max-height:440px){
 #petDeck:not(.deckChartMode) .deckArt{flex-basis:60px;min-height:60px}
 #petDeck:not(.deckChartMode) .deckLogo{width:48px;height:48px}
 #petDeck:not(.deckChartMode) .deckSparkWrap{flex-basis:36px;min-height:32px}
 #petDeck:not(.deckChartMode) .deckBody{gap:4px}
 #petDeck:not(.deckChartMode) .deckBody>.deckRatio{gap:3px}
 #petDeck:not(.deckChartMode) .deckProbabilities{height:60px}
 html[data-theme] #petDeck:not(.deckChartMode) .deckProbabilities>.probabilityCard{padding:3px 6px;gap:2px;grid-template-rows:14px 22px minmax(0,1fr)}
 html[data-theme] #petDeck:not(.deckChartMode) .deckProbabilities>.probabilityCard strong{font-size:20px;line-height:22px}
 #petDeck:not(.deckChartMode) .deckRatioHead{min-height:14px}
 #petDeck:not(.deckChartMode) .deckCardPeriods button{min-height:26px;padding:2px 6px}
}


/* Fixed companion information sheet: no scrolling or continuous animation. */
#petWorldDialog .petWorldBody{overflow:hidden;touch-action:none;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-content:stretch;gap:10px;padding:12px 18px calc(var(--ui-safe-bottom,0px) + 14px)}
#petWorldDialog .petWorldExhibit{min-height:0;overflow:hidden;padding:0}
#petWorldDialog .petGlassCase{height:100%;max-height:290px;width:auto;max-width:100%;aspect-ratio:1/1.04;touch-action:none;user-select:none;-webkit-user-select:none}
#petWorldDialog .petGlassRoof,#petWorldDialog .petGlassFloor,#petWorldDialog .petGlassBase,#petWorldDialog .petGlassWall{box-shadow:none}
#petWorldDialog .petGlassRoof:after,#petWorldDialog .petGlassWall:before,#petWorldDialog .petGlassWall:after,#petWorldDialog .petGlassBase:before{display:none}
#petWorldDialog .petWorldStars,#petWorldDialog .petWorldOrbit,#petWorldDialog .petGlassHalo,#petWorldDialog .petWorldControls,#petWorldDialog .petWorldEyebrow,#petWorldDialog .petWorldPlaque,#petWorldDialog .petGlassBase span{display:none}
#petWorldDialog .petWorldInfo{margin:0 auto}
#petWorldDialog .petWorldInfo h2{font-size:20px;line-height:1.3;margin:0 0 8px}
#petWorldDialog .petWorldStory{font-size:12px;line-height:1.6;margin:0 0 10px}
#petWorldDialog .petWorldStats{gap:0 16px}
#petWorldDialog .petWorldStats>div{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 0;min-width:0;border:0;border-bottom:1px solid #aec7d326;border-radius:0;background:transparent}
#petWorldDialog .petWorldStats dt{flex:none;margin:0;font-size:11px}
#petWorldDialog .petWorldStats dd{font-size:12px;line-height:1.5;text-align:right}
#petWorldDialog .petWorldFiction{margin:10px 0 0;font-size:10px;line-height:1.4}
#petLoreDialog .petLoreScroll{filter:none}
#petLoreDialog .petLoreEntry img{filter:none}
@media(max-height:620px){#petWorldDialog .petWorldBody{padding-top:6px;gap:6px}#petWorldDialog .petWorldInfo h2{font-size:18px;margin-bottom:6px}#petWorldDialog .petWorldStory{font-size:11px;margin-bottom:6px}#petWorldDialog .petWorldStats>div{padding:6px 0}#petWorldDialog .petWorldFiction{margin-top:6px}}
@media(min-width:600px){#petWorldDialog .petWorldBody{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:24px}#petWorldDialog .petWorldExhibit{height:100%;max-height:340px}}
@media(max-width:720px){html[data-theme] #petWorldDialog,#petWorldDialog{height:var(--mobile-viewport-height,100dvh);min-height:0}}

/* Larger companions and platforms, with only the lower row moved inward. */
@media(max-width:720px){
 #petHome .petStage{row-gap:16px}
 #petHome .petActor{width:calc(100% + 8px);max-width:clamp(104px,32vw,160px)}
 #petHome .petSlot:not(.empty) .petIsland{width:calc(100% - 2px)}
 #petHome .petSlot.empty .petIsland{width:82%;max-width:104px;height:78px}
}
/* Cylindrical specimen chamber: the artwork provides real material detail. */
#petWorldDialog .petWorldBody{gap:8px;padding-top:6px}
#petWorldDialog .petWorldExhibit{overflow:visible;justify-content:center}
#petWorldDialog .petGlassCase{flex:1 1 0;min-height:100px;max-height:480px;height:auto;width:auto;max-width:100%;aspect-ratio:2/3;position:relative;overflow:hidden;touch-action:none;cursor:grab}
#petWorldDialog .petCylinderArtwork{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:0}
#petWorldDialog .petGlassRoof,#petWorldDialog .petGlassFloor,#petWorldDialog .petGlassBase,#petWorldDialog .petGlassWall,#petWorldDialog .petGlassHalo,#petWorldDialog .petGlassReflection{display:none}
#petWorldDialog .petWorldSubject{position:absolute;inset:20% 13% 24%;width:auto;height:auto;z-index:2;transform:none;transition:none;pointer-events:none;display:grid;place-items:center}
#petWorldDialog .petWorldTurntable{display:none;width:100%;aspect-ratio:1;background-size:800% 400%;background-repeat:no-repeat}
#petWorldDialog[data-turntable="ready"] .petWorldTurntable{display:block}
#petWorldDialog[data-turntable="ready"] .petWorldCharacter{display:none}
#petWorldDialog .petGlassCase:after{content:'';position:absolute;inset:15% 19% 23%;border-radius:15% / 5%;pointer-events:none;z-index:3;background:linear-gradient(102deg,#c5faff20,transparent 17%,transparent 77%,#96f7ff1a);box-shadow:inset 1px 0 #d5ffff2b,inset -1px 0 #d5ffff2b}
#petWorldDialog .petWorldControls{display:flex;flex:none;gap:6px;margin:4px 0 0;flex-wrap:nowrap}
#petWorldDialog .petWorldControls button{min-width:36px;min-height:36px;font-size:17px}
#petWorldDialog .petWorldControls button[data-world-turn="front"],#petWorldDialog .petWorldControls button[data-world-turn="back"]{font-size:11px;border-radius:99px;padding:0 10px}
#petWorldDialog .petWorldControls .petWorldTurnStatus{font-size:10px;border:0;background:transparent;padding:0;min-width:0;max-width:90px;line-height:1.5;color:#a0bccb}
#petWorldDialog .petWorldControls .petWorldAngle{font-size:10px;min-width:24px}
#petWorldDialog .petWorldInfo h2{font-size:21px}
@media(max-height:700px){#petWorldDialog .petGlassCase{max-height:300px}#petWorldDialog .petWorldInfo h2{font-size:18px}#petWorldDialog .petWorldControls{gap:4px}#petWorldDialog .petWorldControls button{min-width:32px;min-height:32px}#petWorldDialog .petWorldControls .petWorldTurnStatus{max-width:76px}}

/* Guest authentication stays still and reserves a consistent space above the character. */
@media(max-width:720px){
 body.authLocked #authDialog .authPanel{min-height:100%;padding-top:calc(env(safe-area-inset-top) + clamp(48px,9vh,84px));padding-bottom:calc(env(safe-area-inset-bottom) + 32px)}
 body.authLocked #authDialog .authMascot{height:190px;margin-bottom:24px;flex-shrink:0}
 body.authLocked #authDialog .authMascot:after{width:180px;height:180px;animation:none!important;transform:none!important}
 body.authLocked #authDialog .authTabs,body.authLocked #authDialog #authForm{max-width:420px;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box}
 body.authLocked #authDialog input{font-size:16px}
}

/* Directly draggable turntable and refractive companion information panel. */
#petWorldDialog .petWorldBody{gap:12px;padding:8px 16px calc(var(--ui-safe-bottom,0px) + 14px)}
#petWorldDialog .petGlassCase{max-height:510px;user-select:none;-webkit-user-select:none}
#petWorldDialog .petWorldTurning{cursor:grabbing}
#petWorldDialog[data-turntable="error"] .petWorldTurnStatus{display:block;margin:4px auto;padding:8px 12px;border:1px solid #90eafc40;border-radius:12px;background:#112d3a;color:#c7f4ff;font-size:12px}
#petWorldDialog .petWorldInfo{position:relative;isolation:isolate;box-sizing:border-box;padding:18px 20px 14px;border:1px solid #c9f9ff65;border-radius:24px;background:linear-gradient(135deg,#c9f8ff20,#76d7ec09 38%,#153d5a42 72%,#b4edff1c);box-shadow:inset 0 1px 0 #ffffff80,inset 0 -1px 0 #71d4f72e,0 12px 30px #00000038,0 0 20px #60e9fc08;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#petWorldDialog .petWorldInfo:before{content:'';position:absolute;inset:5px;border:1px solid #d8faff20;border-radius:19px;pointer-events:none;z-index:-1;background:linear-gradient(117deg,#ffffff13,transparent 24%,transparent 65%,#cff5ff0a)}
#petWorldDialog .petWorldInfo h2{font-size:21px;margin-bottom:8px;text-shadow:0 0 15px #7ceaff30}
#petWorldDialog .petWorldStory{color:#c1d8e5}
#petWorldDialog .petWorldStats>div{border-color:#c9f4ff24;padding:9px 0}
#petWorldDialog .petWorldStats dt{color:#a4c3d2}
#petWorldDialog .petWorldStats dd{color:#edfaff}
@media(max-height:700px){#petWorldDialog .petWorldBody{gap:8px;padding:4px 12px calc(var(--ui-safe-bottom,0px) + 10px)}#petWorldDialog .petGlassCase{max-height:330px}#petWorldDialog .petWorldInfo{padding:12px 14px 10px;border-radius:20px}#petWorldDialog .petWorldInfo h2{font-size:18px}#petWorldDialog .petWorldStats>div{padding:6px 0}}
@media(min-width:600px){#petWorldDialog .petGlassCase{max-height:510px}}

/* Full silhouettes share a safe viewport; cropped atlas rows never leak neighbours. */
#petWorldDialog .petWorldSubject{inset:18% 17% 23%;overflow:visible;display:block}
#petWorldDialog .petWorldTurntable{width:100%;height:100%;aspect-ratio:auto;background:none!important;overflow:hidden}
#petWorldDialog .petWorldTurntable svg{display:block;width:100%;height:100%;overflow:hidden}
@media(max-width:720px){
 #petHome .petSlot{isolation:isolate}
 #petHome .petIsland{z-index:0}
 #petHome .petActor{z-index:2;flex-shrink:0}
 #petHome .petMeta{z-index:3}
 #petHome .petActionScene{z-index:0}
 #petHome .petShadow{z-index:0}
 #petHome .petTilt{position:relative;z-index:1}
 #petHome .petArtwork{overflow:visible}
}

/* Sixteen views share one pivot; the wider chamber contains rings, tails and limbs. */
#petWorldDialog .petGlassCase{aspect-ratio:4/5;max-width:100%}
#petWorldDialog .petCylinderArtwork{object-fit:fill}
#petWorldDialog .petWorldSubject{inset:20% 21% 24%;overflow:hidden;contain:layout paint}
#petWorldDialog .petGlassCase:after{transform:translateX(var(--world-reflection-x,0px));opacity:.8}

/* Reserve the same full-body square through all sixteen angles. */
#petWorldDialog .petWorldSubject{inset:18% 18% 22%;overflow:visible;contain:layout}
#petWorldDialog .petWorldTurntable{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;background:none!important}
#petWorldDialog .petWorldTurntableNext{display:none!important}



/* Original image exhibit: gentle vertical float, no automatic rotation. */
@keyframes archiveImageFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
#petWorldDialog .petWorldCharacter{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;animation:none;transform:none;filter:none}
#petWorldDialog .petWorldTurnStatus{display:none}
#petWorldDialog .petWorldSubject{animation:archiveImageFloat 5.5s ease-in-out infinite}
#petWorldDialog .petWorldTurning .petWorldSubject{animation-play-state:paused}
.petHomeBacktest{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:0;color:#cdeaf1;padding:0 3px;min-width:40px;cursor:pointer;font-size:10px}
.petHomeBacktest svg{width:34px;height:34px;filter:drop-shadow(0 2px 4px #0008)}
.researchTrace{stroke-dasharray:38;animation:researchScreen 4s ease-in-out infinite}
.researchPower{animation:researchPowerPulse 3s ease-in-out infinite}
@keyframes researchScreen{0%,15%{stroke-dashoffset:38;opacity:.4}65%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes researchPowerPulse{50%{opacity:.4}}
@media(max-width:380px){#petHome .petHeadRight{gap:4px}#petHome .petStatus{display:none}.petHomeBacktest{min-width:32px}.petHomeBacktest svg{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){#petWorldDialog .petWorldSubject,.researchTrace,.researchPower{animation:none}}

/* A static front pane follows the cylinder's curved rims and glass thickness. */
#petWorldDialog .petCylinderFront{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:4;pointer-events:none;user-select:none;-webkit-user-select:none}
#petWorldDialog .petGlassCase:after{background:linear-gradient(102deg,#d4ffff2b,transparent 19%,transparent 76%,#c4faff20);box-shadow:inset 1px 0 #e8ffff4a,inset -1px 0 #b8fbff38;opacity:.85}

/* Diagonal depth sway uses independent rotate/translate, preserving the swipe transform. */
@media(max-width:720px) and (prefers-reduced-motion:no-preference){
 #petDeck:not(.deckChartMode) .deckCard,#petDeck.deckChartMode .deckCard{animation-name:deckDiagonalFloat;animation-duration:9s;animation-timing-function:ease-in-out}
 #petDeck .deckStage:has(.chartBox:active) .deckCard{animation-play-state:paused}
}
@keyframes deckDiagonalFloat{
 0%,100%{rotate:-1 1 -.18 2.8deg;translate:-3.5px .5px 3px}
 25%{rotate:-1 -1 0 2.5deg;translate:0 -2px 6px}
 50%{rotate:1 -1 .18 2.8deg;translate:3.5px -1px 3px}
 75%{rotate:1 1 0 2.5deg;translate:0 -3px 6px}
}
/* The image itself stays still; the specimen wrapper supplies the gentle float. */
#petWorldDialog .petWorldCharacter{animation:none;transform:none;filter:none}

/* Curved glass highlights respond to dragging without repainting a blurred layer. */
#petWorldDialog .petGlassCase:after{background:linear-gradient(101deg,#e8ffff30,transparent 13%,#d2ffff09 27%,transparent 39%,transparent 75%,#b9f8ff26);box-shadow:inset 2px 0 0 #e8ffff57,inset -2px 0 0 #b8fbff45,inset 8px 0 12px -10px #afffff99,inset -8px 0 12px -10px #afffff88;will-change:transform}
#petWorldDialog .petCylinderFront{opacity:.94}
#petWorldDialog .petWorldTurning .petWorldTurntable{will-change:transform}
#petWorldDialog .petWorldInfo{box-shadow:inset 0 1px 0 #ffffff80,inset 0 -1px 0 #71d4f72e,0 12px 30px #00000038,0 0 20px #60e9fc08}

/* A股图标保持圆形，原始公司 Logo 等比置于圆内。 */
html[data-theme] [data-market="ashare"].watchLogo,
html[data-theme] [data-market="ashare"].heroLogo,
[data-market="ashare"].watchLogo,[data-market="ashare"].heroLogo{border-radius:50%;overflow:hidden;background:var(--logo-surface,#f4f7fa)}
[data-market="ashare"].watchLogo img,[data-market="ashare"].heroLogo img{object-fit:contain;width:100%;height:100%;box-sizing:border-box;padding:12%}
.infoMetric strong{overflow-wrap:anywhere}

#petDeck [data-market="ashare"].heroLogo,#heroLogo[data-market="ashare"]{border-radius:50%;overflow:hidden;background:var(--logo-surface,#f4f7fa)}
#heroLogo[data-market="ashare"] img{object-fit:contain;padding:12%;box-sizing:border-box}

/* 每个标的简介固定为相同尺寸，使用一两句完整短介绍。 */
#assetInfo .infoSummary{box-sizing:border-box;height:136px;min-height:136px;max-height:136px;display:grid;grid-template-rows:24px 100px;gap:8px;padding:0;margin:24px 0 20px;flex:none}
#assetInfo .infoSummary h4{height:24px;line-height:24px;margin:0;font-size:16px;overflow:hidden}
#assetInfo .infoSummary p{box-sizing:border-box;height:100px;max-height:100px;line-height:20px;font-size:13px;margin:0;overflow-wrap:anywhere;display:block;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
.petSearchMarket{color:#8da9bf;font-size:11px}

/* 搜索结果统一布局：提示增加行高，图标和文字不参与整卡缩放。 */
:is(#petManager,.petAssetSearchDialog) .petSearchResultCard,
.petFlyingCard.petSearchResultCard{box-sizing:border-box;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;width:100%;height:auto;min-height:88px;max-height:none;padding:12px 14px;flex-shrink:0;transform:none;scale:1;animation:none}
:is(#petManager,.petAssetSearchDialog) .petSearchResultCard>.petSearchResultLabel,
.petFlyingCard.petSearchResultCard>.petSearchResultLabel{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;min-height:0;max-height:none;overflow:visible;white-space:normal;overflow-wrap:anywhere}
:is(#petManager,.petAssetSearchDialog) .petSearchResultCard>.petSearchResultLabel strong,
.petFlyingCard.petSearchResultCard>.petSearchResultLabel strong{font-size:16px;line-height:22px}
:is(#petManager,.petAssetSearchDialog) .petSearchResultCard>.petSearchResultLabel small,
.petFlyingCard.petSearchResultCard>.petSearchResultLabel small{font-size:12px;line-height:18px}
:is(#petManager,.petAssetSearchDialog) .petSearchResultCard>:is(.watchLogo,.assetLogo,.heroLogo),
.petFlyingCard.petSearchResultCard>:is(.watchLogo,.assetLogo,.heroLogo){position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;min-width:40px;min-height:40px;gap:0;transform:none;scale:1}
:is(#petManager,.petAssetSearchDialog) .petSearchResultCard.touchPressed,
:is(#petManager,.petAssetSearchDialog) .petSearchResultCard.touchReleased{transform:none;scale:1;animation:none}

/* Widen the original chamber artwork without changing its material or lighting. */
#petWorldDialog .petGlassCase{aspect-ratio:5/6;max-height:min(510px,calc((var(--phone-layout-width,100vw) - 32px) * 1.2))}
#petWorldDialog .petCylinderArtwork{object-fit:fill;transform:scaleX(1.12);transform-origin:50% 50%}
#petWorldDialog .petWorldSubject{inset:18% 22% 22%}
#petWorldDialog .petGlassCase:after{inset:15% 20% 23%;border:0;border-radius:10% / 3%;background:linear-gradient(105deg,#d7ffff0d,transparent 25%,transparent 78%,#d7ffff0a);box-shadow:none;transform:none;will-change:auto}

/* Exhibit-only sizing applies equally to the still image and all rotation frames. */
#petWorldDialog{--world-display-scale:.96}
#petWorldDialog[data-kind="2"]{--world-display-scale:.90}
#petWorldDialog[data-kind="3"]{--world-display-scale:.92}
#petWorldDialog[data-kind="4"]{--world-display-scale:.94}
#petWorldDialog[data-kind="5"]{--world-display-scale:.86}
#petWorldDialog[data-kind="6"]{--world-display-scale:.84}
#petWorldDialog[data-kind="7"]{--world-display-scale:.86}
/* Keep wide silhouettes centered; enlarge the chamber independently of the character. */
#petWorldDialog:is([data-kind="5"],[data-kind="6"],[data-kind="7"]) .petWorldSubject{left:23%;right:23%}
#petWorldDialog :is(.petWorldCharacter,.petWorldTurntable){scale:var(--world-display-scale,1);transform-origin:50% 100%}

/* Search and news share a continuous, single-column reading surface. */
:is(.petNewsChoices,.petNewsList,.petAssetSearchDialog .petSearchResults,#petOwnResults){display:flex;flex-direction:column;gap:0;min-width:0}
:is(.petNewsChoice,.petNewsItem,.petAssetSearchDialog .petSearchResultCard,#petOwnResults .petSearchResultCard){width:100%;max-width:none;min-width:0;box-sizing:border-box;border:0;border-bottom:1px solid #aac8da26;border-radius:0;background:transparent;box-shadow:none;margin:0;padding:16px 2px}
.petNewsChoice>span:last-child{flex:1;overflow-wrap:anywhere}
.petNewsItem a{overflow-wrap:anywhere}

/* Selection status has its own fixed column, so labels never move when it changes. */
#petOwnResults .petSearchResultCard{grid-template-columns:40px minmax(0,1fr) 76px;gap:10px}
#petOwnResults .petSearchResultCard>.petSearchAdded{display:block;justify-self:end;align-self:center;width:76px;min-width:76px;max-width:76px;margin:0;padding:0;border:0;background:transparent;color:#b5dab6;font-size:11px;font-weight:500;line-height:1.5;text-align:right;white-space:nowrap;animation:none;transform:none;transition:none;box-shadow:none}
#petOwnResults .petSearchResultCard>.petSearchAdded[data-fresh="true"]{color:#e6cba0}
#petOwnResults .petSearchResultLabel{min-width:0}

/* The research entry stays stationary through touch and history restoration. */
#petHome #petHomeBacktest,#petHome #petHomeBacktest:is(:active,:focus,:focus-visible,.touchPressed,.touchReleased){outline:none;border:0;background:transparent;box-shadow:none;transform:none;scale:1;animation:none;filter:none;transition:none;-webkit-tap-highlight-color:transparent}

/* Both exposed edges project the same physical thickness; no fixed right bias. */
@media(max-width:720px){
 #petDeck:not(.deckChartMode) .deckCard,#petDeck.deckChartMode .deckCard{--deck-core-x:0px;box-shadow:0 9px 0 #17202c,0 12px 9px #060b1460,0 22px 34px #0005}
 #petDeck:not(.deckChartMode) .deckCard:before,#petDeck.deckChartMode .deckCard:before{transform:translate(var(--deck-core-x,0px),7px) scaleX(1.008);background:linear-gradient(90deg,#647587,#2c394b 25%,#172231 50%,#2c394b 75%,#647587);box-shadow:inset 1px 0 0 #bfd0dc66,inset -1px 0 0 #bfd0dc66,0 2px 0 #101923;transition:transform 360ms cubic-bezier(.22,.72,.25,1)}
 #petDeck:not(.deckChartMode) .deckCard.deckDragging:before,#petDeck.deckChartMode .deckCard.deckDragging:before{transition:none}
}
@media(prefers-reduced-motion:reduce){#petDeck:not(.deckChartMode) .deckCard:before,#petDeck.deckChartMode .deckCard:before{transition:none}}

/* Research stays inside the current app and below its fixed safe-area header. */
html[data-device="phone"] #researchDialog,#researchDialog{inset:0;margin:0;padding:0;width:var(--phone-layout-width,100vw);max-width:none;height:var(--phone-layout-height,100dvh);max-height:none;border:0;border-radius:0;background:transparent;overflow:hidden;overscroll-behavior:none;box-sizing:border-box}
#researchDialog[open]{display:flex;flex-direction:column}
#researchDialog .researchSheetHead{display:flex;flex:none;align-items:center;gap:14px;padding:calc(var(--ui-safe-top,env(safe-area-inset-top,0px)) + 12px) 18px 12px;background:#243a53;color:#edf3fa;border-bottom:1px solid #b5ccdd30}
#researchDialog .researchSheetHead strong{font-size:19px}
#researchDialog #researchClose,#researchDialog #researchClose:is(:active,:focus,:focus-visible,.touchPressed,.touchReleased){display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #bfd4e34d;border-radius:14px;background:#21354b;color:#d4e8f3;line-height:0;outline:none;box-shadow:none;transform:none;scale:1;animation:none;transition:none;-webkit-tap-highlight-color:transparent}
#researchClose svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#researchDialog .researchFrameHost{flex:1;min-height:0;overflow:hidden;margin-bottom:var(--ui-safe-bottom,env(safe-area-inset-bottom,0px));padding:0}
#researchDialog iframe{display:block;width:100%;height:100%;border:0;min-height:0;background:transparent;color-scheme:dark;visibility:hidden}
#researchDialog iframe.researchFrameReady{visibility:visible}

body:has(#researchDialog[open]) #petHome{visibility:hidden}

/* Cached quotes and transient retries are distinct from a disconnected network. */
.status.warn:before,.petStatus.warn:before{background:#d5a750;animation:none}

/* Shared loading treatment for news and the strategy page. */
.mobilePageLoading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:180px;color:#b5cbd9;font-size:14px;letter-spacing:.08em}
.mobileLoadingRing{width:17px;height:17px;border:2px solid #a4c7d42b;border-top-color:#b9e4e5;border-radius:50%;animation:mobileLoadingTurn 1.1s linear infinite;flex:none}
@keyframes mobileLoadingTurn{to{transform:rotate(360deg)}}
#researchDialog .researchFrameHost{position:relative}
#researchDialog .researchFrameHost>.mobilePageLoading{position:absolute;inset:0;min-height:0;z-index:1}
@media(prefers-reduced-motion:reduce){.mobileLoadingRing{animation:none}}
/* Brushed metal identity plate and recessed laser-etched lettering. */
#authDialog .accountIdentityPlate{position:relative;isolation:isolate;min-width:0;padding:17px;border-radius:18px;margin-bottom:8px;background:repeating-linear-gradient(2deg,#c9dce609 0 1px,transparent 1px 4px),linear-gradient(115deg,#667c8c,#a4b5bf 18%,#6f8797 35%,#354b5f 62%,#8298a8 87%,#405568);border:1px solid #d7e7ef42;box-shadow:inset 0 1px #f2faff70,inset 0 -1px #0c1c2b80,0 7px 18px #06131f2e;color:#122d40;text-shadow:0 1px 0 #edfbffb3,0 -1px 0 #10233899}
#authDialog #authSigned .accountIdentityPlate>p{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:0;border:0;background:none;color:inherit;font-size:13px;line-height:1.5;font-weight:700}
#authDialog #authSigned .accountIdentityPlate>p+p{margin-top:12px}
#authDialog .accountIdentityPlate>p>span{flex:none}
#authDialog .accountIdentityPlate>p:after{content:none}
#authDialog.mobilePasswordView .accountIdentityPlate{display:none}
#authDialog #authSignedName,#authDialog #accountId{color:#122d40!important;text-shadow:0 1px 0 #edfbffb3,0 -1px 0 #10233899;font-weight:700;letter-spacing:.035em}
#authDialog #accountId{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em;font-size:13px}
html[data-device="phone"] :is(input,textarea,select){font-size:16px!important;scroll-margin:0}
/* Compact identity page keeps its actions clear of the home indicator. */
@media(max-height:700px){
 #authDialog:not(.mobilePasswordView):has(#authSigned:not([hidden])) .authMascot{height:92px;margin-bottom:4px}
 #authDialog:not(.mobilePasswordView):has(#authSigned:not([hidden])) .authMascot:after{width:92px;height:92px}
 #authDialog:not(.mobilePasswordView) #authSigned{gap:8px}
 #authDialog:not(.mobilePasswordView) #authSigned>p:has(#accountId){margin-top:-8px}
 #authDialog #accountId{font-size:12px;letter-spacing:.035em}
}
html[data-device="phone"] #authDialog:not(.mobilePasswordView):has(#authSigned:not([hidden])) .authPanel{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}

/* News waits in the same centered content region as the strategy page. */
#petNewsDialog[open]:has(#petNewsList>.mobilePageLoading){display:flex;flex-direction:column;overflow:hidden}
#petNewsDialog:has(#petNewsList>.mobilePageLoading) .petNewsHead{flex:none;border-bottom:1px solid transparent}
#petNewsDialog #petNewsList:has(>.mobilePageLoading){position:relative;flex:1;min-height:0;padding:0;margin:0 0 var(--ui-safe-bottom,env(safe-area-inset-bottom,0px))}
#petNewsDialog #petNewsList>.mobilePageLoading{position:absolute;inset:0;min-height:0;z-index:1}

.deckPriceStrong .deckPriceSource{display:block;margin-top:2px;font-size:10px;font-weight:400;line-height:1.3;letter-spacing:0;color:var(--muted,#a9bbc8)}

/* The touch application keeps its mobile shell while expanding for tablets. */
@media(min-width:760px){
 html[data-device="phone"] #petHome .petStage{padding-left:clamp(24px,5vw,64px);padding-right:clamp(24px,5vw,64px)}
 html[data-device="phone"] #petHome .petActor{max-width:var(--pet-actor-limit,240px)}
 html[data-device="phone"] #petHome .petSlot.empty .petIsland{max-width:160px;height:120px}
 html[data-device="phone"] #petHome .petName{font-size:17px}
 html[data-device="phone"] #petDeck .deckCard{width:calc(100% - 96px);max-width:880px}
 html[data-device="phone"] #petDeck .deckNeighbor{width:calc(100% - 96px);max-width:880px}
 html[data-device="phone"] #petDeck .deckFrame{padding:clamp(20px,3vw,34px);gap:14px}
 html[data-device="phone"] #petDeck .deckTitleRow>strong{font-size:24px}
 html[data-device="phone"] #petDeck .deckPriceStrong{font-size:36px}
 html[data-device="phone"] #petDeck .deckLogo{width:96px;height:96px}
}

/* Companion displays keep the chamber above its plaque on tablets too. */
@media(min-width:600px){
 html[data-device="phone"] #petWorldDialog .petWorldBody{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:stretch}
 html[data-device="phone"] #petWorldDialog .petWorldExhibit{height:auto;max-height:none}
 html[data-device="phone"] #petWorldDialog .petWorldInfo{max-width:680px}
}