/*
 * UI V2 · 2026-07-23
 * A restrained dark visual system for the public redemption flow and admin console.
 * Existing IDs and JS hooks remain unchanged; this layer intentionally overrides legacy CSS.
 */

:root {
  --ink: #f4f1eb;
  --muted: #aaa6a0;
  --quiet: #78746f;
  --paper: #0a0a0b;
  --card: #151517;
  --line: rgba(255, 255, 255, .105);
  --line-strong: rgba(255, 255, 255, .17);
  --accent: #df594d;
  --accent-bright: #eb675a;
  --accent-deep: #a9362f;
  --green: #8ad1b0;
  --warning: #d9af6c;
  --danger: #f08073;
  --panel: rgba(21, 21, 23, .88);
  --panel-solid: #151517;
  --panel-raised: #1a1a1d;
  --field: #0e0e10;
  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 30px 76px rgba(0, 0, 0, .38), 0 8px 24px rgba(0, 0, 0, .24);
}

html { background: #09090a; scroll-behavior: smooth; }

body.ui-v2 {
  min-width: 320px;
  color: var(--ink);
  background: #09090a;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.ui-v2::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: .024;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.ui-v2 *, .ui-v2 *::before, .ui-v2 *::after { box-sizing: border-box; }
.ui-v2 ::selection { background: rgba(223, 89, 77, .34); color: #fff; }
.ui-v2 button, .ui-v2 input, .ui-v2 textarea, .ui-v2 select { font: inherit; }
.ui-v2 button { cursor: pointer; }
.ui-v2 .hidden { display: none !important; }

.ui-v2 .eyebrow,
.ui-v2 .panel-kicker {
  color: #d9d2cb;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.ui-v2 .panel-kicker { display: block; margin-bottom: 7px; color: #7f7a74; }

.ui-v2 .card {
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 15px 42px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.ui-v2 label {
  color: #c8c3bc;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
}

.ui-v2 input,
.ui-v2 textarea,
.ui-v2 select {
  width: 100%;
  color: #eeeae4;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  outline: none;
  background: var(--field);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ui-v2 input::placeholder, .ui-v2 textarea::placeholder { color: #5c5955; }
.ui-v2 select { color-scheme: dark; }

.ui-v2 input:focus,
.ui-v2 textarea:focus,
.ui-v2 select:focus {
  border-color: rgba(235, 103, 90, .74);
  background: #111113;
  box-shadow: 0 0 0 3px rgba(223, 89, 77, .10), inset 0 1px 0 rgba(255, 255, 255, .03);
}

.ui-v2 input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.ui-v2 .primary {
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-md);
  padding: 13px 18px;
  color: #fff8f5;
  background: linear-gradient(180deg, #e36155 0%, var(--accent) 70%, #d64e44 100%);
  box-shadow: 0 8px 17px rgba(107, 29, 25, .26), inset 0 1px 0 rgba(255, 255, 255, .23);
  font-weight: 750;
  letter-spacing: .02em;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.ui-v2 .primary:hover {
  background: linear-gradient(180deg, #ed6b5e 0%, var(--accent-bright) 100%);
  box-shadow: 0 10px 20px rgba(107, 29, 25, .31), inset 0 1px 0 rgba(255, 255, 255, .28);
  transform: translateY(-1px);
}

.ui-v2 .primary:disabled { cursor: not-allowed; opacity: .48; transform: none; }

.ui-v2 .quiet {
  min-height: 36px;
  color: #bdb8b1;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .025);
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.ui-v2 .quiet:hover { color: #f5f1eb; border-color: var(--line-strong); background: rgba(255, 255, 255, .05); }
.ui-v2 :focus-visible { outline: 2px solid rgba(235, 103, 90, .92); outline-offset: 3px; }

/* Public redemption */

.redeem-flow-page.ui-v2 {
  position: relative;
  overflow-x: hidden;
  background:
    linear-gradient(112deg, rgba(128, 28, 23, .22) 0%, rgba(128, 28, 23, .055) 20%, transparent 39%),
    #09090a;
}

.redeem-flow-page.ui-v2::before {
  content: none;
}

.ambient {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  filter: blur(42px);
  opacity: .75;
}

.ambient-warm {
  top: -180px;
  left: -170px;
  width: 520px;
  height: 670px;
  transform: rotate(-18deg);
  background: linear-gradient(90deg, rgba(166, 43, 34, .26), transparent 72%);
}

.ambient-silver {
  top: 21vh;
  right: 2vw;
  width: 440px;
  height: 410px;
  background: radial-gradient(ellipse at center, rgba(220, 216, 208, .075), transparent 70%);
}

.public-topbar {
  position: relative;
  z-index: 3;
  width: min(1240px, calc(100% - 80px));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.public-wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.public-wordmark img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 8px 24px rgba(0, 0, 0, .28);
}

.public-wordmark strong { font-size: 14px; font-weight: 800; letter-spacing: .16em; }
.public-wordmark span { color: #77736e; font-size: 12px; letter-spacing: .07em; }

.service-status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8d8984;
  font-size: 12px;
}

.public-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.public-query-link {
  padding: 8px 0 7px;
  color: #b9b4ad;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}

.public-query-link:hover {
  color: #f4f0e9;
  border-color: var(--accent);
}

.service-status i,
.aside-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(138, 209, 176, .08);
}

.ui-v2 .redeem-flow-shell {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 80px));
  min-height: 630px;
  margin: 0 auto;
  padding: 55px 0 62px;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(510px, 1.14fr);
  gap: clamp(72px, 8vw, 122px);
  align-items: center;
}

.ui-v2 .redeem-flow-brand { max-width: 525px; color: var(--ink); }

.ui-v2 .redeem-flow-brand .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 27px;
}

.ui-v2 .redeem-flow-brand .eyebrow::before {
  content: "";
  width: 31px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(223, 89, 77, .38);
}

.ui-v2 .redeem-flow-brand h1 {
  max-width: none;
  margin: 0;
  color: #f3efe8;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  font-size: clamp(48px, 4.3vw, 64px);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.045em;
  white-space: nowrap;
  text-wrap: balance;
}

.ui-v2 .redeem-flow-brand h1 span {
  margin-left: .04em;
  color: var(--accent);
  font-family: "Noto Sans SC", sans-serif;
  font-weight: 500;
}

.ui-v2 .redeem-flow-brand > p {
  max-width: 510px;
  margin: 23px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.service-promises {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 34px;
  color: #b3afa9;
  font-size: 11px;
}

.service-promises span { padding: 0 16px; border-left: 1px solid var(--line-strong); }
.service-promises span:first-child { padding-left: 0; border-left: 0; }
.service-promises b { margin-right: 5px; color: #f0ece5; font-weight: 750; }

.ui-v2 .tutorial-jump {
  margin-top: 32px;
  padding: 0 0 7px;
  color: #aaa59f;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.ui-v2 .tutorial-jump:hover { color: #f4f0e9; border-color: var(--accent); background: transparent; transform: none; }

.ui-v2 .redeem-flow-card {
  position: relative;
  overflow: hidden;
  min-height: 548px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, rgba(27, 27, 30, .94), rgba(14, 14, 16, .96));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .055);
}

.ui-v2 .redeem-flow-card::before {
  content: "";
  position: absolute;
  top: -57px;
  left: 11%;
  width: 57%;
  height: 124px;
  transform: rotate(-9deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .19), rgba(255, 112, 97, .14), transparent 76%);
  filter: blur(9px);
  opacity: .78;
  pointer-events: none;
}

.ui-v2 .redeem-flow-card::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 13%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 133, 119, .76), rgba(255, 255, 255, .36), transparent);
  box-shadow: 1px 0 18px rgba(223, 89, 77, .24);
  pointer-events: none;
}

.panel-chrome {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr 70px;
  align-items: center;
  min-height: 55px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .017);
}

.panel-chrome > span {
  position: absolute;
  left: 19px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #86433e;
}

.panel-chrome > span:nth-child(2) { left: 34px; background: #3d3c40; }
.panel-chrome > span:nth-child(3) { left: 49px; background: #3d3c40; }
.panel-chrome b { grid-column: 2; justify-self: center; color: #7d7873; font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.panel-chrome em { grid-column: 3; justify-self: end; padding: 4px 6px; color: #77736f; border: 1px solid var(--line); border-radius: 7px; font-size: 9px; font-style: normal; }

.redeem-panel-content { padding: 32px 39px 38px; }

.ui-v2 .flow-steps {
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  gap: 0;
  align-items: start;
  margin: 0 0 31px;
  color: #928d87;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .03em;
}

.ui-v2 .flow-steps span {
  position: relative;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.ui-v2 .flow-steps span small { margin-right: 7px; color: #96918b; font-size: 11px; }
.ui-v2 .flow-steps i { display: block; grid-column: 2; visibility: hidden; }
.ui-v2 .flow-steps #stepMarker1 { grid-column: 1; }
.ui-v2 .flow-steps #stepMarker2 { grid-column: 3; margin-left: 0; }
.ui-v2 .flow-steps span.active { color: #dbd6cf; }

.ui-v2 .flow-steps span.active::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 42%;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(223, 89, 77, .52);
}

.ui-v2 .flow-heading > span,
.ui-v2 .dialog-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .13em;
}

.ui-v2 .flow-heading h2 {
  margin: 9px 0 8px;
  color: #f1ede6;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  font-size: 30px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.035em;
}

.ui-v2 .flow-heading p { margin: 0 0 27px; color: #aaa49d; font-size: 14px; line-height: 1.75; }
.ui-v2 .flow-form { gap: 10px; }

.ui-v2 .flow-form label { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.ui-v2 .flow-form label small { color: #9c9790; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }

.ui-v2 .flow-form input {
  height: 55px;
  padding: 0 16px;
  border-radius: var(--r-md);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .035em;
}

.ui-v2 .flow-primary {
  width: 100%;
  min-height: 54px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  padding: 0 18px 0 21px;
}

.ui-v2 .flow-primary > span {
  width: 27px;
  height: 27px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(71, 19, 15, .24);
  font-size: 14px;
}

.form-privacy { margin: 13px 0 0; color: #9d9790; font-size: 13px; line-height: 1.65; }

.ui-v2 .session-actions { gap: 12px; margin-bottom: 19px; }

.ui-v2 .flow-action {
  position: relative;
  min-height: 82px;
  padding: 15px 40px 14px 15px;
  color: #ddd8d1;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .018);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.ui-v2 .flow-action:hover { color: #fff; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .038); transform: translateY(-1px); }
.ui-v2 .flow-action strong { font-size: 15px; }
.ui-v2 .flow-action small { color: #aaa49d; font-size: 12px; line-height: 1.5; }
.ui-v2 .flow-action b { position: absolute; top: 15px; right: 15px; color: #77736f; font-size: 12px; font-weight: 500; }

.ui-v2 .session-field > span { display: flex; justify-content: space-between; align-items: center; }
.ui-v2 .session-field > span { font-size: 14px; }
.ui-v2 .session-field > span small { color: #9b958f; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.ui-v2 .session-field textarea { min-height: 146px; padding: 14px 15px; border-radius: var(--r-md); font: 13px/1.65 "SFMono-Regular", Consolas, monospace; }
.ui-v2 .session-field > small { color: #9d9790; font-size: 12px; line-height: 1.6; }
.ui-v2 .flow-buttons { margin-top: 16px; gap: 8px; }
.ui-v2 .flow-back { color: #aaa49d; font-size: 13px; text-underline-offset: 4px; }
.ui-v2 .flow-back:hover { color: #d7d2cb; }

.ui-v2 .support-terms-gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 17px 18px;
  border: 1px solid rgba(255, 185, 71, .2);
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg, rgba(196, 127, 23, .09), rgba(255, 255, 255, .018)),
    #121214;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.ui-v2 .support-terms-gate-copy { min-width: 0; }
.ui-v2 .support-terms-kicker {
  display: block;
  margin-bottom: 6px;
  color: #d9ae64;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
}
.ui-v2 .support-terms-gate h3 {
  margin: 0;
  color: #ece7df;
  font-size: 15px;
  font-weight: 720;
}
.ui-v2 .support-terms-gate p {
  margin: 6px 0 0;
  color: #958f88;
  font-size: 12px;
  line-height: 1.55;
}
.ui-v2 .support-terms-gate-action {
  display: grid;
  justify-items: end;
  gap: 8px;
}
.ui-v2 .support-terms-status {
  color: #a49e96;
  font-size: 11px;
  font-weight: 650;
}
.ui-v2 .support-terms-status[data-state="complete"] { color: #8ee0bc; }
.ui-v2 .support-terms-status[data-state="pending"] { color: #e0bd79; }
.ui-v2 .support-terms-open {
  min-height: 39px;
  padding: 0 14px;
  color: #e7dfd3;
  border: 1px solid rgba(255, 185, 71, .24);
  border-radius: 10px;
  background: rgba(196, 127, 23, .1);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.ui-v2 .support-terms-open:hover:not(:disabled) {
  color: #fff7e9;
  border-color: rgba(255, 185, 71, .42);
  background: rgba(196, 127, 23, .17);
}
.ui-v2 .support-terms-open:disabled { cursor: not-allowed; opacity: .46; }

.ui-v2 .redeem-flow-card.is-processing .flow-steps,
.ui-v2 .redeem-flow-card.is-processing #redeemPage > .flow-heading,
.ui-v2 .redeem-flow-card.is-processing #redeemPage > .confirm-plan-row,
.ui-v2 .redeem-flow-card.is-processing #redeemPage > .session-actions,
.ui-v2 .redeem-flow-card.is-processing #redeemPage > .session-field,
.ui-v2 .redeem-flow-card.is-processing #redeemPage > .support-terms-gate,
.ui-v2 .redeem-flow-card.is-processing #redeemPage > .flow-buttons,
.ui-v2 .redeem-flow-card.is-processing #redeemPage > .result,
.ui-v2 .redeem-flow-card.is-success .flow-steps,
.ui-v2 .redeem-flow-card.is-success #redeemPage > :not(.success-celebration) { display: none !important; }

.ui-v2 .redeem-flow-card.is-processing #redeemPage,
.ui-v2 .redeem-flow-card.is-success #redeemPage {
  min-height: 430px;
  display: grid;
  align-items: center;
}

.ui-v2 .progress-panel {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 26px 25px 22px;
  overflow: hidden;
  border: 1px solid rgba(232, 183, 77, .2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 45% -30%, rgba(255, 208, 105, .12), transparent 55%),
    linear-gradient(145deg, rgba(38, 32, 20, .62), rgba(15, 15, 17, .9));
  box-shadow: inset 0 1px 0 rgba(255, 237, 185, .055), 0 22px 60px rgba(0, 0, 0, .22);
}

.ui-v2 .progress-kicker,
.ui-v2 .success-kicker {
  display: block;
  margin-bottom: 9px;
  color: #c8a75e;
  font: 700 10px/1.2 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .18em;
}

.ui-v2 .progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 20px;
  color: #eee8dd;
  font-size: 15px;
}

.ui-v2 .progress-head strong { font-weight: 650; }
.ui-v2 .progress-head span {
  min-width: 54px;
  color: #ffd76c;
  font: 700 19px/1 "SFMono-Regular", Consolas, monospace;
  text-align: right;
  text-shadow: 0 0 18px rgba(255, 202, 75, .32);
}

.ui-v2 .progress-track {
  position: relative;
  height: 12px;
  overflow: visible;
  border: 1px solid rgba(255, 220, 132, .14);
  border-radius: 99px;
  background:
    linear-gradient(180deg, rgba(5, 5, 6, .9), rgba(35, 27, 12, .72));
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .72),
    inset 0 -1px 0 rgba(255, 234, 179, .035),
    0 1px 0 rgba(255, 255, 255, .025);
}

.ui-v2 .progress-bar {
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  overflow: hidden;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18px 70%, rgba(255, 249, 202, .7) 0 1px, transparent 1.7px),
    radial-gradient(circle at 52px 28%, rgba(255, 255, 225, .52) 0 1px, transparent 1.8px),
    linear-gradient(180deg, #fff0a0 0%, #efbd45 30%, #d89118 68%, #8b4e03 100%);
  background-size: 82px 18px, 117px 18px, 100% 100%;
  box-shadow:
    0 0 7px rgba(255, 205, 84, .85),
    0 0 20px rgba(235, 151, 20, .28),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -2px 3px rgba(111, 52, 0, .42);
  will-change: transform;
}

.ui-v2 .progress-bar::before {
  content: "";
  position: absolute;
  inset: -1px -38px -1px 0;
  border-radius: inherit;
  background:
    linear-gradient(108deg, transparent 0 31%, rgba(255, 255, 226, .13) 39%, rgba(255, 249, 193, .72) 47%, rgba(255, 226, 119, .11) 56%, transparent 66%);
  background-size: 96px 100%;
  animation: liquidFlow 2.4s linear infinite;
  mix-blend-mode: screen;
}

.ui-v2 .progress-bar::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 5px;
  left: 5px;
  height: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 224, .82), rgba(255, 255, 255, .12));
  opacity: .82;
  filter: blur(.2px);
}

.ui-v2 .progress-light {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.ui-v2 .progress-light::before,
.ui-v2 .progress-light::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff8c7;
  box-shadow: 0 0 5px #fff4a4, 0 0 13px #ffd248, 0 0 24px rgba(255, 176, 22, .82);
}

.ui-v2 .progress-light::after {
  inset: -4px;
  background: radial-gradient(circle, rgba(255, 240, 155, .46), transparent 65%);
  box-shadow: none;
  animation: electricPulse .72s ease-in-out infinite alternate;
}

.ui-v2 .progress-light i {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 10px;
  width: 25px;
  height: 1px;
  transform-origin: right center;
  background: linear-gradient(90deg, transparent, #ffe57d 60%, #fffbd5);
  box-shadow: 0 0 5px #ffd140;
  animation: electricTrail .64s ease-in-out infinite;
}

.ui-v2 .progress-light i:nth-child(1) { transform: rotate(0deg); }
.ui-v2 .progress-light i:nth-child(2) { transform: rotate(19deg); animation-delay: -.21s; }
.ui-v2 .progress-light i:nth-child(3) { transform: rotate(-18deg); animation-delay: -.42s; }

.ui-v2 .progress-sweep {
  position: absolute;
  z-index: 4;
  inset: -8px auto -8px -32%;
  width: 32%;
  opacity: 0;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 241, 155, .18), #fffbe1, rgba(255, 204, 79, .25), transparent);
  filter: drop-shadow(0 0 12px rgba(255, 214, 84, .95));
  pointer-events: none;
}

.ui-v2 .progress-panel.is-completing .progress-track {
  animation: progressCompleteFlash .82s cubic-bezier(.16, 1, .3, 1) both;
}

.ui-v2 .progress-panel.is-completing .progress-sweep {
  opacity: 1;
  animation: progressSweep .82s cubic-bezier(.16, 1, .3, 1) both;
}

.ui-v2 .progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  color: #827b70;
  font-size: 11px;
}

.ui-v2 .task-no { color: #aaa18f; font: 11px/1.4 "SFMono-Regular", Consolas, monospace; }

.ui-v2 .success-celebration {
  position: relative;
  width: 100%;
  min-height: 448px;
  padding: 48px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  text-align: center;
  isolation: isolate;
}

.ui-v2 .success-celebration::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 40%;
  left: 50%;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%) scale(.54);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(255, 240, 183, .16) 0 8%, rgba(244, 192, 75, .2) 17%, rgba(225, 151, 26, .07) 43%, transparent 70%);
  filter: blur(.2px);
}

.ui-v2 .success-celebration::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -12%;
  bottom: -12%;
  left: -46%;
  width: 34%;
  opacity: 0;
  transform: skewX(-17deg);
  background: linear-gradient(90deg, transparent, rgba(255, 231, 156, .04), rgba(255, 250, 219, .42), rgba(240, 181, 53, .08), transparent);
  filter: blur(2px) drop-shadow(0 0 18px rgba(248, 196, 74, .42));
  pointer-events: none;
}

.ui-v2 .success-celebration.is-active::before { animation: successAura 1.25s cubic-bezier(.16, 1, .3, 1) .2s both; }
.ui-v2 .success-celebration.is-active::after { animation: successEnergySweep .92s cubic-bezier(.16, 1, .3, 1) .08s both; }

.ui-v2 .success-aura {
  position: absolute;
  z-index: 1;
  top: 36%;
  left: 50%;
  width: 285px;
  height: 285px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ui-v2 .success-aura i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 224, 143, .24);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.38);
  box-shadow: inset 0 0 24px rgba(255, 195, 65, .03), 0 0 14px rgba(255, 193, 61, .035);
}

.ui-v2 .success-celebration.is-active .success-aura i { animation: successRing 1.7s cubic-bezier(.16, 1, .3, 1) .32s both; }
.ui-v2 .success-celebration.is-active .success-aura i:nth-child(2) { animation-delay: .49s; }
.ui-v2 .success-celebration.is-active .success-aura i:nth-child(3) { animation-delay: .66s; }

.ui-v2 .success-energy {
  position: absolute;
  z-index: 2;
  top: 36%;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ui-v2 .success-energy i {
  position: absolute;
  display: block;
  opacity: 0;
}

.ui-v2 .energy-orbit {
  inset: 16px;
  border-radius: 50%;
  background: conic-gradient(from 35deg, transparent 0 9%, rgba(255, 236, 173, .84) 11%, transparent 13% 35%, rgba(224, 159, 36, .4) 37%, transparent 40% 74%, rgba(255, 224, 133, .6) 76%, transparent 79%);
  -webkit-mask: radial-gradient(circle, transparent 65%, #000 67% 69%, transparent 71%);
  mask: radial-gradient(circle, transparent 65%, #000 67% 69%, transparent 71%);
  filter: drop-shadow(0 0 7px rgba(255, 198, 74, .45));
}

.ui-v2 .energy-sweep {
  top: 50%;
  left: 50%;
  width: 184px;
  height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 207, 91, .92), #fff9d9, transparent);
  box-shadow: 0 0 7px #ffd46d, 0 0 20px rgba(244, 176, 43, .72);
}

.ui-v2 .energy-core {
  inset: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 216, .95), rgba(255, 198, 61, .35) 34%, transparent 72%);
  filter: blur(5px);
}

.ui-v2 .success-celebration.is-active .energy-orbit { animation: energyOrbit 1.25s cubic-bezier(.16, 1, .3, 1) .18s both; }
.ui-v2 .success-celebration.is-active .energy-sweep { animation: energyOrbitSweep .88s cubic-bezier(.16, 1, .3, 1) .28s both; }
.ui-v2 .success-celebration.is-active .energy-core { animation: energyCore .95s cubic-bezier(.16, 1, .3, 1) .24s both; }

.ui-v2 .success-mark {
  position: relative;
  z-index: 5;
  width: 78px;
  height: 78px;
  margin: 7px 0 24px;
  transform: scale(.28) rotate(-12deg);
  opacity: 0;
  border: 1px solid rgba(255, 236, 178, .54);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .78), transparent 31%),
    linear-gradient(145deg, #fff0a6, #d99b24 52%, #8b5305 100%);
  box-shadow:
    0 0 0 10px rgba(255, 207, 83, .045),
    0 0 34px rgba(255, 202, 73, .38),
    0 18px 46px rgba(201, 120, 9, .32),
    inset 0 1px 1px rgba(255, 255, 255, .9),
    inset 0 -8px 18px rgba(95, 52, 0, .22);
  filter: blur(7px) brightness(1.42);
}

.ui-v2 .success-mark i {
  position: absolute;
  top: 24px;
  left: 21px;
  width: 35px;
  height: 19px;
  transform: rotate(-45deg);
  border: solid #241705;
  border-width: 0 0 5px 5px;
  border-radius: 2px;
  opacity: 0;
}

.ui-v2 .success-celebration.is-active .success-mark { animation: successMark .9s cubic-bezier(.2, 1.45, .36, 1) .38s both; }
.ui-v2 .success-celebration.is-active .success-mark i { animation: successCheck .56s cubic-bezier(.16, 1, .3, 1) .76s both; }

.ui-v2 .success-celebration .success-kicker,
.ui-v2 .success-celebration h2,
.ui-v2 .success-celebration > p {
  position: relative;
  z-index: 6;
}

.ui-v2 .success-celebration .success-kicker {
  opacity: 0;
  transform: translateY(7px);
}

.ui-v2 .success-celebration h2 {
  margin: 0 0 10px;
  color: #fff3cf;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: clamp(31px, 5vw, 42px);
  font-weight: 650;
  letter-spacing: -.035em;
  opacity: 0;
  transform: translateY(12px);
  text-shadow: 0 4px 24px rgba(255, 191, 59, .16);
}

.ui-v2 .success-celebration > p {
  max-width: 390px;
  margin: 0;
  color: #d8d0c2;
  font-size: 15px;
  line-height: 1.85;
  opacity: 0;
  transform: translateY(10px);
}

.ui-v2 .success-celebration > p.success-followup {
  max-width: 500px;
  margin-top: 14px;
  color: #bdb5a7;
  font-size: 13px;
  line-height: 1.72;
}

.ui-v2 .success-followup span {
  display: block;
}

.ui-v2 .success-followup span + span {
  margin-top: 4px;
  color: #dfc98f;
}

.ui-v2 .success-support {
  position: relative;
  z-index: 6;
  margin-top: 16px;
  padding: 7px 4px;
  color: #d7be82;
  border: 0;
  border-bottom: 1px solid rgba(215, 190, 130, .34);
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  opacity: 0;
  transform: translateY(9px);
}
.ui-v2 .success-support:hover {
  color: #fff0c4;
  border-color: #e9c86f;
  background: transparent;
}

.ui-v2 .success-celebration.is-active .success-kicker { animation: successCopy .66s cubic-bezier(.16, 1, .3, 1) .72s both; }
.ui-v2 .success-celebration.is-active h2 { animation: successCopy .76s cubic-bezier(.16, 1, .3, 1) .86s both; }
.ui-v2 .success-celebration.is-active > p { animation: successCopy .76s cubic-bezier(.16, 1, .3, 1) .98s both; }
.ui-v2 .success-celebration.is-active .success-support { animation: successCopy .76s cubic-bezier(.16, 1, .3, 1) 1.08s both; }

.ui-v2 .success-return {
  position: relative;
  z-index: 6;
  width: min(100%, 350px);
  min-height: 54px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 21px;
  opacity: 0;
  transform: translateY(12px);
}

.ui-v2 .success-return span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
}

.ui-v2 .success-celebration.is-active .success-return { animation: successCopy .76s cubic-bezier(.16, 1, .3, 1) 1.18s both; }

.ui-v2 .confetti-emitter {
  position: absolute;
  z-index: 2;
  bottom: 34px;
  width: 124px;
  height: 150px;
  opacity: 1;
  pointer-events: none;
}

.ui-v2 .confetti-emitter::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 34px;
  bottom: 6px;
  width: 58px;
  height: 88px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(255,255,255,.28) 8% 10%, transparent 11% 88%, rgba(36,0,80,.35) 89% 100%),
    repeating-linear-gradient(135deg, #ff4d6d 0 13px, #ffcf4d 13px 26px, #28c9a2 26px 39px, #4d7dff 39px 52px, #b65cff 52px 65px);
  box-shadow:
    inset 5px 0 9px rgba(255,255,255,.24),
    inset -8px -5px 12px rgba(25,0,52,.28),
    0 14px 22px rgba(0,0,0,.28);
  transform-origin: 50% 100%;
}

.ui-v2 .confetti-emitter::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 39px;
  bottom: 83px;
  width: 48px;
  height: 13px;
  border: 2px solid rgba(255, 246, 207, .9);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff2ad, #c88316 64%, #6d3500);
  box-shadow: 0 0 9px rgba(255, 208, 92, .66), inset 0 2px 2px rgba(255,255,255,.86);
  transform-origin: 50% 50%;
}

.ui-v2 .confetti-emitter i {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 249, 211, .92) 0 3%, rgba(252, 204, 91, .62) 8%, rgba(221, 137, 17, .14) 31%, transparent 68%);
  filter: blur(4px);
}

.ui-v2 .confetti-emitter b {
  position: absolute;
  top: 50%;
  width: 132px;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 197, 66, .48), #fff8cf, transparent);
  filter: drop-shadow(0 0 8px rgba(255, 198, 70, .9));
}

.ui-v2 .emitter-left { left: -65px; }
.ui-v2 .emitter-right { right: -65px; }
.ui-v2 .emitter-left::before { transform: rotate(42deg); }
.ui-v2 .emitter-left::after { transform: translate(24px, -4px) rotate(42deg); }
.ui-v2 .emitter-right::before { transform: rotate(-42deg); }
.ui-v2 .emitter-right::after { transform: translate(-24px, -4px) rotate(-42deg); }
.ui-v2 .emitter-left b { left: 57px; transform: rotate(-28deg); transform-origin: 0 50%; }
.ui-v2 .emitter-right b { right: 57px; transform: rotate(208deg); transform-origin: 100% 50%; }
.ui-v2 .success-celebration.is-active .emitter-left::before { animation: cannonKickLeft .9s cubic-bezier(.2, 1.5, .38, 1) .36s both; }
.ui-v2 .success-celebration.is-active .emitter-left::after { animation: cannonRimLeft .9s cubic-bezier(.2, 1.5, .38, 1) .36s both; }
.ui-v2 .success-celebration.is-active .emitter-right::before { animation: cannonKickRight .9s cubic-bezier(.2, 1.5, .38, 1) .36s both; }
.ui-v2 .success-celebration.is-active .emitter-right::after { animation: cannonRimRight .9s cubic-bezier(.2, 1.5, .38, 1) .36s both; }
.ui-v2 .success-celebration.is-active .confetti-emitter i { animation: emitterFlash .7s cubic-bezier(.16, 1, .3, 1) .48s both; }
.ui-v2 .success-celebration.is-active .confetti-emitter b { animation: emitterStreak .58s cubic-bezier(.16, 1, .3, 1) .49s both; }

.ui-v2 .confetti-field {
  position: absolute;
  z-index: 4;
  inset: -78px -72px -96px;
  overflow: hidden;
  pointer-events: none;
  perspective: 760px;
}

.ui-v2 .confetti-piece {
  position: absolute;
  width: 7px;
  height: 12px;
  border-radius: 1.5px;
  opacity: 0;
  background:
    linear-gradient(108deg,
      var(--metal-shadow) 0%,
      var(--metal-base) 24%,
      var(--metal-hi) 44%,
      #fffef3 50%,
      var(--metal-base) 58%,
      var(--metal-shadow) 100%);
  box-shadow:
    inset 1px 0 rgba(255, 255, 255, .74),
    inset -1px 0 rgba(0, 0, 0, .2),
    0 2px 5px rgba(0, 0, 0, .22),
    0 0 5px color-mix(in srgb, var(--metal-base) 32%, transparent);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.ui-v2 .confetti-piece::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .2;
  transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, .94) 46%, transparent 72%);
}

