/* Coral Community Console — Web3 / Fintech, not marketing */

.cc-body {
  --cc-blue: #2563eb;
  --cc-blue-2: #1d4ed8;
  --cc-ink: #0f172a;
  --cc-muted: #64748b;
  --cc-dim: #94a3b8;
  --cc-line: #e2e8f0;
  --cc-bg: #f4f7fb;
  --cc-card: #fff;
  margin: 0;
  min-height: 100vh;
  background: #f4f7fb;
  color: #0f172a;
  font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
}

.cc-app {
  display: grid;
  grid-template-columns: 16.4rem minmax(0, 1fr);
  min-height: 100vh;
}

.cc-side {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 1.1rem 0.8rem 0.85rem;
  background: #fff;
  border-right: 1px solid var(--cc-line);
  position: sticky;
  top: 0;
  overflow: hidden;
}

.cc-brand-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.2rem 0.45rem 1.05rem;
}
.cc-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.6rem;
  width: 100%;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}
.cc-brand img,
.cc-brand svg {
  display: block;
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
  border-radius: 0.52rem;
  color: var(--cc-blue);
}
.cc-brand__text {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}
.cc-brand strong {
  display: block;
  font-size: 1.12rem;
  letter-spacing: -0.04em;
  font-weight: 800;
  line-height: 1;
  color: var(--cc-ink);
}
.cc-brand__meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.cc-brand__meta em {
  color: #0ea5e9;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.cc-brand__meta span,
.cc-brand__ver {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.38rem;
  border-radius: 0.35rem;
  background: #eef2ff;
  color: #6366f1;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.cc-side-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 0.32rem;
  padding: 0.85rem 0.45rem 0.15rem;
}
.cc-ver {
  color: var(--cc-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cc-nav {
  display: grid;
  align-content: start;
  gap: 0.1rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.1rem;
}
.cc-nav-sec { display: grid; gap: 0.08rem; margin-top: 0.55rem; }
.cc-nav-sec:first-child { margin-top: 0.1rem; }
.cc-nav-sec__title {
  margin: 0;
  padding: 0.2rem 0.75rem 0.18rem;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.cc-nav button,
.cc-nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.46rem 0.75rem;
  border: 0;
  border-radius: 0.62rem;
  background: transparent;
  color: #334155;
  font-size: 0.86rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.cc-nav button i,
.cc-nav a i { width: 1rem; color: var(--cc-muted); }
.cc-nav button.is-on,
.cc-nav a.is-on {
  background: #eff6ff;
  color: var(--cc-blue-2);
}
.cc-nav button.is-on i,
.cc-nav a.is-on i { color: var(--cc-blue); }

.cc-upsell {
  flex-shrink: 0;
  margin-top: auto;
  padding: 0.85rem 0.8rem;
  border-radius: 0.9rem;
  background: #eff6ff;
}
.cc-upsell strong { display: block; font-size: 0.84rem; }
.cc-upsell p { margin: 0.35rem 0 0.75rem; color: var(--cc-muted); font-size: 0.75rem; line-height: 1.55; }
.cc-upsell a {
  display: inline-flex;
  color: var(--cc-blue-2);
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
}

.cc-main { display: flex; flex-direction: column; min-width: 0; }
.cc-nav-group { display: grid; gap: 0.12rem; }
.cc-nav-sub {
  display: grid;
  gap: 0.08rem;
  margin: 0 0 0.2rem 1.55rem;
}
.cc-nav-sub a {
  padding: 0.38rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
}
.cc-nav-sub a.is-on {
  background: #f8fafc;
  color: var(--cc-blue-2);
}
.cc-nav-toggle.is-active {
  color: #334155;
  background: transparent;
}
.cc-nav-caret {
  margin-left: auto;
  width: auto;
  font-size: 0.62rem;
  color: #94a3b8;
  transition: transform 0.16s ease;
}
.cc-nav-group.is-open .cc-nav-caret { transform: rotate(180deg); }
.cc-nav-sub[hidden] { display: none; }

.cc-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.6rem;
  padding: 0.7rem 1.4rem;
  background: #fff;
  border-bottom: 1px solid var(--cc-line);
}
.cc-top__title {
  margin: 0;
  margin-right: auto;
  font-size: 1rem;
  font-weight: 750;
}
.cc-top__right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.cc-net {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--cc-muted);
  font-size: 0.78rem;
  font-weight: 650;
}
.cc-net.is-ok { color: #15803d; }
.cc-net i { font-size: 0.45rem; }
.cc-icon-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--cc-line);
  border-radius: 999px;
  background: #fff;
  color: #475569;
  cursor: pointer;
}
.cc-lang { position: relative; }
.cc-lang__btn {
  display: grid;
  place-items: center;
  color: #64748b;
}
.cc-lang__btn i { font-size: 0.88rem; }
.cc-lang.is-open .cc-lang__btn,
.cc-lang__btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: var(--cc-blue-2);
}
.cc-lang__menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 80;
  min-width: 10.5rem;
  padding: 0.35rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.85rem;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
.cc-lang__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.6rem;
  background: transparent;
  color: var(--cc-ink);
  font-size: 0.84rem;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
}
.cc-lang__item:hover,
.cc-lang__item.is-on {
  background: #eff6ff;
  color: var(--cc-blue-2);
}
.cc-lang__item i {
  font-size: 0.72rem;
}
.cc-avatar {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  overflow: hidden;
}
.cc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cc-avatar--glyph {
  background: #d1d5db;
  color: #f8fafc;
}
.cc-avatar--glyph i {
  font-size: 0.58em;
}
.cc-wallet-chip__meta {
  display: grid;
  line-height: 1.15;
  text-align: left;
}
.cc-wallet-chip__meta b { font-size: 0.74rem; }
.cc-wallet-chip__meta em {
  color: var(--cc-muted);
  font-size: 0.64rem;
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cc-top__who { text-align: right; }
.cc-top__who strong { display: block; font-size: 0.82rem; }
.cc-top__who span { color: var(--cc-muted); font-size: 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cc-wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.85rem 0.32rem 0.38rem;
  border: 1px solid var(--cc-line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--cc-ink);
  font-size: 0.84rem;
  font-weight: 750;
  cursor: pointer;
}
.cc-wallet-chip > b {
  font-weight: 750;
}
.cc-guest-tag {
  flex: none;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 750;
}
.cc-wallet-chip__fox {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  display: block;
}
.cc-wallet-chip:hover { background: #eff6ff; border-color: #bfdbfe; color: var(--cc-blue-2); }
.cc-account { position: relative; }
.cc-account.is-open .cc-wallet-chip {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: var(--cc-blue-2);
}
.cc-account__menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 80;
  width: 17.5rem;
  padding: 0.9rem 0.9rem 0.85rem;
  border: 1px solid var(--cc-line);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
.cc-account__card {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.1rem 0.15rem 0.9rem;
  border-bottom: 1px solid var(--cc-line);
}
.cc-account__avatar {
  width: 2.35rem;
  height: 2.35rem;
  font-size: 0.92rem;
  flex: none;
}
.cc-account__who {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}
.cc-account__who strong {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
}
.cc-account__who em {
  color: var(--cc-muted);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-account__role {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 0.18rem;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #059669;
  font-size: 0.68rem;
  font-weight: 750;
}
.cc-account__role--guest {
  background: #fff7ed;
  color: #c2410c;
}
.cc-account__logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.58rem 0.8rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.7rem;
  background: #fff;
  color: var(--cc-ink);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.cc-account__logout:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.cc-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 0.72rem;
  font-weight: 700;
}
.cc-dot::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #10b981;
}
.cc-dot.is-off { background: #f1f5f9; color: var(--cc-muted); }
.cc-dot.is-off::before { background: #94a3b8; }

.cc-content { padding: 1.4rem 1.5rem 2.4rem; min-width: 0; }
.cc-content:has(.ccx-learn) { padding: 0 0 1.6rem; }

.cc-h {
  margin: 0 0 1.1rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.cc-sub { margin: 0 0 1.2rem; color: var(--cc-muted); font-size: 0.9rem; line-height: 1.6; }

.cc-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-line);
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  min-width: 0;
}
.cc-card.cc-pad > h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}
.cc-card.cc-pad > h3 + .cc-hint {
  margin: 0.28rem 0 0;
}
.cc-card.cc-pad > h3 + .ccx-kv {
  margin-top: 0.85rem;
}

.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.5rem 1.05rem;
  border: 0;
  border-radius: 0.7rem;
  background: var(--cc-blue);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 750;
  cursor: pointer;
  text-decoration: none;
}
.cc-btn--block { width: 100%; }
.cc-btn--ghost {
  background: #fff;
  color: var(--cc-ink);
  border: 1px solid var(--cc-line);
}
.cc-btn--text { background: transparent; color: var(--cc-blue-2); min-height: 0; padding: 0; }
.cc-ops {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.85rem;
}
.cc-ops .cc-btn--text { white-space: nowrap; }
.cc-btn--sm { min-height: 2rem; padding: 0.28rem 0.7rem; font-size: 0.8rem; }
.cc-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cc-link { color: var(--cc-blue-2); font-weight: 700; text-decoration: none; }

.cc-sim {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.68rem;
  font-weight: 750;
}

.cc-hint {
  margin: 0.45rem 0 0;
  color: var(--cc-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}
.cc-hnote {
  display: block;
  width: 100%;
  margin: 0.35rem 0 0;
  color: var(--cc-muted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.5;
}

.cc-login {
  --cc-blue: #2563eb;
  --cc-blue-2: #1d4ed8;
  --cc-ink: #0f172a;
  --cc-muted: #64748b;
  --cc-line: #e2e8f0;
  display: grid;
  grid-template-columns: minmax(17rem, 38%) minmax(0, 1fr);
  min-height: 100vh;
  background: #fff;
}
.cc-login__visual {
  position: relative;
  overflow: hidden;
  padding: 2rem 2.1rem 0;
  background: linear-gradient(165deg, #3b82f6 0%, #2563eb 46%, #1d4ed8 100%);
  color: #fff;
}
.cc-login__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  text-decoration: none;
}
.cc-login__brand svg,
.cc-login__brand img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  display: block;
}
.cc-login__brand strong { font-size: 1.5rem; letter-spacing: -0.04em; font-weight: 800; }
.cc-login__slogan {
  margin: 1.6rem 0 0;
  max-width: none;
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.35;
  white-space: nowrap;
}
.cc-login__img {
  position: absolute;
  left: 8%;
  bottom: -6%;
  width: 108%;
  max-width: none;
  pointer-events: none;
  filter: drop-shadow(0 22px 36px rgba(15, 23, 42, 0.28));
}
.cc-login__main {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 3.5rem 1.75rem 6.4rem;
}
.ccx-auth .cc-login__main {
  padding-bottom: 3.4rem;
}

.ccx-auth .cc-login__rule {
  display: block;
  width: 1px;
  height: 1.15rem;
  margin: 0 0.15rem;
  background: rgba(255, 255, 255, 0.45);
}

.ccx-auth .cc-login__brand span {
  color: #dbeafe;
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.cc-login__feats {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  width: fit-content;
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
}

.cc-login__feats li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1;
}

.cc-login__feats i {
  width: 1.2rem;
  color: #fff;
  font-size: 1.08rem;
  text-align: center;
}
.cc-login__lang {
  position: absolute;
  top: 1.35rem;
  right: 1.5rem;
  z-index: 20;
}
.cc-lang-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.18rem;
  border-radius: 999px;
  background: #f1f5f9;
}
.cc-lang-tabs__item {
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  cursor: pointer;
}
.cc-lang-tabs__item:hover { color: #2563eb; }
.cc-lang-tabs__item.is-on {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.22);
}

.cc-login__copyright {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  color: rgba(15, 23, 42, 0.42);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}

