/* 2.44.0 跟单社区「深海金」：深色卡片 + 金色强调（由 2.32.0 浅色「极光玻璃」改色而来）。只作用于 .cpx（跟单社区页面）和 .cpx-modal。
   类名与布局规则全部保留，只改颜色 / 背景 / 边框 / 阴影；浅色极光已去掉。 */
.cpx, .cpx-modal {
  --cp-bg: transparent; --cp-ink: #e8edf4; --cp-mute: #8da2bd; --cp-line: #16304f;
  --cp-glass: linear-gradient(180deg, #0e2138, #0a1a2d); --cp-glass-b: #1a3352; --cp-shadow: none;
  --cp-accent: #e9c46a; --cp-accent2: #f6dc97; --cp-pos: #45e0a0; --cp-neg: #ff8a95; --cp-r: 18px; --cp-r-s: 14px;
  --cp-tile: rgba(6, 17, 31, .55); --cp-inset: #081629;
}
.cpx { margin: 0; padding: 0; position: relative; isolation: isolate; color: var(--cp-ink); background: var(--cp-bg); overflow: visible; }  /* 浅色版用负边距铺满极光底色；深色版背景透明，不再需要 */
.cpx .pos { color: var(--cp-pos); } .cpx .neg { color: var(--cp-neg); }
.cpx a { color: var(--cp-accent); } .cpx a:hover { color: var(--cp-accent2); }
.cpx h1, .cpx h2, .cpx h3, .cpx h4 { color: var(--cp-ink); }

/* 极光（浅色版专用）：深海金主题不再显示 */
.cpx-aurora { display: none; }
@keyframes cpx-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(80px, 40px) scale(1.12); } 100% { transform: translate(-40px, 90px) scale(.95); } }