.ui-v2 .confetti-ribbon {
  width: 4px;
  height: 34px;
  border-radius: 99px;
  clip-path: polygon(0 0, 100% 0, 72% 19%, 100% 38%, 65% 58%, 100% 78%, 54% 100%, 0 100%, 34% 79%, 0 58%, 31% 39%, 0 20%);
}
.ui-v2 .confetti-disc { width: 10px; height: 10px; border-radius: 50%; }
.ui-v2 .confetti-spark {
  width: 2px;
  height: 25px;
  border-radius: 99px;
  background: linear-gradient(180deg, transparent, #fffbe2 18%, var(--metal-base) 62%, transparent);
  box-shadow: 0 0 6px rgba(255, 222, 132, .95);
}

.ui-v2 .depth-near { filter: blur(.1px); }
.ui-v2 .depth-mid { filter: blur(.35px); }
.ui-v2 .depth-far { filter: blur(1.05px); opacity: .72; }

.ui-v2 .success-celebration.is-active .confetti-piece {
  animation: confettiBurst var(--duration) cubic-bezier(.16, .62, .24, 1) var(--delay) both;
}

.ui-v2 .success-celebration.is-active .confetti-piece::after {
  animation: metalGlint .58s ease-in-out calc(var(--delay) + .42s) 3;
}

@keyframes electricPulse {
  from { opacity: .44; transform: scale(.72); }
  to { opacity: .95; transform: scale(1.22); }
}

@keyframes electricTrail {
  0%, 100% { opacity: .18; width: 13px; }
  48% { opacity: 1; width: 30px; }
}

@keyframes liquidFlow {
  from { background-position: -96px 0; }
  to { background-position: 96px 0; }
}

@keyframes progressSweep {
  0% { left: -32%; opacity: 0; }
  15% { opacity: 1; }
  100% { left: 106%; opacity: 0; }
}

@keyframes progressCompleteFlash {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 227, 152, .035); }
  46% { box-shadow: 0 0 12px #ffe27d, 0 0 34px rgba(255, 184, 39, .68); }
}

@keyframes successAura {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.54); }
  48% { opacity: 1; }
  100% { opacity: .68; transform: translate(-50%, -50%) scale(1); }
}

@keyframes successEnergySweep {
  0% { left: -46%; opacity: 0; }
  18% { opacity: .9; }
  74% { opacity: .7; }
  100% { left: 116%; opacity: 0; }
}

@keyframes successRing {
  0% { opacity: 0; transform: scale(.38); }
  28% { opacity: .78; }
  100% { opacity: 0; transform: scale(1.34); }
}

@keyframes energyOrbit {
  0% { opacity: 0; transform: rotate(-72deg) scale(.54); }
  34% { opacity: 1; }
  100% { opacity: .46; transform: rotate(92deg) scale(1); }
}

@keyframes energyOrbitSweep {
  0% { opacity: 0; transform: rotate(-48deg) scaleX(.18); }
  25% { opacity: 1; }
  72% { opacity: .84; }
  100% { opacity: 0; transform: rotate(208deg) scaleX(1.08); }
}

@keyframes energyCore {
  0% { opacity: 0; transform: scale(.25); }
  45% { opacity: 1; transform: scale(1.4); }
  100% { opacity: .52; transform: scale(.9); }
}

@keyframes successMark {
  0% { opacity: 0; transform: scale(.28) rotate(-12deg); filter: blur(7px) brightness(1.42); }
  48% { opacity: 1; transform: scale(1.13) rotate(3deg); filter: blur(0) brightness(1.25); }
  74% { transform: scale(.96) rotate(-1deg); filter: blur(0) brightness(1.08); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0) brightness(1); }
}

@keyframes successCheck {
  0% { opacity: 0; transform: rotate(-45deg) scale(.42); }
  68% { opacity: 1; transform: rotate(-45deg) scale(1.12); }
  100% { opacity: 1; transform: rotate(-45deg) scale(1); }
}

@keyframes successCopy {
  from { opacity: 0; transform: translateY(12px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes emitterFlash {
  0% { opacity: 0; transform: scale(.16); }
  28% { opacity: 1; transform: scale(1.16); }
  58% { opacity: .54; transform: scale(.82); }
  100% { opacity: 0; transform: scale(1.48); }
}

@keyframes emitterStreak {
  0% { opacity: 0; scale: .12 1; }
  22% { opacity: 1; }
  66% { opacity: .7; scale: 1 1; }
  100% { opacity: 0; scale: 1.16 1; }
}

@keyframes cannonKickLeft {
  0% { transform: rotate(42deg) translateY(0) scale(.92); }
  35% { transform: rotate(35deg) translateY(9px) scale(1.04); }
  70% { transform: rotate(45deg) translateY(-2px) scale(.99); }
  100% { transform: rotate(42deg) translateY(0) scale(1); }
}

@keyframes cannonRimLeft {
  0% { transform: translate(24px, -4px) rotate(42deg) scale(.78); opacity: .48; }
  35% { transform: translate(28px, -8px) rotate(35deg) scale(1.16); opacity: 1; }
  100% { transform: translate(24px, -4px) rotate(42deg) scale(1); opacity: 1; }
}

@keyframes cannonKickRight {
  0% { transform: rotate(-42deg) translateY(0) scale(.92); }
  35% { transform: rotate(-35deg) translateY(9px) scale(1.04); }
  70% { transform: rotate(-45deg) translateY(-2px) scale(.99); }
  100% { transform: rotate(-42deg) translateY(0) scale(1); }
}

@keyframes cannonRimRight {
  0% { transform: translate(-24px, -4px) rotate(-42deg) scale(.78); opacity: .48; }
  35% { transform: translate(-28px, -8px) rotate(-35deg) scale(1.16); opacity: 1; }
  100% { transform: translate(-24px, -4px) rotate(-42deg) scale(1); opacity: 1; }
}

@keyframes confettiBurst {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(0deg) scale(calc(var(--scale) * .35));
  }
  7% { opacity: .94; }
  24% {
    opacity: 1;
    transform: translate3d(var(--burst-x), var(--rise-y), 45px) rotateZ(var(--spin-mid)) rotateY(var(--flip-mid)) scale(var(--scale));
  }
  43% {
    opacity: .98;
    transform: translate3d(var(--burst-x), var(--rise-y), 38px) rotateZ(var(--spin-mid)) rotateY(var(--flip-mid)) scale(var(--scale));
  }
  66% {
    opacity: .94;
    transform: translate3d(var(--coast-x), var(--coast-y), 18px) rotateZ(var(--spin-late)) rotateY(var(--flip-late)) scale(calc(var(--scale) * .96));
  }
  88% { opacity: .74; }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift-x), var(--fall-y), -35px) rotateZ(var(--spin)) rotateY(var(--flip-end)) scale(calc(var(--scale) * .86));
  }
}