.cc-login__powered {
  position: absolute;
  left: 50%;
  bottom: 4.2rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: rgba(15, 23, 42, 0.42);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.cc-login__powered a { pointer-events: auto; }
.cc-login__powered-logo {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
  border-radius: 999px;
  overflow: hidden;
  display: block;
}

.cc-login__nettag {
  position: absolute;
  top: 1.35rem;
  right: 1.35rem;
  left: auto;
  z-index: 2;
  flex: none;
}
.cc-login__form {
  width: min(100%, 25.5rem);
  text-align: left;
}
.cc-login__form h1,
.cc-login__form .cc-h,
.cc-login__form > p,
.cc-login__form .cc-sub,
.cc-login__form .ccx-auth-foot {
  text-align: center;
}
.cc-login__form .cc-field label {
  display: block;
  text-align: left;
}
.cc-login__form h1,
.cc-login__form .cc-h {
  margin: 0 0 1.35rem;
  font-size: 1.55rem;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
.cc-login__form > p,
.cc-login__form .cc-sub {
  margin: 0 0 2.15rem;
  color: var(--cc-muted);
  font-size: 0.88rem;
  line-height: 1.65;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.cc-login__form .cc-toast {
  /* floating toast; keep fixed positioning */
}
.cc-login__cta {
  width: 100%;
  min-height: 2.9rem;
  margin-top: 0.35rem;
  border-radius: 0.7rem;
  font-size: 0.95rem;
}
.cc-login__form .cc-field {
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}
.cc-login__form--reset .cc-field {
  margin: 0 0 1rem;
}
.cc-login__form--reset .cc-login__cta {
  margin-top: 0.15rem;
}
.cc-login__form .cc-field input,
.cc-login__form .cc-field select {
  min-height: 2.85rem;
  padding: 0.72rem 0.9rem;
  border-radius: 0.7rem;
}
.cc-login__form .ccx-row-between {
  margin: 0.15rem 0 1.35rem;
}
.cc-login__form .ccx-check {
  gap: 0.45rem;
  font-size: 0.84rem;
  color: #475569;
}
.cc-login__form .ccx-check input {
  width: 0.95rem;
  height: 0.95rem;
  accent-color: var(--cc-blue);
}
.cc-login__form .cc-btn--text {
  font-size: 0.84rem;
  font-weight: 650;
}
.cc-login__form .cc-hint {
  margin: -0.5rem 0 1rem;
  text-align: left;
}
.cc-login__form .ccx-or {
  margin: 1.15rem 0 1.2rem;
}
.ccx-auth-continue {
  display: grid;
  gap: 0.65rem;
}
.ccx-auth-continue__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.95rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--cc-line);
  border-radius: 999px;
  background: #fff;
  color: var(--cc-ink);
  font-size: 0.92rem;
  font-weight: 650;
  cursor: pointer;
}
.ccx-auth-continue__inner {
  display: grid;
  grid-template-columns: 1.2rem 11.2rem;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
}
.ccx-auth-continue__btn img {
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
}
.ccx-auth-continue__btn i {
  width: 1.2rem;
  font-size: 1.05rem;
  color: #64748b;
  text-align: center;
}
.ccx-auth-continue__btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.ccx-auth-continue .cc-hint {
  margin: 0.15rem 0 0;
}
.cc-login__form .ccx-auth-foot {
  margin-top: 1.6rem;
}
.cc-login__form .cc-gate-alt {
  margin-top: 0.9rem;
  padding-top: 0;
}
.cc-login__form--onboard {
  width: min(100%, 26rem);
}
.cc-login__form--onboard .cc-form,
.cc-login__form--onboard .cc-hint,
.cc-login__form--onboard .cc-grant {
  text-align: left;
}
.cc-grant {
  margin: 1.05rem 0 0.85rem;
  padding: 0.9rem 1rem 0.85rem;
  border: 1px solid #bfdbfe;
  border-radius: 0.75rem;
  background: #eff6ff;
}
.cc-grant strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 750;
  color: #1e3a8a;
}
.cc-grant ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.7rem 0 0.65rem;
  padding: 0;
  list-style: none;
}
.cc-grant li {
  display: grid;
  gap: 0.12rem;
  padding: 0.55rem 0.45rem;
  border-radius: 0.55rem;
  background: #fff;
  text-align: center;
}
.cc-grant b {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--cc-ink, #0f172a);
}
.cc-grant li span {
  color: var(--cc-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 700;
}
.cc-grant p {
  margin: 0;
  color: #334155;
  font-size: 0.75rem;
  line-height: 1.5;
}

.cc-empty {
  padding: 4.2rem 1.75rem 3.2rem;
  text-align: center;
}
.cc-empty h1 {
  margin: 0 0 0.5rem;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
}
.cc-empty > p {
  margin: 0 auto 1.85rem;
  max-width: 28rem;
  color: var(--cc-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.cc-empty__cta {
  min-width: 11.5rem;
  min-height: 2.7rem;
  padding: 0.62rem 1.6rem;
  font-size: 0.95rem;
}
.cc-empty .cc-toast {
  margin: 0 auto 1.1rem;
  max-width: 24rem;
  text-align: left;
}
.cc-gate-alt {
  margin: 0.9rem auto 0;
  max-width: 18rem;
  padding-top: 0;
}
.cc-gate-alt__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cc-blue-2);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 750;
  cursor: pointer;
}
.cc-gate-alt__link:hover { text-decoration: underline; }
.cc-gate-alt span {
  display: block;
  margin-top: 0.32rem;
  color: var(--cc-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.cc-steps { display: flex; gap: 0.45rem; margin-bottom: 1.2rem; }
.cc-steps i {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: #e2e8f0;
}
.cc-steps i.is-on { background: var(--cc-blue); }

.cc-form { display: grid; gap: 0.85rem; max-width: 28rem; overflow: visible; }
.cc-onboard {
  max-width: 32rem;
  margin: 0 auto;
}
.cc-onboard .cc-h,
.cc-onboard .cc-sub {
  text-align: center;
}
.cc-onboard .cc-form {
  max-width: none;
  width: 100%;
}
.cc-onboard .cc-hint {
  text-align: left;
}
.cc-onboard__cta {
  display: flex;
  width: 100%;
  margin-top: 1.1rem;
  justify-content: center;
}
.cc-field { display: grid; gap: 0.32rem; }
.cc-field label { color: var(--cc-muted); font-size: 0.78rem; font-weight: 700; }
.cc-field input, .cc-field select, .cc-field textarea, .cc-select__btn {
  padding: 0.62rem 0.75rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.65rem;
  background: #fff;
  font: inherit;
}
.cc-select { width: 100%; position: relative; z-index: 1; }
.cc-select__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.cc-select__btn i {
  font-size: 0.72rem;
  color: #94a3b8;
  transition: transform 0.15s ease;
}
.cc-select.is-open { z-index: 8; }
.cc-select.is-open .cc-select__btn {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
}
.cc-select.is-open .cc-select__btn i { transform: rotate(180deg); }
.cc-select__list {
  position: absolute;
  top: calc(100% + 0.28rem);
  left: 0;
  right: 0;
  z-index: 9;
  display: grid;
  gap: 0.12rem;
  max-height: 11.5rem;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.65rem;
  background: #fff;
  box-shadow: 0 12px 32px rgb(15 23 42 / 14%);
  animation: cc-select-in 0.14s ease;
}
@keyframes cc-select-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.cc-select__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cc-select__opt:hover { background: #f8fafc; }
.cc-select__opt.is-on {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 650;
}
.cc-select.has-label .cc-select__btn {
  gap: 0.65rem;
  padding: 0.34rem 0.7rem 0.34rem 0.78rem;
  border-radius: 999px;
}
.cc-select.has-label .cc-select__label {
  color: var(--cc-muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}
.cc-select.has-label .cc-select__value {
  margin-left: auto;
  color: var(--cc-ink);
  font-size: 0.82rem;
  font-weight: 750;
  white-space: nowrap;
}
.cc-select.has-label.is-open .cc-select__btn {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}
.cc-select.has-label.is-open .cc-select__value { color: #1d4ed8; }
.cc-select.has-label .cc-select__list {
  min-width: 100%;
  width: max-content;
}
.cc-readonly {
  padding: 0.7rem 0.8rem;
  border-radius: 0.65rem;
  background: #f8fafc;
  font-family: ui-monospace, monospace;
  font-size: 0.88rem;
}
.cc-readonly--url {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem;
}
.cc-url {
  flex: 1;
  min-width: 0;
  color: inherit;
  font: inherit;
  word-break: break-all;
  text-decoration: none;
}
a.cc-url:hover { color: var(--cc-blue-2); }
.cc-settings {
  display: grid;
  gap: 1rem;
  max-width: 42rem;
}
.cc-settings .cc-form { max-width: none; width: 100%; }

.cc-grid { display: grid; gap: 1rem; }
.cc-grid--2 { grid-template-columns: 1.2fr 0.8fr; align-items: start; }
.cc-grid--2 > .cc-card { min-height: 0; }
.cc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-home-stack {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.cc-home-stack > .cc-banner { margin-bottom: 0; }

.cc-pad { padding: 1.1rem 1.15rem; }
.cc-pad h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.cc-kv input {
  min-width: 8rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.4rem;
  font: inherit;
}
.cc-kv div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.88rem; }
.cc-kv span { color: var(--cc-muted); }
.cc-kv b {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  font-weight: 700;
  word-break: break-all;
  text-align: right;
  line-height: 1.2;
}
.cc-kv--device > div {
  padding: 0.78rem 0;
  border-bottom: 1px solid var(--cc-line);
  font-size: 0.9rem;
  align-items: center;
}
.cc-kv--device > div:first-child { padding-top: 0.1rem; }
.cc-kv--device > div:last-child {
  padding-bottom: 0.1rem;
  border-bottom: 0;
}
.cc-name-edit { gap: 0.5rem; }
.cc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  border: 0;
  border-radius: 0.45rem;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
}
.cc-icon-btn:hover {
  background: #eff6ff;
  color: #2563eb;
}

.cc-profile { display: grid; gap: 1rem; margin-top: 0.85rem; }
.cc-profile__id {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
}
.cc-profile .cc-avatar {
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.cc-profile__meta { min-width: 0; flex: 1; }
.cc-profile__name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.12rem 0 0.35rem;
  min-width: 0;
}
.cc-profile__name-row .cc-readonly { flex: 1; margin: 0; }
.cc-profile__name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
}
.cc-icon-btn {
  flex: none;
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--cc-blue-2);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.cc-icon-btn i {
  display: block;
  font-size: 0.82rem;
  line-height: 1;
}
.cc-icon-btn:hover { background: #eff6ff; }
.cc-profile__wallet {
  display: flex;
  align-items: center;
}
.cc-profile__wallet .cc-addr { max-width: 100%; }
.cc-profile__uid {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: #64748b;
  letter-spacing: 0.01em;
}
.cc-profile__uid span {
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.cc-wallet-bal {
  padding-top: 0.85rem;
  border-top: 1px solid var(--cc-line, #e8edf5);
}
.cc-wallet-bal__label {
  display: block;
  font-size: 0.78rem;
  color: var(--cc-dim, #64748b);
  margin-bottom: 0.55rem;
}
.cc-addr--start { justify-content: flex-start; }
.cc-addr--start code { text-align: left; color: var(--cc-muted); }

.cc-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cc-line);
}
.cc-stats > div { display: grid; gap: 0.28rem; min-width: 0; }
.cc-stats span { color: var(--cc-muted); font-size: 0.78rem; }
.cc-stats b { font-size: 0.95rem; font-weight: 750; text-align: left; word-break: break-all; }
.cc-stats--compact {
  padding-top: 0;
  border-top: 0;
  align-self: center;
  flex: none;
}
.cc-stats b.cc-muted {
  font-size: 0.95rem;
  font-weight: 750;
  color: #94a3b8;
}

.cc-addr {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.28rem;
  max-width: 28rem;
  line-height: 1;
}
.cc-addr code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  word-break: break-all;
  text-align: right;
  color: inherit;
}
.cc-copy {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.3rem;
  background: transparent;
  color: var(--cc-blue-2);
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1;
  padding: 0;
  margin: 0;
}
.cc-copy i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  font-size: 0.78rem;
  transform: translateY(-0.04em);
}
.cc-copy:hover { background: #eff6ff; }

.cc-fiat__label {
  margin: 0;
  color: var(--cc-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cc-fiat {
  display: flex;
  flex-direction: column;
}
.cc-fiat__mark {
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eff6ff;
  color: var(--cc-blue-2);
  font-size: 0.82rem;
  font-weight: 800;
}
.cc-asset--fiat {
  padding: 0.4rem 0.15rem;
  border-bottom: 0;
}
.cc-fiat__note {
  margin: 0.85rem 0 0;
}

.cc-readonly .cc-addr { max-width: 100%; justify-content: flex-start; }
.cc-readonly .cc-addr code { text-align: left; }

.cc-assets { display: grid; gap: 0; }
.cc-asset {
  display: grid;
  grid-template-columns: 1.7rem 1fr auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.1rem;
  border-bottom: 1px solid #f1f5f9;
}
.cc-asset:last-child { border-bottom: 0; }
.cc-asset img { width: 1.55rem; height: 1.55rem; }
.cc-asset strong { display: block; font-size: 0.84rem; font-weight: 700; }
.cc-asset em { color: var(--cc-dim); font-size: 0.72rem; font-style: normal; }
.cc-asset b {
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.cc-posbox {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.cc-posbox--experience {
  align-items: center;
  gap: 1rem 1.75rem;
}
.cc-posbox--experience > div:first-child {
  flex: 1 1 14rem;
  min-width: 0;
}
.cc-posbox--experience .cc-posbox__aside {
  display: flex;
  align-items: center;
  gap: 1.15rem 1.35rem;
  flex: none;
  flex-wrap: wrap;
}
.cc-posbox--experience .cc-stats--compact {
  gap: 0.75rem 1.35rem;
}
.cc-posbox--experience > .cc-btn,
.cc-posbox--experience .cc-posbox__aside > .cc-btn {
  align-self: center;
  flex-shrink: 0;
}
.cc-posbox h3,
.cc-pad.cc-posbox h3,
.cc-pad .cc-posbox h3 { margin: 0; }
.cc-posbox p {
  margin: 0.4rem 0 0;
  color: #475569;
  font-size: 0.88rem;
  line-height: 1.55;
}
.cc-posbox .cc-acts { gap: 0.75rem; }
.cc-pad.cc-posbox { padding: 1.4rem 1.45rem; }

.cc-table { width: 100%; min-width: 1440px; border-collapse: collapse; font-size: 0.82rem; white-space: nowrap; }
.cc-table-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  container-type: inline-size;
}
.cc-table-scroll--x {
  margin: 0 -0.15rem;
  padding-bottom: 0.35rem;
}
.cc-table--orders {
  min-width: 2080px;
}
.cc-table--orders tbody tr {
  cursor: default;
}
.cc-addr-cell .cc-copy {
  margin-left: 0.2rem;
  vertical-align: -0.08em;
}
.cc-th-kyt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}
.cc-th-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cc-blue-2);
  cursor: help;
}
.cc-th-info i { font-size: 0.78rem; }
.cc-th-info__pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  bottom: auto;
  z-index: 20;
  width: 240px;
  padding: 0.58rem 0.7rem;
  border-radius: 0.6rem;
  background: #0f172a;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: normal;
  text-align: left;
  box-shadow: 0 10px 28px rgb(15 23 42 / 22%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease;
  transition-delay: 0.18s;
}
.cc-th-info__pop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;
}
.cc-th-info__pop a {
  display: inline-block;
  margin-top: 0.35rem;
  color: #93c5fd;
  font-weight: 700;
  text-decoration: none;
}
.cc-th-kyt:hover .cc-th-info__pop,
.cc-th-kyt:focus-within .cc-th-info__pop,
.cc-th-info:hover > .cc-th-info__pop,
.cc-th-info:focus-within > .cc-th-info__pop {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}
.cc-table th {
  padding: 0.55rem 0.55rem;
  color: var(--cc-muted);
  font-weight: 650;
  text-align: left;
  border-bottom: 1px solid var(--cc-line);
}
.cc-table td { padding: 0.7rem 0.55rem; border-bottom: 1px solid #f1f5f9; }
.cc-table tr { cursor: pointer; }
.cc-table tr:hover td { background: #f8fafc; }
.cc-table tr.is-on td { background: #eff6ff; }
.cc-table tr.is-empty,
.cc-table tr.is-empty:hover td { cursor: default; background: transparent; }
.cc-table tr.is-empty td {
  text-align: center;
  color: var(--cc-muted);
  padding: 1.6rem 0.55rem 2rem;
  white-space: normal;
}
.cc-table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.6rem 0 0.2rem;
  pointer-events: none;
  position: sticky;
  left: 0;
  box-sizing: border-box;
  width: 100cqw;
}
.cc-empty-box {
  width: 88px;
  height: auto;
  display: block;
}
.cc-table-empty p {
  margin: 0;
  font-size: 0.88rem;
  color: #94a3b8;
  font-weight: 500;
}
.cc-txid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.cc-txid-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  white-space: nowrap;
}
.cc-txid-cell .cc-copy {
  flex-shrink: 0;
}
.cc-dash { color: var(--cc-muted); font-weight: 650; }
.cc-ok { color: #047857; font-weight: 750; }
.cc-wait { color: #b45309; font-weight: 750; }
.cc-bad { color: #b91c1c; font-weight: 750; }

.cc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; overflow: visible; }
.cc-filters .cc-select { width: auto; min-width: 0; }
.cc-filters .cc-select.has-label { min-width: 9.5rem; }
.cc-filters .cc-select__btn,
.cc-filters select, .cc-filters input {
  padding: 0.42rem 0.55rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.5rem;
  background: #fff;
  font: inherit;
  font-size: 0.82rem;
}
.cc-filters .cc-select.has-label .cc-select__btn {
  padding: 0.34rem 0.7rem 0.34rem 0.78rem;
  border-radius: 999px;
}
.cc-filter-range {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.55rem 0.22rem 0.78rem;
  border: 1px solid var(--cc-line);
  border-radius: 999px;
  background: #fff;
}
.cc-filter-range em {
  color: var(--cc-muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}
.cc-filter-range span {
  color: var(--cc-muted);
  font-size: 0.78rem;
}
.cc-filter-range input[type="date"] {
  padding: 0.12rem 0;
  border: 0;
  background: transparent;
  color: var(--cc-ink);
  font-weight: 750;
  min-width: 8.2rem;
}

.cc-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0.85rem 0 1rem;
}
.cc-kpi {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.05rem;
  background: #fff;
  border: 1px solid var(--cc-line);
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.cc-kpi__ico {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.7rem;
  background: #eff6ff;
  color: var(--cc-blue);
  flex-shrink: 0;
}
.cc-kpi__ico--pay { background: #ecfdf5; color: #047857; }
.cc-kpi__ico--rate { background: #fff7ed; color: #c2410c; }
.cc-kpi__ico--sum { background: #eef2ff; color: #4338ca; }
.cc-kpi__ico--off { background: #f1f5f9; color: #64748b; }
.cc-kpi__ico--bad { background: #fef2f2; color: #b91c1c; }
.cc-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-table--plain { min-width: 0; }
.cc-table--plain tr,
.cc-table--plain tr:hover td { cursor: default; }
.cc-table th.is-right,
.cc-table td.is-right { text-align: right; }

.ccx-fund-hero {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0.2rem 0 1rem;
  padding: 1.05rem 1.15rem;
  background: #fff;
  border: 1px solid var(--cc-line);
  border-radius: 1.05rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.ccx-fund-hero__ico {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: #eef2ff;
  color: #4338ca;
  flex-shrink: 0;
}
.ccx-fund-hero em {
  display: block;
  font-style: normal;
  color: var(--cc-muted);
  font-size: 0.8rem;
  font-weight: 650;
}
.ccx-fund-hero strong {
  display: block;
  margin-top: 0.12rem;
  font-size: 1.45rem;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.ccx-fund-panel { padding-top: 0.35rem; }
.ccx-fund-tabs {
  display: flex;
  gap: 1.35rem;
  margin: 0 0 0.35rem;
  border-bottom: 1px solid var(--cc-line);
}
.ccx-fund-tabs button {
  padding: 0.85rem 0.08rem 0.72rem;
  border: 0;
  background: none;
  color: var(--cc-muted);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.ccx-fund-tabs button.is-on {
  color: var(--cc-ink);
  box-shadow: inset 0 -2px 0 var(--cc-blue);
}
.ccx-token {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.ccx-token strong { font-weight: 750; }
.ccx-tmark {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  background: #64748b;
}
.ccx-tmark.is-usdt { background: #26a17b; }
.ccx-tmark.is-usdc { background: #2775ca; }
.ccx-tmark.is-jpyc { background: #e11d48; }
.ccx-bal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.08rem;
}
.ccx-bal strong { font-weight: 750; }
.ccx-bal em {
  font-style: normal;
  color: var(--cc-muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.ccx-addr a {
  color: inherit;
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}
.ccx-addr a:hover { text-decoration: underline; }
.ccx-val { font-weight: 750; }
.ccx-fund-panel .cc-table {
  width: 100%;
  min-width: 720px;
  table-layout: fixed;
}
.ccx-fund-panel .cc-table th,
.ccx-fund-panel .cc-table td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
}
.cc-table--tokens th:nth-child(1),
.cc-table--tokens td:nth-child(1) { width: 26%; }
.cc-table--tokens th:nth-child(2),
.cc-table--tokens td:nth-child(2) { width: 18%; color: var(--cc-muted); }
.cc-table--tokens th:nth-child(3),
.cc-table--tokens td:nth-child(3) { width: 34%; padding-left: 1.4rem; }
.cc-table--tokens th:nth-child(4),
.cc-table--tokens td:nth-child(4) { width: 22%; padding-right: 2.2rem; }
.cc-table--addrs { min-width: 820px; }
.cc-table--addrs th:nth-child(2),
.cc-table--addrs td:nth-child(2) { width: 14%; color: var(--cc-muted); }
.cc-table--addrs th:nth-child(3),
.cc-table--addrs td:nth-child(3) {
  width: 28%;
  white-space: normal;
}
.cc-table--addrs th:nth-child(4),
.cc-table--addrs td:nth-child(4) { width: 16%; padding-right: 2.2rem; }
.ccx-env-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  align-items: center;
}
.ccx-env-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.1rem 0.48rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.ccx-env-tag.is-default {
  background: #eff6ff;
  color: #2563eb;
}
.ccx-time {
  color: var(--cc-muted);
  font-size: 0.82rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cc-table th.ccx-time {
  color: var(--cc-muted);
  font-weight: 650;
}
.cc-kpi > div span { display: block; color: var(--cc-muted); font-size: 0.78rem; font-weight: 650; }
.cc-kpi > div strong {
  display: block;
  margin-top: 0.18rem;
  font-size: 1.32rem;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.cc-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.cc-chart {
  padding: 1rem 1.1rem 0.85rem;
  background: #fff;
  border: 1px solid var(--cc-line);
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.cc-chart > span {
  display: block;
  margin: 0 0 0.55rem;
  color: var(--cc-ink);
  font-size: 0.9rem;
  font-weight: 750;
}
.cc-chart svg {
  display: block;
  width: 100%;
  height: 180px;
}
.cc-chart__axis {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 0.35rem;
  color: var(--cc-dim);
  font-size: 0.7rem;
  font-weight: 650;
  text-align: center;
}
.cc-chart__axis em { font-style: normal; }
.cc-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  height: 160px;
  padding: 0.15rem 0.15rem 0;
}
.cc-bars i {
  flex: 1;
  display: block;
  min-height: 8px;
  border-radius: 0.42rem 0.42rem 0.12rem 0.12rem;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
}

.cc-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  position: relative;
}
.cc-list-head h3 { margin: 0; }
.cc-list-head .ccx-acts { margin-top: 0; }

.cc-filter-wrap {
  position: relative;
  z-index: 12;
}
.cc-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.15rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.7rem;
  background: #fff;
  color: var(--cc-ink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}
.cc-filter-btn i { font-size: 0.78rem; color: var(--cc-muted); }
.cc-filter-btn em {
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1rem;
  text-align: center;
}
.cc-filter-btn.is-on,
.cc-filter-btn:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}
.cc-filter-btn.is-on i,
.cc-filter-btn:hover i { color: #2563eb; }
.cc-filter-pop {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  width: 22.5rem;
  max-width: min(22.5rem, calc(100vw - 2.4rem));
  padding: 1rem 1rem 0.85rem;
  border: 1px solid var(--cc-line);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 18px 48px rgb(15 23 42 / 14%);
  z-index: 20;
}
.cc-filter-pop__row {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 0.72rem;
}
.cc-filter-pop__row > span {
  color: var(--cc-muted);
  font-size: 0.8rem;
  font-weight: 650;
}
.cc-filter-pop__row input,
.cc-filter-pop__row .cc-select__btn {
  width: 100%;
  min-height: 2.15rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.55rem;
  background: #fff;
  font: inherit;
  font-size: 0.82rem;
}
.cc-filter-pop__row .cc-select { z-index: 2; }
.cc-filter-pop__row .cc-select.is-open { z-index: 6; }
.cc-filter-pop__row--time { align-items: start; padding-top: 0.2rem; }
.cc-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.cc-filter-pills button {
  min-height: 1.85rem;
  padding: 0.2rem 0.62rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.45rem;
  background: #fff;
  color: var(--cc-ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}
.cc-filter-pills button.is-on {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}
.cc-filter-dates {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.cc-filter-dates span { color: var(--cc-muted); font-size: 0.78rem; }
.cc-filter-dates input[type="date"] {
  min-width: 0;
  flex: 1;
}
.cc-filter-pop__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--cc-line);
}
.cc-filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  color: var(--cc-muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
  cursor: pointer;
}
.cc-filter-reset:hover { color: var(--cc-ink); }
.cc-filter-pop__foot .cc-btn {
  min-height: 2.15rem;
  padding: 0.4rem 1.15rem;
}

.cc-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  margin-top: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--cc-line);
  color: var(--cc-muted);
  font-size: 0.8rem;
  font-weight: 650;
}
.cc-pager__left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.cc-pagesize {
  position: relative;
}
.cc-pagesize__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.28rem 0.72rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.7rem;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.cc-pagesize__btn i {
  font-size: 0.68rem;
  color: #94a3b8;
}
.cc-pagesize.is-open .cc-pagesize__btn,
.cc-pagesize__btn:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}
.cc-pagesize.is-open .cc-pagesize__btn i,
.cc-pagesize__btn:hover i { color: #2563eb; }
.cc-pagesize__list {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.35rem);
  z-index: 16;
  min-width: 100%;
  padding: 0.28rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.7rem;
  background: #fff;
  box-shadow: 0 12px 28px rgb(15 23 42 / 12%);
}
.cc-pagesize__list button {
  display: block;
  width: 100%;
  min-height: 2rem;
  padding: 0.28rem 0.7rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #334155;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.cc-pagesize__list button:hover,
.cc-pagesize__list button.is-on {
  background: #eff6ff;
  color: #1d4ed8;
}
.cc-pager__pages {
  display: flex;
  align-items: center;
  gap: 0.28rem;
}
.cc-pager__pages button {
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.42rem;
  border: 1px solid var(--cc-line);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.cc-pager__pages button.is-on {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.cc-pager__pages button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

@media (max-width: 1100px) {
  .cc-kpis, .cc-kpis--3, .cc-kpis--2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .cc-charts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cc-kpis { grid-template-columns: 1fr; }
}

.cc-toast {
  position: fixed;
  top: 1.4rem;
  left: 50%;
  z-index: 1400;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.62rem 1.2rem;
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
  pointer-events: none;
  animation: cc-toast-in 0.18s ease-out;
}
.cc-toast--err {
  background: rgba(127, 29, 29, 0.94);
  color: #fff;
}
@keyframes cc-toast-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.cc-login .cc-toast--err { display: none !important; }
.cc-toast button { margin-left: 0.6rem; }

.cc-mask {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.4);
}
.cc-modal {
  width: min(28rem, 100%);
  padding: 1.2rem;
  border-radius: 1rem;
  background: #fff;
  white-space: normal;
}
.cc-modal h3 { margin: 0 0 0.9rem; }
.cc-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
}
.cc-modal__head h3 { margin: 0; }
.cc-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #64748b;
  font-size: 1rem;
  cursor: pointer;
}
.cc-modal__close:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.cc-modal__sub { margin: -0.35rem 0 1rem; color: #64748b; font-size: 0.92rem; line-height: 1.5; }
.cc-modal .cc-field {
  gap: 0.48rem;
  margin: 0 0 1.05rem;
}
.cc-modal__acts { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.2rem; }
.cc-modal__acts--center { justify-content: center; }
.cc-modal--bind { width: min(32rem, 100%); overflow: visible; }
.ccx-profile-modal { width: min(26rem, 100%); }
.ccx-profile-field { display: grid; gap: 0.55rem; margin: 0 0 1.15rem; }
.ccx-profile-field__lab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--cc-ink);
  font-size: 0.84rem;
  font-weight: 650;
}
.ccx-profile-field__lab em {
  color: #94a3b8;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 500;
}
.ccx-profile-avatar {
  width: 5.6rem;
  height: 5.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d1d5db;
  overflow: hidden;
  cursor: pointer;
}
.ccx-profile-avatar:disabled { cursor: not-allowed; opacity: 0.72; }
.ccx-profile-avatar .cc-avatar {
  width: 100%;
  height: 100%;
  font-size: 2.7rem;
  background: #d1d5db;
  color: #f8fafc;
}
.ccx-profile-avatar .cc-avatar--glyph i { font-size: 0.72em; }
.cc-sec__who {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.5rem;
  min-width: 0;
  max-width: 16rem;
}
.cc-sec__who .cc-avatar {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  font-size: 0.72rem;
}
.cc-act .cc-sec__who .cc-sec__status {
  max-width: none;
  justify-self: auto;
  text-align: left;
}
.ccx-profile-nick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.7rem;
  padding: 0 0.9rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.7rem;
  background: #fff;
  overflow: hidden;
}
.ccx-profile-nick:focus-within {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
}
.ccx-profile-nick input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 2.7rem;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  font: inherit;
  color: inherit;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.ccx-profile-nick input:focus,
.ccx-profile-nick input:focus-visible {
  border: 0;
  outline: none;
  box-shadow: none;
}
.ccx-profile-nick b {
  flex: none;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 600;
}
.cc-modal--recv {
  width: min(36rem, 100%);
}
.cc-modal--recv .cc-modal__acts {
  margin-top: 1.1rem;
}
.cc-modal--recv input {
  font-size: 0.88rem;
}
.cc-modal--recv input[readonly] {
  background: #f8fafc;
  color: #0f172a;
  cursor: default;
  font-weight: 750;
}
.cc-modal--recv input:not([readonly]) {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
}
.cc-modal--pos-pick .cc-modal__sub {
  margin: -0.2rem 0 0.95rem;
  line-height: 1.55;
}
.cc-modal--pos-pick .cc-modal__acts {
  margin-top: 1.25rem;
}
.ccx-pos-pick {
  display: grid;
  gap: 0.5rem;
  max-height: min(22rem, 52vh);
  overflow: auto;
}
.ccx-pos-pick__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.85rem;
  background: #fff;
  text-align: left;
  cursor: pointer;
  white-space: normal;
}
.ccx-pos-pick__item.is-on {
  border-color: var(--cc-blue);
  background: #eff6ff;
  box-shadow: 0 0 0 1px var(--cc-blue);
}
.ccx-pos-pick__item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ccx-pos-pick__ico {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  background: #eff6ff;
  color: var(--cc-blue);
  font-size: 0.95rem;
}
.ccx-pos-pick__copy {
  min-width: 0;
}
.ccx-pos-pick__copy b {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ccx-pos-pick__copy span {
  display: block;
  overflow: hidden;
  margin-top: 0.18rem;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-req { color: #ef4444; margin-left: 0.15rem; }
.cc-field__hint { margin: 0.35rem 0 0; font-size: 0.78rem; color: #94a3b8; }

.cc-bind-connect { padding: 0.5rem 0 0.25rem; text-align: center; }
.cc-bind-connect__icon {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  background: #eff6ff;
  color: #2563eb;
  font-size: 1.6rem;
}
.cc-bind-spinner {
  position: absolute;
  inset: -4px;
  border: 2px solid transparent;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: cc-bind-spin 0.9s linear infinite;
}
@keyframes cc-bind-spin { to { transform: rotate(360deg); } }
.cc-bind-connect__title { margin: 0 0 1.25rem; font-weight: 600; font-size: 1.05rem; }
.cc-bind-steps {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 14rem;
  margin: 0 auto;
  text-align: left;
  font-size: 0.92rem;
  color: #64748b;
}
.cc-bind-step { display: flex; align-items: center; gap: 0.55rem; }
.cc-bind-step.is-active { color: #0f172a; font-weight: 500; }
.cc-bind-step.is-done { color: #16a34a; }
.cc-bind-step__mark { width: 1.1rem; text-align: center; flex-shrink: 0; }

.cc-bind-done { padding: 0.25rem 0; text-align: center; }
.cc-bind-done__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  color: #16a34a;
  font-size: 1.05rem;
}
.cc-bind-done__badge i { font-size: 1.35rem; }
.cc-bind-done__device {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.cc-bind-done__device strong { font-size: 1.1rem; color: #0f172a; }
.cc-bind-done__device span { color: #64748b; font-size: 0.92rem; }

.cc-pos {
  min-height: calc(100vh - 3.6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
  padding: 1.5rem 1.5rem 1.25rem;
  background:
    radial-gradient(ellipse at 50% 0%, #dbeafe, transparent 48%),
    #0b1220;
}
.cc-pos-body .cc-pos {
  min-height: 100vh;
}
.cc-pos-managed {
  position: relative;
  width: min(96rem, 100%);
  min-height: 38rem;
  display: grid;
  place-items: center;
}
.cc-pos-flow-card {
  position: absolute;
  left: 0;
  top: 0;
  width: min(360px, 38vw);
  background: #fff;
  color: #0f172a;
  padding: 1.4rem 1.45rem 1.5rem;
}
.cc-pos-stage {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0 2rem;
}
.cc-card.cc-pad.cc-pos-flow-card > .cc-paycode-sec-title {
  margin: 0 0 1.15rem;
  line-height: 1.4;
}
.cc-pos-flow-card > .cc-paycode-sec-title + .cc-paycode-flow {
  margin-top: 0.35rem;
  padding-top: 0.2rem;
}
.cc-pos-flow-card .cc-paycode-flow {
  gap: 0;
}
.cc-pos-flow-card .cc-paycode-flow__item {
  align-items: start;
  gap: 0.95rem;
  padding: 0 0 1.35rem;
}
.cc-pos-flow-card .cc-paycode-flow__item:last-child {
  padding-bottom: 0;
}
.cc-pos-flow-card .cc-paycode-flow__item:not(:last-child)::before {
  top: 2.35rem;
  bottom: 0.35rem;
}
.cc-pos-flow-card .cc-paycode-flow__n {
  flex-shrink: 0;
}
.cc-pos-flow-card .cc-paycode-flow__body {
  padding-top: 0.28rem;
}
.cc-pos-flow-card .cc-paycode-flow__head {
  display: block;
}
.cc-pos-flow-card .cc-paycode-flow__head strong {
  display: block;
  font-size: 0.98rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.cc-pos-flow-card .cc-paycode-flow__meta {
  display: block;
  margin: 0.18rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
}
.cc-pos-flow-card .cc-pos-paylink {
  margin: 0.55rem 0 0;
  padding: 0.55rem 0.6rem;
}
.cc-pos-flow-card > .cc-hint {
  margin: 1.05rem 0 0;
  line-height: 1.55;
}
@media (max-width: 980px) {
  .cc-pos-managed {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }
  .cc-pos-flow-card {
    position: static;
    width: 100%;
  }
  .cc-pos-stage { padding: 0; }
}

.cc-pos-paylink {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0.9rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.85rem;
  background: #0f172a;
}
.cc-pos-paylink code {
  overflow: hidden;
  color: #93c5fd;
  font-size: 0.72rem;
  line-height: 1.45;
  word-break: break-all;
}
.cc-pos-paylink__go {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.cc-pos-paybox {
  margin: 0.85rem 0 0.35rem;
  text-align: left;
}
.cc-pos-paybox__label {
  margin: 0 0 0.4rem;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
}
.cc-pos-paybox .cc-pos-paylink { margin: 0 0 0.45rem; }
.cc-pos-paybox .cc-hint { margin: 0; }
.cc-pos-machine {
  box-sizing: border-box;
  width: 26rem;
  height: 38rem;
  max-width: 100%;
  max-height: min(38rem, calc(100vh - 7rem));
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 1.1rem;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  overflow: auto;
}
.cc-pos-pad {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cc-pos-pad .ccx-keys { flex: 1; }
.cc-pos-pad .cc-btn--block { margin-top: 0.75rem; }
.cc-pos-result {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cc-pos-result > i {
  color: #10b981;
  font-size: 3.2rem;
}
.cc-pos-result__bad { color: #ef4444 !important; }
.cc-pos-result h2 {
  margin: 0.7rem 0 0;
  font-size: 1.35rem;
  font-weight: 800;
}
.cc-pos-machine .cc-cam { margin: 0.45rem 0 0.55rem; flex-shrink: 0; }
.cc-pos-machine .cc-scan-cam__kicker {
  margin: 0 0 0.28rem;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.cc-pos-machine .cc-waitline {
  color: #334155;
  font-weight: 650;
}
.cc-pos-machine .cc-hint {
  color: #475569;
  line-height: 1.5;
}
.cc-pos-machine .cc-hint a {
  color: var(--cc-blue-2, #2563eb);
  font-weight: 700;
  text-decoration: none;
}
.cc-pos-machine .cc-hint a:hover { text-decoration: underline; }
.cc-pos-machine .cc-btn--ghost {
  background: #fff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}
.cc-pos-scan-fallback {
  margin-top: auto;
  padding-top: 0.85rem;
}
.cc-pos-scan-fallback > p {
  margin: 0 0 0.5rem;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}
.cc-pos-scan-fallback .cc-pos-paylink {
  margin: 0;
}
.cc-pos-customer {
  width: min(26rem, 100%);
  padding: 0.95rem 1.05rem 1.05rem;
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #e2e8f0;
}
.cc-pos-customer h3 {
  margin: 0;
  color: #93c5fd;
  font-size: 0.82rem;
  font-weight: 750;
}
.cc-pos-customer > p {
  margin: 0.28rem 0 0.7rem;
  color: #94a3b8;
  font-size: 0.78rem;
  line-height: 1.5;
}
.cc-pos-customer .cc-pos-paylink {
  margin: 0;
}
.cc-pos-mobile-assist {
  margin-top: 1rem;
  padding: 0.9rem 0.95rem;
  border-radius: 0.85rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  text-align: left;
}
.cc-pos-mobile-assist strong {
  display: block;
  font-size: 0.88rem;
  color: #0f172a;
}
.cc-pos-mobile-assist > p {
  margin: 0.3rem 0 0.75rem;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.5;
}
.cc-pos-mobile-assist__qr {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto 0.65rem;
  border-radius: 0.55rem;
  background: #fff;
}
.cc-pos-mobile-assist__link {
  display: block;
  padding: 0.55rem 0.65rem;
  border-radius: 0.55rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 0.68rem;
  line-height: 1.4;
  word-break: break-all;
  white-space: pre-wrap;
}

.cc-pos-scan {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(ellipse at 50% 0%, #dbeafe, transparent 48%),
    #0b1220;
}
.cc-pos-scan__card {
  width: min(26rem, 100%);
  padding: 1.25rem 1.2rem 1.35rem;
  border-radius: 1.1rem;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}
.cc-pos-scan__kicker {
  margin: 0;
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 750;
}
.cc-pos-scan__card h1 {
  margin: 0.25rem 0 0;
  font-size: 1.35rem;
  font-weight: 850;
}
.cc-pos-scan__sub {
  margin: 0.35rem 0 0;
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.5;
}
.cc-pos-scan__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.7rem 0 0;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 650;
}
.cc-pos-scan__view {
  position: relative;
  margin-top: 0.95rem;
  aspect-ratio: 3 / 4;
  border-radius: 0.9rem;
  overflow: hidden;
  background: #0f172a;
}
.cc-pos-scan__view video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0f172a;
}
.cc-pos-scan__frame {
  position: absolute;
  inset: 18% 14%;
  border: 2px solid rgb(96 165 250 / 85%);
  border-radius: 0.65rem;
  box-shadow: 0 0 0 999px rgb(15 23 42 / 35%);
  pointer-events: none;
}
.cc-pos-scan__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 1.2rem;
  color: #e2e8f0;
  font-size: 0.88rem;
  text-align: center;
  line-height: 1.55;
  background: rgb(15 23 42 / 55%);
}
.cc-pos-scan__acts {
  margin-top: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cc-pos-scan__ok {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  margin: 0.2rem auto 0.7rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #059669;
  font-size: 1.55rem;
}
.cc-pos-scan__card > h1 {
  text-align: center;
}
.cc-pos-scan__card > p {
  text-align: center;
}

.cc-terminal {
  width: min(24rem, 100%);
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 1.4rem;
  background: #111827;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  color: #fff;
}
.cc-terminal--scan {
  width: min(72rem, 100%);
  background: transparent;
  box-shadow: none;
  padding: 0.4rem 0.2rem 0.8rem;
  color: #0f172a;
}
.cc-terminal--scan .cc-posbar { margin: 0 0.4rem 0.85rem; }

.cc-scan-stage {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(280px, 400px);
  gap: 1.4rem 2.6rem;
  align-items: center;
  justify-content: center;
}
.cc-scan-stage--solo {
  grid-template-columns: minmax(300px, 420px);
}
.cc-handpos {
  width: min(400px, 100%);
  margin: 0 auto;
  filter: drop-shadow(0 32px 40px rgba(0, 0, 0, 0.5));
}
.cc-handpos__head {
  position: relative;
  z-index: 2;
  height: 7.6rem;
  padding: 0.7rem 0.95rem 0.55rem;
  border-radius: 1.7rem 1.7rem 2.4rem 2.4rem / 1.5rem 1.5rem 0.55rem 0.55rem;
  background:
    linear-gradient(180deg, #6b7280 0%, #3f4654 22%, #1f2430 58%, #11141a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    inset 0 -8px 16px rgba(0, 0, 0, 0.35),
    0 12px 18px rgba(0, 0, 0, 0.3);
}
.cc-handpos__head::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -0.85rem;
  height: 1.4rem;
  border-radius: 0 0 1rem 1rem;
  background: #0c0e12;
  z-index: -1;
}
.cc-handpos__scanwin {
  position: relative;
  overflow: hidden;
  width: 74%;
  height: 2.55rem;
  margin: 0 auto;
  border-radius: 0.45rem;
  background:
    linear-gradient(180deg, #05070b 0%, #122033 55%, #0b1220 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.16),
    inset 0 10px 14px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.4);
}
.cc-handpos__laser {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 3px;
  border-radius: 99px;
  background: #fb923c;
  box-shadow: 0 0 14px #fb923c, 0 0 28px rgba(249, 115, 22, 0.7);
  transform: translateY(-50%);
}
.cc-handpos__nfc {
  position: relative;
  height: 1.35rem;
  margin: 0.7rem 0 0.4rem;
}
.cc-handpos__nfc i {
  position: absolute;
  left: 50%;
  bottom: 0;
  border: 2px solid rgba(248, 250, 252, 0.7);
  border-bottom: 0;
  border-radius: 0.8rem 0.8rem 0 0;
  transform: translateX(-50%);
}
.cc-handpos__nfc i:nth-child(1) { width: 0.42rem; height: 0.28rem; opacity: 1; }
.cc-handpos__nfc i:nth-child(2) { width: 0.86rem; height: 0.54rem; opacity: 0.75; }
.cc-handpos__nfc i:nth-child(3) { width: 1.28rem; height: 0.82rem; opacity: 0.45; }
.cc-handpos__band {
  display: block;
  height: 0.46rem;
  margin-top: 0.15rem;
  border-radius: 99px;
  background: linear-gradient(180deg, #f1f5f9, #94a3b8 55%, #64748b);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.cc-handpos__trig {
  position: absolute;
  top: 4.35rem;
  width: 0.82rem;
  height: 2.05rem;
  border-radius: 0.35rem;
  background: linear-gradient(180deg, #fdba74, #ea580c);
  box-shadow: 0 3px 0 #9a3412, inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.cc-handpos__trig--l { left: -0.38rem; }
.cc-handpos__trig--r { right: -0.38rem; }
.cc-handpos__body {
  position: relative;
  z-index: 1;
  width: 92%;
  margin: 0 auto;
  padding: 0.62rem 0.78rem 0.72rem;
  border-radius: 0 0 1.85rem 1.85rem;
  background: linear-gradient(180deg, #3a414e 0%, #161920 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    inset -1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    0 20px 28px rgba(0, 0, 0, 0.32);
}
/* 侧面机身高光，让白屏两侧能看出外壳厚度 */
.cc-handpos__body::before,
.cc-handpos__body::after {
  content: "";
  position: absolute;
  top: 1.6rem;
  bottom: 2.6rem;
  width: 0.14rem;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04));
}
.cc-handpos__body::before { left: 0.2rem; }
.cc-handpos__body::after { right: 0.2rem; }
.cc-handpos__screen {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 28rem;
  padding: 1.6rem 0.85rem 1.2rem;
  border-radius: 0.55rem 0.55rem 1.15rem 1.15rem;
  background: #fff;
  color: #0f172a;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.55);
}
.cc-handpos__glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.55) 0%, transparent 28%, transparent 72%, rgba(15, 23, 42, 0.03) 100%);
}
.cc-handpos__notch {
  position: absolute;
  z-index: 1;
  top: 0.4rem;
  left: 50%;
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: #020617;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  transform: translateX(-50%);
}
.cc-handpos__name {
  position: relative;
  z-index: 1;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #64748b;
}
.cc-handpos__screen strong {
  position: relative;
  z-index: 1;
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: #0f172a;
}
.cc-handpos__screen em {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}
.cc-handpos__screen small {
  position: relative;
  z-index: 1;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 700;
}
.cc-handpos__screen em.is-run {
  background: #eff6ff;
  color: #1d4ed8;
}
.cc-handpos__screen em.is-ok {
  background: #ecfdf5;
  color: #047857;
}
.cc-handpos__screen em.is-bad {
  background: #fef2f2;
  color: #b91c1c;
}
.cc-handpos__screen--ticket {
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.32rem;
  padding: 1.65rem 0.65rem 0.7rem;
  text-align: left;
}
.cc-handpos__screen--ticket .cc-handpos__name,
.cc-handpos__screen--ticket strong,
.cc-handpos__screen--ticket em,
.cc-handpos__screen--ticket small {
  align-self: center;
  text-align: center;
}
.cc-handpos__screen--ticket strong {
  font-size: 1.85rem;
}
.cc-handpos__ticket {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.22rem;
  margin-top: 0.15rem;
  padding: 0.5rem 0.55rem;
  border-radius: 0.7rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.cc-handpos__ticket div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.55rem;
}
.cc-handpos__ticket dt,
.cc-handpos__ticket span {
  margin: 0;
  color: #334155;
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}
.cc-handpos__ticket dd,
.cc-handpos__ticket b {
  margin: 0;
  color: #0f172a;
  font-size: 0.66rem;
  font-weight: 800;
  text-align: right;
  word-break: break-all;
}
.cc-cam--idle .cc-cam__scan { display: none; }
.cc-handpos__screen--pad {
  justify-content: flex-start;
  gap: 0.28rem;
  padding: 1.55rem 0.55rem 0.6rem;
}
.cc-handpos__kicker {
  position: relative;
  z-index: 1;
  font-size: 0.82rem;
  font-weight: 800;
  color: #0f172a;
}
.cc-handpos__sub {
  position: relative;
  z-index: 1;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 650;
}
.cc-handpos__screen--pad strong {
  font-size: 2.05rem;
  margin: 0.05rem 0 0.2rem;
}
.cc-handpos__keys {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.32rem;
  width: 100%;
  margin-top: 0.15rem;
}
.cc-handpos__keys button {
  min-height: 2.28rem;
  border: 0;
  border-radius: 0.5rem;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 750;
  cursor: pointer;
}
.cc-handpos__keys button:active {
  background: #e2e8f0;
}
.cc-handpos__go {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 0.28rem;
  min-height: 2.35rem;
  border: 0;
  border-radius: 0.55rem;
  background: #3b82f6;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
}
.cc-handpos__assets {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.32rem;
  width: 100%;
  margin-top: 0.35rem;
}
.cc-handpos__assets button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.55rem;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
}
.cc-handpos__assets button.is-on {
  border-color: #3b82f6;
  background: #eff6ff;
}
.cc-handpos__assets b { font-size: 0.72rem; }

.cc-handpos__nav {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  padding: 0.45rem 0 0.08rem;
}
.cc-handpos__nav i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #64748b;
}
.cc-handpos__nav i:nth-child(2) {
  width: 0.7rem;
  height: 0.28rem;
  border-radius: 99px;
  margin-top: 0.07rem;
}
.cc-scan-cam {
  padding: 1.05rem 1.1rem 1.15rem;
  border-radius: 1.1rem;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.cc-scan-cam__kicker {
  margin: 0 0 0.28rem;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.cc-scan-cam h2 { margin: 0 0 0.35rem; font-size: 1.08rem; color: #0f172a; }
.cc-scan-cam .cc-cam { margin: 0.45rem 0 0.55rem; }
.cc-scan-cam .cc-waitline {
  color: #334155;
  font-weight: 650;
}
.cc-scan-cam .cc-hint {
  color: #475569;
  line-height: 1.5;
}
.cc-scan-cam .cc-hint a {
  color: var(--cc-blue-2, #2563eb);
  font-weight: 700;
  text-decoration: none;
}
.cc-scan-cam .cc-hint a:hover { text-decoration: underline; }
.cc-scan-cam .cc-hash {
  color: #334155;
}
.cc-scan-cam .cc-btn--ghost {
  background: #fff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}
.cc-scan-cam .cc-btn--text {
  color: #1d4ed8;
}
.cc-scan-cam__acts {
  display: grid;
  gap: 0.7rem;
  margin-top: 1rem;
}
.cc-scan-cam__acts .cc-btn {
  width: 100%;
}
@media (max-width: 860px) {
  .cc-scan-stage { grid-template-columns: 1fr; }
  .cc-handpos { width: min(340px, 100%); }
  .cc-handpos__screen { min-height: 24rem; }
}
.cc-screen {
  min-height: 22rem;
  padding: 1.1rem;
  border-radius: 1rem;
  background: #f8fafc;
  color: var(--cc-ink);
}
.cc-screen h2 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.cc-pos-amt {
  display: grid;
  gap: 0.32rem;
  margin: 0 0 0.35rem;
  color: var(--cc-muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.cc-pos-amt__box {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.7rem;
  background: #fff;
}
.cc-pos-amt__box input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0.2rem 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: transparent;
  box-shadow: none;
  color: var(--cc-ink);
}
.cc-pos-amt__box small {
  flex-shrink: 0;
  color: var(--cc-muted);
  font-size: 0.82rem;
  font-weight: 800;
}
.cc-amt {
  margin: 0.4rem 0 0.8rem;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.cc-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
.cc-keys button {
  min-height: 2.8rem;
  border: 0;
  border-radius: 0.6rem;
  background: #e2e8f0;
  font-size: 1.05rem;
  font-weight: 750;
  cursor: pointer;
}
.cc-assets-pick { display: grid; gap: 0.5rem; }
.cc-assets-pick button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.75rem;
  background: #fff;
  cursor: pointer;
}
.cc-assets-pick button.is-on { border-color: var(--cc-blue); background: #eff6ff; }
.cc-cam {
  overflow: hidden;
  position: relative;
  height: 14rem;
  border-radius: 0.9rem;
  background: #0f172a;
}
.cc-cam__demo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 48% 38%, #475569 0%, #1e293b 48%, #0f172a 100%);
}
.cc-cam__scan {
  position: absolute;
  left: 18%;
  right: 18%;
  height: 2px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, #93c5fd, transparent);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.85);
  animation: cc-scan-line 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cc-scan-line {
  0%, 100% { top: 22%; }
  50% { top: 72%; }
}
.cc-cam__frame {
  position: absolute;
  inset: 18% 16%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 0.7rem;
  box-shadow: 0 0 0 80px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.cc-cam-ask {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0.7rem;
  background: rgba(15, 23, 42, 0.62);
}
.cc-cam-perm {
  width: min(18.5rem, 100%);
  padding: 0.85rem 0.9rem 0.95rem;
  border-radius: 0.85rem;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
  text-align: left;
}
.cc-cam-perm__site {
  margin: 0 0 0.45rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}
.cc-cam-perm strong {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.92rem;
}
.cc-cam-perm p {
  margin: 0.28rem 0 0.7rem;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.45;
}
.cc-cam-perm .cc-acts { margin: 0; justify-content: flex-end; }
.cc-cam-ask > i {
  color: #93c5fd;
  font-size: 1.35rem;
}
.cc-cam-ask > strong {
  display: block;
  margin: 0.4rem 0 0.2rem;
  color: #fff;
  font-size: 0.92rem;
}
.cc-cam-ask > p {
  margin: 0;
  color: #cbd5e1;
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
}
.cc-success { text-align: center; padding: 1.4rem 0.4rem; }
.cc-success i { color: #10b981; font-size: 2.2rem; }
.cc-success h2 { margin: 0.5rem 0 0.2rem; }

.cc-pay {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  padding: 0.15rem 1rem 1.15rem;
  color: #e2e8f0;
}
.cc-pay__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.95rem;
}
.cc-pay__brand {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 800;
}
.cc-pay__brand img {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  display: block;
  border-radius: 0.28rem;
}
.cc-pay__top svg { width: 1.2rem; height: 1.2rem; color: #60a5fa; }
.cc-pay__net {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 58%;
  padding: 0.28rem 0.55rem 0.28rem 0.32rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}
.cc-pay__net-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #0f172a;
  color: #fff;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
}
.cc-pay-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-bottom: 0.8rem;
}
.cc-pay-fields > div,
.cc-pay-meta > div {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.06);
}
.cc-pay-fields span,
.cc-pay-meta span {
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 700;
}
.cc-pay-fields b,
.cc-pay-meta b {
  color: #fff;
  font-size: 0.84rem;
}
.cc-pay-meta {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.cc-pay .cc-hash {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #e2e8f0;
  font-size: 0.68rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: normal;
}
.cc-pay .cc-h { color: #fff; }
.cc-pay .cc-card {
  background: #fff;
  color: #0f172a;
}
.cc-pay .cc-hint { color: #94a3b8; }
.cc-qrbox {
  display: grid;
  place-items: center;
  padding: 1rem 0.9rem 0.85rem;
  border-radius: 1.05rem;
  background: #fff;
  color: #0f172a;
}
.cc-qrbox__title {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  font-weight: 800;
}
.cc-qrbox__hint {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  font-weight: 750;
}
.cc-qrbox__addr {
  margin: 0.45rem 0 0;
  max-width: 100%;
  overflow: hidden;
  color: #64748b;
  font-family: ui-monospace, monospace;
  font-size: 0.62rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cc-qr {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: 10.5rem;
  height: 10.5rem;
  gap: 3px;
  padding: 0.55rem;
  background: #fff;
}
.cc-qr i { background: #0f172a; }
.cc-qr i.is-off { background: transparent; }

.cc-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.cc-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; margin: 0 0 1.1rem; }
.cc-row .cc-h { margin: 0; }
.cc-pagehead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.cc-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border-radius: 0.72rem;
  background: #eef2ff;
  color: #4338ca;
  text-decoration: none;
}
.cc-back:hover {
  background: #e0e7ff;
  color: #3730a3;
}
.cc-back i { font-size: 0.9rem; }
.cc-menu {
  display: none;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: auto;
  border: 1px solid var(--cc-line);
  border-radius: 0.6rem;
  background: #fff;
  cursor: pointer;
}
.cc-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--cc-blue-2);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}
.cc-chip--exp {
  background: #fff7ed;
  color: #c2410c;
}
.cc-net {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--cc-line);
  color: var(--cc-ink);
  font-size: 0.72rem;
  font-weight: 750;
}
.cc-net::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}
.cc-banner {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1.05rem 1.15rem;
  border-radius: 1rem;
  background: #eff6ff;
  border: 1px solid #dbeafe;
}
.cc-banner--foot {
  margin-top: 1.15rem;
  margin-bottom: 0;
}
.cc-banner > div:first-child {
  min-width: 0;
  flex: 1;
}
.cc-banner strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.35;
}
.cc-banner p {
  margin: 0.35rem 0 0;
  max-width: 40rem;
  color: var(--cc-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}
.cc-banner .cc-acts {
  flex-shrink: 0;
  align-self: center;
}
.cc-err {
  padding: 1.1rem;
  border-radius: 0.9rem;
  background: #fef2f2;
  color: #991b1b;
}
.cc-err h3 { margin: 0 0 0.35rem; }
.cc-muted { color: var(--cc-muted); font-size: 0.82rem; }
.cc-posbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
  color: #cbd5e1;
  font-size: 0.78rem;
}
.cc-posbar button { color: #93c5fd; background: transparent; border: 0; cursor: pointer; font-weight: 700; }
.cc-quote { margin: 0.7rem 0; padding: 0.7rem 0.75rem; border-radius: 0.7rem; background: #f1f5f9; font-size: 0.82rem; }
.cc-quote b { float: right; }
.cc-spin {
  width: 2.2rem;
  height: 2.2rem;
  margin: 0.4rem auto 0.8rem;
  border: 3px solid #e2e8f0;
  border-top-color: var(--cc-blue);
  border-radius: 50%;
  animation: ccspin 0.8s linear infinite;
}
@keyframes ccspin { to { transform: rotate(360deg); } }
.cc-sheet {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: end center;
  background: rgba(15, 23, 42, 0.45);
}
.cc-sheet__card {
  width: 100%;
  padding: 1.15rem 1.15rem 1.4rem;
  border-radius: 1.1rem 1.1rem 0 0;
  background: #fff;
}
.cc-hash { font-family: ui-monospace, monospace; font-size: 0.78rem; word-break: break-all; }
.cc-pay-body {
  min-height: 100vh;
  background: #0b1220;
}
.cc-phone-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.6rem 1rem;
  background:
    radial-gradient(ellipse at 50% 0%, #1e3a8a 0%, transparent 42%),
    #0b1220;
}
.cc-phone {
  position: relative;
  overflow: hidden;
  width: min(390px, 100%);
  height: min(780px, calc(100vh - 2.4rem));
  padding: 12px;
  border-radius: 42px;
  background: #111217;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 28px 60px rgba(0, 0, 0, 0.45);
}
.cc-phone__notch {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 50%;
  width: 108px;
  height: 26px;
  border-radius: 18px;
  background: #000;
  transform: translateX(-50%);
}
.cc-phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 32px;
  background: #0f172a;
}
.cc-phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.15rem 0.35rem;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.cc-phone__status-icons {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.72rem;
}
@media (max-width: 480px) {
  .cc-phone-stage { padding: 0; }
  .cc-phone {
    width: 100%;
    height: 100vh;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .cc-phone__notch { display: none; }
  .cc-phone__screen { border-radius: 0; }
}
.cc-waitline { margin: 0.6rem 0 0; color: #64748b; font-size: 0.82rem; }
.cc-side-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(15, 23, 42, 0.28);
}

.wallet-modal--light .wallet-modal__overlay {
  background: rgba(15, 23, 42, 0.28);
}
.wallet-modal--light .wallet-modal__panel {
  width: min(100%, 400px);
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12);
  color: #0f172a;
}
.wallet-modal--light .wallet-modal__close {
  color: #64748b;
}
.wallet-modal--light .wallet-modal__close:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.wallet-modal--light .wallet-modal__address-box,
.wallet-modal--light .wallet-modal__chain-badge {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.wallet-modal--light .wallet-modal__address {
  color: #334155;
  white-space: nowrap;
  word-break: normal;
}
.wallet-modal--light .wallet-modal__copy,
.wallet-modal--light .wallet-modal__balance-label {
  color: #64748b;
}
.wallet-modal--light .wallet-modal__copy:hover {
  background: #eff6ff;
  color: #1d4ed8;
}
.wallet-modal--light .wallet-modal__balance-row {
  border-bottom-color: #e2e8f0;
}
.wallet-modal--light .wallet-modal__explorer {
  color: #2563eb;
}
.wallet-modal--light .wallet-modal__explorer:hover {
  color: #1d4ed8;
}
.wallet-modal--light .wallet-modal__disconnect {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}
.wallet-modal--light .wallet-modal__disconnect:hover:not(:disabled) {
  background: #dbeafe;
  border-color: #93c5fd;
}

@media (max-width: 900px) {
  .cc-app { grid-template-columns: 1fr; }
  .cc-side { display: none; }
  .cc-menu { display: inline-flex; align-items: center; justify-content: center; }
  .cc-grid--2, .cc-grid--3 { grid-template-columns: 1fr; }
  .cc-side.is-open {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: 16.4rem;
    height: 100vh;
  }
  .cc-side-scrim.is-on { display: block; }
  .cc-login { grid-template-columns: 1fr; }
  .cc-login__visual {
    min-height: 13.5rem;
    padding: 1.3rem 1.3rem 0;
  }
  .cc-login__slogan {
    max-width: none;
    margin-top: 0.85rem;
    font-size: 1.15rem;
    white-space: normal;
  }
  .cc-login__img {
    width: 70%;
    left: auto;
    right: -6%;
    bottom: -32%;
  }
  .cc-login__feats { display: none; }
  .cc-login__main {
    align-items: flex-start;
    padding: 2rem 1.2rem 2.5rem;
  }
  .cc-login__copyright {
    bottom: 1rem;
    font-size: 0.74rem;
  }
  .cc-login__powered {
    bottom: 3.85rem;
    font-size: 0.70rem;
  }
  .cc-login__nettag {
    top: 1rem;
    right: 1rem;
  }
}

body.cc-body {
  margin: 0;
  background: #f4f7fb !important;
}

/* —— 付款码 —— */
.cc-paycode-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin: 0 0 1.15rem;
  padding: 0;
  list-style: none;
}
.cc-paycode-progress > li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 650;
}
.cc-paycode-progress > li > i {
  margin: 0 0.15rem 0 0.35rem;
  font-size: 0.62rem;
  color: #cbd5e1;
}
.cc-paycode-progress__n {
  display: inline-grid;
  place-items: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
}
.cc-paycode-progress > li.is-on { color: #0f172a; }
.cc-paycode-progress > li.is-on .cc-paycode-progress__n {
  background: var(--cc-blue);
  color: #fff;
}
.cc-paycode-progress > li.is-done { color: #334155; }
.cc-paycode-progress > li.is-done .cc-paycode-progress__n {
  background: #bfdbfe;
  color: #1d4ed8;
}

.cc-paycode-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid #fecaca;
  border-radius: 0.85rem;
  background: #fff1f2;
}
.cc-paycode-alert p {
  margin: 0;
  color: #9f1239;
  font-size: 0.88rem;
  font-weight: 650;
}

.cc-paycode-step__h {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 800;
}
.cc-paycode-wallets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.95rem;
}
.cc-paycode-wallet {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.75rem;
  border: 1px solid var(--cc-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}
.cc-paycode-wallet img,
.cc-paycode-wallet em {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.28rem;
  object-fit: contain;
}
.cc-paycode-wallet em {
  display: inline-grid;
  place-items: center;
  background: #0f172a;
  color: #fff;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 800;
}

.cc-paycode-linkbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.85rem;
  background: #f8fafc;
}
.cc-paycode-linkbox > div {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  flex: 1;
}
.cc-paycode-linkbox span {
  color: var(--cc-muted);
  font-size: 0.75rem;
  font-weight: 700;
}
.cc-paycode-linkbox code {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 0.82rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cc-paycode-miniqr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 1rem;
}
.cc-paycode-miniqr .cc-qr {
  width: 6.4rem;
  height: 6.4rem;
  gap: 2px;
  padding: 0.35rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.55rem;
}
.cc-paycode-miniqr p {
  margin: 0;
  color: var(--cc-muted);
  font-size: 0.75rem;
}

.cc-paycode-grant {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
  padding: 0.85rem;
  border-radius: 0.85rem;
  background:
    radial-gradient(circle at 1px 1px, rgb(148 163 184 / 22%) 1px, transparent 0) 0 0 / 12px 12px,
    #f1f5f9;
}
.cc-paycode-grant__item {
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  padding: 1rem 0.55rem 0.85rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: #fff;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cc-paycode-grant__item img {
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.2rem;
  object-fit: contain;
}
.cc-paycode-grant__item b {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.25;
  white-space: nowrap;
}
.cc-paycode-grant__item em {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin-top: 0.2rem;
  color: #15803d;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 750;
}
.cc-paycode-grant__item.is-ok {
  border-color: #86efac;
  background: #f0fdf4;
}
@media (max-width: 640px) {
  .cc-paycode-grant { grid-template-columns: 1fr; }
}
.cc-paycode-claim-msg {
  margin: 0.85rem 0 0;
  color: #15803d;
  font-size: 0.88rem;
  font-weight: 700;
}

.cc-paycode-managed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 980px) {
  .cc-paycode-managed { grid-template-columns: 1fr; }
}
.cc-paycode-sec-title {
  margin: 0 0 0.85rem;
  font-size: 0.98rem;
  font-weight: 800;
}
.cc-paycode-flow {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cc-paycode-flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0 0 1.15rem;
}
.cc-paycode-flow__item:last-child { padding-bottom: 0; }
.cc-paycode-flow__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 2.05rem;
  bottom: 0.15rem;
  width: 2px;
  background: #dbeafe;
  transform: translateX(-50%);
}
.cc-paycode-flow__n {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: 800;
  z-index: 1;
}
.cc-paycode-flow__item.is-done .cc-paycode-flow__n {
  background: #2563eb;
  color: #fff;
}
.cc-paycode-flow__item.is-on .cc-paycode-flow__n {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 0 0 4px #dbeafe;
}
.cc-paycode-flow__item.is-on .cc-paycode-flow__head strong {
  color: #1d4ed8;
}
.cc-paycode-flow__body {
  min-width: 0;
  padding-top: 0.15rem;
}
.cc-paycode-flow__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.cc-paycode-flow__head strong {
  font-size: 0.92rem;
  font-weight: 800;
}
.cc-paycode-flow__head em {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 750;
}
.cc-paycode-flow__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.45;
}
.cc-paycode-flow__kv {
  display: grid;
  gap: 0.18rem;
  margin: 0.4rem 0 0;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.45;
}
.cc-paycode-flow__kv > div {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}
.cc-paycode-flow__kv dt {
  margin: 0;
  flex: none;
  color: inherit;
  font-weight: inherit;
}
.cc-paycode-flow__kv dt::after {
  content: "：";
}
.cc-paycode-flow__kv dd {
  margin: 0;
  min-width: 0;
  color: inherit;
  font-weight: inherit;
  word-break: break-all;
}
.cc-paycode-flow__assets {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.55rem;
}
.cc-paycode-flow__assets > div {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 700;
}
.cc-paycode-flow__assets img {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
}
.cc-paycode-asset-h {
  margin: 1.15rem 0 0.55rem;
  color: var(--cc-muted);
  font-size: 0.78rem;
  font-weight: 750;
}
.cc-paycode-assets {
  display: grid;
  gap: 0.45rem;
}
.cc-paycode-asset {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.15rem;
  border-bottom: 1px solid #f1f5f9;
}
.cc-paycode-asset:last-child { border-bottom: 0; }
.cc-paycode-asset img {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
}
.cc-paycode-asset span {
  flex: 1;
  font-weight: 700;
}
.cc-paycode-asset b { font-variant-numeric: tabular-nums; }
.cc-paycode-preview-card { text-align: center; }
.cc-paycode-acts { justify-content: center; margin-top: 0.85rem; }
.cc-paycode-foot-note {
  margin: 1rem 0 0;
  color: #94a3b8;
  font-size: 0.78rem;
  text-align: center;
}

.cc-paycode-phone.cc-phone-stage {
  min-height: 0;
  padding: 0.4rem 0 0.2rem;
  background: transparent;
}
.cc-paycode-phone .cc-phone {
  width: min(280px, 100%);
  height: 560px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 34px;
}
.cc-paycode-phone.is-compact .cc-phone {
  width: min(260px, 100%);
  height: 520px;
}
.cc-paycode-phone .cc-phone__notch {
  top: 14px;
  width: 88px;
  height: 22px;
}
.cc-paycode-phone .cc-phone__screen { border-radius: 26px; }
.cc-paycode-phone .cc-mmbar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem 0.35rem;
  flex-shrink: 0;
}
.cc-paycode-phone .cc-mmbar > button {
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  background: transparent;
  color: #e2e8f0;
}
.cc-paycode-phone .cc-mmbar__url {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  flex: 1;
  min-width: 0;
  height: 1.55rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  font-size: 0.58rem;
  font-weight: 650;
}
.cc-paycode-phone .cc-mmbar__url i { color: #16a34a; font-size: 0.55rem; }
.cc-paycode-phone .cc-mmbar__url span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cc-paycode-phone .cc-mmbar__tab {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid #cbd5e1;
  border-radius: 0.22rem;
  color: #e2e8f0;
  font-size: 0.58rem;
  font-weight: 800;
}
.cc-paycode-phone .cc-mmbar__fox {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
}
.cc-paycode-phone .cc-pay {
  padding: 0.05rem 0.7rem 0.4rem;
  overflow: auto;
}
.cc-paycode-phone .cc-pay__tools {
  display: flex;
  align-items: center;
  gap: 0.28rem;
}
.cc-paycode-phone .cc-pay__tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 0;
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.cc-paycode-phone .cc-pay__netpill {
  width: auto !important;
  padding: 0 0.35rem;
  border-radius: 999px !important;
  gap: 0.18rem;
}
.cc-paycode-phone .cc-pay-field {
  position: relative;
  display: grid;
  gap: 0.22rem;
  margin-bottom: 0.55rem;
}
.cc-paycode-phone .cc-pay-field > span {
  color: #94a3b8;
  font-size: 0.62rem;
  font-weight: 700;
  text-align: left;
}
.cc-paycode-phone .cc-pay-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.7rem;
  background: #1e293b;
  color: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.cc-paycode-phone .cc-pay-select b { font-size: 0.8rem; }
.cc-paycode-phone .cc-pay-select i { color: #94a3b8; font-size: 0.62rem; }
.cc-paycode-phone .cc-pay-menu {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: calc(100% + 0.22rem);
  display: grid;
  padding: 0.22rem;
  border-radius: 0.7rem;
  background: #0f172a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.cc-paycode-phone .cc-pay-menu button {
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: #e2e8f0;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}
.cc-paycode-phone .cc-pay-menu button.is-on,
.cc-paycode-phone .cc-pay-menu button:hover {
  background: #1e293b;
  color: #fff;
}
.cc-paycode-bal {
  margin: -0.15rem 0 0.65rem;
  color: #94a3b8;
  font-size: 0.72rem;
  text-align: left;
}
.cc-paycode-bal strong { color: #fff; font-weight: 750; }
.cc-paycode-phone .cc-qrbox {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.9rem 0.85rem 0.8rem;
  border-radius: 1rem;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
.cc-paycode-phone .cc-qr {
  width: 8.6rem;
  height: 8.6rem;
  gap: 2px;
  padding: 0.2rem;
}
.cc-paycode-phone .cc-qrwrap {
  position: relative;
  border: 0;
  padding: 0.55rem;
  border-radius: 0.85rem;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px #eef2f7;
}
.cc-paycode-phone .cc-qr__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.4rem;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 0 0 3px #fff;
  transform: translate(-50%, -50%);
}
.cc-paycode-phone .cc-qr__logo svg { width: 1rem; height: 1rem; }
.cc-paycode-phone .cc-qr__logo img {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
  display: block;
}
.cc-paycode-phone .cc-qrbox__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.6rem 0.15rem 0;
  background: transparent;
  color: #64748b;
  border-top: 1px solid #eef2f7;
}
.cc-paycode-phone .cc-qrbox__foot p {
  flex: 0 1 auto;
  max-width: calc(100% - 1.8rem);
  margin: 0;
  overflow: hidden;
  color: #475569;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.58rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
.cc-paycode-phone .cc-phone__home {
  display: block;
  width: 5.8rem;
  height: 0.28rem;
  margin: 0.2rem auto 0.4rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

/* Coral Console v2 — Gateway flow */
.ccx-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 750;
  font-style: normal;
}
.ccx-chip.is-ok { background: #f0fdf4; color: #16a34a; }
.ccx-chip.is-bad { background: #fef2f2; color: #dc2626; }
.ccx-chip.is-run { background: #eff6ff; color: #2563eb; }
.ccx-chip.is-mute { background: #fff7ed; color: #f97316; border: 1px solid #fed7aa; }
.ccx-chip.is-wait { background: #f8fafc; color: #64748b; }

.ccx-empty {
  display: grid;
  justify-items: start;
  gap: 0.4rem;
  padding: 1.2rem 0.2rem;
  color: var(--cc-muted);
}
.ccx-empty strong { color: var(--cc-ink); font-size: 0.95rem; }
.ccx-empty p { margin: 0; font-size: 0.84rem; line-height: 1.55; }

.ccx-row-between { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.ccx-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: #374151; }
.ccx-or {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1rem 0 0.7rem;
  color: #9ca3af;
  font-size: 0.78rem;
}
.ccx-or::before,
.ccx-or::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }
.ccx-wallets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.ccx-wallets button {
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  padding: 0.65rem 0.3rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.7rem;
  background: #fff;
  color: #4b5563;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
}
.ccx-wallets img { width: 1.35rem; height: 1.35rem; }
.ccx-wallets button i { font-size: 1.35rem; color: #64748b; }
.ccx-guest-gate-mask {
  z-index: 1600;
}
.ccx-guest-gate {
  white-space: normal;
}
.ccx-guest-gate .cc-modal__sub {
  margin-bottom: 1.15rem;
  white-space: normal;
}
.ccx-guest-gate__wallets {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 0.8rem;
}
.ccx-guest-gate__wallets button {
  width: 11.4rem;
  min-height: 4.7rem;
  padding: 0.85rem 0.7rem 0.75rem;
  gap: 0.4rem;
  border-radius: 0.8rem;
  white-space: normal;
  line-height: 1.35;
  text-align: center;
}
.ccx-guest-gate form .cc-field {
  gap: 0.5rem;
  margin: 0 0 1.1rem;
}
.ccx-guest-gate form .cc-hint { margin: -0.35rem 0 0.95rem; }
.ccx-guest-gate form .cc-modal__acts { margin-top: 0.15rem; }
.ccx-auth-foot { margin: 1rem 0 0; text-align: center; color: #6b7280; font-size: 0.82rem; }
.ccx-auth-foot a { color: var(--cc-blue-2); font-weight: 700; text-decoration: none; }
.ccx-code-row { display: flex; gap: 0.5rem; }
.ccx-code-row input { flex: 1; }
.ccx-code-field {
  position: relative;
  display: flex;
  align-items: center;
}
.ccx-code-field input {
  width: 100%;
  padding-right: 3.6rem;
}
.ccx-code-field button {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--cc-blue-2, #1d4ed8);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1;
  padding: 0;
  min-height: 0;
  cursor: pointer;
}
.ccx-code-field button:disabled {
  color: #94a3b8;
  cursor: default;
}
.ccx-pass-field {
  position: relative;
  display: flex;
  align-items: center;
}
.ccx-pass-field input {
  width: 100%;
  padding-right: 2.7rem;
}
.ccx-pass-field__eye {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  min-height: 0;
  line-height: 1;
}
.ccx-pass-field__eye:hover {
  background: #e2e8f0;
  color: #334155;
}
.ccx-pass-field__eye i { font-size: 0.82rem; }
.ccx-err { color: #dc2626 !important; }

.ccx-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.55rem; }
.ccx-card-head .ccx-acts { margin-top: 0; }
.ccx-card-head h2, .ccx-card-head h3 { margin: 0; font-size: 1.05rem; }
.ccx-kicker { margin: 0 0 0.2rem; color: var(--cc-muted); font-size: 0.75rem; font-weight: 700; }
.ccx-cap { display: grid; gap: 0.45rem; padding: 0.7rem; border: 1px solid #f0f6ff; border-radius: 0.7rem; background: #fafcff; }
.ccx-cap > div, .ccx-kv > div { display: flex; justify-content: space-between; gap: 0.8rem; align-items: center; }
.ccx-cap span, .ccx-kv span { color: #6b7280; font-size: 0.8rem; }
.ccx-cap b, .ccx-kv b { font-size: 0.82rem; font-weight: 750; text-align: right; }
.ccx-kv { display: grid; gap: 0.55rem; }
.ccx-kv__act {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.cc-sec { display: grid; gap: 0; }
.cc-sec__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.55rem;
  border-bottom: 1px solid #f3f4f6;
}
.cc-sec__row:last-child { border-bottom: 0; }
.cc-sec__row > span { color: #6b7280; font-size: 0.8rem; }
.cc-sec--account .cc-sec__row {
  min-height: 0;
  padding: 1.18rem 0.1rem;
  gap: 1.25rem;
}
.cc-sec__body {
  display: flex;
  align-items: flex-start;
  gap: 0.72rem;
  min-width: 0;
}
.cc-sec__ico {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.12rem;
  color: #64748b;
  font-size: 1.02rem;
  flex: none;
}
.cc-sec__ico img {
  width: 1.28rem;
  height: 1.28rem;
  object-fit: contain;
}
.cc-sec__copy {
  min-width: 0;
}
.cc-sec__copy strong {
  display: block;
  color: var(--cc-ink);
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1.3;
}
.cc-sec__copy p {
  margin: 0.28rem 0 0;
  color: #94a3b8;
  font-size: 0.78rem;
  line-height: 1.45;
}
.cc-sec__right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-left: auto;
}
.cc-act {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 6.6rem;
  align-items: center;
  column-gap: 2.4rem;
}
.cc-sec__right.cc-act,
.ccx-tp__right.cc-act {
  column-gap: 2.4rem;
}
.cc-act .cc-sec__status,
.cc-act .ccx-tp__st {
  justify-self: end;
  text-align: right;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-sec--account .cc-act {
  grid-template-columns: minmax(0, auto) 6.6rem;
}
.cc-sec__addr {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.32rem;
  min-width: 0;
  max-width: none;
}
.cc-sec--account .cc-act .cc-sec__addr .cc-sec__status {
  max-width: none;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.78rem;
  font-weight: 650;
}
.cc-act .cc-btn--pill,
.cc-act .cc-act__slot {
  width: 6.6rem;
  justify-self: end;
  box-sizing: border-box;
}
.cc-act .cc-btn--pill {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.cc-act__slot { display: block; height: 2rem; }
.cc-sec__status {
  font-size: 0.82rem;
  font-weight: 650;
  font-style: normal;
  color: #334155;
}
.cc-sec__status.is-ok { color: #16a34a; }
.cc-sec__status.is-off { color: #94a3b8; }
.cc-sec__status.is-warn { color: #fa8c16; }
.cc-app .cc-mask { z-index: 80; }
.ccx-acts { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin-top: 0.9rem; }
.ccx-pos-reg {
  margin-top: 0.95rem;
}
.ccx-pos-reg .cc-field {
  gap: 0.5rem;
  margin: 0 0 1.1rem;
}
.ccx-pos-reg .cc-field label {
  font-size: 0.8rem;
}
.ccx-pos-reg .cc-field input {
  min-height: 2.7rem;
}
.ccx-pos-reg .ccx-acts {
  margin-top: 0.15rem;
}
.ccx-url {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.7rem;
  background: #f9fafb;
  font-size: 0.8rem;
  word-break: break-all;
}
.ccx-url span { flex: 1; min-width: 0; }
.cc-grid.ccx-env-split { grid-template-columns: 1fr 1fr; }
.ccx-recv {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
}
.ccx-recv__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.7rem;
  background: #f9fafb;
}
.ccx-recv__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 650;
}
.ccx-recv__meta span {
  flex: none;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
}
.ccx-recv__meta code {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 650;
  color: inherit;
}
.ccx-recv__meta em {
  margin-left: auto;
  color: #94a3b8;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}
.ccx-recv__item .cc-copy { flex: none; }
@media (max-width: 720px) {
  .cc-grid.ccx-env-split { grid-template-columns: 1fr; }
}
.ccx-tp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.85rem;
  padding: 0.82rem 1rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.75rem;
  background: #fff;
}
.ccx-tp__left {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  color: var(--cc-ink);
  font-size: 0.92rem;
  font-weight: 650;
}
.ccx-tp__left img {
  width: 1.45rem;
  height: 1.45rem;
  flex: none;
  object-fit: contain;
}
.ccx-tp__right {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}
.ccx-tp__right.cc-act {
  display: grid;
  column-gap: 2.4rem;
}
.ccx-tp__st {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.82rem;
  font-weight: 650;
  font-style: normal;
  white-space: nowrap;
}
.ccx-tp__st.is-warn { color: #fa8c16; }
.ccx-tp__st.is-ok { color: #16a34a; }
.ccx-tp__st i { font-size: 0.9rem; }
.cc-btn--pill {
  min-height: 2rem;
  padding: 0.22rem 0.95rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
}
.ccx-order-list, .ccx-asset-list, .ccx-gw-list { display: grid; gap: 0.45rem; }
.ccx-order-list a, .ccx-order-list > div, .ccx-asset-list > div, .ccx-gw-list article {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.7rem 0.75rem;
  border: 1px solid #f3f4f6;
  border-radius: 0.7rem;
  background: #fafafa;
  color: inherit;
  text-decoration: none;
}
.ccx-gw-list article { grid-template-columns: minmax(0, 1.4fr) auto auto auto; }
.ccx-order-list strong, .ccx-gw-list strong { font-size: 0.84rem; }
.ccx-order-list span, .ccx-asset-list span, .ccx-gw-list p { color: #9ca3af; font-size: 0.75rem; margin: 0; }
.ccx-order-list b, .ccx-asset-list b { color: #16a34a; font-size: 0.84rem; }
.ccx-gw-list em { margin-left: 0.4rem; font-style: normal; font-size: 0.7rem; color: var(--cc-blue-2); font-weight: 750; }

.ccx-tabs { display: flex; border-bottom: 1px solid #e5e7eb; margin-bottom: 0.9rem; }
.ccx-tabs button {
  flex: 1;
  padding: 0.45rem 0.2rem 0.55rem;
  border: 0;
  background: none;
  color: #9ca3af;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}
.ccx-tabs button.is-on { color: #2563eb; box-shadow: inset 0 -2px 0 #2563eb; }
.ccx-checks { display: grid; gap: 0.4rem; }
.ccx-checks h3 { margin: 0.7rem 0 0.2rem; font-size: 0.88rem; }
.ccx-checks label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; }

.cc-connect { max-width: 720px; }
.cc-connect--wide { max-width: none; width: 100%; }
.cc-connect .cc-grid--2 { grid-template-columns: 1fr 1fr; }
.cc-res { margin-bottom: 1rem; }
.cc-res__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.cc-res__head h3 { margin: 0; font-size: 0.95rem; }
.cc-res__head p { margin: 0.28rem 0 0; max-width: 42rem; }
.cc-res__group { margin-bottom: 0.9rem; }
.cc-res__group:last-child { margin-bottom: 0; }
.cc-res__label {
  display: block;
  margin-bottom: 0.4rem;
  color: #6b7280;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cc-res__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.7rem;
}
.cc-res__row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-sizing: border-box;
  min-width: 9.5rem;
  min-height: 2.35rem;
  padding: 0.38rem 1.05rem 0.38rem 0.75rem;
  border: 1px solid #e8eef6;
  border-radius: 0.55rem;
  background: #f8fbff;
  font-size: 0.86rem;
  white-space: nowrap;
}
.cc-res__row.is-locked { background: #f1f7ff; border-color: #dbeafe; }
.cc-res__row input { width: 0.95rem; height: 0.95rem; accent-color: #2563eb; }
.cc-res__row input:disabled { opacity: 1; cursor: not-allowed; }
.cc-res__row .ccx-chip { margin-left: 0.1rem; }
.cc-res__note { margin: 0.45rem 0 0; }
.cc-res .cc-field { margin-top: 0.85rem; }
.cc-apply-list { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.cc-apply-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #eef2f7;
  border-radius: 0.7rem;
  background: #fafcff;
}
.cc-apply-list strong { display: block; font-size: 0.86rem; }
.cc-apply-list p { margin: 0.15rem 0 0; }
.cc-connect .cc-grid--2 .cc-field:has(textarea) { grid-column: 1 / -1; }

.ccx-apply { max-width: 880px; }
.ccx-apply .cc-grid--2 { grid-template-columns: 1fr 1fr; }
.ccx-apply .cc-grid--2 .cc-field:has(textarea) { grid-column: 1 / -1; }
.ccx-apply .cc-field:has(.cc-select) { position: relative; }
.ccx-apply .cc-field:has(.cc-select.is-open) { z-index: 12; }
.ccx-apply .cc-select,
.ccx-apply .cc-select__btn { width: 100%; }
.ccx-apply-sec { margin-top: 1.15rem; }
.ccx-apply-sec:first-child { margin-top: 0; }
.ccx-apply-sec h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}
.ccx-apply-sec > p {
  margin: 0.28rem 0 0.75rem;
  color: var(--cc-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
.ccx-apply__kinds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.ccx-apply__kinds button {
  min-height: 2.5rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.7rem;
  background: #fff;
  color: #334155;
  font-size: 0.86rem;
  font-weight: 750;
  cursor: pointer;
}
.ccx-apply__kinds button.is-on {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}
.ccx-apply__kinds--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ccx-apply-note {
  margin-top: 1.15rem;
  padding: 0.95rem 1rem;
  border: 1px solid #dbeafe;
  border-radius: 0.8rem;
  background: #f8fbff;
}
.ccx-apply-note strong {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}
.ccx-apply-note > p {
  margin: 0;
  color: var(--cc-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
.ccx-apply-note .ccx-acts {
  margin-top: 0.85rem;
}

.ccx-narrow { max-width: 520px; }
.ccx-netx {
  padding: 0.9rem;
  border-radius: 0.8rem;
  background: #eff6ff;
  margin: 0.8rem 0;
}
.ccx-netx span { color: #6b7280; font-size: 0.8rem; }
.ccx-netx strong { display: block; margin: 0.25rem 0 0.45rem; color: #2563eb; font-size: 1.55rem; }
.ccx-netx > div { display: flex; justify-content: space-between; }
.ccx-netx b { color: #16a34a; font-size: 0.82rem; }
.ccx-netx p { margin: 0.45rem 0 0; color: #64748b; font-size: 0.78rem; }
.ccx-netx-chains {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  padding: 0;
  list-style: none;
}
.ccx-netx-chains li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
}
.ccx-netx-chains strong {
  display: inline;
  margin: 0;
  color: var(--cc-ink);
  font-size: 0.95rem;
}
.ccx-netx-total {
  align-items: baseline;
  padding: 0.55rem 0 0.45rem;
  margin-bottom: 0.35rem;
  border-top: 1px solid #dbeafe;
}
.ccx-netx-total strong {
  margin: 0;
  font-size: 1.15rem;
}

.ccx-first {
  display: grid;
  gap: 0;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}
.ccx-first li {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--cc-line);
}
.ccx-first li:last-child { border-bottom: 0; }
.ccx-first em {
  color: #94a3b8;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.ccx-first strong { display: block; font-size: 0.95rem; }
.ccx-first p {
  margin: 0.25rem 0 0;
  color: var(--cc-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
.ccx-first b {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--cc-blue);
  font-size: 0.72rem;
  font-weight: 800;
}
.ccx-first .is-done em,
.ccx-first .is-done strong { color: #16a34a; }
.ccx-first .is-now em,
.ccx-first .is-now strong { color: #1d4ed8; }
.ccx-first .is-todo { opacity: 0.62; }

.ccx-checkout {
  margin-top: 1.25rem;
  padding: 1.35rem 1.4rem 1.3rem;
  border: 1px solid #c7d7fe;
  border-radius: 1.2rem;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(37, 99, 235, 0.1), transparent 55%),
    linear-gradient(180deg, #f8fbff 0%, #fff 48%);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.08);
}
.ccx-checkout__head em {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.45rem;
  padding: 0.16rem 0.52rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.7rem;
  font-weight: 750;
  font-style: normal;
  letter-spacing: 0.04em;
}
.ccx-checkout__head h3 {
  margin: 0;
  font-size: 1.12rem;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.ccx-checkout__head p {
  margin: 0.28rem 0 0;
  color: var(--cc-muted);
  font-size: 0.84rem;
  line-height: 1.45;
  white-space: nowrap;
}
.ccx-payinfo {
  margin-top: 0.95rem;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid #e8eef6;
  border-radius: 1.05rem;
  background: #fff;
}
.ccx-payinfo h4 {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.ccx-payinfo__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.72rem 0 0.12rem;
}
.ccx-payinfo__row + .ccx-payinfo__row {
  margin-top: 0.55rem;
  padding-top: 0.78rem;
  border-top: 1px solid #f1f5f9;
}
.ccx-payinfo__row span {
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 650;
}
.ccx-payinfo__row b {
  color: #0f172a;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ccx-payinfo__row.is-nets {
  align-items: center;
}
.ccx-payinfo.is-short {
  border-color: #fed7aa;
  background: #fffbeb;
}
.ccx-payinfo__warn {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.78rem;
  border-top: 1px solid #fde68a;
  color: #b45309;
  font-size: 0.86rem;
  font-weight: 650;
}
.ccx-payinfo__warn b { font-weight: 800; }
.ccx-payinfo__nets {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}
.ccx-payinfo__nets label {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 2.2rem;
  padding: 0.28rem 0.78rem 0.28rem 0.62rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
}
.ccx-payinfo__nets label.is-on {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
}
.ccx-payinfo__nets input {
  margin: 0;
  accent-color: #2563eb;
}
.ccx-checkout__price {
  display: flex;
  align-items: baseline;
  gap: 0.42rem;
  margin: 1rem 0 0.95rem;
}
.ccx-checkout__price b {
  font-size: 2.45rem;
  line-height: 1;
  letter-spacing: -0.06em;
  font-weight: 800;
  color: var(--cc-ink);
}
.ccx-checkout__price span {
  color: #1d4ed8;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.ccx-wallet-card {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid #e8eef6;
  border-radius: 1.05rem;
  background: #fff;
}
.ccx-wallet-card__label {
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ccx-wallet-card__addr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 2.7rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid #e8eef4;
  border-radius: 0.85rem;
  background: #f8fafc;
}
.ccx-wallet-card__addr > span {
  flex: 0 0 auto;
  color: #334155;
  font-size: 0.9rem;
  font-weight: 550;
}
.ccx-wallet-card__val {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  min-width: 0;
}
.ccx-wallet-card__addr code {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84rem;
  font-weight: 650;
  color: #0f172a;
  word-break: break-all;
  line-height: 1.4;
  text-align: right;
}
.ccx-wallet-card__addr .cc-chip {
  flex: 0 0 auto;
}
.ccx-wallet-card__addr .cc-copy {
  flex: none;
  color: #2563eb;
}
.ccx-wallet-card__bal {
  display: grid;
  gap: 0.72rem;
  padding: 0.95rem 1rem;
  border-radius: 0.9rem;
  background: #eef4ff;
}
.ccx-wallet-card__bal > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.ccx-wallet-card__bal span {
  color: #334155;
  font-size: 0.9rem;
  font-weight: 550;
}
.ccx-wallet-card__bal b {
  color: #0f172a;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ccx-wallet-card__bal .is-total {
  padding-top: 0.82rem;
  border-top: 1px solid rgb(37 99 235 / 12%);
}
.ccx-wallet-card__bal .is-total b {
  color: #2563eb;
  font-size: 1.18rem;
}
.ccx-wallet-card__bal b em {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0;
  text-align: right;
}
.ccx-wallet-card__bal b em.is-ok { color: #16a34a; }
.ccx-wallet-card__bal b em.is-no { color: #dc2626; }
.ccx-wallet-card__warn {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  color: #b45309;
  font-size: 0.86rem;
}
.ccx-wallet-card__warn b { font-weight: 800; }
.ccx-checkout__cta {
  width: 100%;
  min-height: 2.9rem;
  margin-top: 1rem;
  border-radius: 0.9rem;
  font-size: 0.95rem;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
}
.ccx-checkout__note {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  margin: 0.95rem 0 0;
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 650;
  text-align: center;
}
.ccx-checkout__note span {
  color: #0f172a;
}
.ccx-checkout__get {
  display: inline-flex;
  align-items: center;
  color: #1d4ed8;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
}
.ccx-checkout__get:hover {
  text-decoration: underline;
}
.ccx-checkout__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ccx-checkout.is-short {
  border-color: #fed7aa;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(245, 158, 11, 0.12), transparent 55%),
    linear-gradient(180deg, #fffbeb 0%, #fff 52%);
  box-shadow: 0 16px 36px rgba(180, 83, 9, 0.08);
}

.ccx-detect { display: grid; gap: 0; border: 1px solid #f0f6ff; border-radius: 0.7rem; background: #fafcff; overflow: hidden; }
.ccx-detect > div { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.6rem; padding: 0.65rem 0.75rem; border-bottom: 1px solid #f3f4f6; }
.ccx-detect > div:last-child { border-bottom: 0; }
.ccx-detect p { grid-column: 1 / -1; margin: 0; color: #dc2626; font-size: 0.75rem; }
.ccx-pass, .ccx-fail {
  margin: 0.9rem 0;
  padding: 0.85rem;
  border-radius: 0.8rem;
  text-align: center;
}
.ccx-pass { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }
.ccx-fail { background: #fff7ed; border: 1px solid #fed7aa; color: #c2410c; }
.ccx-pass p, .ccx-fail p { margin: 0.25rem 0 0.6rem; color: #6b7280; font-size: 0.8rem; }

.ccx-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin: 0.8rem 0;
}
.ccx-keys button {
  min-height: 2.6rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.6rem;
  background: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.ccx-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ccx-timeline li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  color: #94a3b8;
  border-left: 2px solid #e2e8f0;
  margin-left: 0.7rem;
  padding-left: 1rem;
}
.ccx-timeline li.is-on { color: #0f172a; border-left-color: #2563eb; }
.ccx-timeline li span {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: -1.75rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}
.ccx-timeline li.is-on span { background: #2563eb; color: #fff; }

.ccx-detail {
  display: grid;
  gap: 1rem;
}
.ccx-order-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 2.4rem;
  align-items: start;
}
.ccx-order-split > div + div {
  border-left: 1px solid #eef2f7;
  padding-left: 2.4rem;
}
.ccx-order-split h3 { margin: 0 0 0.85rem; }
.ccx-detail .cc-card.cc-pad > h3 {
  margin: 0;
}
.ccx-detail .cc-card.cc-pad > h3 + .ccx-order-tl-wrap {
  margin-top: 0.85rem;
}
.ccx-detail .cc-hint + .ccx-kv { margin-top: 0.7rem; }
.ccx-order-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}
.ccx-detail .ccx-kv > div {
  align-items: flex-start;
  min-width: 0;
}
.ccx-detail .ccx-kv span {
  flex: none;
  min-width: 6.6rem;
}
.ccx-detail .ccx-kv b {
  min-width: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}
.ccx-detail .ccx-kv b.ccx-order-hash {
  flex-wrap: nowrap;
  align-items: flex-start;
  max-width: calc(100% - 7.2rem);
}
.ccx-detail .ccx-order-hash code {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.45;
  word-break: break-all;
  overflow-wrap: anywhere;
  text-align: right;
}
.ccx-detail .ccx-order-hash a {
  min-width: 0;
}
.ccx-detail .ccx-order-hash a code {
  color: inherit;
  font-weight: inherit;
}
.ccx-order-amt > div:first-child b {
  font-size: 1.05rem;
  font-weight: 800;
}
.ccx-order-tl-wrap {
  overflow-x: auto;
  padding: 0.35rem 0.15rem 0.15rem;
}
.ccx-order-tl {
  display: grid;
  grid-template-columns: repeat(7, minmax(7.2rem, 1fr));
  gap: 0;
  min-width: 54rem;
  margin: 0;
  padding: 0.15rem 0 0;
  list-style: none;
}
.ccx-order-tl li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.38rem;
  padding: 0 0.4rem;
  text-align: center;
  color: #94a3b8;
}
.ccx-order-tl li::before {
  content: "";
  position: absolute;
  top: 0.72rem;
  right: calc(50% + 0.95rem);
  left: calc(-50% + 0.95rem);
  height: 2px;
  background: #e2e8f0;
}
.ccx-order-tl li:first-child::before { display: none; }
.ccx-order-tl li.is-on { color: #0f172a; }
.ccx-order-tl li.is-on::before { background: #2563eb; }
.ccx-order-tl li > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}
.ccx-order-tl li.is-on > span { background: #2563eb; color: #fff; }
.ccx-order-tl li strong {
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.3;
}
.ccx-order-tl li em {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  color: #64748b;
  font-size: 0.7rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}
.ccx-order-tl li.is-on em { color: #475569; }
.ccx-order-tl li em.is-empty { color: #cbd5e1; }

@media (max-width: 960px) {
  .ccx-order-split,
  .ccx-order-pair { grid-template-columns: 1fr; }
  .ccx-order-split > div + div {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid #eef2f7;
    margin-top: 0.35rem;
    padding-top: 1.1rem;
  }
}

.cc-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

@media (max-width: 960px) {
  .cc-grid--2 { grid-template-columns: 1fr; }
  .ccx-order-list a, .ccx-order-list > div, .ccx-gw-list article {
    grid-template-columns: 1fr auto;
  }
}

.ccx-stage {
  display: grid;
  gap: 1.15rem;
  max-width: 1120px;
}
.ccx-stage__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.85fr);
  gap: 1.1rem;
  align-items: start;
}
.ccx-stage__hero h1 {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
}
.ccx-stage__tag {
  margin: 0.45rem 0 0;
  color: var(--cc-blue);
  font-size: 0.98rem;
  font-weight: 750;
}
.ccx-stage__lead {
  margin: 0.45rem 0 0;
  max-width: 28rem;
  color: var(--cc-muted);
  font-size: 0.92rem;
  line-height: 1.65;
}
.ccx-stage__status {
  padding: 1.05rem 1.1rem 1.15rem;
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 1.05rem;
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.12);
}
.ccx-stage__status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}
.ccx-stage__status-head > span {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 650;
}
.ccx-stage__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  font-size: 0.75rem;
  font-weight: 750;
  font-style: normal;
}
.ccx-stage__badge i { font-size: 0.68rem; }
.ccx-stage__status > p {
  margin: 0.7rem 0 0.95rem;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.6;
}
.ccx-stage__status .cc-btn { width: 100%; }

.ccx-journey {
  padding: 1.2rem 1.15rem 1.05rem;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(187, 247, 208, 0.35), transparent 42%),
    radial-gradient(ellipse at 28% 22%, rgba(254, 202, 202, 0.28), transparent 36%),
    linear-gradient(180deg, #f8fbff, #fff);
  border: 1px solid #e8eef7;
  border-radius: 1.15rem;
}
.ccx-journey__scroller { overflow-x: auto; }
.ccx-journey__track {
  list-style: none;
  margin: 0;
  padding: 0.2rem 0.2rem 0.35rem;
  min-width: 52rem;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  position: relative;
}
.ccx-journey__track::before {
  content: "";
  position: absolute;
  top: 1.45rem;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, #22c55e 0 12%, #93c5fd 18% 100%);
  z-index: 0;
}
.ccx-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.28rem;
}
.ccx-step__ico {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #cbd5e1;
  color: #94a3b8;
  box-shadow: 0 0 0 4px #fff;
}
.ccx-step strong {
  font-size: 0.82rem;
  font-weight: 750;
  color: #0f172a;
}
.ccx-step > span {
  color: #94a3b8;
  font-size: 0.72rem;
  line-height: 1.35;
}
.ccx-step em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 750;
  color: #94a3b8;
}
.ccx-step.is-done .ccx-step__ico {
  border-color: #22c55e;
  color: #16a34a;
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(34, 197, 94, 0.16);
}
.ccx-step.is-done em { color: #16a34a; }
.ccx-step.is-now .ccx-step__ico {
  border-color: #f87171;
  color: #dc2626;
  box-shadow: 0 0 0 4px #fff, 0 0 18px rgba(248, 113, 113, 0.45);
}
.ccx-step.is-now em { color: #dc2626; }
.ccx-hub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: min(32rem, 100%);
  margin: 1rem auto 0;
  padding: 0.72rem 1rem;
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color: #fff;
  border-radius: 0.85rem;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
}
.ccx-hub svg {
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  color: #fff;
}
.ccx-hub strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 750;
}
.ccx-hub span {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.72rem;
  opacity: 0.86;
}

.ccx-support {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}
.ccx-support article {
  display: flex;
  flex-direction: column;
  min-height: 13.5rem;
  padding: 1rem 1rem 0.9rem;
  background: #fff;
  border: 1px solid var(--cc-line);
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.ccx-support header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.ccx-support h3 {
  margin: 0;
  font-size: 0.92rem;
}
.ccx-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: #16a34a;
  font-size: 0.72rem;
  font-weight: 750;
  font-style: normal;
}
.ccx-ok::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #22c55e;
}
.ccx-support__list {
  display: grid;
  gap: 0.45rem;
  flex: 1;
}
.ccx-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 650;
}
.ccx-brand img,
.ccx-brand svg,
.ccx-brand i,
.ccx-brand em {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  object-fit: contain;
}
.ccx-brand i {
  display: grid;
  place-items: center;
  border-radius: 0.35rem;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.7rem;
}
.ccx-brand em {
  display: grid;
  place-items: center;
  border-radius: 0.35rem;
  color: #fff;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}
.ccx-brand svg { color: var(--cc-blue); }
.ccx-support .cc-link {
  margin-top: 0.75rem;
  font-size: 0.78rem;
}

.ccx-stage__cta {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 1rem;
  align-items: center;
  padding: 1.15rem 1.2rem;
  background: linear-gradient(90deg, #eff6ff, #fff);
  border: 1px solid #dbeafe;
  border-radius: 1.05rem;
}
.ccx-stage__cta h2 {
  margin: 0;
  font-size: 1.12rem;
  letter-spacing: -0.03em;
}
.ccx-stage__cta p {
  margin: 0.4rem 0 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.6;
}
.ccx-stage__acts {
  display: grid;
  gap: 0.55rem;
}
.ccx-stage__acts > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.72rem 0.8rem;
  background: #fff;
  border: 1px solid var(--cc-line);
  border-radius: 0.85rem;
}
.ccx-stage__acts > div > i {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  background: #eff6ff;
  color: var(--cc-blue);
}
.ccx-stage__acts span {
  display: block;
  color: #64748b;
  font-size: 0.74rem;
}
.ccx-stage__acts b {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.88rem;
}

@media (max-width: 1100px) {
  .ccx-support { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .ccx-stage__hero,
  .ccx-stage__cta { grid-template-columns: 1fr; }
  .ccx-support { grid-template-columns: 1fr; }
}


.ccx-home {
  display: grid;
  gap: 0;
  margin: 0;
}
.ccx-home-hero {
  display: grid;
  place-items: center;
  min-height: 28rem;
  padding: 5.6rem 2.4rem 5.2rem;
  color: #eef4ff;
  text-align: center;
  background:
    radial-gradient(70% 90% at 92% 18%, rgba(59, 130, 246, 0.38), transparent 58%),
    radial-gradient(40% 60% at 8% 88%, rgba(14, 165, 233, 0.16), transparent 62%),
    linear-gradient(148deg, #071225 0%, #10284a 46%, #0b172c 100%);
}
.ccx-home-hero__copy { max-width: 46rem; }
.ccx-home-hero h1 {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  letter-spacing: -0.04em;
  line-height: 1.16;
  font-weight: 800;
}
.ccx-home-hero__lead {
  display: grid;
  gap: 0;
  margin: 0.9rem auto 0;
  max-width: 42rem;
  color: #cbd5e1;
  font-size: 0.95rem;
  line-height: 1.7;
}
.ccx-home-hero__lead span { display: block; }

.ccx-home-block {
  padding: 4.4rem 2.8rem 4.2rem;
}
.ccx-home-head { max-width: 40rem; }
.ccx-home-head.is-center {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}
.ccx-home-head h2,
.ccx-panel__copy h2 {
  margin: 0;
  font-size: clamp(1.18rem, 1.8vw, 1.5rem);
  letter-spacing: -0.03em;
  line-height: 1.28;
}
.ccx-home-head p,
.ccx-panel__copy p {
  margin: 0.55rem 0 0;
  color: var(--cc-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

.ccx-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.9fr);
  gap: 1.4rem 2.2rem;
  align-items: center;
  padding: 4.4rem 2.8rem;
}
.ccx-panel__copy strong {
  display: block;
  margin-top: 0.85rem;
  color: #0f172a;
  font-size: 0.95rem;
  line-height: 1.6;
}
.ccx-slot {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.45rem;
  min-height: 16rem;
  color: #94a3b8;
  background:
    repeating-linear-gradient(-45deg, #f1f5f9 0 10px, #e8eef5 10px 20px);
  border: 1px dashed #cbd5e1;
  border-radius: 0.85rem;
}
.ccx-slot i { font-size: 1.6rem; }
.ccx-slot span {
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.ccx-panel + .ccx-panel,
.ccx-home-block {
  border-top: 1px solid #e8eef5;
}
.ccx-home-block + .ccx-home-block { border-top: 1px solid #e8eef5; }
.ccx-story {
  display: grid;
  grid-template-columns: repeat(7, minmax(7.6rem, 1fr));
  gap: 0;
  margin: 1.6rem 0 0;
  padding: 0.1rem 0;
  overflow-x: auto;
  list-style: none;
}
.ccx-story li {
  position: relative;
  padding: 0 0.7rem;
  text-align: center;
}
.ccx-story li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: calc(50% + 1.1rem);
  right: -0.7rem;
  height: 1px;
  background: #dbeafe;
}
.ccx-story em {
  display: block;
  color: #93c5fd;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.ccx-story strong {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.88rem;
}
.ccx-story span {
  display: block;
  margin-top: 0.22rem;
  color: var(--cc-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.ccx-home-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.4rem;
  margin: 1.2rem 2.8rem 0;
  padding: 1.7rem 1.8rem;
  color: #eef4ff;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(59, 130, 246, 0.28), transparent 55%),
    linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  border-radius: 1.2rem;
}
.ccx-home-cta h2 {
  margin: 0;
  font-size: 1.22rem;
  letter-spacing: -0.03em;
}
.ccx-home-cta p {
  margin: 0.4rem 0 0;
  max-width: 38rem;
  color: #cbd5e1;
  font-size: 0.88rem;
  line-height: 1.6;
}
.ccx-home-cta__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.1rem;
}
.ccx-home-cta .cc-btn {
  background: #fff;
  color: #1d4ed8;
  border: 0;
}
.ccx-home-cta .cc-btn:hover { filter: none; background: #eff6ff; }
.ccx-home-cta .cc-link { color: #bfdbfe; font-weight: 750; }

@media (max-width: 1100px) {
  .ccx-home-hero { min-height: 22rem; padding-top: 4.2rem; padding-bottom: 3.8rem; }
  .ccx-panel { grid-template-columns: 1fr; }
  .ccx-home-hero,
  .ccx-panel,
  .ccx-home-block { padding-left: 1.3rem; padding-right: 1.3rem; }
  .ccx-home-cta { margin-left: 1.3rem; margin-right: 1.3rem; }
  .ccx-slot { min-height: 12rem; }
}
@media (max-width: 720px) {
  .ccx-story { grid-template-columns: 1fr; }
}

.ccx-coral-intro p {
  margin: 0;
  color: #334155;
  font-size: 0.92rem;
  line-height: 1.75;
}
.ccx-coral-intro p + p { margin-top: 0.7rem; }
.ccx-cap-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}
.ccx-cap-list li {
  padding: 0.32rem 0.68rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.55rem;
  background: #f8fafc;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 700;
}
.ccx-docs {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ccx-docs li {
  display: grid;
  gap: 0.22rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--cc-line);
}
.ccx-docs li:last-child { padding-bottom: 0; border-bottom: 0; }
.ccx-docs strong { font-size: 0.95rem; }
.ccx-docs span { color: var(--cc-muted); font-size: 0.86rem; line-height: 1.6; }
.ccx-code {
  margin: 0.7rem 0 0;
  padding: 0.9rem 1rem;
  overflow: auto;
  border-radius: 0.7rem;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.8rem;
  line-height: 1.65;
}

.ccx-topo { display: grid; gap: 1.1rem; margin-top: 0.85rem; }
.ccx-topo__map {
  position: relative;
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) 11.5rem minmax(9rem, 1fr);
  grid-template-rows: 5.2rem 10.4rem 5.2rem;
  min-height: 20.8rem;
  padding: 0.4rem 0.2rem;
}
.ccx-topo.is-compact .ccx-topo__map {
  grid-template-rows: 4.4rem 8.6rem 4.4rem;
  min-height: 17.4rem;
}
.ccx-topo__sat {
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.18rem;
  min-width: 9.5rem;
  padding: 0.7rem 0.8rem;
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 0.95rem;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
  text-align: center;
}
.ccx-topo__sat i {
  color: var(--cc-blue);
  font-size: 0.92rem;
}
.ccx-topo__sat strong {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.ccx-topo__sat span {
  color: var(--cc-muted);
  font-size: 0.68rem;
  line-height: 1.35;
}
.ccx-topo__sat.is-n { grid-column: 2; grid-row: 1; align-self: start; }
.ccx-topo__sat.is-s { grid-column: 2; grid-row: 3; align-self: end; }
.ccx-topo__sat.is-w { grid-column: 1; grid-row: 2; justify-self: start; align-self: center; }
.ccx-topo__sat.is-e { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; }
.ccx-topo__core {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.18rem;
  grid-column: 2;
  grid-row: 2;
  width: 10.6rem;
  height: 10.6rem;
  margin: auto;
  color: #fff;
  background: radial-gradient(circle at 32% 28%, #3b82f6 0%, #1d4ed8 58%, #1e3a8a 100%);
  border: 1px solid #1e40af;
  border-radius: 1.35rem;
  box-shadow: 0 18px 40px rgba(29, 78, 216, 0.28);
}
.ccx-topo.is-compact .ccx-topo__core {
  width: 8.8rem;
  height: 8.8rem;
  border-radius: 1.15rem;
}
.ccx-topo__core svg { width: 1.7rem; height: 1.7rem; color: #fff; }
.ccx-topo__core b {
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  font-weight: 800;
}
.ccx-topo__core em {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.62rem;
  font-style: normal;
  letter-spacing: 0.04em;
}
.ccx-topo__ring {
  position: absolute;
  inset: -10px;
  border: 1px dashed rgba(191, 219, 254, 0.9);
  border-radius: 1.6rem;
  pointer-events: none;
}
.ccx-topo__ring.is-2 {
  inset: -18px;
  opacity: 0.55;
}
.ccx-topo__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.ccx-topo__wires line {
  stroke: #93c5fd;
  stroke-width: 2;
  stroke-dasharray: 5 6;
}
.ccx-topo__bus {
  padding: 0.9rem 1rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #dbeafe, #eff6ff, #dbeafe) border-box;
}
.ccx-topo__bus > p {
  margin: 0 0 0.7rem;
  color: var(--cc-muted);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.06em;
}
.ccx-topo__bus ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ccx-topo__bus li {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}
.ccx-topo__bus li span {
  padding: 0.32rem 0.58rem;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
  background: #eff6ff;
  color: #1e40af;
  font-size: 0.74rem;
  font-weight: 750;
}
.ccx-topo__bus i {
  color: #93c5fd;
  font-size: 0.62rem;
}

@media (max-width: 860px) {
  .ccx-topo__map {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: 0;
    gap: 0.65rem;
  }
  .ccx-topo__sat.is-n,
  .ccx-topo__sat.is-s,
  .ccx-topo__sat.is-w,
  .ccx-topo__sat.is-e,
  .ccx-topo__core {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    width: auto;
  }
  .ccx-topo__core { height: 8.4rem; }
  .ccx-topo__wires,
  .ccx-topo__ring { display: none; }
}

.ccx-learn { display: grid; gap: 0; }
.ccx-learn-kicker {
  margin: 0 0 0.55rem;
  color: var(--cc-blue);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.ccx-learn-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.95fr);
  gap: 1.6rem 2.2rem;
  align-items: center;
  padding: 2.4rem 2.4rem 2.2rem;
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(59, 130, 246, 0.08), transparent 58%),
    #f8fbff;
}
.ccx-learn-hero h1 {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  letter-spacing: -0.04em;
  line-height: 1.18;
}
.ccx-learn-lead {
  margin: 0.75rem 0 0;
  max-width: 38rem;
  color: var(--cc-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}
.ccx-learn-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.ccx-learn-facts li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cc-ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}
.ccx-learn-check {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
}
.ccx-learn-check i { font-size: 0.62rem; line-height: 1; }
.ccx-learn-hero .ccx-slot { min-height: 18rem; }

.ccx-learn-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
  padding: 1.35rem 2.4rem;
  border-top: 1px solid #e8eef5;
  border-bottom: 1px solid #e8eef5;
  background: #fff;
}
.ccx-learn-status__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.8rem;
  margin: 0.15rem 0 0.4rem;
}
.ccx-learn-status em {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.ccx-learn-status strong { font-size: 1.02rem; }
.ccx-learn-status p {
  margin: 0;
  color: var(--cc-muted);
  font-size: 0.86rem;
}
.ccx-learn-status__act {
  display: grid;
  justify-items: end;
  gap: 0.35rem;
}
.ccx-learn-status__act span {
  color: var(--cc-muted);
  font-size: 0.74rem;
}

.ccx-learn-block {
  padding: 2.6rem 2.4rem 2.4rem;
  border-top: 1px solid #e8eef5;
}
.ccx-learn-block.is-last { padding-bottom: 3rem; }
.ccx-learn-activate {
  padding: 2.2rem 2.4rem 3rem;
  border-top: 1px solid #e8eef5;
  background: #fff;
}
.ccx-learn-activate__card { max-width: 36rem; margin-top: 1.15rem; }
.ccx-learn-activate__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 700;
}
.ccx-netx.is-short b { color: #ea580c; }
.ccx-learn-head { max-width: none; }
.ccx-learn-head h2 {
  margin: 0;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  letter-spacing: -0.03em;
  line-height: 1.3;
}
.ccx-learn-head p {
  margin: 0.55rem 0 0;
  color: var(--cc-muted);
  font-size: 0.92rem;
  line-height: 1.7;
  white-space: nowrap;
}

.ccx-arch-img {
  display: block;
  width: min(64rem, 100%);
  height: auto;
  margin: 1.2rem auto 0;
}
.ccx-arch__col h3,
.ccx-arch__brand b {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: none;
}
.ccx-arch__col article {
  padding: 0.62rem 0.7rem;
  margin-bottom: 0.45rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 0.65rem;
}
.ccx-arch__col article:last-child { margin-bottom: 0; }
.ccx-arch__col strong { display: block; font-size: 0.82rem; }
.ccx-arch__col p {
  margin: 0.2rem 0 0;
  color: var(--cc-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}
.ccx-arch__col.is-out article { border-color: #dbeafe; background: #f8fbff; }
.ccx-arch__flow {
  display: grid;
  place-items: center;
  color: #93c5fd;
}
.ccx-arch__core {
  display: grid;
  align-content: start;
  padding: 1rem 0.9rem 1.05rem;
  color: #eef4ff;
  background:
    radial-gradient(80% 70% at 18% 0%, rgba(96, 165, 250, 0.35), transparent 58%),
    linear-gradient(160deg, #10284a 0%, #1d4ed8 58%, #1e3a8a 100%);
  border-radius: 0.9rem;
}
.ccx-arch__brand {
  display: grid;
  gap: 0.12rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(191, 219, 254, 0.28);
}
.ccx-arch__brand b {
  margin: 0;
  letter-spacing: 0.22em;
  font-size: 0.92rem;
}
.ccx-arch__brand span {
  color: #bfdbfe;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}
.ccx-arch__core ol {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ccx-arch__core li {
  display: grid;
  justify-items: center;
  text-align: center;
}
.ccx-arch__core strong { font-size: 0.82rem; }
.ccx-arch__core em {
  color: #93c5fd;
  font-size: 0.64rem;
  font-style: normal;
  letter-spacing: 0.04em;
}
.ccx-arch__core i {
  margin: 0.18rem 0 0.08rem;
  color: #93c5fd;
  font-size: 0.62rem;
}
.ccx-arch__foot {
  margin: 0.85rem 0 0;
  color: #1d4ed8;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
}

.ccx-extend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.2rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: stretch;
  margin-top: 1.4rem;
}
.ccx-extend__col {
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 0.9rem;
}
.ccx-extend__col h3 { margin: 0; font-size: 1rem; }
.ccx-extend__col > p {
  margin: 0.3rem 0 0.9rem;
  color: var(--cc-muted);
  font-size: 0.82rem;
}
.ccx-extend__col ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ccx-extend__col li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #eef2f7;
  background: #f8fbff;
  border-radius: 0.6rem;
}
.ccx-extend__col strong { font-size: 0.86rem; white-space: nowrap; }
.ccx-extend__col span { color: var(--cc-muted); font-size: 0.76rem; white-space: nowrap; }
.ccx-extend__plus {
  display: grid;
  place-items: center;
  align-self: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 auto;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  font-size: 1.35rem;
  font-weight: 700;
}

.ccx-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.35rem 0;
  max-width: 52rem;
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
}
.ccx-form li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 7.2rem;
  min-width: 7.2rem;
  max-width: 9.4rem;
}
.ccx-form__card {
  display: grid;
  justify-items: center;
  width: 100%;
  padding: 0.7rem 0.5rem 0.75rem;
  text-align: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
}
.ccx-form__card i {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: 0.4rem;
  color: #2563eb;
  background: #eff6ff;
  border-radius: 0.4rem;
  font-size: 0.78rem;
}
.ccx-form__card strong {
  font-size: 0.74rem;
  line-height: 1.35;
}
.ccx-form__card span {
  margin-top: 0.2rem;
  color: var(--cc-muted);
  font-size: 0.66rem;
  line-height: 1.4;
}
.ccx-form__arrow {
  flex: 0 0 auto;
  color: #60a5fa;
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .ccx-learn-head p { white-space: normal; }
  .ccx-learn-hero,
  .ccx-arch,
  .ccx-extend { grid-template-columns: 1fr; }
  .ccx-learn-hero,
  .ccx-learn-status,
  .ccx-learn-block,
  .ccx-learn-activate { padding-left: 1.3rem; padding-right: 1.3rem; }
  .ccx-learn-facts { flex-direction: column; align-items: flex-start; }
  .ccx-arch__flow { transform: rotate(90deg); padding: 0.3rem 0; }
  .ccx-extend__plus { margin: 0.2rem auto; }
  .ccx-learn-status__act { justify-items: start; }
}
.ccx-method {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.ccx-method.is-get { color: #0284c7; }
.ccx-method.is-post { color: #16a34a; }
.ccx-method.is-patch { color: #d97706; }
.ccx-dev-p {
  margin: 0.5rem 0 0;
  color: var(--cc-muted);
  font-size: 0.86rem;
  line-height: 1.65;
}
.ccx-docs .cc-link { justify-self: start; }
.ccx-code + .ccx-dev-p,
.ccx-kv + .ccx-dev-p { margin-top: 0.7rem; }
@media (max-width: 860px) {
  .cc-grid--3 { grid-template-columns: 1fr; }
}

.ccx-dash { display: grid; gap: 1rem; }
.ccx-dash-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7.2rem;
  padding: 1.8rem 0 1.6rem;
  text-align: center;
}
.ccx-dash-hero h1 {
  margin: 0;
  font-size: 1.72rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.ccx-dash-hero p {
  margin: 0.5rem 0 0;
  color: var(--cc-muted);
  font-size: 1.02rem;
}
.ccx-dash-account .cc-profile { margin-top: 0; }
.ccx-dash-account__stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem 1.1rem;
}
.ccx-dash-account__stats em:not(.ccx-chip) {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 600;
}
.ccx-dash-stat { display: grid; align-content: start; gap: 0.55rem; }
.ccx-dash-k {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 700;
}
.ccx-dash-num {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.ccx-dash-num small {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}
.ccx-dash-who {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.ccx-dash-who strong { display: block; font-size: 0.95rem; }
.ccx-dash-who p { margin: 0.15rem 0 0; color: var(--cc-muted); font-size: 0.78rem; }
.ccx-dash-id {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.15rem 0 0;
  color: #64748b;
  font-size: 0.78rem;
}
.ccx-dash-id b {
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
}
.ccx-dash-block h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}
.ccx-dash-block h2 em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-style: normal;
}
.ccx-dash-block__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}
.ccx-dash-block__head p {
  margin: 0.28rem 0 0;
  color: var(--cc-muted);
  font-size: 0.82rem;
}
.ccx-dash-envs { display: grid; gap: 0.8rem; }
.ccx-dash-env {
  padding: 0.95rem 1rem;
  border: 1px solid #e8eef6;
  border-radius: 0.9rem;
  background: #fafcff;
}
.ccx-dash-env__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem 1rem;
}
.ccx-dash-env__top h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}
.ccx-dash-prog {
  min-width: 11rem;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 700;
}
.ccx-dash-prog b {
  display: block;
  height: 0.38rem;
  margin-top: 0.35rem;
  overflow: hidden;
  border-radius: 99px;
  background: #e2e8f0;
}
.ccx-dash-prog i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: #2563eb;
}
.ccx-dash-env__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.85rem;
}
.ccx-dash-env__grid span {
  display: block;
  margin-bottom: 0.3rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}
.ccx-dash-env__grid b { font-size: 0.92rem; }
.ccx-dash-env__grid .ccx-dash-time {
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ccx-dash-env__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.9rem;
}
.ccx-dash-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}
.ccx-dash-checks li { display: inline-flex; align-items: center; gap: 0.35rem; color: #64748b; }
.ccx-dash-checks .is-ok { color: #16a34a; }
.ccx-dash-checks .is-off { color: #94a3b8; }
.ccx-dash-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ccx-dash-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
.ccx-dash-pill.is-more { background: #f1f5f9; color: #64748b; }
.ccx-dash-muted { color: #94a3b8; font-size: 0.8rem; }
.ccx-dash-empty {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
  padding: 1.4rem 0.2rem 0.4rem;
}
.ccx-dash-empty strong { font-size: 0.95rem; }
.ccx-dash-empty p { margin: 0; color: var(--cc-muted); font-size: 0.84rem; }
.ccx-dash-res {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.ccx-dash-res__card {
  display: grid;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid #e8eef6;
  border-radius: 0.85rem;
  background: #fafcff;
}
.ccx-dash-res__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}
.ccx-dash-res__top strong { font-size: 0.88rem; }
.ccx-dash-res__top span { color: #64748b; font-size: 0.74rem; font-weight: 700; }
.ccx-dash-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
}
.ccx-dash-todos {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ccx-dash-todos li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid #e8eef6;
  border-radius: 0.8rem;
  background: #fff;
}
.ccx-dash-todos strong { display: block; font-size: 0.86rem; }
.ccx-dash-todos p { margin: 0.15rem 0 0; color: var(--cc-muted); font-size: 0.78rem; }
.ccx-dash-todo__mark {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: #fff7ed;
  color: #ea580c;
  font-size: 0.78rem;
}
.ccx-dash-todos .is-done .ccx-dash-todo__mark { background: #f0fdf4; color: #16a34a; }
.ccx-dash-ok {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: #16a34a;
  font-size: 0.88rem;
  font-weight: 700;
}
.ccx-dash-quick {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.65rem;
}
a.ccx-dash-q,
button.ccx-dash-q {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 5.4rem;
  padding: 0.75rem 0.4rem;
  border: 1px solid #e8eef6;
  border-radius: 0.85rem;
  background: #fafcff;
  color: #0f172a;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
a.ccx-dash-q:hover,
button.ccx-dash-q:hover {
  border-color: #93c5fd;
  background: #f8fbff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.08);
}
.ccx-dash-q__ico {
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 0.55rem;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.88rem;
}

@media (max-width: 1200px) {
  .ccx-dash-res { grid-template-columns: 1fr 1fr; }
  .ccx-dash-env__grid { grid-template-columns: 1fr 1fr 1fr; }
  .ccx-dash-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ccx-dash-account__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ccx-dash-res,
  .ccx-dash-env__grid { grid-template-columns: 1fr; }
  .ccx-dash-hero { flex-direction: column; }
  .ccx-dash-quick { grid-template-columns: 1fr 1fr; }
  .ccx-dash-account__stats { grid-template-columns: 1fr 1fr; }
}

/* ── Create environment circuit ── */
.ccx-ckt {
  display: grid;
  gap: 1rem;
}
.ccx-ckt > .ccx-checkout { margin-top: 0; }
.ccx-ckt-connect {
  display: grid;
  gap: 1.15rem;
}
.ccx-ckt-connect .cc-res { margin-bottom: 0; }
.ccx-ckt-head {
  display: grid;
  gap: 0.85rem;
}
.ccx-ckt-head h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.ccx-ckt-rail {
  list-style: none;
  margin: 0;
  padding: 0.95rem 0.55rem 0.8rem;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  background:
    linear-gradient(#eef3f9 1px, transparent 1px),
    linear-gradient(90deg, #eef3f9 1px, transparent 1px),
    #fff;
  background-size: 12px 12px, 12px 12px, auto;
  border: 1px solid var(--cc-line);
  border-radius: 1rem;
}
.ccx-ckt-rail > li {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 6.6rem;
}
.ccx-ckt-rail button {
  display: grid;
  justify-items: center;
  gap: 0.32rem;
  width: 100%;
  padding: 0.1rem 0.15rem;
  border: 0;
  background: transparent;
  color: #64748b;
  font: inherit;
  cursor: pointer;
}
.ccx-ckt-rail button:disabled { cursor: default; }
.ccx-ckt-rail button i {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
  font-style: normal;
  z-index: 1;
}
.ccx-ckt-rail button span {
  font-size: 0.74rem;
  font-weight: 750;
  white-space: nowrap;
  color: #334155;
}
.ccx-ckt-rail button em {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 750;
  color: var(--cc-blue);
}
.ccx-ckt-rail .is-current button span { color: var(--cc-blue); }
.ccx-ckt-rail .is-current button i {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.16);
  animation: ccx-ckt-pulse 1.8s ease-in-out infinite;
}
.ccx-ckt-rail .is-done button span { color: #15803d; }
.ccx-ckt-rail .is-done button i {
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
}
.ccx-ckt-rail .is-error button span { color: #dc2626; }
.ccx-ckt-rail .is-error button i {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}
.ccx-ckt-wire {
  flex: 1 1 1.1rem;
  height: 2px;
  margin: 0 0.1rem 1.35rem;
  background: #d7e0ea;
  border-radius: 99px;
  min-width: 0.55rem;
}
.ccx-ckt-wire.is-on {
  background: #22c55e;
}
.ccx-ckt-wire.is-bad {
  background: repeating-linear-gradient(90deg, #ef4444 0 6px, #fecaca 6px 11px);
}
@keyframes ccx-ckt-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(37,99,235,0.14); }
  50% { box-shadow: 0 0 0 7px rgba(37,99,235,0.08); }
}
.ccx-ckt-panel {
  display: grid;
  gap: 0.95rem;
  padding: 1.15rem 1.2rem 1.25rem;
  background: #fff;
  border: 1px solid var(--cc-line);
  border-radius: 1rem;
}
.ccx-ckt-kicker {
  margin: 0;
  color: var(--cc-blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.ccx-ckt-panel h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}
.ccx-ckt-lead {
  margin: 0;
  max-width: 42rem;
  color: var(--cc-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}
.ccx-ckt-sys {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) 2.4rem minmax(13rem, 1.2fr) 2.4rem minmax(9rem, 1fr);
  gap: 0.65rem;
  align-items: stretch;
  padding: 1.05rem 1.1rem;
  background:
    linear-gradient(#eef4fb 1px, transparent 1px),
    linear-gradient(90deg, #eef4fb 1px, transparent 1px),
    #f8fbff;
  background-size: 14px 14px, 14px 14px, auto;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  color: #0f172a;
}
.ccx-ckt-sys__col {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}
.ccx-ckt-sys__col > span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
}
.ccx-ckt-node {
  display: grid;
  grid-template-columns: 0.55rem 1fr;
  gap: 0.55rem;
  align-items: center;
  padding: 0.58rem 0.7rem;
  border: 1px solid #d9e4f0;
  border-radius: 0.7rem;
  background: #fff;
}
.ccx-ckt-node b {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 99px;
  background: #94a3b8;
  box-shadow: 0 0 0 3px #eef2f7;
}
.ccx-ckt-node em {
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 750;
  color: #0f172a;
}
.ccx-ckt-node small {
  display: block;
  margin-top: 0.12rem;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 550;
}
.ccx-ckt-sys__flow {
  align-self: stretch;
  width: 2px;
  margin: 1.7rem auto 0.5rem;
  background: repeating-linear-gradient(180deg, #93c5fd 0 7px, transparent 7px 12px);
}
.ccx-ckt-sys__core {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.65rem;
  padding: 0.95rem 0.9rem;
  border: 1px solid #bfdbfe;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0 0 4px #eff6ff;
}
.ccx-ckt-sys__core strong {
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: #1d4ed8;
}
.ccx-ckt-sys__core ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.32rem;
  width: 100%;
}
.ccx-ckt-sys__core li {
  padding: 0.32rem 0.55rem;
  border: 1px solid #dbeafe;
  border-left: 2px solid #2563eb;
  border-radius: 0.4rem;
  background: #f8fbff;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 650;
}
.ccx-ckt-status {
  display: grid;
  gap: 0.25rem;
  max-width: 28rem;
  padding: 0.85rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  background: #f8fafc;
}
.ccx-ckt-status span {
  color: var(--cc-muted);
  font-size: 0.75rem;
  font-weight: 650;
}
.ccx-ckt-status strong {
  color: #475569;
  font-size: 1rem;
}
.ccx-ckt-status p {
  margin: 0.2rem 0 0;
  color: var(--cc-muted);
  font-size: 0.82rem;
}
.ccx-ckt-wallet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.ccx-ckt-wallet span { color: var(--cc-muted); font-size: 0.82rem; font-weight: 650; }
.ccx-ckt-wallet code {
  font-size: 0.82rem;
  background: #f1f5f9;
  padding: 0.28rem 0.5rem;
  border-radius: 0.45rem;
}
.ccx-ckt-wallet .cc-chip { flex: 0 0 auto; }
.ccx-ckt-paybox {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}
.ccx-ckt-paybox > div,
.ccx-ckt-payrun > div {
  display: grid;
  gap: 0.28rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.8rem;
  background: #f8fbff;
}
.ccx-ckt-paybox span,
.ccx-ckt-payrun span {
  color: var(--cc-muted);
  font-size: 0.75rem;
  font-weight: 650;
}
.ccx-ckt-paybox strong,
.ccx-ckt-payrun b { font-size: 1.02rem; }
.ccx-ckt-paybox.is-short { border-color: transparent; }
.ccx-ckt-paybox.is-short > div { background: #fff7ed; border-color: #fed7aa; }
.ccx-ckt-ok { margin: 0; color: #16a34a; font-weight: 750; }
.ccx-ckt-warn { margin: 0; color: #dc2626; font-weight: 750; }
.ccx-ckt-acts { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.ccx-ckt-board {
  position: relative;
  min-height: 20rem;
  margin: 0.2rem 0 0.4rem;
  background:
    linear-gradient(#eef4fb 1px, transparent 1px),
    linear-gradient(90deg, #eef4fb 1px, transparent 1px),
    #f8fbff;
  background-size: 14px 14px, 14px 14px, auto;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  overflow: hidden;
}
.ccx-ckt-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  min-width: 7.4rem;
  padding: 1rem 1.1rem;
  border: 1px solid #bfdbfe;
  border-radius: 1rem;
  background: #fff;
  color: #1d4ed8;
  box-shadow: 0 0 0 4px #eff6ff;
}
.ccx-ckt-core b {
  font-size: 0.95rem;
  letter-spacing: 0.16em;
}
.ccx-ckt-core em {
  font-style: normal;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}
.ccx-ckt-core.is-on {
  border-color: #86efac;
  color: #15803d;
  box-shadow: 0 0 0 4px #f0fdf4;
}
.ccx-ckt-res {
  position: absolute;
  z-index: 3;
  display: grid;
  justify-items: start;
  gap: 0.12rem;
  width: 9.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #d9e4f0;
  border-radius: 0.8rem;
  background: #fff;
  color: #64748b;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ccx-ckt-res i { color: #94a3b8; }
.ccx-ckt-res strong { color: #0f172a; font-size: 0.88rem; }
.ccx-ckt-res span { font-size: 0.72rem; }
.ccx-ckt-res.is-n { left: 50%; top: 1rem; transform: translateX(-50%); }
.ccx-ckt-res.is-s { left: 50%; bottom: 1rem; transform: translateX(-50%); }
.ccx-ckt-res.is-w { left: 1rem; top: 50%; transform: translateY(-50%); }
.ccx-ckt-res.is-e { right: 1rem; top: 50%; transform: translateY(-50%); }
.ccx-ckt-res.is-on {
  border-color: #86efac;
  color: #15803d;
  background: #f0fdf4;
}
.ccx-ckt-res.is-on i { color: #16a34a; }
.ccx-ckt-res.is-open { border-color: #93c5fd; box-shadow: 0 0 0 3px #eff6ff; }
.ccx-ckt-arm {
  position: absolute;
  z-index: 1;
  background: #d7e0ea;
}
.ccx-ckt-arm.is-n,
.ccx-ckt-arm.is-s {
  left: 50%;
  width: 2px;
  height: 22%;
  transform: translateX(-50%);
}
.ccx-ckt-arm.is-n { top: 22%; }
.ccx-ckt-arm.is-s { bottom: 22%; }
.ccx-ckt-arm.is-w,
.ccx-ckt-arm.is-e {
  top: 50%;
  height: 2px;
  width: 22%;
  transform: translateY(-50%);
}
.ccx-ckt-arm.is-w { left: 22%; }
.ccx-ckt-arm.is-e { right: 22%; }
.ccx-ckt-arm.is-on {
  background: #22c55e;
}
.ccx-ckt-drawer {
  display: grid;
  gap: 0.7rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.9rem;
  background: #f8fafc;
}
.ccx-ckt-drawer h3 { margin: 0; font-size: 0.95rem; }
.ccx-ckt-drawer p { margin: 0; color: var(--cc-muted); font-size: 0.82rem; }
.ccx-ckt-drawer > .cc-link,
.ccx-ckt-drawer > .cc-btn { justify-self: start; }
.ccx-ckt-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ccx-ckt-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--cc-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.ccx-ckt-chip input { accent-color: var(--cc-blue); }
.ccx-ckt-chip.is-on { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
.ccx-ckt-chip.is-lock { cursor: default; border-color: #86efac; background: #f0fdf4; color: #15803d; }
.ccx-ckt-pos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ccx-ckt-pos li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  background: #fff;
  border: 1px solid var(--cc-line);
  border-radius: 0.7rem;
}
.ccx-ckt-detect {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.ccx-ckt-detect li {
  display: grid;
  grid-template-columns: 0.7rem 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.75rem;
  background: #f8fafc;
}
.ccx-ckt-detect i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 99px;
  background: #cbd5e1;
}
.ccx-ckt-detect b { font-size: 0.8rem; color: var(--cc-muted); }
.ccx-ckt-detect .is-on { border-color: #bbf7d0; background: #f0fdf4; }
.ccx-ckt-detect .is-on i { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.6); }
.ccx-ckt-detect .is-on b { color: #16a34a; }
.ccx-ckt-detect .is-run { border-color: #bfdbfe; background: #eff6ff; }
.ccx-ckt-detect .is-run i {
  background: #2563eb;
  box-shadow: 0 0 10px rgba(37,99,235,0.7);
  animation: ccx-ckt-pulse 1.2s ease-in-out infinite;
}
.ccx-ckt-detect .is-run b { color: var(--cc-blue); }
.ccx-ckt-detect .is-bad { border-color: #fecaca; background: #fef2f2; }
.ccx-ckt-detect .is-bad i { background: #ef4444; }
.ccx-ckt-detect .is-bad b { color: #dc2626; }
.ccx-ckt-urlbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.95rem;
  background: #f8fbff;
}
.ccx-ckt-urlbox code {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  font-weight: 750;
  word-break: break-all;
}
.ccx-ckt-qr {
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  grid-template-rows: repeat(21, 1fr);
  width: 8.6rem;
  height: 8.6rem;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
}
.ccx-ckt-qr i {
  display: block;
  min-width: 0;
  min-height: 0;
  background: transparent;
}
.ccx-ckt-qr i.is-on { background: #0f172a; }
.ccx-ckt-payrun {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 0.65rem;
  align-items: center;
}
.ccx-ckt-end {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.ccx-ckt-end article {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 1rem;
  border: 1px solid var(--cc-line);
  border-radius: 0.9rem;
  background: #f8fafc;
}
.ccx-ckt-end h3 { margin: 0; font-size: 0.95rem; }
.ccx-ckt-end p { margin: 0; color: var(--cc-muted); font-size: 0.82rem; }
@media (max-width: 960px) {
  .ccx-ckt-sys {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ccx-ckt-sys__flow { width: auto; height: 1.2rem; margin: 0.2rem 1.2rem; background: repeating-linear-gradient(90deg, #93c5fd 0 8px, transparent 8px 14px); }
  .ccx-ckt-paybox,
  .ccx-ckt-payrun,
  .ccx-ckt-end,
  .ccx-ckt-urlbox { grid-template-columns: 1fr; }
  .ccx-ckt-board { min-height: 24rem; }
  .ccx-ckt-res.is-w, .ccx-ckt-res.is-e { transform: none; top: auto; }
  .ccx-ckt-res.is-w { top: 38%; }
  .ccx-ckt-res.is-e { top: 38%; }
}