/* 页头 / 分区 */
.cpx-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cpx-head .x-title { flex: 1 1 260px; min-width: 0; }
.cpx-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin: 2px 0 0; }
.cpx-head p { margin: 3px 0 0; color: var(--cp-mute); max-width: 60ch; font-size: 13px; }
.cpx-head-act { display: flex; gap: 8px; flex-wrap: wrap; }
.cpx-ghost, .cpx-tabs button { display: inline-flex; align-items: center; gap: 7px; }
.cpx-tabs .x-ic, .cpx-ghost .x-ic { width: 15px; height: 15px; }
.cpx-note .x-ic, .cpx-empty .x-ic { width: 16px; height: 16px; margin-right: 4px; }
.cpx-empty .x-ic { display: block; width: 26px; height: 26px; margin: 0 auto 8px; color: #4f6683; }
.cpx-wallet { position: relative; overflow: hidden; border-color: #22406a; background: radial-gradient(100% 140% at 100% 0%, rgba(212, 168, 75, .16), transparent 60%), linear-gradient(180deg, #0e2138, #0a1a2d); }
.cpx-wallet-ic { float: right; width: 46px; height: 46px; border-radius: 14px; background: rgba(233, 196, 106, .14); color: #e9c46a; display: flex; align-items: center; justify-content: center; margin-left: 12px; }
.cpx-wallet-ic .x-ic { width: 22px; height: 22px; }
.cpx-wallet .cpx-big { color: var(--cp-accent2); margin: 4px 0 6px; }
.cpx-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 99px; background: #08172a; border: 1px solid #16304f; box-shadow: var(--cp-shadow); margin-bottom: 18px; flex-wrap: wrap; }
.cpx-tabs button { border: 1px solid transparent; background: transparent; padding: 8px 16px; border-radius: 99px; font-weight: 600; color: var(--cp-mute); cursor: pointer; transition: all .18s; }
.cpx-tabs button:hover { color: var(--cp-ink); }
.cpx-tabs button.on { background: rgba(233, 196, 106, .14); border-color: rgba(233, 196, 106, .4); color: var(--cp-accent2); }
.cpx-tabs em { font-style: normal; display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: var(--cp-accent); color: #1a1306; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.cpx-note { padding: 10px 14px; border-radius: var(--cp-r-s); background: rgba(60, 130, 230, .09); border: 1px solid rgba(90, 150, 240, .3); color: #c3d6f5; font-size: 13px; margin-bottom: 12px; }
.cpx-note.m-shadow { border-left: 3px solid #f0cf7a; } .cpx-note.m-off { border-left: 3px solid var(--cp-neg); }

/* 按钮 */
.cpx-btn { border: 0; cursor: pointer; font-weight: 700; color: #1a1306; padding: 11px 20px; border-radius: 11px; background: linear-gradient(135deg, #f3d58a, #d4a84b 55%, #b98a2e); background-size: 160% 100%; box-shadow: none; transition: background-position .4s, transform .15s, box-shadow .2s; }
.cpx-btn:hover:not(:disabled) { background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(212, 168, 75, .3); }
.cpx-btn:disabled { opacity: .38; cursor: default; box-shadow: none; }
.cpx-btn.big { padding: 13px 30px; font-size: 16px; }
.cpx-ghost { border: 1px solid #24426a; background: rgba(16, 37, 64, .6); color: #dbe4ef; padding: 9px 16px; border-radius: 11px; font-weight: 600; cursor: pointer; transition: all .2s; }
.cpx-ghost:hover { border-color: var(--cp-accent); color: var(--cp-accent2); background: rgba(212, 168, 75, .08); }
.cpx-star { width: 42px; height: 42px; border-radius: 11px; border: 1px solid #24426a; background: rgba(16, 37, 64, .6); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; transition: all .2s; }
.cpx-star:hover { border-color: var(--cp-accent); }
.cpx-star svg { width: 20px; height: 20px; fill: none; stroke: #6f86a3; stroke-width: 1.8; stroke-linejoin: round; }
.cpx-star.on { border-color: rgba(233, 196, 106, .5); background: rgba(233, 196, 106, .12); }
.cpx-star.on svg { fill: #e9c46a; stroke: #e9c46a; }
.cpx-star.big { width: 46px; height: 46px; }
.cpx button:focus-visible, .cpx input:focus-visible, .cpx select:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; }

/* 卡片（原玻璃卡） */
.cpx-glass { background: var(--cp-glass); border: 1px solid var(--cp-glass-b); border-radius: var(--cp-r); box-shadow: var(--cp-shadow); padding: 20px 22px; margin-bottom: 18px; min-width: 0; }
.cpx-glass h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.cpx-glass h4 { margin: 16px 0 8px; font-size: 13px; color: #9fb1c8; font-weight: 700; }
.cpx-empty { padding: 30px; text-align: center; color: #6f86a3; grid-column: 1 / -1; border: 1px dashed #24426a; border-radius: 16px; }
.cpx-av { display: inline-flex; border-radius: 50%; overflow: hidden; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(233, 196, 106, .25); }
.cpx-av img, .cpx-av svg { display: block; object-fit: cover; border-radius: 50%; }
.cpx-av.xl { box-shadow: 0 0 0 4px rgba(233, 196, 106, .25), 0 14px 40px rgba(0, 0, 0, .4); }

/* 领跑横幅 */
.cpx-spot { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 22px; align-items: center; padding: 24px 26px; border-radius: 18px; margin-bottom: 18px; background: radial-gradient(110% 140% at 0% 0%, rgba(212, 168, 75, .16), transparent 55%), linear-gradient(180deg, #0e2138, #0a1a2d); border: 1px solid #22406a; box-shadow: var(--cp-shadow); }
.cpx-spot-copy small { color: var(--cp-accent); font-weight: 800; letter-spacing: .14em; font-size: 12px; }
.cpx-spot-copy > b { display: block; font-size: 20px; font-weight: 800; margin: 4px 0 14px; line-height: 1.3; }
.cpx-spot-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.cpx-spot-stats span { display: flex; flex-direction: column; font-size: 11px; color: #6f86a3; padding: 9px 11px; border-radius: 12px; background: var(--cp-tile); border: 1px solid #16304f; flex: 1 1 90px; }
.cpx-spot-stats b { font-size: 20px; font-weight: 600; color: var(--cp-accent2); font-variant-numeric: tabular-nums; font-family: var(--num); }
.cpx-spot-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; }
.cpx-spot-card { position: relative; border: 1px solid var(--cp-glass-b); background: linear-gradient(180deg, #0e2138, #0a1a2d); border-radius: 16px; padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; color: var(--cp-ink); font-family: inherit; }
.cpx-spot-card:hover { transform: translateY(-4px); border-color: rgba(233, 196, 106, .45); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
.cpx-spot-card.p1 { order: 2; padding-top: 26px; padding-bottom: 22px; border-color: rgba(233, 196, 106, .45); box-shadow: 0 18px 44px rgba(233, 196, 106, .12); background: linear-gradient(180deg, rgba(233, 196, 106, .12), #0a1a2d 70%); }
.cpx-spot-card.p2 { order: 1; } .cpx-spot-card.p3 { order: 3; }
.cpx-rank { position: absolute; top: 10px; left: 12px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #8da2bd; background: rgba(140, 160, 190, .14); }
.cpx-spot-card.p1 .cpx-rank { color: #1a1306; background: var(--cp-accent); }
.cpx-spot-name { font-weight: 700; font-size: 13.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpx-ret { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--num); }
.cpx-spot-card small { font-size: 11px; color: #6f86a3; }

/* 筛选 */
.cpx-filters { margin-bottom: 16px; padding: 16px 18px; border-radius: 18px; background: var(--cp-glass); border: 1px solid var(--cp-glass-b); }
.cpx-sorts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #132a46; }
.cpx-sorts button { border: 1px solid transparent; background: transparent; padding: 7px 12px; border-radius: 99px; color: var(--cp-mute); font-weight: 600; font-size: 13px; cursor: pointer; transition: all .18s; }
.cpx-sorts button:hover { color: var(--cp-ink); }
.cpx-sorts button.on { color: var(--cp-accent2); background: rgba(233, 196, 106, .14); border-color: rgba(233, 196, 106, .4); }
.cpx-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cpx-chips button { border: 1px solid #1f3b60; background: #081629; padding: 6px 12px; border-radius: 99px; font-size: 12.5px; cursor: pointer; color: #c6d3e3; transition: all .18s; }
.cpx-chips button:hover { border-color: #2c5080; }
.cpx-chips button.on { background: rgba(233, 196, 106, .1); color: var(--cp-accent2); border-color: var(--cp-accent); }
.cpx-search { display: flex; align-items: center; gap: 6px; background: #081629; border: 1px solid #1f3b60; border-radius: 11px; padding: 7px 12px; transition: border-color .2s, box-shadow .2s; }
.cpx-search:focus-within { border-color: var(--cp-accent); box-shadow: 0 0 0 4px rgba(233, 196, 106, .14); }
.cpx-search svg { width: 16px; height: 16px; fill: none; stroke: #6f86a3; stroke-width: 2; }
.cpx-search input { border: 0; background: transparent; outline: none; width: 180px; color: var(--cp-ink); }
.cpx-search input::placeholder { color: #4f6683; }

/* 策略卡 */
.cpx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.cpx-grid.two { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 18px; }
.cpx-grid.two .cpx-glass { margin: 0; }
.cpx-card { background: var(--cp-glass); border: 1px solid var(--cp-glass-b); border-radius: var(--cp-r); box-shadow: var(--cp-shadow); padding: 18px; cursor: pointer; transition: transform .25s, box-shadow .25s, border-color .25s; min-width: 0; }
.cpx-card:hover { transform: translateY(-3px); border-color: rgba(233, 196, 106, .45); box-shadow: 0 14px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(233, 196, 106, .12); }
.cpx-card-top { display: flex; align-items: center; gap: 12px; }
.cpx-who { flex: 1; min-width: 0; }
.cpx-who b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpx-who small { color: #6f86a3; font-size: 12px; font-family: var(--num); }
.cpx-risk { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.cpx-risk.r-low { background: rgba(47, 209, 139, .13); color: #45e0a0; } .cpx-risk.r-mid { background: rgba(233, 196, 106, .14); color: #f0cf7a; } .cpx-risk.r-high { background: rgba(255, 93, 108, .13); color: #ff8a95; } .cpx-risk.r-na { background: rgba(140, 160, 190, .14); color: #a9b8cc; }
.cpx-card-perf { display: flex; align-items: flex-end; gap: 10px; margin: 14px 0 12px; }
.cpx-card-spark { flex: 1; height: 50px; min-width: 0; }
.cpx-spark { width: 100%; height: 100%; display: block; }
.cpx-card-ret { text-align: right; white-space: nowrap; }
.cpx-card-ret small { display: block; font-size: 11px; color: #6f86a3; }
.cpx-card-ret b { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; font-family: var(--num); }
.cpx-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cpx-tiles div { background: var(--cp-tile); border: 1px solid #16304f; border-radius: 12px; padding: 9px 11px; min-width: 0; }
.cpx-tiles small, .cpx-mini small { display: block; font-size: 11px; color: #6f86a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpx-tiles b { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--num); }
.cpx-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 2px 4px; }
.cpx-mini b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--num); color: var(--cp-ink); }
.cpx-card-act { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #16304f; }
.cpx-card-act .cpx-btn { flex: 1; }

/* 详情：主视觉（3D 光带） */
.cpx-back { display: table; margin-bottom: 12px; font-weight: 600; font-size: 13px; color: var(--cp-accent) !important; text-decoration: none; }
.cpx-back:hover { color: var(--cp-accent2) !important; }
.cpx-hero { position: relative; border-radius: 18px; overflow: hidden; min-height: 300px; margin-bottom: 18px; background: radial-gradient(90% 140% at 100% 0%, rgba(212, 168, 75, .14), transparent 60%), linear-gradient(160deg, #13294a, #0a1a2d 70%); border: 1px solid #22406a; box-shadow: var(--cp-shadow); }
.cpx-ribbon { position: absolute; inset: 0; }
.cpx-ribbon canvas.cpx-gl { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.cpx-hero-in { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 26px 28px; min-height: 300px; flex-wrap: wrap; background: linear-gradient(0deg, rgba(10, 26, 45, .92) 0, rgba(10, 26, 45, 0) 60%); }
.cpx-hero-who { display: flex; align-items: center; gap: 18px; }
.cpx-hero-who h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.01em; }
.cpx-hero-who small { color: #8da2bd; font-family: var(--num); }
.cpx-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cpx-tags span:not(.cpx-risk) { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: rgba(233, 196, 106, .12); color: #f0cf7a; border: 0; }
.cpx-hero-ret { text-align: right; }
.cpx-hero-ret small { display: block; color: #8da2bd; font-size: 12px; }
.cpx-hero-ret > b { font-size: clamp(32px, 4.4vw, 44px); font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; font-family: var(--num); text-shadow: 0 0 30px rgba(233, 196, 106, .15); }
.cpx-hero-act { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.cpx-profile p { margin: 6px 0 6px; line-height: 1.75; max-width: 90ch; white-space: pre-wrap; color: #c6d3e3; font-size: 13.5px; }
.cpx-profile h4:first-child { margin-top: 0; }
.cpx-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cpx-pills span { background: var(--cp-inset); border: 1px solid #16304f; border-radius: 99px; padding: 6px 12px; font-size: 12.5px; color: var(--cp-mute); }
.cpx-pills b { color: var(--cp-accent2); margin-left: 4px; font-weight: 600; font-family: var(--num); }

.cpx-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 18px; }
.cpx-two > .cpx-glass { margin-bottom: 18px; }
.cpx-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cpx-seg { display: inline-flex; gap: 4px; background: #08172a; border: 1px solid #16304f; padding: 4px; border-radius: 99px; }
.cpx-seg button { border: 1px solid transparent; background: transparent; padding: 6px 16px; border-radius: 99px; font-weight: 600; color: var(--cp-mute); cursor: pointer; font-size: 13px; transition: all .18s; }
.cpx-seg button:hover { color: var(--cp-ink); }
.cpx-seg button.on { background: rgba(233, 196, 106, .14); border-color: rgba(233, 196, 106, .4); color: var(--cp-accent2); }
.cpx-seg.sm button { padding: 5px 12px; font-size: 12.5px; }
.cpx-select { border: 1px solid #1f3b60; background: #081629; border-radius: 11px; padding: 7px 12px; color: var(--cp-ink); }
.cpx-select:focus { outline: none; border-color: var(--cp-accent); box-shadow: 0 0 0 4px rgba(233, 196, 106, .14); }
.cpx-kpi small { color: var(--cp-mute); font-size: 12px; } .cpx-kpi b { display: block; font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 4px; font-family: var(--num); }
.cpx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 8px; }
.cpx-kpis > div { padding: 9px 11px; border-radius: 12px; background: var(--cp-tile); border: 1px solid #16304f; min-width: 0; }
.cpx-kpis small { display: block; font-size: 11px; color: #6f86a3; } .cpx-kpis b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--num); }
.cpx-chart { width: 100%; height: auto; display: block; overflow: visible; }
.cpx-ax { font-size: 11px; fill: #6f86a3; font-family: var(--num, inherit); }
.cpx-pulse { animation: cpx-pulse 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cpx-pulse { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(2.2); opacity: 0; } }
.cpx-ls { position: relative; height: 30px; border-radius: 99px; overflow: hidden; background: rgba(255, 93, 108, .25); display: flex; justify-content: space-between; align-items: center; padding: 0 14px; font-size: 12px; font-weight: 700; }
.cpx-ls i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(47, 209, 139, .55), rgba(47, 209, 139, .3)); border-radius: 0; }
.cpx-ls span { position: relative; } .cpx-ls span:first-of-type { color: #bdf0d8; } .cpx-ls span:last-of-type { color: #ffc2c8; }
.cpx-heat-wrap { overflow-x: auto; } .cpx-heat { width: 100%; min-width: 620px; height: auto; display: block; }
.cpx-trades { text-align: center; }
.cpx-donut { width: 180px; height: 180px; display: block; margin: 0 auto 6px; }
.cpx-dc { font-size: 24px; font-weight: 600; fill: var(--cp-accent2); font-family: var(--num, inherit); } .cpx-ds { font-size: 11px; fill: var(--cp-mute); }
.cpx-trades > small { display: block; color: var(--cp-mute); font-size: 12px; }
.cpx-big { display: block; font-size: 30px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; margin-bottom: 10px; font-family: var(--num); }
.cpx-wl { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.cpx-wl.pos { background: rgba(47, 209, 139, .08); color: #45e0a0; } .cpx-wl.neg { background: rgba(255, 93, 108, .08); color: #ff8a95; }
.cpx-dl { margin: 12px 0 0; display: grid; gap: 0; text-align: left; }
.cpx-dl div { display: flex; justify-content: space-between; border-top: 1px dashed #24426a; padding: 8px 0; font-size: 13px; }
.cpx-dl dt { color: var(--cp-mute); } .cpx-dl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--num); }
.cpx-cal { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 12px; }
.cpx-cal div { border-radius: 10px; padding: 8px 4px; text-align: center; background: #081629; border: 1px solid #16304f; min-width: 0; transition: transform .2s; }
.cpx-cal div:hover { transform: translateY(-2px); }
.cpx-cal div.na { opacity: .45; }
.cpx-cal small { display: block; font-size: 10.5px; color: var(--cp-mute); } .cpx-cal b { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--num); }
.cpx-cal .up b { color: #45e0a0; } .cpx-cal .dn b { color: #ff8a95; }
.cpx-cal .up.l1 { background: rgba(47, 209, 139, .07); } .cpx-cal .up.l2 { background: rgba(47, 209, 139, .14); } .cpx-cal .up.l3 { background: rgba(47, 209, 139, .22); border-color: rgba(47, 209, 139, .35); } .cpx-cal .up.l4 { background: rgba(47, 209, 139, .32); border-color: rgba(47, 209, 139, .5); }
.cpx-cal .dn.l1 { background: rgba(255, 93, 108, .07); } .cpx-cal .dn.l2 { background: rgba(255, 93, 108, .14); } .cpx-cal .dn.l3 { background: rgba(255, 93, 108, .22); border-color: rgba(255, 93, 108, .35); } .cpx-cal .dn.l4 { background: rgba(255, 93, 108, .32); border-color: rgba(255, 93, 108, .5); }
.cpx-fine { font-size: 11.5px; color: #6f86a3; margin: 14px 0 0; line-height: 1.6; }
.cpx-alloc { text-align: center; } .cpx-alloc h3 { text-align: left; }
.cpx-alloc .cpx-seg { margin-bottom: 10px; }
.cpx-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; }
.cpx-legend span { font-size: 12.5px; color: #c6d3e3; background: transparent; border-radius: 99px; padding: 2px 0; }
.cpx-legend b { font-family: var(--num); font-weight: 600; }
.cpx-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.cpx-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cpx-plan { background: var(--cp-inset); border: 1px solid #1a3352; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--cp-mute); }
.cpx-plan b { color: var(--cp-ink); font-size: 14px; } .cpx-plan em { font-style: normal; color: var(--cp-accent2); font-weight: 600; font-family: var(--num); }
.cpx-plan small { font-size: 12px; color: #6f86a3; }
.cpx-sim { position: relative; overflow: hidden; border-color: #22406a; background: radial-gradient(90% 120% at 100% 100%, rgba(212, 168, 75, .10), transparent 60%), linear-gradient(180deg, #0e2138, #0a1a2d); }
.cpx-sim label { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: #9fb1c8; font-weight: 700; }
.cpx-sim input { border: 1px solid #1f3b60; border-radius: 11px; padding: 10px 13px; font-size: 18px; background: #081629; color: var(--cp-ink); font-family: var(--num); transition: border-color .2s, box-shadow .2s; }
.cpx-sim input:focus { outline: none; border-color: var(--cp-accent); box-shadow: 0 0 0 4px rgba(233, 196, 106, .14); }
.cpx-sim-out { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(6, 17, 31, .6); border: 1px solid #1a3352; }
.cpx-sim-out small { display: block; color: var(--cp-mute); font-size: 12px; }
.cpx-sim-out b { display: block; font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 4px 0; font-family: var(--num); }
.cpx-table { width: 100%; }
.cpx .cpx-table th, .cpx .cpx-table td { border-color: #132a46 !important; background: transparent !important; }
.cpx .cpx-table th { color: var(--muted2, #6f86a3); }
.cpx .cpx-table tbody tr:hover td { background: rgba(233, 196, 106, .04) !important; }
.cpx-checks { display: flex; flex-wrap: wrap; gap: 12px; }
.cpx-checks label { display: flex; gap: 6px; align-items: center; font-weight: 400 !important; color: #c6d3e3 !important; }
.cpx-modal .field input[type=checkbox] { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: #e9c46a; }

@media (max-width: 1100px) { .cpx-two { grid-template-columns: 1fr; } .cpx-spot { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .cpx-head h1 { font-size: 21px; }
  .cpx-grid { grid-template-columns: 1fr; }
  .cpx-spot { padding: 16px; } .cpx-spot-cards { gap: 8px; } .cpx-ret { font-size: 17px; }
  .cpx-hero-in { padding: 18px; } .cpx-hero-ret { text-align: left; width: 100%; } .cpx-hero-act { justify-content: flex-start; }
  .cpx-kpis { grid-template-columns: repeat(2, 1fr); }
  .cpx-cal { grid-template-columns: repeat(6, 1fr); }
  .cpx-search input { width: 120px; }
  .cpx-seg button { padding: 6px 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .cpx-aurora i, .cpx-pulse { animation: none !important; } .cpx-card, .cpx-spot-card { transition: none; } }