@keyframes metalGlint {
  0% { opacity: .05; transform: translateX(-120%); }
  42% { opacity: .82; }
  100% { opacity: .08; transform: translateX(125%); }
}

.ui-v2 .result { margin-top: 16px; padding: 13px 14px; border: 1px solid; border-radius: var(--r-sm); font-size: 12px; }
.ui-v2 .result.success { color: #a7ddc5; border-color: rgba(138, 209, 176, .24); background: rgba(77, 147, 115, .095); }
.ui-v2 .result.error { color: #f2a097; border-color: rgba(240, 128, 115, .24); background: rgba(161, 55, 45, .11); }

.ui-v2 .redeem-tools-section {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(510px, 1.14fr);
  gap: clamp(72px, 8vw, 122px);
  align-items: start;
  padding: 54px max(40px, calc((100vw - 1240px) / 2)) 42px;
  border-top: 1px solid rgba(255, 255, 255, .075);
  background:
    radial-gradient(ellipse 38% 80% at 9% 32%, rgba(151, 37, 30, .11), transparent 72%),
    #0c0c0e;
}

.ui-v2 .redeem-tool-panel {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ui-v2 .cdk-query-section {
  position: relative;
  z-index: 2;
  align-self: start;
}

.cdk-query-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: auto;
}

.cdk-query-copy { padding: 0 4px; }
.cdk-query-copy h2 {
  margin: 12px 0 13px;
  color: #f1ede6;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  font-size: clamp(27px, 2.8vw, 36px);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -.04em;
}
.cdk-query-copy p { max-width: 520px; margin: 0; color: #aaa49d; font-size: 14px; line-height: 1.75; }
.cdk-query-copy small { display: block; margin-top: 12px; color: #716d68; font: 11px/1.5 Consolas, monospace; }

.cdk-query-card {
  flex: none;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, rgba(27, 27, 30, .94), rgba(14, 14, 16, .96));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.cdk-query-card form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  grid-template-rows: auto auto;
  gap: 11px;
  align-items: end;
  height: auto;
}
.cdk-query-card label { grid-column: 1 / -1; font-size: 14px; }
.cdk-query-card textarea {
  height: auto;
  min-height: 96px;
  padding: 15px 16px;
  resize: vertical;
  border-radius: var(--r-md);
  font: 13px/1.75 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .025em;
}
.query-submit { min-height: 52px; display: flex; align-items: center; justify-content: space-between; }
.query-submit span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
}

.query-message { margin: 15px 0 0; color: #f2a097; font-size: 12px; }
.query-message.success { color: #9bd8bb; }
.query-results { margin-top: 25px; }
.query-results-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.query-results-head strong { color: #ded9d2; font-size: 14px; }
.query-results-head span { color: #77736f; font: 11px/1 Consolas, monospace; }
.query-table-wrap { overflow-x: auto; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--r-md); }
.query-table-wrap table { width: 100%; min-width: 690px; border-collapse: collapse; color: #bdb8b1; font-size: 12px; }
.query-table-wrap th,
.query-table-wrap td { padding: 13px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); text-align: left; white-space: nowrap; }
.query-table-wrap th { color: #77736f; background: rgba(255, 255, 255, .018); font-size: 10px; font-weight: 700; letter-spacing: .07em; }
.query-table-wrap tbody tr:last-child td { border-bottom: 0; }
.query-cdk { color: #ddd7ce; font-family: "SFMono-Regular", Consolas, monospace; }
.query-account { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.query-time { color: #918c85; }
.query-status {
  display: inline-flex;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: #aaa59f;
  font-size: 10px;
}
.query-status.status-success { color: #9bd8bb; border-color: rgba(138, 209, 176, .2); background: rgba(138, 209, 176, .08); }
.query-status.status-processing,
.query-status.status-reviewing { color: #e5c58e; border-color: rgba(217, 175, 108, .22); background: rgba(217, 175, 108, .08); }
.query-status.status-failed,
.query-status.status-cancelled,
.query-status.status-expired { color: #efa097; border-color: rgba(240, 128, 115, .2); background: rgba(240, 128, 115, .08); }

.ui-v2 .redeem-tutorial {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--ink);
}

.ui-v2 .tutorial-intro {
  display: block;
  padding: 0 4px;
  border-bottom: 0;
}

.ui-v2 .tutorial-intro h2 {
  margin: 8px 0 0;
  color: #eeeae4;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  font-size: clamp(25px, 2.6vw, 34px);
  font-weight: 650;
  letter-spacing: -.035em;
}

.ui-v2 .tutorial-intro p { max-width: 580px; margin: 12px 0 0; color: #a49f98; font-size: 14px; line-height: 1.75; }

.ui-v2 .tutorial-video-card {
  position: relative;
  flex: none;
  margin: 22px 0 0;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 0%, rgba(223, 89, 77, .16), transparent 34%),
    linear-gradient(145deg, rgba(31, 28, 30, .96), rgba(12, 12, 14, .96));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .34);
}

.ui-v2 .tutorial-video-copy {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin-bottom: 18px;
}

.ui-v2 .tutorial-video-copy p {
  max-width: 610px;
  margin: 0 0 0 auto;
  color: #b9b2aa;
  font-size: 14px;
  line-height: 1.8;
}

.ui-v2 .tutorial-video-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #f09b92;
  font: 750 12px/1.2 Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ui-v2 .tutorial-video-kicker i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #eb675a;
  box-shadow: 0 0 18px rgba(235, 103, 90, .75);
}

.ui-v2 .tutorial-video-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: #050506;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42);
}

.ui-v2 .tutorial-video-stage video {
  display: block;
  width: 100%;
  height: 100%;
  background: #050506;
  object-fit: contain;
}

.ui-v2 .tutorial-video-privacy {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: none;
  margin: 15px 2px 0;
  color: #928d86;
  font-size: 12px;
  line-height: 1.6;
}

.ui-v2 .tutorial-video-privacy span {
  color: #78c69b;
  font-size: 9px;
  filter: drop-shadow(0 0 6px rgba(120, 198, 155, .5));
}

.ui-v2 .redeem-steps-section {
  position: relative;
  z-index: 2;
  padding: 34px max(40px, calc((100vw - 1240px) / 2)) 82px;
  color: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, .075);
  background: rgba(8, 8, 9, .72);
}

.ui-v2 .redeem-steps-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 34px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-strong);
}

.ui-v2 .redeem-steps-intro h2 {
  margin: 8px 0 0;
  color: #eeeae4;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  font-size: clamp(25px, 2.6vw, 34px);
  font-weight: 650;
  letter-spacing: -.035em;
}

.ui-v2 .redeem-steps-intro p {
  max-width: 580px;
  margin: 0;
  color: #a49f98;
  font-size: 15px;
  line-height: 1.8;
}

.ui-v2 .tutorial-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.ui-v2 .tutorial-step {
  position: relative;
  min-height: 225px;
  padding: 27px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(26, 26, 29, .88), rgba(14, 14, 16, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 16px 34px rgba(0, 0, 0, .14);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.ui-v2 .tutorial-step:not(:first-child) { padding-left: 27px; }
.ui-v2 .tutorial-step:hover { transform: translateY(-3px); border-color: rgba(235, 103, 90, .34); background: linear-gradient(145deg, rgba(31, 28, 30, .93), rgba(16, 15, 17, .84)); }
.ui-v2 .tutorial-number { width: fit-content; margin-bottom: 21px; padding: 7px 10px; color: #f29a91; border: 1px solid rgba(235, 103, 90, .22); border-radius: 999px; background: rgba(223, 89, 77, .075); font: 700 11px/1 Consolas, monospace; letter-spacing: .11em; }
.ui-v2 .tutorial-step h3 { margin: 0 0 11px; color: #eeeae4; font-family: inherit; font-size: 18px; font-weight: 750; }
.ui-v2 .tutorial-step p { margin: 0 0 22px; color: #b6b0a9; font-size: 15px; line-height: 1.75; }
.ui-v2 .tutorial-meta { margin-top: auto; color: #c0bab2; font-size: 12px; letter-spacing: .03em; }

.ui-v2 .support-terms-dialog {
  width: min(900px, calc(100% - 32px));
  max-width: none;
  max-height: min(90dvh, 920px);
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: #141416;
  box-shadow: 0 38px 120px rgba(0, 0, 0, .66), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.ui-v2 .support-terms-dialog::backdrop {
  background: rgba(3, 3, 4, .82);
  backdrop-filter: blur(8px);
}
.ui-v2 .support-terms-dialog-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(90dvh, 920px);
}
.ui-v2 .support-terms-dialog-head {
  padding: 28px 72px 22px 30px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255, 255, 255, .025), transparent 58%);
}
.ui-v2 .support-terms-dialog-head h2 {
  margin: 7px 0 6px;
  color: #f0ebe4;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 28px;
  font-weight: 650;
  line-height: 1.25;
}
.ui-v2 .support-terms-dialog-head p {
  margin: 0;
  color: #918b84;
  font-size: 12px;
  line-height: 1.6;
}
.ui-v2 .support-terms-dialog .dialog-close { top: 19px; right: 23px; }
.ui-v2 .support-terms-scroll {
  min-height: 0;
  padding: 28px 30px 38px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(255, 185, 71, .34) rgba(255, 255, 255, .035);
}
.ui-v2 .support-contact-section,
.ui-v2 .warranty-terms-section {
  display: grid;
  gap: 22px;
}
.ui-v2 .support-contact-intro,
.ui-v2 .warranty-terms-heading {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
}
.ui-v2 .support-section-number {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #d7a952;
  border: 1px solid rgba(255, 185, 71, .24);
  border-radius: 50%;
  background: rgba(196, 127, 23, .09);
  font: 700 11px/1 Consolas, monospace;
}
.ui-v2 .support-contact-intro h3,
.ui-v2 .warranty-terms-heading h3 {
  margin: 1px 0 7px;
  color: #ece7df;
  font-size: 21px;
  font-weight: 720;
}
.ui-v2 .support-contact-intro p,
.ui-v2 .warranty-terms-heading p {
  margin: 0;
  color: #b1aaa2;
  font-size: 14px;
  line-height: 1.75;
}
.ui-v2 .support-contact-intro small {
  display: block;
  margin-top: 7px;
  color: #8f8982;
  font-size: 11px;
  line-height: 1.6;
}
.ui-v2 .support-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ui-v2 .support-contact-card {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(140px, 1.1fr);
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .018);
}
.ui-v2 .support-qr-frame {
  min-height: 190px;
  padding: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}
.ui-v2 .support-qr-frame img {
  display: block;
  width: 100%;
  max-width: 220px;
  max-height: 245px;
  height: auto;
  object-fit: contain;
}
.ui-v2 .support-contact-meta {
  display: grid;
  justify-items: start;
  gap: 7px;
  min-width: 0;
}
.ui-v2 .support-contact-meta > span {
  color: #908a83;
  font-size: 11px;
  letter-spacing: .08em;
}
.ui-v2 .support-contact-meta strong {
  max-width: 100%;
  color: #eee8df;
  font: 700 14px/1.4 "SFMono-Regular", Consolas, monospace;
  overflow-wrap: anywhere;
}
.ui-v2 .support-copy-button {
  min-height: 35px;
  padding: 0 11px;
  color: #dfca96;
  border: 1px solid rgba(255, 185, 71, .23);
  border-radius: 9px;
  background: rgba(196, 127, 23, .09);
  font-size: 11px;
  font-weight: 700;
}
.ui-v2 .support-copy-button:hover { color: #fff0c6; border-color: rgba(255, 185, 71, .4); }
.ui-v2 .support-copy-status {
  min-height: 16px;
  color: #83d6b3;
  font-size: 10px;
  line-height: 1.4;
}
.ui-v2 .support-copy-status[data-state="error"] { color: #e4bb77; }
.ui-v2 .support-confirm-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 15px;
  color: #cec7be;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .018);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  cursor: pointer;
}
.ui-v2 .support-confirm-row input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: #d89826;
  box-shadow: none;
}
.ui-v2 .support-continue-button {
  min-height: 46px;
  justify-self: end;
  padding: 0 18px;
}
.ui-v2 .warranty-terms-section {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 185, 71, .2);
}
.ui-v2 .warranty-rules {
  display: grid;
  gap: 16px;
}
.ui-v2 .warranty-rules > section {
  padding: 20px 21px;
  color: #b8b1a8;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .023), rgba(255, 255, 255, .008));
  font-size: 14px;
  line-height: 1.82;
}
.ui-v2 .warranty-rules h4 {
  margin: 0 0 12px;
  color: #eee8df;
  font-size: 17px;
  font-weight: 720;
}
.ui-v2 .warranty-rules h5 {
  margin: 16px 0 7px;
  color: #d8d0c6;
  font-size: 14px;
}
.ui-v2 .warranty-rules p { margin: 8px 0; }
.ui-v2 .warranty-rules ol,
.ui-v2 .warranty-rules ul { margin: 9px 0; padding-left: 22px; }
.ui-v2 .warranty-rules li + li { margin-top: 7px; }
.ui-v2 .warranty-rules a { color: #e1bd72; overflow-wrap: anywhere; }
.ui-v2 .warranty-rules strong { color: #eee2c7; }
.ui-v2 .warranty-third-party-note,
.ui-v2 .warranty-formula {
  padding: 11px 12px;
  border-left: 2px solid rgba(255, 185, 71, .55);
  background: rgba(196, 127, 23, .07);
}
.ui-v2 .warranty-emphasis {
  padding: 14px;
  color: #ffb4aa;
  border: 1px solid rgba(240, 128, 115, .25);
  border-radius: 10px;
  background: rgba(189, 61, 48, .1);
  text-align: center;
}
.ui-v2 .terms-end-marker {
  padding: 10px;
  color: #8edbb9;
  border-top: 1px dashed rgba(83, 211, 156, .25);
  border-bottom: 1px dashed rgba(83, 211, 156, .25);
  font-size: 11px;
  text-align: center;
}
.ui-v2 .warranty-scroll-hint {
  margin: -12px 0 0;
  color: #9a938b;
  font-size: 11px;
  text-align: right;
}
.ui-v2 .warranty-scroll-hint[data-state="ready"] { color: #8edbb9; }
.ui-v2 .support-terms-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 30px;
  border-top: 1px solid var(--line);
  background: rgba(18, 18, 20, .97);
  box-shadow: 0 -16px 34px rgba(0, 0, 0, .16);
}
.ui-v2 .support-terms-dialog-actions > span { color: #827c75; font-size: 11px; }
.ui-v2 .support-terms-dialog-actions > span strong { color: #b8b1a8; }
.ui-v2 .support-terms-dialog-actions > div { display: flex; gap: 9px; }
.ui-v2 .support-terms-dialog-actions button { min-height: 42px; padding: 0 15px; }

.ui-v2 .confirm-dialog,
.ui-v2 .task-dialog {
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: #171719;
  box-shadow: 0 35px 110px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.ui-v2 .confirm-dialog::backdrop,
.ui-v2 .task-dialog::backdrop { background: rgba(3, 3, 4, .76); backdrop-filter: blur(7px); }
.ui-v2 .confirm-dialog form { padding: 33px; }
.ui-v2 .confirm-dialog h2 { margin: 9px 0 21px; color: #f1ede6; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 31px; font-weight: 650; }
.ui-v2 .confirm-dialog p { color: #85807a; }
.ui-v2 .confirm-email { padding: 15px; color: #e9e5df; border: 1px solid var(--line); border-radius: var(--r-sm); background: #0f0f11; }
.ui-v2 .confirm-account-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
}
.ui-v2 .confirm-account-card p { margin: 0; }
.ui-v2 .confirm-account-card .confirm-email { display: block; word-break: break-all; }
.ui-v2 .confirm-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: #aaa49c;
  font-size: 13px;
}
.ui-v2 .confirm-plan-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 11px;
  color: #ddd7cf;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  font-size: 12px;
  white-space: nowrap;
}
.ui-v2 .confirm-plan-status[data-state="free"] { color: #9ee8c8; border-color: rgba(83, 211, 156, .28); background: rgba(41, 146, 102, .12); }
.ui-v2 .confirm-plan-status[data-state="plus"] { color: #ffd387; border-color: rgba(255, 185, 71, .3); background: rgba(196, 127, 23, .13); }
.ui-v2 .confirm-plan-status[data-state="pro"],
.ui-v2 .confirm-plan-status[data-state="business"],
.ui-v2 .confirm-plan-status[data-state="enterprise"] { color: #ffaaa1; border-color: rgba(255, 104, 89, .28); background: rgba(189, 61, 48, .13); }
.ui-v2 .confirm-plan-hint { color: #8f8982; font-size: 11px; line-height: 1.55; }
.ui-v2 .confirm-plan-expiry { color: #e5dfd6; font-size: 12px; font-weight: 650; text-align: right; }
.ui-v2 .confirm-eligibility-notice {
  padding: 11px 12px;
  border: 1px solid rgba(255, 185, 71, .24);
  border-radius: 10px;
  color: #e5c889;
  background: rgba(196, 127, 23, .1);
  font-size: 12px;
  line-height: 1.55;
}
.ui-v2 .confirm-eligibility-notice.blocked {
  color: #ffb2a9;
  border-color: rgba(255, 104, 89, .28);
  background: rgba(189, 61, 48, .13);
}
.ui-v2 .dialog-close { color: #87827c; }
.ui-v2 .dialog-close:hover { color: #fff; }

/* Admin login */

.admin-page.ui-v2 { min-height: 100vh; background: #09090a; }

.ui-v2 .login-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 74px 24px;
  background:
    linear-gradient(115deg, rgba(138, 30, 24, .22), transparent 39%),
    radial-gradient(ellipse 34% 50% at 68% 48%, rgba(217, 212, 204, .06), transparent 73%),
    #09090a;
}

.ui-v2 .login-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  width: 240px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 139, 124, .8), transparent);
}

.login-brand {
  position: absolute;
  top: 32px;
  left: 40px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.login-brand strong { font-size: 13px; letter-spacing: .16em; }
.login-brand span { color: #625f5a; font-size: 9px; letter-spacing: .16em; }

.ui-v2 .login-card {
  position: relative;
  overflow: hidden;
  width: min(440px, 100%);
  padding: 39px;
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, rgba(27, 27, 30, .95), rgba(14, 14, 16, .97));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .055);
}

.ui-v2 .login-card::before {
  content: "";
  position: absolute;
  top: -45px;
  left: 9%;
  width: 65%;
  height: 94px;
  transform: rotate(-9deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), rgba(255, 112, 97, .12), transparent 76%);
  filter: blur(8px);
}

.ui-v2 .login-card h1 {
  margin: 10px 0 8px;
  color: #f1ede6;
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: 39px;
  font-weight: 650;
  letter-spacing: -.045em;
}

.ui-v2 .login-card p { margin: 0 0 28px; color: #87827c; font-size: 12px; }
.ui-v2 .login-card label { margin-bottom: 15px; }
.ui-v2 .login-card input { height: 49px; padding: 0 14px; }
.ui-v2 .login-card .primary { width: 100%; margin-top: 7px; display: flex; align-items: center; justify-content: space-between; }
.ui-v2 .form-error { min-height: 18px; margin-top: 10px; color: #f09a90; font-size: 11px; }
.login-footnote { position: absolute; bottom: 25px; color: #4f4d49; font: 9px/1 Consolas, monospace; letter-spacing: .15em; }

/* Admin application */

.ui-v2 .admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  background: #0c0c0e;
}

.ui-v2 .admin-shell aside {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 31px 22px 25px;
  color: var(--ink);
  border-right: 1px solid rgba(255, 255, 255, .075);
  background: #0a0a0b;
}

.aside-top { padding: 0 9px 27px; border-bottom: 1px solid rgba(255, 255, 255, .075); }
.ui-v2 .logo { margin: 0; color: #f1ede7; font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: .15em; }
.ui-v2 .logo span { margin: 0 2px; color: var(--accent); }
.aside-top small { display: block; margin-top: 7px; color: #625f5b; font-size: 10px; letter-spacing: .06em; }

.ui-v2 .admin-shell nav { display: grid; gap: 4px; margin-top: 24px; }

.ui-v2 .admin-shell nav button {
  position: relative;
  min-height: 43px;
  padding: 0 13px 0 31px;
  color: #7e7a75;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.ui-v2 .admin-shell nav button::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #434144;
  transform: translateY(-50%);
}

.ui-v2 .admin-shell nav button:hover { color: #d8d3cc; background: rgba(255, 255, 255, .027); }
.ui-v2 .admin-shell nav button.active { color: #f4f0ea; border-color: var(--line); background: rgba(255, 255, 255, .045); }
.ui-v2 .admin-shell nav button.active::before { background: var(--accent); box-shadow: 0 0 9px rgba(223, 89, 77, .5); }

.aside-status {
  margin-top: auto;
  padding: 15px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #797570;
  border-top: 1px solid rgba(255, 255, 255, .075);
  font-size: 10px;
}

.ui-v2 .admin-shell aside #logoutButton { width: 100%; min-height: 39px; margin-top: 4px; color: #8d8984; }

.ui-v2 .admin-main {
  width: 100%;
  min-width: 0;
  max-width: 1600px;
  padding: 34px clamp(28px, 4vw, 66px) 75px;
  background:
    radial-gradient(ellipse 35% 25% at 95% 0%, rgba(216, 210, 201, .035), transparent 75%),
    #0c0c0e;
}

.ui-v2 .admin-main > header {
  margin-bottom: 27px;
  padding-bottom: 21px;
  border-bottom: 1px solid var(--line);
  align-items: end;
}

.ui-v2 .admin-main h1 {
  margin: 7px 0 0;
  color: #f0ece5;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  font-size: clamp(32px, 3.2vw, 45px);
  font-weight: 650;
  letter-spacing: -.045em;
}

.ui-v2 .admin-main header > span { color: #6d6965; font: 10px/1.4 Consolas, monospace; letter-spacing: .03em; }
.ui-v2 .view { animation: ui-view-in .28s cubic-bezier(.2, .72, .2, 1) both; }

@keyframes ui-view-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.ui-v2 .product-banner {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 25px 27px;
  border-radius: var(--r-lg);
  border-color: rgba(255, 255, 255, .12);
  background: linear-gradient(120deg, rgba(34, 23, 23, .98), rgba(20, 20, 22, .96) 53%, rgba(16, 16, 18, .98));
}

.ui-v2 .product-banner::after {
  content: "";
  position: absolute;
  top: -44px;
  right: 12%;
  width: 270px;
  height: 90px;
  transform: rotate(-8deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), rgba(223, 89, 77, .11), transparent);
  filter: blur(8px);
}

.ui-v2 .product-banner h2 { margin: 6px 0 7px; color: #eeeae3; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 23px; font-weight: 650; letter-spacing: -.02em; }
.ui-v2 .product-banner p { color: #8c8781; font-size: 11px; }
.ui-v2 .region-badge { z-index: 1; padding: 8px 11px; color: #d8d3cc; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255, 255, 255, .035); font: 700 9px/1 Consolas, monospace; letter-spacing: .09em; }

.ui-v2 .metrics { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px; }

.ui-v2 .metric {
  position: relative;
  overflow: hidden;
  min-height: 145px;
  padding: 20px 21px;
  border-radius: var(--r-md);
  background: #151517;
}

.ui-v2 .metric::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 55%);
  opacity: .42;
}

.ui-v2 .metric span, .ui-v2 .metric small { color: #77736f; font-size: 10px; line-height: 1.45; }
.ui-v2 .metric strong { margin: 21px 0 7px; color: #f0ece5; font-family: "Noto Serif SC", "Songti SC", serif; font-size: clamp(29px, 2.9vw, 39px); font-weight: 650; letter-spacing: -.04em; }

.ui-v2 .dashboard-grid { gap: 12px; margin-top: 12px; }
.ui-v2 .panel { margin-bottom: 14px; padding: 24px; border-radius: var(--r-lg); background: #141416; }
.ui-v2 .panel-head { margin-bottom: 22px; gap: 18px; }
.ui-v2 .panel-head h2 { margin: 0; color: #e6e1da; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 23px; font-weight: 650; letter-spacing: -.025em; }
.ui-v2 .panel-head > span, .ui-v2 .panel-head > div > span:not(.panel-kicker) { color: #77736f; font-size: 10px; line-height: 1.5; }
.panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.ui-v2 .card-paste-note {
  margin: -7px 0 18px;
  color: #9b968f;
  font-size: 12px;
  line-height: 1.65;
}

.ui-v2 .grid-form { grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 11px; }
.ui-v2 .grid-form input, .ui-v2 .grid-form select { min-height: 46px; padding: 0 13px; border-radius: var(--r-sm); }
.ui-v2 .grid-form .primary { min-height: 46px; border-radius: var(--r-sm); }
.ui-v2 .grid-form .card-combined-field { grid-column: 1 / -2; }
.ui-v2 .grid-form .parse-card-button { min-height: 46px; align-self: end; }
.ui-v2 .proxy-form { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
.ui-v2 .accounting-filter { grid-template-columns: repeat(6, minmax(120px, 1fr)); }

.ui-v2 .fixed-product {
  margin: 0 0 19px;
  padding: 16px 17px;
  color: #ddd8d1;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .022);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}

.ui-v2 .fixed-product span { color: #797570; font-size: 10px; }
.ui-v2 .fixed-product b { color: #d6d1ca; font-size: 12px; }
.ui-v2 .internal-cost-note { margin: -6px 0 19px; color: #77736f; font-size: 10px; }
.ui-v2 .code-output { min-height: 190px; margin-top: 18px; border-radius: var(--r-sm); font: 11px/1.6 Consolas, monospace; }

.ui-v2 .table-wrap {
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: var(--r-md);
  background: #101012;
}

/* 代理池不是横向报表：所有信息保留在可换行的卡片里，避免操作按钮被横向裁掉。 */
.ui-v2 .proxy-pool-wrap {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: var(--r-md);
  background: #101012;
}

.ui-v2 .proxy-pool-list {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
}

.ui-v2 .proxy-pool-card {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2.1fr) minmax(215px, 1.1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .012);
}

.ui-v2 .proxy-pool-identity {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.ui-v2 .proxy-pool-select-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  color: #8d8882;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
}

.ui-v2 .proxy-pool-select-control input {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  accent-color: #d7ae52;
  cursor: pointer;
}

.ui-v2 .proxy-pool-node-block {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ui-v2 .proxy-pool-node-block strong {
  color: #e0dbd4;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ui-v2 .proxy-pool-node-block span {
  color: #8e8982;
  font: 10px/1.45 Consolas, "SFMono-Regular", monospace;
  overflow-wrap: anywhere;
}

.ui-v2 .proxy-pool-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  min-width: 0;
  margin: 0;
}

.ui-v2 .proxy-pool-fact {
  min-width: 0;
}

.ui-v2 .proxy-pool-fact dt,
.ui-v2 .proxy-pool-section-label {
  display: block;
  color: #74706b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .075em;
  line-height: 1.35;
}

.ui-v2 .proxy-pool-fact dd {
  min-width: 0;
  margin: 4px 0 0;
  color: #c7c1ba;
  font: 11px/1.45 Consolas, "SFMono-Regular", monospace;
  overflow-wrap: anywhere;
}

.ui-v2 .proxy-pool-state {
  display: grid;
  gap: 11px;
  min-width: 0;
}

.ui-v2 .proxy-pool-status {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ui-v2 .proxy-pool-status small {
  color: #9b958e;
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ui-v2 .proxy-pool-toggle {
  display: grid;
  gap: 5px;
}

.ui-v2 .proxy-pool-state .row-actions {
  gap: 7px;
}

.ui-v2 .proxy-pool-state .row-actions .quiet {
  min-height: 34px;
  padding: 8px 10px;
  font-size: 10px;
}

@media (max-width: 1240px) {
  .ui-v2 .proxy-pool-card {
    grid-template-columns: minmax(190px, .9fr) minmax(0, 1.7fr);
  }

  .ui-v2 .proxy-pool-state {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.4fr) auto auto;
    align-items: end;
  }
}

@media (max-width: 760px) {
  .ui-v2 .proxy-pool-list { padding: 8px; }

  .ui-v2 .proxy-pool-card {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 14px;
  }

  .ui-v2 .proxy-pool-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-v2 .proxy-pool-state {
    grid-column: auto;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .ui-v2 .proxy-pool-state .row-actions .quiet {
    flex: 1 1 130px;
  }
}

@media (max-width: 420px) {
  .ui-v2 .proxy-pool-facts {
    grid-template-columns: 1fr;
  }
}

.ui-v2 table { min-width: 700px; color: #bcb7b0; font-size: 11px; }
.ui-v2 th, .ui-v2 td { padding: 13px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.ui-v2 th { color: #716e69; background: rgba(255, 255, 255, .018); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.ui-v2 tbody tr { transition: background .14s ease; }
.ui-v2 tbody tr:hover { background: rgba(255, 255, 255, .018); }
.ui-v2 tbody tr:last-child td { border-bottom: 0; }
.ui-v2 td.empty, .ui-v2 p.empty { color: #67645f; }

.ui-v2 .badge { padding: 4px 7px; color: #9e9993; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .035); font-size: 9px; }
.ui-v2 .badge.success, .ui-v2 .badge.available, .ui-v2 .badge.unused { color: #9bd8bb; border-color: rgba(138, 209, 176, .18); background: rgba(138, 209, 176, .08); }
.ui-v2 .badge.failed, .ui-v2 .badge.frozen, .ui-v2 .badge.exhausted, .ui-v2 .badge.destroyed { color: #f09a90; border-color: rgba(240, 128, 115, .18); background: rgba(240, 128, 115, .08); }
.ui-v2 .badge.processing, .ui-v2 .badge.retrying, .ui-v2 .badge.in_use { color: #dfbd83; border-color: rgba(217, 175, 108, .18); background: rgba(217, 175, 108, .08); }

.ui-v2 .bar-row { grid-template-columns: 105px 1fr 38px; color: #8c8781; font-size: 10px; }
.ui-v2 .bar-row i { height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .075); }
.ui-v2 .bar-row b { border-radius: inherit; background: var(--accent); opacity: .82; }
.ui-v2 .bar-row strong { color: #b9b4ad; font: 10px/1 Consolas, monospace; }

.ui-v2 .quiet.danger { color: #dd8177; border-color: rgba(240, 128, 115, .20); }
.ui-v2 .quiet.danger:hover { color: #ffaaa0; border-color: rgba(240, 128, 115, .36); background: rgba(240, 128, 115, .07); }
.ui-v2 .cost-alert { color: #ef9e94; background: rgba(240, 128, 115, .09); }

.ui-v2 .flash {
  top: 22px;
  right: 24px;
  padding: 12px 15px;
  color: #dff5e9;
  border: 1px solid rgba(138, 209, 176, .22);
  border-radius: var(--r-sm);
  background: #18392d;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .36);
  font-size: 11px;
}

.ui-v2 .flash.error { color: #ffd3ce; border-color: rgba(240, 128, 115, .25); background: #50241f; }

.ui-v2 .task-dialog { width: min(780px, 92vw); padding: 30px; }
.ui-v2 .task-dialog h2 { margin: 6px 0 22px; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 29px; font-weight: 650; }
.ui-v2 .task-dialog dl { color: #b9b4ad; }
.ui-v2 .task-dialog dt { color: #77736f; }
.ui-v2 .log-line { grid-template-columns: 155px 60px 1fr; border-color: var(--line); color: #aaa59f; }

/* Queue projection: only aggregate counts and the current task's position are rendered. */
.ui-v2 .queue-customer-surface {
  color: #bdb7af;
  border: 1px solid rgba(217, 175, 108, .16);
  border-radius: var(--r-md);
  background: rgba(217, 175, 108, .045);
}

.ui-v2 .queue-customer-surface-compact { margin: 16px 0 18px; padding: 13px; }
.ui-v2 .queue-personal-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ui-v2 .queue-personal-summary > div {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .16);
}
.ui-v2 .queue-personal-summary span { display: block; margin-bottom: 5px; color: #7f7a73; font-size: 9px; letter-spacing: .08em; }
.ui-v2 .queue-personal-summary strong { color: #eee7dc; font-size: 14px; font-weight: 650; }
.ui-v2 .queue-tier-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.ui-v2 .queue-tier-list article { min-width: 0; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .028); }
.ui-v2 .queue-tier-list strong { display: block; overflow: hidden; margin-bottom: 6px; color: #c9c3bb; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ui-v2 .queue-tier-list span { display: block; color: #77726c; font-size: 9px; line-height: 1.55; }
.ui-v2 .queue-tier-list b { color: #d8b77f; font: inherit; }
.ui-v2 .queue-adjustment { margin: 9px 0 0; padding: 8px 10px; color: #f0cf94; border-radius: 9px; background: rgba(217, 175, 108, .10); font-size: 10px; }

.ui-v2 .customer-queue-overview {
  width: min(1180px, calc(100% - 48px));
  margin: -34px auto 64px;
  padding: 24px;
  color: #bbb5ad;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, rgba(23, 23, 25, .98), rgba(15, 15, 17, .98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}
.ui-v2 .customer-queue-overview > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.ui-v2 .customer-queue-overview h2 { margin: 5px 0 0; color: #e8e2da; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 24px; }
.ui-v2 .queue-live-indicator { display: inline-flex; align-items: center; gap: 7px; color: #98928a; font-size: 10px; }
.ui-v2 .queue-live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #79cda8; box-shadow: 0 0 0 4px rgba(121, 205, 168, .08); }
.ui-v2 .queue-estimate-note { margin: 12px 0 0; color: #716d67; font-size: 10px; }

.ui-v2 .queue-tier-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.ui-v2 .queue-tier-metric strong { margin-block: 14px 5px; font-size: clamp(23px, 2.1vw, 31px); }
.ui-v2 .queue-tier-metric small { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ui-v2 .queue-tier-metric small b { color: #c8a66d; font: inherit; }
.ui-v2 .queue-state { white-space: nowrap; }
.ui-v2 .queue-state.waiting_verification,
.ui-v2 .queue-state.reconciliation,
.ui-v2 .queue-state.abnormal_suspended { color: #dfbd83; border-color: rgba(217, 175, 108, .22); background: rgba(217, 175, 108, .08); }
.ui-v2 .queue-row-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 210px; }
.ui-v2 .queue-row-actions .quiet { min-height: 30px; padding: 6px 9px; font-size: 9px; }
.ui-v2 .queue-action-dialog { width: min(620px, 92vw); }
.ui-v2 .queue-action-dialog form { display: grid; gap: 17px; }
.ui-v2 .queue-action-options { display: grid; gap: 9px; margin: 0; padding: 15px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ui-v2 .queue-action-options legend { padding: 0 7px; color: #817c75; font-size: 10px; }
.ui-v2 .queue-action-options label { display: flex; align-items: flex-start; gap: 9px; padding: 10px; color: #c4beb6; border-radius: var(--r-sm); background: rgba(255, 255, 255, .025); font-size: 12px; }
.ui-v2 .queue-action-options input { margin-top: 2px; accent-color: #c8974c; }
.ui-v2 .queue-action-warning { margin: 0; padding: 12px 13px; color: #c7a777; border-left: 2px solid #b98539; background: rgba(185, 133, 57, .08); font-size: 11px; line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ui-v2 *, .ui-v2 *::before, .ui-v2 *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 1120px) {
  .ui-v2 .redeem-flow-shell { grid-template-columns: minmax(0, .76fr) minmax(480px, 1.24fr); gap: 55px; }
  .ui-v2 .redeem-tools-section { grid-template-columns: minmax(0, .76fr) minmax(480px, 1.24fr); gap: 55px; }
  .ui-v2 .grid-form, .ui-v2 .proxy-form { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .ui-v2 .grid-form .card-combined-field { grid-column: 1 / -2; }
  .ui-v2 .accounting-filter { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
}

@media (max-width: 900px) {
  .public-topbar, .ui-v2 .redeem-flow-shell { width: min(760px, calc(100% - 40px)); }
  .ui-v2 .redeem-flow-shell { min-height: auto; grid-template-columns: 1fr; gap: 45px; padding: 65px 0 70px; }
  .ui-v2 .redeem-flow-brand { max-width: 620px; }
  .ui-v2 .redeem-flow-brand h1 br { display: none; }
  .ui-v2 .redeem-tools-section { grid-template-columns: 1fr; align-items: start; padding-inline: 20px; }
  .ui-v2 .redeem-steps-section { padding-inline: 20px; }
  .ui-v2 .tutorial-video-copy { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  .ui-v2 .tutorial-video-copy p { margin-left: 0; }
  .ui-v2 .tutorial-steps { grid-template-columns: repeat(2, 1fr); }
  .ui-v2 .tutorial-step:nth-child(2),
  .ui-v2 .tutorial-step:nth-child(3) { padding-left: 27px; }
  .cdk-query-layout { gap: 24px; }
  .cdk-query-copy p { max-width: 620px; }
  .ui-v2 .admin-shell { grid-template-columns: 190px minmax(0, 1fr); }
  .ui-v2 .admin-shell aside { padding-inline: 15px; }
  .ui-v2 .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .public-topbar { width: calc(100% - 28px); min-height: 64px; }
  .public-wordmark span, .service-status { display: none; }
  .public-actions { gap: 0; }
  .ui-v2 .redeem-flow-shell { width: calc(100% - 28px); padding: 50px 0 56px; }
  .ui-v2 .redeem-flow-brand h1 { font-size: clamp(38px, 12vw, 46px); white-space: normal; }
  .ui-v2 .redeem-flow-brand h1 br { display: block; }
  .ui-v2 .redeem-flow-card { min-height: 0; }
  .redeem-panel-content { padding: 29px 22px 30px; }
  .ui-v2 .support-terms-gate { grid-template-columns: 1fr; align-items: start; }
  .ui-v2 .support-terms-gate-action { width: 100%; grid-template-columns: 1fr auto; align-items: center; justify-items: start; }
  .ui-v2 .support-terms-open { justify-self: end; }
  .ui-v2 .support-terms-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 18px; }
  .ui-v2 .support-terms-dialog-shell { max-height: calc(100dvh - 20px); }
  .ui-v2 .support-terms-dialog-head { padding: 24px 60px 19px 22px; }
  .ui-v2 .support-terms-scroll { padding: 22px 20px 32px; }
  .ui-v2 .support-contact-grid { grid-template-columns: 1fr; }
  .ui-v2 .support-contact-card { grid-template-columns: minmax(145px, .75fr) minmax(160px, 1.25fr); }
  .ui-v2 .support-terms-dialog-actions { padding: 14px 20px; }
  .ui-v2 .tutorial-intro { display: block; }
  .ui-v2 .tutorial-intro p { margin-top: 12px; }
  .ui-v2 .redeem-steps-intro { display: block; }
  .ui-v2 .redeem-steps-intro p { margin-top: 12px; }
  .ui-v2 .tutorial-video-card { margin-block: 22px 0; padding: 14px; border-radius: 20px; }
  .ui-v2 .tutorial-video-copy { padding: 6px 5px 0; }
  .ui-v2 .tutorial-video-copy h3 { font-size: 25px; }
  .ui-v2 .tutorial-video-stage { border-radius: 13px; }
  .ui-v2 .tutorial-video-privacy { align-items: flex-start; padding-inline: 5px; }
  .ui-v2 .tutorial-steps { grid-template-columns: 1fr; }
  .ui-v2 .tutorial-step, .ui-v2 .tutorial-step:not(:first-child) { min-height: 0; padding: 24px; border: 1px solid rgba(255, 255, 255, .105); }
  .ui-v2 .tutorial-step:nth-child(2), .ui-v2 .tutorial-step:nth-child(3) { padding-left: 24px; }
  .ui-v2 .redeem-tools-section { padding: 44px 14px 28px; }
  .ui-v2 .redeem-tool-panel { padding: 0; border-radius: 0; }
  .ui-v2 .redeem-steps-section { padding: 34px 14px 62px; }
  .cdk-query-card { padding: 21px; }
  .cdk-query-card form { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .cdk-query-card textarea { min-height: 150px; }

  .login-brand { left: 20px; top: 23px; }
  .ui-v2 .login-card { padding: 32px 25px; }

  .ui-v2 .admin-shell { display: block; }
  .ui-v2 .admin-shell aside { position: sticky; top: 0; z-index: 20; width: 100%; height: auto; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); backdrop-filter: blur(18px); background: rgba(10, 10, 11, .92); }
  .aside-top { padding: 0; border: 0; }
  .aside-top small, .aside-status { display: none; }
  .ui-v2 .admin-shell nav { display: flex; gap: 3px; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .ui-v2 .admin-shell nav::-webkit-scrollbar { display: none; }
  .ui-v2 .admin-shell nav button { flex: 0 0 auto; min-height: 36px; padding: 0 10px; text-align: center; }
  .ui-v2 .admin-shell nav button::before { display: none; }
  .ui-v2 .admin-shell aside #logoutButton { width: auto; min-height: 34px; margin: 0; padding: 6px 9px; font-size: 10px; }
  .ui-v2 .admin-main { padding: 25px 14px 60px; }
  .ui-v2 .admin-main > header { margin-bottom: 20px; }
  .ui-v2 .admin-main h1 { font-size: 34px; }
  .ui-v2 .product-banner { align-items: flex-start; flex-direction: column; }
  .ui-v2 .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-v2 .metric { min-height: 130px; padding: 17px; }
  .ui-v2 .grid-form, .ui-v2 .proxy-form, .ui-v2 .accounting-filter { grid-template-columns: 1fr 1fr; }
  .ui-v2 .grid-form .card-combined-field { grid-column: 1 / -1; }
  .ui-v2 .panel { padding: 19px; }
  .ui-v2 .panel-head { align-items: flex-start; }
  .ui-v2 .fixed-product { align-items: flex-start; flex-direction: column; }
  .ui-v2 .customer-queue-overview { width: calc(100% - 28px); margin: -22px auto 48px; padding: 19px; }
  .ui-v2 .queue-tier-metrics { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .service-promises { flex-wrap: wrap; row-gap: 10px; }
  .service-promises span { padding-inline: 10px; }
  .ui-v2 .session-actions { grid-template-columns: 1fr; }
  .panel-chrome { grid-template-columns: 65px 1fr 50px; }
  .panel-chrome b { font-size: 8px; }
  .ui-v2 .flow-heading h2 { font-size: 28px; }
  .ui-v2 .support-terms-gate-action { grid-template-columns: 1fr; }
  .ui-v2 .support-terms-open { width: 100%; justify-self: stretch; }
  .ui-v2 .support-terms-dialog { width: calc(100% - 12px); max-height: calc(100dvh - 12px); border-radius: 15px; }
  .ui-v2 .support-terms-dialog-shell { max-height: calc(100dvh - 12px); }
  .ui-v2 .support-terms-dialog-head { padding: 21px 54px 17px 17px; }
  .ui-v2 .support-terms-dialog-head h2 { font-size: 23px; }
  .ui-v2 .support-terms-scroll { padding: 18px 15px 28px; }
  .ui-v2 .support-contact-intro,
  .ui-v2 .warranty-terms-heading { grid-template-columns: 32px minmax(0, 1fr); gap: 11px; }
  .ui-v2 .support-section-number { width: 32px; height: 32px; }
  .ui-v2 .support-contact-card { grid-template-columns: 1fr; padding: 13px; }
  .ui-v2 .support-qr-frame { min-height: 0; }
  .ui-v2 .support-qr-frame img { width: min(100%, 190px); }
  .ui-v2 .support-contact-meta { justify-items: center; text-align: center; }
  .ui-v2 .warranty-rules > section { padding: 17px 16px; font-size: 13px; }
  .ui-v2 .support-terms-dialog-actions { align-items: stretch; flex-direction: column; gap: 9px; padding: 12px 15px; }
  .ui-v2 .support-terms-dialog-actions > div { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .ui-v2 .redeem-flow-card.is-processing #redeemPage,
  .ui-v2 .redeem-flow-card.is-success #redeemPage,
  .ui-v2 .success-celebration { min-height: 410px; padding-inline: 16px; }
  .ui-v2 .progress-panel { padding: 23px 18px 20px; }
  .ui-v2 .progress-head { align-items: flex-start; }
  .ui-v2 .progress-meta { flex-direction: column; gap: 5px; }
  .ui-v2 .queue-personal-summary, .ui-v2 .queue-tier-list { grid-template-columns: 1fr; }
  .ui-v2 .customer-queue-overview > header { align-items: flex-start; flex-direction: column; }
  .ui-v2 .confetti-field { inset: -62px -28px -82px; }
  .ui-v2 .confetti-emitter { bottom: 24px; transform: scale(.78); }
  .ui-v2 .emitter-left { left: -112px; }
  .ui-v2 .emitter-right { right: -112px; }
  .ui-v2 .success-aura { width: 248px; height: 248px; }
  .ui-v2 .success-energy { width: 196px; height: 196px; }
  .ui-v2 .energy-sweep { width: 164px; }
  .ui-v2 .confirm-dialog form { padding: 29px 22px; }
  .ui-v2 .dialog-actions { grid-template-columns: 1fr; }
  .ui-v2 .metrics { grid-template-columns: 1fr; }
  .ui-v2 .grid-form, .ui-v2 .proxy-form, .ui-v2 .accounting-filter { grid-template-columns: 1fr; }
  .ui-v2 .grid-form .card-combined-field { grid-column: 1; }
  .ui-v2 .panel-head { display: block; }
  .ui-v2 .panel-head > button, .ui-v2 .panel-actions { margin-top: 14px; }
  .panel-actions { justify-content: flex-start; }
  .ui-v2 .admin-main header > span { display: none; }
}

/* ============================================================
   排版与按钮优化（2026-08-13）
   仅调整尺寸、间距与层级；配色沿用既有 token，未新增任何色值。
   ============================================================ */

/* 主按钮：去掉外投影与右侧圆圈箭头，降高 54 -> 46。 */
.ui-v2 .primary {
  min-height: 46px;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, #e6655a, #d55043);
  font-weight: 700;
}
.ui-v2 .primary:hover {
  background: linear-gradient(180deg, #ec7064, #dd584a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.ui-v2 .primary[disabled] {
  background: rgba(223, 89, 77, .22);
  border-color: var(--line);
  color: rgba(255, 248, 245, .48);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.ui-v2 .flow-primary {
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 0;
  padding: 0 22px;
  font-size: 15px;
}
.ui-v2 .flow-primary > span { display: none; }

/* 次级按钮：统一 44px 触控高度与圆角，语言与主按钮对齐。 */
.ui-v2 .quiet {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 13.5px;
}
.ui-v2 .flow-back {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
  color: #bdb8b1;
  font-size: 13.5px;
  text-decoration: none;
}
.ui-v2 .flow-back:hover {
  color: #f5f1eb;
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, .05);
}

/* 跳转动作：82 -> 58，图标左置，不再与主按钮争夺注意力。 */
.ui-v2 .flow-action {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 11px 34px 11px 13px;
}
.ui-v2 .flow-action strong { font-size: 13.5px; }

/* 间距节奏：组内 12、组间 28，取代原先 16/18/19/27 四个相近值。 */
.ui-v2 .session-actions { margin-bottom: 28px; }
.ui-v2 .session-field { display: block; margin-bottom: 28px; }
.ui-v2 .support-terms-gate { margin-top: 0; }
.ui-v2 .flow-buttons { margin-top: 28px; gap: 10px; }
.ui-v2 .flow-heading p { max-width: 52ch; }

/* ---------- 售后弹窗：两阶段指示 ---------- */
.ui-v2 .support-terms-stages {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 16px 30px 0;
  list-style: none;
}
.ui-v2 .support-terms-stages li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .018);
  color: #8f8a84;
  font-size: 12.5px;
  font-weight: 600;
}
.ui-v2 .support-terms-stages i {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #a8a29b;
  font-size: 10.5px;
  font-style: normal;
}
.ui-v2 .support-terms-stages li.is-done { color: #a8cbb9; border-color: rgba(138, 209, 176, .3); }
.ui-v2 .support-terms-stages li.is-done i { background: rgba(138, 209, 176, .18); color: var(--green); }
.ui-v2 .support-terms-stages li.is-done i::before { content: "✓"; }
.ui-v2 .support-terms-stages li.is-done i { font-size: 0; }
.ui-v2 .support-terms-stages li.is-done i::before { font-size: 10.5px; }
.ui-v2 .support-terms-stages li.is-current {
  color: #f1ede6;
  border-color: rgba(255, 185, 71, .34);
  background: rgba(196, 127, 23, .08);
}
.ui-v2 .support-terms-stages li.is-current i { background: var(--warning); color: #241a08; }

/* ---------- 售后弹窗：阅读进度 ---------- */
.ui-v2 .warranty-read-progress { padding: 14px 30px 0; }
.ui-v2 .warranty-read-bar {
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.ui-v2 .warranty-read-bar > i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: var(--warning);
  transition: width .2s ease;
}
.ui-v2 .warranty-read-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  color: #8f8a84;
  font-size: 11.5px;
}

/* ---------- 售后弹窗：客服折叠条 ---------- */
.ui-v2 .support-contact-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(138, 209, 176, .26);
  border-radius: 12px;
  background: rgba(138, 209, 176, .07);
  color: #cfc8c0;
  font-size: 13px;
  text-align: left;
}
.ui-v2 .support-contact-summary > span::before { content: "✓ "; color: var(--green); font-weight: 700; }
.ui-v2 .support-contact-summary > b { color: #e8c384; font-size: 12.5px; font-weight: 650; }
.ui-v2 .support-contact-summary:hover { border-color: rgba(138, 209, 176, .45); }

/* ---------- 售后弹窗：确认框移入底栏，与提交按钮同屏 ---------- */
.ui-v2 .support-terms-dialog-actions {
  display: block;
  padding: 15px 30px 16px;
}
.ui-v2 .support-ack {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 185, 71, .26);
  border-radius: 12px;
  background: rgba(196, 127, 23, .07);
  cursor: pointer;
}
.ui-v2 .support-ack input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.ui-v2 .support-ack span { color: #cfc8c0; font-size: 12.5px; line-height: 1.65; }
.ui-v2 .support-ack span b { display: block; color: #f1ede6; font-weight: 650; }
.ui-v2 .support-ack span em { font-style: normal; color: #e8c384; font-weight: 600; }
.ui-v2 .support-ack input:disabled { cursor: not-allowed; }
.ui-v2 .support-ack:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.ui-v2 .support-terms-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.ui-v2 .support-terms-actions-row > span { color: #827c75; font-size: 11px; }
.ui-v2 .support-terms-actions-row > div { display: flex; gap: 9px; }
.ui-v2 .warranty-scroll-hint[data-state="ready"] { color: #8edbb9; }

@media (max-width: 720px) {
  .ui-v2 .support-terms-stages,
  .ui-v2 .warranty-read-progress { padding-left: 20px; padding-right: 20px; }
  .ui-v2 .support-terms-dialog-actions { padding: 13px 20px 14px; }
  .ui-v2 .support-terms-actions-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .ui-v2 .support-terms-actions-row > div { flex-direction: column-reverse; }
  .ui-v2 .support-terms-actions-row button { width: 100%; }
}

/* ============================================================
   修正：门禁由弹窗改为页面后遗留的尺寸问题（2026-08-13）
   ============================================================ */

/* 三步流程：原网格只为两步准备了 3 列，5 个子元素会断行。 */
.ui-v2 .flow-steps-3 { grid-template-columns: 1fr 18px 1fr 18px 1fr; }

/* 页面容器比原弹窗窄得多，以下都是弹窗专用尺寸，必须在页面语境里收回。 */
.ui-v2 .support-terms-page .support-terms-dialog-shell {
  display: block;
  max-height: none;
}
.ui-v2 .support-terms-page .support-terms-dialog-head { padding: 0 0 4px; }
.ui-v2 .support-terms-page .support-terms-stages,
.ui-v2 .support-terms-page .warranty-read-progress { padding-left: 0; padding-right: 0; }
.ui-v2 .support-terms-page .support-terms-scroll {
  max-height: min(52vh, 440px);
  padding: 16px 0 18px;
  overflow-x: hidden;
}
.ui-v2 .support-terms-page .support-terms-dialog-actions {
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  background: none;
  box-shadow: none;
}

/* 二维码卡片：左右并排需要 628px 以上，页面里放不下，改为卡内纵向堆叠。 */
.ui-v2 .support-terms-page .support-contact-card {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 11px;
  padding: 13px;
}
.ui-v2 .support-terms-page .support-contact-meta { justify-items: center; text-align: center; }
.ui-v2 .support-terms-page .support-qr-frame { min-height: 0; width: 100%; }
.ui-v2 .support-terms-page .support-qr-frame img { max-width: 150px; max-height: 150px; }
/* 账号名过长时截断而不是撑破容器。 */
.ui-v2 .support-terms-page .support-contact-meta > strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* 防封指南：两栏在窄容器里改为单栏。 */
.ui-v2 .safety-columns { display: grid; gap: 12px; }
.ui-v2 .safety-block { border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; }
.ui-v2 .safety-block h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; }
.ui-v2 .safety-block h4 > i {
  display: grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; font-style: normal; font-size: 11px;
}
.ui-v2 .safety-do { border-color: rgba(138, 209, 176, .28); background: rgba(138, 209, 176, .055); }
.ui-v2 .safety-do h4 { color: #a8cbb9; }
.ui-v2 .safety-do h4 > i { background: rgba(138, 209, 176, .2); color: var(--green); }
.ui-v2 .safety-dont { border-color: rgba(240, 128, 115, .28); background: rgba(240, 128, 115, .055); }
.ui-v2 .safety-dont h4 { color: #f0a79c; }
.ui-v2 .safety-dont h4 > i { background: rgba(240, 128, 115, .2); color: var(--danger); }
.ui-v2 .safety-block ul { margin: 0; padding: 0; list-style: none; }
.ui-v2 .safety-block li {
  position: relative; padding: 0 0 8px 15px;
  color: #b8b1a8; font-size: 13px; line-height: 1.7;
}
.ui-v2 .safety-block li:last-child { padding-bottom: 0; }
.ui-v2 .safety-block li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 4px; height: 4px; border-radius: 50%;
}
.ui-v2 .safety-do li::before { background: rgba(138, 209, 176, .6); }
.ui-v2 .safety-dont li::before { background: rgba(240, 128, 115, .6); }
.ui-v2 .safety-block li strong { color: #e8e3dc; font-weight: 650; }
.ui-v2 .safety-critical {
  margin-top: 12px; padding: 13px 15px; border-radius: 14px;
  border: 1px solid rgba(240, 128, 115, .4); background: rgba(240, 128, 115, .09);
}
.ui-v2 .safety-critical > strong { display: block; margin-bottom: 6px; color: #f0a79c; font-size: 13px; }
.ui-v2 .safety-critical p { margin: 0; color: #c9c2ba; font-size: 12.5px; line-height: 1.7; }
.ui-v2 .safety-critical strong { color: #f0a79c; }
.ui-v2 .safety-tool {
  margin-top: 12px; padding: 13px 15px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .018);
}
.ui-v2 .safety-tool > strong { display: block; margin-bottom: 5px; color: #e8e3dc; font-size: 13px; }
.ui-v2 .safety-tool p { margin: 0; color: #a8a29b; font-size: 12.5px; line-height: 1.65; }
.ui-v2 .safety-tool a { color: #e8c384; }

@media (min-width: 760px) {
  .ui-v2 .safety-columns { grid-template-columns: 1fr 1fr; align-items: start; }
  .ui-v2 .support-terms-page .support-qr-frame img { max-width: 168px; max-height: 168px; }
}

/* ============================================================
   第二步入口卡 + 规则可读性（2026-08-13）
   长文本回到 900px 弹窗，行长、行高、层级按可读性重排。
   ============================================================ */
.ui-v2 .terms-entry-list { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.ui-v2 .terms-entry-list li {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 13px;
  padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .018);
}
.ui-v2 .terms-entry-list li > i {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .06); color: #a8a29b; font-style: normal; font-size: 13px; font-weight: 700;
}
.ui-v2 .terms-entry-list li > b { color: #f1ede6; font-size: 14.5px; font-weight: 650; }
.ui-v2 .terms-entry-list li > span { color: #8f8a84; font-size: 12.5px; }
.ui-v2 .terms-entry-list li.is-done { border-color: rgba(138, 209, 176, .3); background: rgba(138, 209, 176, .06); }
.ui-v2 .terms-entry-list li.is-done > i { background: rgba(138, 209, 176, .2); color: var(--green); font-size: 0; }
.ui-v2 .terms-entry-list li.is-done > i::before { content: "✓"; font-size: 14px; }
.ui-v2 .terms-entry-open { width: 100%; }
.ui-v2 .terms-entry-hint { margin: 11px 0 0; color: #8f8a84; font-size: 12.5px; text-align: center; }

/* 规则正文：靠间距与竖线分层，取消八个并列边框。 */
.ui-v2 .warranty-rules { display: grid; gap: 20px; }
.ui-v2 .warranty-rules > section {
  max-width: 46em;                      /* 行长上限，约 40-46 个汉字 */
  padding: 0 0 0 16px;
  border: 0;
  border-left: 2px solid rgba(223, 89, 77, .5);
  border-radius: 0;
  background: none;
  color: #b8b1a8;
  font-size: 14px;
  line-height: 1.9;
}
.ui-v2 .warranty-rules > section > h4 {
  margin: 0 0 10px; color: #f1ede6; font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
}
.ui-v2 .warranty-rules > section > h5 { margin: 14px 0 6px; color: #e8e3dc; font-size: 14px; font-weight: 650; }
.ui-v2 .warranty-rules p { margin: 0 0 12px; }
.ui-v2 .warranty-rules p:last-child { margin-bottom: 0; }
.ui-v2 .warranty-rules ol,
.ui-v2 .warranty-rules ul { margin: 0 0 12px; padding-left: 1.35em; }
.ui-v2 .warranty-rules li { margin-bottom: 8px; }
.ui-v2 .warranty-rules li:last-child { margin-bottom: 0; }
.ui-v2 .warranty-rules strong { color: #e8e3dc; font-weight: 650; }
.ui-v2 .warranty-emphasis strong,
.ui-v2 .warranty-formula strong { color: #f0a79c; }
.ui-v2 .warranty-rules a { color: #e8c384; }

/* 弹窗内二维码恢复并排，宽度够用。 */
.ui-v2 .support-terms-dialog .support-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 三步流程：原样式把子元素钉死在固定列上（i -> 2、stepMarker1 -> 1、
   stepMarker2 -> 3），新增的 stepMarker3 无处安放才换行。这里按三步重新指派，
   选择器带上 .flow-steps-3 以匹配原 ID 规则的优先级。 */
.ui-v2 .flow-steps-3 i { grid-column: auto; }
.ui-v2 .flow-steps-3 #stepMarker1 { grid-column: 1; }
.ui-v2 .flow-steps-3 #stepMarker2 { grid-column: 3; margin-left: 0; }
.ui-v2 .flow-steps-3 #stepMarker3 { grid-column: 5; }
/* ============================================================
   可读性修正（2026-08-13）：整体放大，并重排嵌套列表层级。
   "乱" 的主因是规则用了 ol > li > ul > li > p 四层嵌套，
   原样式只给了 padding-left，层与层之间没有视觉区分。
   ============================================================ */

/* —— 弹窗整体放大 —— */
.ui-v2 .support-terms-dialog { width: min(1040px, calc(100% - 32px)); }
.ui-v2 .support-terms-dialog-head h2 { font-size: 23px; }
.ui-v2 .support-terms-dialog-head p { font-size: 14px; }
.ui-v2 .support-terms-stages li { font-size: 14px; padding: 11px 15px; }
.ui-v2 .support-terms-stages i { width: 22px; height: 22px; font-size: 12px; }

/* —— 二维码放大 —— */
.ui-v2 .support-qr-frame { min-height: 0; padding: 12px; }
.ui-v2 .support-qr-frame img { max-width: 100%; width: 240px; max-height: none; }
.ui-v2 .support-contact-meta > span { font-size: 12.5px; }
.ui-v2 .support-contact-meta > strong { font-size: 17px; }
.ui-v2 .support-contact-card { padding: 18px; }

/* —— 规则正文放大 —— */
.ui-v2 .warranty-rules { gap: 26px; }
.ui-v2 .warranty-rules > section {
  max-width: 44em;
  font-size: 15px;
  line-height: 2;
  padding-left: 18px;
}
.ui-v2 .warranty-rules > section > h4 { margin: 0 0 12px; font-size: 17px; }
.ui-v2 .warranty-rules > section > h5 { margin: 18px 0 8px; font-size: 15px; }
.ui-v2 .warranty-rules p { margin: 0 0 14px; }

/* —— 嵌套列表：靠缩进 + 标记形状区分层级，不再挤成一团 —— */
.ui-v2 .warranty-rules ol { margin: 0 0 14px; padding-left: 1.6em; }
.ui-v2 .warranty-rules ol > li { margin-bottom: 12px; padding-left: .3em; }
.ui-v2 .warranty-rules ol > li::marker { color: #e5928a; font-weight: 700; }
/* 第二层：换成方块标记并额外缩进，和第一层拉开距离 */
.ui-v2 .warranty-rules li ul { margin: 10px 0 10px; padding-left: 1.4em; list-style: none; }
.ui-v2 .warranty-rules li ul > li { position: relative; margin-bottom: 8px; padding-left: 14px; }
.ui-v2 .warranty-rules li ul > li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 5px; height: 5px; border-radius: 1px; background: rgba(223, 89, 77, .55);
}
/* 嵌在 li 里的说明段落：缩进并压低对比，明确是补充说明 */
.ui-v2 .warranty-rules li > p {
  margin: 10px 0 0; padding: 10px 13px;
  border-left: 2px solid var(--line-strong); border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, .022); font-size: 14px; color: #a8a29b;
}

/* —— 防封指南同步放大 —— */
.ui-v2 .safety-block { padding: 18px 19px; }
.ui-v2 .safety-block h4 { font-size: 15px; margin-bottom: 12px; }
.ui-v2 .safety-block li { font-size: 14.5px; line-height: 1.85; padding: 0 0 10px 17px; }
.ui-v2 .safety-block li::before { top: 10px; width: 5px; height: 5px; }
.ui-v2 .safety-critical > strong { font-size: 14.5px; }
.ui-v2 .safety-critical p { font-size: 14px; line-height: 1.85; }
.ui-v2 .safety-tool > strong { font-size: 14px; }
.ui-v2 .safety-tool p { font-size: 13.5px; }

/* —— 底栏确认区放大 —— */
.ui-v2 .support-ack span { font-size: 14px; line-height: 1.75; }
.ui-v2 .support-ack span b { font-size: 15px; margin-bottom: 3px; }
.ui-v2 .support-ack input { width: 20px; height: 20px; }
/* ============================================================
   修复重叠（2026-08-13）
   外壳原本是三行网格（头部/滚动区/底栏）。新增三小节指示条与阅读进度条后
   变成 5 个子元素，弹性行 minmax(0,1fr) 错位到指示条上，滚动区高度失控导致重叠。
   按实际子元素数量重新声明五行。
   ============================================================ */
.ui-v2 .support-terms-dialog .support-terms-dialog-shell {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
/* 指示条与进度条不参与弹性伸缩，各自占自然高度。 */
.ui-v2 .support-terms-stages,
.ui-v2 .warranty-read-progress { align-self: start; }
.ui-v2 .support-terms-stages li { border-radius: 10px; }
/* 客服折叠条是滚动区内的第一个元素，与指示条之间留出间距。 */
.ui-v2 .support-contact-summary { margin-bottom: 18px; }
/* ============================================================
   底栏可见性 + 再次放大（2026-08-13）
   弹窗 overflow:hidden，五行网格下内容超出 max-height 时底栏被裁掉，
   用户找不到「下一步」。这里锁死外壳高度并把底栏固定在底部。
   ============================================================ */
.ui-v2 .support-terms-dialog .support-terms-dialog-shell {
  height: min(90dvh, 920px);
  max-height: min(90dvh, 920px);
}
.ui-v2 .support-terms-dialog .support-terms-dialog-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* —— 正文再放大一档，匹配 1040px 的弹窗宽度 —— */
.ui-v2 .safety-block li { font-size: 16px; line-height: 1.9; padding: 0 0 12px 18px; }
.ui-v2 .safety-block li::before { top: 11px; }
.ui-v2 .safety-block h4 { font-size: 16.5px; }
.ui-v2 .safety-critical > strong { font-size: 16px; }
.ui-v2 .safety-critical p { font-size: 15.5px; line-height: 1.9; }
.ui-v2 .safety-tool > strong { font-size: 15.5px; }
.ui-v2 .safety-tool p { font-size: 15px; line-height: 1.85; }
.ui-v2 .warranty-terms-heading h3,
.ui-v2 .warranty-safety-section .warranty-terms-heading h3 { font-size: 22px; }
.ui-v2 .warranty-terms-heading p { font-size: 15px; line-height: 1.8; }
.ui-v2 .warranty-rules > section { font-size: 16px; line-height: 2.05; }
.ui-v2 .warranty-rules > section > h4 { font-size: 18.5px; }
.ui-v2 .warranty-rules li { font-size: 16px; }
.ui-v2 .warranty-rules li > p { font-size: 15px; }
.ui-v2 .support-contact-summary { font-size: 14.5px; }
.ui-v2 .support-terms-stages li { font-size: 15px; }
/* 网络自测块紧随该做/不该做，视觉上归入同一组：与上方贴近、与下方风险警告拉开。 */
.ui-v2 .safety-tool { margin-top: 12px; margin-bottom: 22px; }
.ui-v2 .safety-tool p + p { margin-top: 10px; }
.ui-v2 .safety-tool small {
  display: block; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line);
  color: #8f8a84; font-size: 13px; line-height: 1.7;
}
.ui-v2 .safety-tool a { color: #e8c384; text-underline-offset: 3px; }
.ui-v2 .safety-critical { margin-top: 0; }
/* ============================================================
   防封面板合并（2026-08-13）
   使用指南 / 严禁以下操作 / 网络自测 三块并入同一个面板，
   共用一圈边框，内部靠分隔线划分，不再是三个各自独立的卡片。
   ============================================================ */
.ui-v2 .safety-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .015);
  padding: 16px;
  margin-bottom: 22px;
}
.ui-v2 .safety-panel .safety-columns { margin: 0; }
.ui-v2 .safety-net {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ui-v2 .safety-net > strong {
  display: block;
  margin-bottom: 7px;
  color: #e8e3dc;
  font-size: 15.5px;
  font-weight: 650;
}
.ui-v2 .safety-net p { margin: 0; color: #b8b1a8; font-size: 15px; line-height: 1.9; }
.ui-v2 .safety-net strong { color: #e8e3dc; font-weight: 650; }
.ui-v2 .safety-net a { color: #e8c384; text-underline-offset: 3px; }
.ui-v2 .safety-net small {
  display: block;
  margin-top: 10px;
  color: #8f8a84;
  font-size: 13px;
  line-height: 1.7;
}
/* 网络自测并入「使用指南」栏内：与列表拉开但仍属同栏，两栏顶部对齐。 */
.ui-v2 .safety-columns { align-items: start; }
.ui-v2 .safety-do .safety-net { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(138, 209, 176, .22); }
.ui-v2 .safety-net p + p { margin-top: 8px; }
/* 完整邀请链接：整行可点、可选中复制，长地址允许换行不撑破容器。 */
.ui-v2 .safety-link { margin-top: 10px !important; }
.ui-v2 .safety-link a {
  display: inline-block;
  padding: 9px 12px;
  border: 1px solid rgba(232, 195, 132, .35);
  border-radius: 8px;
  background: rgba(232, 195, 132, .08);
  color: #e8c384;
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.ui-v2 .safety-link a:hover { border-color: rgba(232, 195, 132, .6); background: rgba(232, 195, 132, .14); }
/* ============================================================
   底栏可见性最终修正（2026-08-13）
   之前外层弹窗与内层外壳都设了 min(90dvh,920px)，内层按外框尺寸撑开，
   加上边框后整体溢出可视区，底栏被推到屏幕外。
   改为：外层定高，内层 100% 撑满，底栏固定在末行。
   ============================================================ */
.ui-v2 .support-terms-dialog {
  height: min(86dvh, 880px);
  max-height: min(86dvh, 880px);
  overflow: hidden;
}
.ui-v2 .support-terms-dialog .support-terms-dialog-shell {
  height: 100%;
  max-height: 100%;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
/* 底栏做出明确的分隔与底色，让它读起来就是一条固定操作栏。 */
.ui-v2 .support-terms-dialog .support-terms-dialog-actions {
  position: static;
  border-top: 1px solid var(--line-strong);
  background: #101012;
  box-shadow: 0 -14px 30px rgba(0, 0, 0, .45);
}
/* 滚动区末尾留白，避免最后一行文字紧贴底栏。 */
.ui-v2 .support-terms-dialog .support-terms-scroll { padding-bottom: 26px; }
/* ============================================================
   底栏消失的真正原因（2026-08-13）
   外壳用网格按位置分行，但阅读进度条只在「规则」小节显示，
   其余小节为 display:none —— 隐藏元素不占网格行，后续元素整体上移一行：
   滚动区落到 auto 行被内容撑开，底栏被挤出弹窗并被 overflow:hidden 裁掉。
   改用 flex 纵向布局：谁隐藏都不影响其余元素的角色。
   ============================================================ */
.ui-v2 .support-terms-dialog .support-terms-dialog-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  grid-template-rows: none;
}
.ui-v2 .support-terms-dialog .support-terms-dialog-head,
.ui-v2 .support-terms-dialog .support-terms-stages,
.ui-v2 .support-terms-dialog .warranty-read-progress,
.ui-v2 .support-terms-dialog .support-terms-dialog-actions {
  flex: 0 0 auto;
}
.ui-v2 .support-terms-dialog .support-terms-scroll {
  flex: 1 1 auto;
  min-height: 0;
}
/* ============================================================
   弹窗与字号大幅放大（2026-08-13）
   ============================================================ */
.ui-v2 .support-terms-dialog {
  width: min(1320px, calc(100% - 24px));
  height: min(92dvh, 1080px);
  max-height: min(92dvh, 1080px);
}
.ui-v2 .support-terms-dialog .support-terms-scroll { padding: 22px 34px 30px; }
.ui-v2 .support-terms-dialog .support-terms-dialog-head { padding: 24px 34px 6px; }
.ui-v2 .support-terms-dialog .support-terms-stages,
.ui-v2 .support-terms-dialog .warranty-read-progress { padding-left: 34px; padding-right: 34px; }
.ui-v2 .support-terms-dialog .support-terms-dialog-actions { padding: 18px 34px 20px; }

/* —— 头部与小节 —— */
.ui-v2 .support-terms-dialog-head h2 { font-size: 30px; }
.ui-v2 .support-terms-dialog-head p { font-size: 16px; }
.ui-v2 .support-terms-stages li { font-size: 17px; padding: 14px 18px; }
.ui-v2 .support-terms-stages i { width: 26px; height: 26px; font-size: 14px; }

/* —— 防封 —— */
.ui-v2 .warranty-terms-heading h3 { font-size: 27px; }
.ui-v2 .warranty-terms-heading p { font-size: 17px; line-height: 1.85; }
.ui-v2 .safety-block h4 { font-size: 20px; margin-bottom: 15px; }
.ui-v2 .safety-block h4 > i { width: 24px; height: 24px; font-size: 14px; }
.ui-v2 .safety-block li { font-size: 19px; line-height: 1.85; padding: 0 0 14px 22px; }
.ui-v2 .safety-block li::before { top: 13px; width: 6px; height: 6px; }
.ui-v2 .safety-net > strong { font-size: 19px; }
.ui-v2 .safety-net p { font-size: 18px; line-height: 1.85; }
.ui-v2 .safety-net small { font-size: 15px; }
.ui-v2 .safety-link a { font-size: 16px; padding: 12px 15px; }
.ui-v2 .safety-critical > strong { font-size: 19px; }
.ui-v2 .safety-critical p { font-size: 18px; line-height: 1.85; }

/* —— 规则 —— */
.ui-v2 .warranty-rules { gap: 34px; }
.ui-v2 .warranty-rules > section { font-size: 19px; line-height: 2; max-width: 46em; padding-left: 22px; }
.ui-v2 .warranty-rules > section > h4 { font-size: 24px; margin-bottom: 15px; }
.ui-v2 .warranty-rules > section > h5 { font-size: 19.5px; }
.ui-v2 .warranty-rules li { font-size: 19px; }
.ui-v2 .warranty-rules li > p { font-size: 18px; }

/* —— 客服二维码 —— */
.ui-v2 .support-qr-frame img { width: 300px; }
.ui-v2 .support-contact-meta > strong { font-size: 22px; }
.ui-v2 .support-contact-meta > span { font-size: 15px; }
.ui-v2 .support-contact-intro h3 { font-size: 24px; }
.ui-v2 .support-contact-intro p { font-size: 17px; line-height: 1.8; }
.ui-v2 .support-contact-summary { font-size: 17px; padding: 16px 20px; }

/* —— 底栏 —— */
.ui-v2 .support-ack span { font-size: 17px; line-height: 1.75; }
.ui-v2 .support-ack span b { font-size: 18px; }
.ui-v2 .support-ack input { width: 24px; height: 24px; }
.ui-v2 .support-terms-dialog .primary,
.ui-v2 .support-terms-dialog .quiet { min-height: 52px; font-size: 17px; padding: 0 26px; }
.ui-v2 .support-terms-actions-row > span { font-size: 14px; }
/* ============================================================
   排队区放大 + 礼花筒处理（2026-08-13）
   ============================================================ */

/* —— 实时排队情况：整体放大 —— */
.ui-v2 .customer-queue-overview h2 { font-size: 27px; }
.ui-v2 .customer-queue-overview .eyebrow { font-size: 13px; }
.ui-v2 .queue-live-indicator { font-size: 15px; }
.ui-v2 .queue-personal-summary > div { padding: 18px 22px; }
.ui-v2 .queue-personal-summary span { font-size: 15px; }
.ui-v2 .queue-personal-summary strong { font-size: 26px; }
.ui-v2 .queue-tier-list > * { padding: 16px 20px; }
.ui-v2 .queue-tier-list strong,
.ui-v2 .queue-tier-list b { font-size: 18px; }
.ui-v2 .queue-tier-list span,
.ui-v2 .queue-tier-list small,
.ui-v2 .queue-tier-list div { font-size: 15px; }
.ui-v2 .queue-estimate-note { font-size: 15px; line-height: 1.8; }
.ui-v2 .queue-adjustment { font-size: 15.5px; }

/* —— 进度区内嵌的紧凑排队面板同步放大 —— */
.ui-v2 .queue-customer-surface-compact .queue-personal-summary strong { font-size: 22px; }
.ui-v2 .queue-customer-surface-compact .queue-personal-summary span { font-size: 14px; }

/* —— 成功页文案放大 —— */
.ui-v2 .success-celebration h2 { font-size: 34px; }
.ui-v2 #successProductMessage { font-size: 19px; line-height: 1.8; }
.ui-v2 .success-followup { font-size: 17px; line-height: 1.9; }
.ui-v2 .success-support { font-size: 16px; }
.ui-v2 .success-return { min-height: 56px; font-size: 17px; }

/* —— 礼花筒：Noto emoji 喷口自带一簇密集碎彩带，与画布飘落的彩带质感冲突，
   视觉噪点过重。保留 DOM（redeem.js 的动画逻辑依赖这两个节点），只隐藏图像，
   庆祝效果交给 canvas-confetti。 —— */
.ui-v2 .party-popper { display: none; }
/* 礼花筒恢复显示：改用无碎彩带的干净锥形喷口。 */
.ui-v2 .party-popper { display: block; }

/* ============================================================
   成功徽章持续动效（2026-08-13）
   原来只在出现时播一次，之后完全静止，看起来像卡住。
   改为常驻的缓慢呼吸 + 环形扫光 + 光晕脉动。
   ============================================================ */
.ui-v2 .success-mark { position: relative; animation: successBreath 2.8s ease-in-out infinite; }
.ui-v2 .success-mark::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 62%, rgba(255, 255, 255, .5) 78%, rgba(255, 214, 138, .35) 86%, transparent 100%);
  animation: successSheen 3.4s linear infinite;
  pointer-events: none;
}
.ui-v2 .success-mark > i { position: relative; z-index: 1; }
@keyframes successBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes successSheen { to { transform: rotate(360deg); } }

/* 外圈光晕跟着脉动，避免整块画面静止。 */
.ui-v2 .success-aura > i { animation: successAura 3.6s ease-in-out infinite; }
.ui-v2 .success-aura > i:nth-child(2) { animation-delay: .6s; }
.ui-v2 .success-aura > i:nth-child(3) { animation-delay: 1.2s; }
@keyframes successAura {
  0%, 100% { opacity: .34; transform: scale(1); }
  50% { opacity: .62; transform: scale(1.06); }
}

/* 礼花筒轻微摇摆，让两侧不至于死板。 */
.ui-v2 .party-popper { animation: popperSway 4.2s ease-in-out infinite; }
.ui-v2 .party-popper-right { animation-delay: .9s; }
@keyframes popperSway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-v2 .success-mark,
  .ui-v2 .success-mark::after,
  .ui-v2 .success-aura > i,
  .ui-v2 .party-popper { animation: none; }
}
/* ============================================================
   修正（2026-08-13）
   上一版把 .success-mark i 的 position 从 absolute 改成 relative，
   打断了对勾在圆心的绝对定位，导致 √ 消失；同时 ::after 的锥形扫光
   盖在对勾上方。这里恢复定位、撤掉遮挡，改由已有的 energy-orbit 承担
   持续转动，并用 ease-in-out 做出忽快忽慢的节奏。
   ============================================================ */
.ui-v2 .success-mark::after { content: none; }
.ui-v2 .success-mark > i { position: absolute; z-index: 3; }

/* 光环持续转动：ease-in-out 让它一圈之内自然加速再减速。 */
.ui-v2 .success-celebration.is-active .energy-orbit {
  animation: energyOrbit 1.25s cubic-bezier(.16, 1, .3, 1) .18s both,
             orbitSpin 5.2s ease-in-out 1.4s infinite;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* 第二层反向慢转，两层速度不同，叠出忽快忽慢的层次。 */
.ui-v2 .success-celebration.is-active .energy-core {
  animation: energyCore .95s cubic-bezier(.16, 1, .3, 1) .24s both,
             corePulse 3.1s ease-in-out 1.4s infinite;
}
@keyframes corePulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* 三圈光晕错开呼吸，保持画面不静止。 */
.ui-v2 .success-celebration.is-active .success-aura i {
  animation: successRing 1.7s cubic-bezier(.16, 1, .3, 1) .32s both,
             auraBreath 4.4s ease-in-out 2s infinite;
}
.ui-v2 .success-celebration.is-active .success-aura i:nth-child(2) { animation-delay: .49s, 2.6s; }
.ui-v2 .success-celebration.is-active .success-aura i:nth-child(3) { animation-delay: .66s, 3.2s; }
@keyframes auraBreath {
  0%, 100% { opacity: .30; transform: scale(1); }
  50% { opacity: .72; transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-v2 .success-celebration.is-active .energy-orbit,
  .ui-v2 .success-celebration.is-active .energy-core,
  .ui-v2 .success-celebration.is-active .success-aura i,
  .ui-v2 .party-popper { animation: none; }
}
/* ============================================================
   光环丝滑化 + 与徽章同心（2026-08-13）
   上一版用 ease-in-out + infinite：每圈末尾减速到零再重新起步，
   看起来就是"转一下卡一下"。改为 linear 保证匀速不停顿，
   把快慢写进关键帧的角度分布里，形成自然的时快时慢。
   ============================================================ */
@keyframes orbitSpin {
  0%   { transform: rotate(0deg); }
  22%  { transform: rotate(122deg); }
  40%  { transform: rotate(168deg); }
  62%  { transform: rotate(288deg); }
  82%  { transform: rotate(322deg); }
  100% { transform: rotate(360deg); }
}
.ui-v2 .success-celebration.is-active .energy-orbit {
  animation: energyOrbit 1.25s cubic-bezier(.16, 1, .3, 1) .18s both,
             orbitSpin 6.5s linear 1.4s infinite;
}

/* 第二层反向慢转，与主环速度不同，叠出层次而不是同步转圈。 */
@keyframes orbitSpinReverse {
  0%   { transform: rotate(0deg); }
  28%  { transform: rotate(-64deg); }
  52%  { transform: rotate(-186deg); }
  76%  { transform: rotate(-236deg); }
  100% { transform: rotate(-360deg); }
}
.ui-v2 .success-celebration.is-active .energy-sweep {
  animation: energyOrbitSweep .88s cubic-bezier(.16, 1, .3, 1) .28s both,
             orbitSpinReverse 9.5s linear 1.5s infinite;
  transform-origin: 0 50%;
}

/* 中心光晕改为平滑呼吸（正弦感），不做突变。 */
@keyframes corePulse {
  0%, 100% { opacity: .58; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
.ui-v2 .success-celebration.is-active .energy-core {
  animation: energyCore .95s cubic-bezier(.16, 1, .3, 1) .24s both,
             corePulse 4.6s ease-in-out 1.4s infinite;
}

/* —— 光晕与徽章同心：把两层特效下移到圆球所在高度 —— */
.ui-v2 .success-aura { top: 46%; }
.ui-v2 .success-energy { top: 46%; left: 50%; transform: translate(-50%, -50%); }

@media (prefers-reduced-motion: reduce) {
  .ui-v2 .success-celebration.is-active .energy-orbit,
  .ui-v2 .success-celebration.is-active .energy-sweep,
  .ui-v2 .success-celebration.is-active .energy-core,
  .ui-v2 .success-celebration.is-active .success-aura i,
  .ui-v2 .party-popper { animation: none; }
}
/* ============================================================
   光环与徽章严格同心（2026-08-13）
   之前用百分比把光晕层定位在成功区内，而成功区高度会随文案变化，
   估多少都会偏。改为把光环画在 .success-mark 自身的 ::before 上，
   inset 相对球体计算 —— 构造上必然同心，不需要任何估值。
   ============================================================ */
.ui-v2 .success-mark::before {
  content: "";
  position: absolute;
  inset: -38px;                 /* 78px 球 + 两侧 38px = 154px 光环 */
  z-index: -1;                  /* 落在球体背景之后 */
  border-radius: 50%;
  background: conic-gradient(from 35deg,
    transparent 0 9%,
    rgba(255, 236, 173, .84) 11%,
    transparent 13% 35%,
    rgba(224, 159, 36, .4) 37%,
    transparent 40% 74%,
    rgba(255, 224, 133, .6) 76%,
    transparent 79%);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64% 67%, transparent 69%);
  mask: radial-gradient(circle, transparent 62%, #000 64% 67%, transparent 69%);
  filter: drop-shadow(0 0 7px rgba(255, 198, 74, .45));
  animation: orbitSpin 6.5s linear infinite;
  pointer-events: none;
}

/* 外层再加一圈更大、反向、更慢的光弧，同样以球心为中心。 */
.ui-v2 .success-mark { isolation: auto; }
.ui-v2 .success-celebration.is-active .success-mark::before { animation: orbitSpin 6.5s linear infinite; }

/* 原先那两层靠百分比定位的特效不再需要，避免与同心光环打架。 */
.ui-v2 .success-energy { display: none; }
.ui-v2 .success-aura { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ui-v2 .success-mark::before { animation: none; }
}
/* ============================================================
   光环：呼吸与转速联动 + 双环叠加（2026-08-13）
   旋转与缩放写在同一条 transform 里才能严格同步。
   0→50% 扩张期转 215°（快），50→100% 收缩期转 145°（慢）；
   首尾角速度刻意做成接近（约 2.0 vs 2.1 度/%），循环接缝看不出来。
   ============================================================ */
@keyframes orbitBloom {
  0%   { transform: rotate(0deg)   scale(.94); opacity: .80; }
  15%  { transform: rotate(30deg)  scale(.98); opacity: .88; }
  35%  { transform: rotate(140deg) scale(1.10); opacity: 1; }
  50%  { transform: rotate(215deg) scale(1.17); opacity: 1; }
  70%  { transform: rotate(285deg) scale(1.08); opacity: .94; }
  88%  { transform: rotate(335deg) scale(.98); opacity: .86; }
  100% { transform: rotate(360deg) scale(.94); opacity: .80; }
}

/* 外环：暖金，主导视觉 */
.ui-v2 .success-mark::before {
  inset: -40px;
  animation: orbitBloom 6.8s linear infinite;
}

/* 内环：反向、更快、偏冷的白金色，与外环交错形成层次 */
@keyframes orbitBloomReverse {
  0%   { transform: rotate(0deg)    scale(1.04); opacity: .55; }
  18%  { transform: rotate(-42deg)  scale(.98); opacity: .72; }
  42%  { transform: rotate(-172deg) scale(.90); opacity: .95; }
  58%  { transform: rotate(-232deg) scale(.92); opacity: .9; }
  80%  { transform: rotate(-310deg) scale(1.0); opacity: .7; }
  100% { transform: rotate(-360deg) scale(1.04); opacity: .55; }
}
.ui-v2 .success-mark::after {
  content: "";
  position: absolute;
  inset: -22px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    transparent 0 12%,
    rgba(255, 255, 255, .9) 15%,
    transparent 19% 48%,
    rgba(255, 246, 214, .7) 52%,
    transparent 56% 82%,
    rgba(255, 210, 120, .55) 86%,
    transparent 90%);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 69% 74%, transparent 77%);
  mask: radial-gradient(circle, transparent 66%, #000 69% 74%, transparent 77%);
  filter: drop-shadow(0 0 9px rgba(255, 226, 150, .6));
  animation: orbitBloomReverse 4.9s linear infinite;
  pointer-events: none;
}

/* 球体本身随光环轻微起伏，让整体像在呼吸而不是只有环在动。 */
@keyframes markGlow {
  0%, 100% { box-shadow: 0 0 0 10px rgba(255, 207, 83, .045), 0 0 34px rgba(255, 202, 73, .38), 0 18px 46px rgba(201, 120, 9, .32), inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -8px 18px rgba(95, 52, 0, .22); }
  50%      { box-shadow: 0 0 0 14px rgba(255, 207, 83, .08),  0 0 52px rgba(255, 202, 73, .62), 0 18px 52px rgba(201, 120, 9, .4),  inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -8px 18px rgba(95, 52, 0, .22); }
}
.ui-v2 .success-celebration.is-active .success-mark { animation: successMark .9s cubic-bezier(.2, 1.45, .36, 1) .38s both, markGlow 6.8s ease-in-out 1.3s infinite; }

@media (prefers-reduced-motion: reduce) {
  .ui-v2 .success-mark::before,
  .ui-v2 .success-mark::after { animation: none; }
  .ui-v2 .success-celebration.is-active .success-mark { animation: successMark .9s cubic-bezier(.2, 1.45, .36, 1) .38s both; }
}
/* ============================================================
   加大呼吸幅度（2026-08-13）
   上一版 0.94↔1.17 只有 ±12%，在旋转干扰下看不出来；
   且内外环缩放相位相反，互相抵消。
   改为大幅度（0.70↔1.45）且两环同相位，整体一起胀缩。
   转速仍与缩放联动：扩张快、收缩慢。
   ============================================================ */
@keyframes orbitBloom {
  0%   { transform: rotate(0deg)   scale(.70); opacity: .45; }
  12%  { transform: rotate(26deg)  scale(.86); opacity: .70; }
  30%  { transform: rotate(128deg) scale(1.18); opacity: 1; }
  46%  { transform: rotate(206deg) scale(1.45); opacity: .95; }
  62%  { transform: rotate(262deg) scale(1.30); opacity: .82; }
  80%  { transform: rotate(312deg) scale(1.02); opacity: .64; }
  100% { transform: rotate(360deg) scale(.70);  opacity: .45; }
}

@keyframes orbitBloomReverse {
  0%   { transform: rotate(0deg)    scale(.64); opacity: .35; }
  12%  { transform: rotate(-24deg)  scale(.80); opacity: .58; }
  30%  { transform: rotate(-118deg) scale(1.12); opacity: .92; }
  46%  { transform: rotate(-192deg) scale(1.34); opacity: .88; }
  62%  { transform: rotate(-246deg) scale(1.20); opacity: .70; }
  80%  { transform: rotate(-300deg) scale(.94); opacity: .52; }
  100% { transform: rotate(-360deg) scale(.64); opacity: .35; }
}

/* 两环同周期，保证整体是一次完整的"胀—缩"，而不是各转各的。 */
.ui-v2 .success-mark::before { animation: orbitBloom 5.6s linear infinite; }
.ui-v2 .success-mark::after  { animation: orbitBloomReverse 5.6s linear infinite; }

/* 球体光晕同周期同相位，胀缩时一起亮暗，强化"整体在呼吸"。 */
@keyframes markGlow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(255, 207, 83, .03),  0 0 22px rgba(255, 202, 73, .26), 0 18px 46px rgba(201, 120, 9, .3), inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -8px 18px rgba(95, 52, 0, .22); }
  46%      { box-shadow: 0 0 0 18px rgba(255, 207, 83, .10), 0 0 64px rgba(255, 202, 73, .72), 0 18px 56px rgba(201, 120, 9, .44), inset 0 1px 1px rgba(255, 255, 255, .98), inset 0 -8px 18px rgba(95, 52, 0, .22); }
}
.ui-v2 .success-celebration.is-active .success-mark {
  animation: successMark .9s cubic-bezier(.2, 1.45, .36, 1) .38s both,
             markGlow 5.6s linear 1.3s infinite;
}
/* ============================================================
   彩色光环 + 更大呼吸幅度（2026-08-13）
   幅度 0.70↔1.45 提升到 0.58↔1.85；配色由暖金改为全色相镭射。
   ============================================================ */
@keyframes orbitBloom {
  0%   { transform: rotate(0deg)   scale(.58); opacity: .38; }
  12%  { transform: rotate(28deg)  scale(.82); opacity: .68; }
  30%  { transform: rotate(132deg) scale(1.26); opacity: 1; }
  46%  { transform: rotate(210deg) scale(1.85); opacity: .92; }
  62%  { transform: rotate(266deg) scale(1.58); opacity: .76; }
  80%  { transform: rotate(314deg) scale(1.06); opacity: .56; }
  100% { transform: rotate(360deg) scale(.58);  opacity: .38; }
}
@keyframes orbitBloomReverse {
  0%   { transform: rotate(0deg)    scale(.52); opacity: .30; }
  12%  { transform: rotate(-26deg)  scale(.76); opacity: .55; }
  30%  { transform: rotate(-122deg) scale(1.18); opacity: .9; }
  46%  { transform: rotate(-196deg) scale(1.66); opacity: .84; }
  62%  { transform: rotate(-250deg) scale(1.42); opacity: .66; }
  80%  { transform: rotate(-304deg) scale(.98); opacity: .46; }
  100% { transform: rotate(-360deg) scale(.52); opacity: .30; }
}

/* 外环：全色相镭射，留出透明缺口保持"光弧"而不是实心圆环。 */
.ui-v2 .success-mark::before {
  background: conic-gradient(from 0deg,
    rgba(255, 61, 129, .95)   0deg,
    rgba(255, 154, 61, .9)   42deg,
    rgba(255, 233, 92, .95)  82deg,
    transparent              104deg 128deg,
    rgba(74, 222, 128, .95) 158deg,
    rgba(34, 211, 238, .95) 198deg,
    transparent             222deg 244deg,
    rgba(96, 130, 255, .95) 276deg,
    rgba(167, 90, 255, .95) 312deg,
    rgba(255, 61, 129, .95) 360deg);
  filter: drop-shadow(0 0 10px rgba(180, 120, 255, .5)) drop-shadow(0 0 18px rgba(64, 200, 255, .3));
}

/* 内环：色相错开，与外环交错时不断产生新的配色组合。 */
.ui-v2 .success-mark::after {
  background: conic-gradient(from 160deg,
    rgba(34, 211, 238, .9)  0deg,
    rgba(167, 90, 255, .9) 56deg,
    transparent            80deg 116deg,
    rgba(255, 233, 92, .95) 150deg,
    rgba(255, 61, 129, .9) 196deg,
    transparent            220deg 260deg,
    rgba(74, 222, 128, .9) 296deg,
    rgba(34, 211, 238, .9) 360deg);
  filter: drop-shadow(0 0 9px rgba(255, 120, 200, .5)) drop-shadow(0 0 16px rgba(120, 255, 200, .28));
}

/* 球体外溢的光也带一点彩色，避免金球配彩环显得脱节。 */
@keyframes markGlow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(255, 207, 83, .03), 0 0 24px rgba(180, 120, 255, .22), 0 18px 46px rgba(201, 120, 9, .3), inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -8px 18px rgba(95, 52, 0, .22); }
  46%      { box-shadow: 0 0 0 20px rgba(120, 200, 255, .09), 0 0 70px rgba(255, 120, 200, .55), 0 18px 58px rgba(201, 120, 9, .42), inset 0 1px 1px rgba(255, 255, 255, .98), inset 0 -8px 18px rgba(95, 52, 0, .22); }
}
/* ============================================================
   荧光/霓虹质感（2026-08-13）
   平面感来自三点：环边缘是硬切、颜色不发光、叠加处不提亮。
   对策：① mask 做柔和过渡让边缘有辉光衰减
        ② 多层 drop-shadow 由紧到松堆出光晕
        ③ mix-blend-mode: screen 让光在暗背景上做加法，叠加处自然变亮
        ④ brightness/saturate 提升，把颜色推到"发光"而不是"涂色"
   ============================================================ */
.ui-v2 .success-mark::before,
.ui-v2 .success-mark::after {
  mix-blend-mode: screen;
}

/* 外环：柔边 + 四层辉光 */
.ui-v2 .success-mark::before {
  -webkit-mask: radial-gradient(circle,
    transparent 54%,
    rgba(0,0,0,.35) 59%,
    #000 64% 68%,
    rgba(0,0,0,.35) 73%,
    transparent 79%);
  mask: radial-gradient(circle,
    transparent 54%,
    rgba(0,0,0,.35) 59%,
    #000 64% 68%,
    rgba(0,0,0,.35) 73%,
    transparent 79%);
  filter:
    brightness(1.35) saturate(1.5)
    drop-shadow(0 0 3px rgba(255, 255, 255, .85))
    drop-shadow(0 0 8px rgba(190, 130, 255, .8))
    drop-shadow(0 0 20px rgba(64, 200, 255, .55))
    drop-shadow(0 0 42px rgba(255, 80, 170, .35));
}

/* 内环：更亮更紧的辉光，形成"内芯白热、外圈染色"的霓虹层次 */
.ui-v2 .success-mark::after {
  -webkit-mask: radial-gradient(circle,
    transparent 58%,
    rgba(0,0,0,.4) 63%,
    #000 68% 73%,
    rgba(0,0,0,.4) 78%,
    transparent 84%);
  mask: radial-gradient(circle,
    transparent 58%,
    rgba(0,0,0,.4) 63%,
    #000 68% 73%,
    rgba(0,0,0,.4) 78%,
    transparent 84%);
  filter:
    brightness(1.5) saturate(1.6)
    drop-shadow(0 0 2px rgba(255, 255, 255, .95))
    drop-shadow(0 0 7px rgba(120, 255, 220, .8))
    drop-shadow(0 0 18px rgba(255, 120, 200, .5))
    drop-shadow(0 0 36px rgba(120, 160, 255, .3));
}
/* ============================================================
   改为放射光芒（2026-08-13）
   上一版是柔边圆环 + 大范围模糊 = 泡泡/雾感，方向错了。
   光芒的本质是从中心射出的"光束"：
     · repeating-conic-gradient 生成放射状尖锐光条
     · mask 由中心向外衰减，光才是"射出去"而不是"围一圈"
     · 边缘保持锐利，只在根部留少量辉光
   ============================================================ */
.ui-v2 .success-mark::before {
  content: "";
  position: absolute;
  inset: -150px;
  z-index: -1;
  border-radius: 50%;
  /* 长短交替的光条：粗细不均才像真实光芒，不是齿轮 */
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 246, 214, .95)  0deg 1.1deg,
    transparent               1.1deg 5deg,
    rgba(255, 208, 120, .55)  5deg 5.9deg,
    transparent               5.9deg 11deg,
    rgba(255, 255, 255, .8)   11deg 11.8deg,
    transparent               11.8deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 12%, rgba(0,0,0,.85) 24%, rgba(0,0,0,.35) 44%, transparent 68%);
  mask: radial-gradient(circle, #000 12%, rgba(0,0,0,.85) 24%, rgba(0,0,0,.35) 44%, transparent 68%);
  filter: brightness(1.25) drop-shadow(0 0 6px rgba(255, 220, 150, .5));
  mix-blend-mode: screen;
  animation: orbitBloom 5.6s linear infinite;
  pointer-events: none;
}

/* 第二层：彩色光束，条数更少、更宽，反向慢转，与主光芒交错 */
.ui-v2 .success-mark::after {
  content: "";
  position: absolute;
  inset: -120px;
  z-index: -1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 12deg,
    rgba(120, 220, 255, .8)  0deg 1.6deg,
    transparent              1.6deg 14deg,
    rgba(200, 130, 255, .7)  14deg 15.4deg,
    transparent              15.4deg 30deg,
    rgba(255, 130, 190, .7)  30deg 31.4deg,
    transparent              31.4deg 45deg);
  -webkit-mask: radial-gradient(circle, #000 14%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.25) 50%, transparent 72%);
  mask: radial-gradient(circle, #000 14%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.25) 50%, transparent 72%);
  filter: brightness(1.3) saturate(1.4) drop-shadow(0 0 8px rgba(160, 160, 255, .45));
  mix-blend-mode: screen;
  animation: orbitBloomReverse 8.4s linear infinite;
  pointer-events: none;
}
/* ============================================================
   光晕扩散（2026-08-13 · 重写）
   前几版做成了光环 / 霓虹 / 放射光束，都偏了。
   目标很简单：柔和的径向渐变从球体边缘向外扩散，边扩边淡，
   两层错开半个周期，形成连续不断的波。
   ============================================================ */
.ui-v2 .success-mark::before,
.ui-v2 .success-mark::after {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 226, 158, .55) 0%,
    rgba(255, 200, 96, .34) 34%,
    rgba(255, 170, 60, .14) 58%,
    transparent 74%);
  /* 不做遮罩、不做锥形渐变、不堆多层投影 —— 那些正是"泡泡/光束"的来源 */
  -webkit-mask: none;
  mask: none;
  filter: none;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: glowSpread 4.2s ease-out infinite;
}

/* 第二层错开半个周期，让扩散连绵不断 */
.ui-v2 .success-mark::after { animation-delay: 2.1s; }

@keyframes glowSpread {
  0%   { transform: scale(.72); opacity: 0; }
  18%  { opacity: .85; }
  55%  { opacity: .45; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* 球体自身保持一层稳定的底光，避免波与波之间出现空档 */
@keyframes markGlow {
  0%, 100% { box-shadow: 0 0 26px rgba(255, 202, 73, .34), 0 18px 46px rgba(201, 120, 9, .3), inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -8px 18px rgba(95, 52, 0, .22); }
  50%      { box-shadow: 0 0 44px rgba(255, 202, 73, .55), 0 18px 50px rgba(201, 120, 9, .36), inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -8px 18px rgba(95, 52, 0, .22); }
}
.ui-v2 .success-celebration.is-active .success-mark {
  animation: successMark .9s cubic-bezier(.2, 1.45, .36, 1) .38s both,
             markGlow 4.2s ease-in-out 1.3s infinite;
}
/* ============================================================
   对勾立体化（2026-08-13）
   原来是纯色 border 画的平面对勾。加厚描边 + 圆角端点，
   再用 drop-shadow 叠出高光与投影：
   球体光源在左上（背景渐变 145deg 的白色高光在左上），
   因此高光落左上、投影落右下，读起来是"凸起"而不是贴上去的。
   drop-shadow 跟随 alpha 形状，所以能贴合勾的折线，box-shadow 做不到。
   ============================================================ */
.ui-v2 .success-mark i {
  border-width: 0 0 6px 6px;
  border-color: #2b1a04;
  border-radius: 3px;
  filter:
    drop-shadow(-1px -1px 0 rgba(255, 244, 205, .55))
    drop-shadow(1px 1px 0 rgba(120, 66, 4, .55))
    drop-shadow(2px 3px 3px rgba(74, 40, 0, .5))
    drop-shadow(0 6px 10px rgba(60, 32, 0, .28));
}

/* 勾上方一层极窄的亮边，模拟金属表面的反光棱 */
.ui-v2 .success-mark i::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: -6px;
  width: 100%;
  height: 100%;
  border: solid transparent;
  border-width: 0 0 6px 6px;
  border-radius: 3px;
  border-image: linear-gradient(135deg, rgba(255, 248, 220, .85), rgba(255, 210, 130, .2) 45%, transparent 70%) 1;
  opacity: .7;
  pointer-events: none;
}
/* ============================================================
   对勾金属质感（2026-08-13）
   金属感的关键不是"亮"，而是明暗band 的急剧交替 —— 抛光金属会把
   周围环境压缩成几道窄反射带。所以用多段落差很大的渐变，而不是平滑过渡。
   实现上用 border-image 给描边上渐变（纯 border-color 只能单色）。
   注意：使用 border-image 时 border-radius 会失效，端点变方 —— 金属刻痕
   本来也偏硬朗，这里接受这个取舍。
   ============================================================ */
.ui-v2 .success-mark i {
  border-color: transparent;
  border-style: solid;
  border-width: 0 0 7px 7px;
  border-image: linear-gradient(135deg,
      #fffdf2 0%,
      #e9d18f 12%,
      #a07c28 24%,
      #6b4f14 33%,
      #d8bf7c 43%,
      #fffef8 51%,
      #f0dca6 57%,
      #9d7822 70%,
      #5d420e 80%,
      #cdb069 90%,
      #fff8dc 100%) 1;
  filter:
    drop-shadow(1px 1px 0 rgba(96, 62, 8, .6))
    drop-shadow(2px 3px 3px rgba(64, 36, 0, .5))
    drop-shadow(0 6px 10px rgba(54, 30, 0, .3));
}

/* 去掉上一版的反光棱叠层：与金属渐变叠在一起会互相冲突、发灰。 */
.ui-v2 .success-mark i::after { content: none; }

/* 后台阅读优先：放大正文、字段标签与操作文字，不改变前台兑换页的排版。 */
.ui-v2 .admin-shell {
  font-size: 16px;
  line-height: 1.65;
}

.ui-v2 .admin-shell nav button { font-size: 16px; }

.ui-v2 .admin-shell .aside-top small,
.ui-v2 .admin-shell .aside-status,
.ui-v2 .admin-main header > span { font-size: 13px; }

.ui-v2 .admin-shell .eyebrow,
.ui-v2 .admin-shell .panel-kicker { font-size: 13px; }

.ui-v2 .admin-shell .panel-head > span,
.ui-v2 .admin-shell .panel-head > div > span:not(.panel-kicker),
.ui-v2 .admin-shell .product-banner p,
.ui-v2 .admin-shell .card-paste-note,
.ui-v2 .admin-shell .internal-cost-note { font-size: 15px; }

.ui-v2 .admin-shell label,
.ui-v2 .admin-shell input,
.ui-v2 .admin-shell select,
.ui-v2 .admin-shell textarea { font-size: 16px; }

.ui-v2 .admin-shell .primary,
.ui-v2 .admin-shell .quiet,
.ui-v2 .admin-shell button { font-size: 16px; }

.ui-v2 .admin-shell .metric span,
.ui-v2 .admin-shell .metric small,
.ui-v2 .admin-shell .region-badge,
.ui-v2 .admin-shell .bar-row,
.ui-v2 .admin-shell .bar-row strong { font-size: 13px; }

.ui-v2 .admin-shell table { font-size: 15px; }
.ui-v2 .admin-shell th { font-size: 13px; }
.ui-v2 .admin-shell td { line-height: 1.6; }

.ui-v2 .admin-shell .proxy-pool-select-control,
.ui-v2 .admin-shell .proxy-pool-node-block span,
.ui-v2 .admin-shell .proxy-pool-status small,
.ui-v2 .admin-shell .proxy-toggle-control { font-size: 13px; }

.ui-v2 .admin-shell .proxy-pool-node-block strong { font-size: 17px; }

.ui-v2 .admin-shell .proxy-pool-fact dt,
.ui-v2 .admin-shell .proxy-pool-section-label { font-size: 11px; }

.ui-v2 .admin-shell .proxy-pool-fact dd { font-size: 15px; }

.ui-v2 .admin-shell .proxy-pool-state .row-actions .quiet { font-size: 14px; }
/* ============================================================
   对勾改为黑色金属（2026-08-13）
   黑金属不能整条都黑 —— 那是剪影。真实的抛光黑金属绝大部分处在
   很暗的区间，只有一两道极窄的镜面高光把形体带出来。
   所以主体压在 #08–#2a，穿插两道接近白的窄高光带。
   投影同时改用冷灰，与金色球面拉开，避免糊成一团。
   ============================================================ */
.ui-v2 .success-mark i {
  border-image: linear-gradient(135deg,
      #3a3a44 0%,
      #14141a 10%,
      #08080b 20%,
      #5c5c6a 30%,
      #f2f4f8 36%,
      #9a9aa8 41%,
      #1b1b22 50%,
      #0a0a0d 62%,
      #46464f 72%,
      #e8ecf2 78%,
      #7b7b88 83%,
      #101016 92%,
      #33333c 100%) 1;
  filter:
    drop-shadow(1px 1px 0 rgba(255, 246, 214, .38))
    drop-shadow(-1px -1px 0 rgba(0, 0, 0, .5))
    drop-shadow(2px 3px 4px rgba(30, 16, 0, .55))
    drop-shadow(0 6px 11px rgba(20, 10, 0, .35));
}
/* ============================================================
   对勾修正（2026-08-13）
   border-image 会把渐变按九宫格切给各条边，本勾由「左+下」两条边构成，
   两臂各取渐变的不同区域，导致材质割裂；且 border-image 会让 border-radius 失效。
   改回单色描边保证两臂一致、端点圆润，金属感改由分层高光/投影表达：
     · 左上暖白细边 = 受光棱
     · 右下深色细边 = 背光棱
     · 两级柔影 = 离开球面的厚度
   ============================================================ */
.ui-v2 .success-mark i {
  border-image: none;
  border-style: solid;
  border-width: 0 0 7px 7px;
  border-color: #0b0b0f;
  border-radius: 4px;
  filter:
    drop-shadow(-1px -1px 0 rgba(255, 250, 226, .5))
    drop-shadow(1px 1px 0 rgba(255, 214, 140, .22))
    drop-shadow(2px 3px 4px rgba(48, 26, 0, .55))
    drop-shadow(0 6px 11px rgba(30, 16, 0, .32));
}
.ui-v2 .success-mark i::after { content: none; }