/* Standalone customer page additions; the original premium visual remains authoritative. */
body[data-page="redeem"] .code-help-row,
body[data-page="redeem"] .submit-note-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
body[data-page="redeem"] .code-help-row .field-help { margin-bottom: 21px; }
body[data-page="redeem"] .code-help-row .text-button,
body[data-page="redeem"] .submit-note-row .text-button { flex: 0 0 auto; font-size: 11px; }
body[data-page="redeem"] .label-row { margin-top: 5px; }
body[data-page="redeem"] .session-help { margin: 10px 0 20px; font-size: 11px; line-height: 1.85; color: var(--muted); }
body[data-page="redeem"] .session-help summary { cursor: pointer; color: #b9a6ec; padding: 3px 0; }
body[data-page="redeem"] .session-help p { margin-top: 9px; }
body[data-page="redeem"] .session-help code { font-size: 10px; color: #cad5e9; overflow-wrap: anywhere; user-select: all; }
body[data-page="redeem"] .authorization-panel { color: #b7bfd5; font-size: 11px; line-height: 1.85; padding: 13px 15px; margin: 17px 0; background: #121928b3; }
body[data-page="redeem"] .renewal-notice { border: 1px solid #ddb77c40; border-radius: 11px; padding: 13px; background: #92714210; color: #e4cba5; }
body[data-page="redeem"] .submit-note-row .field-help { margin-bottom: 0; }
body[data-page="redeem"] .product-preview { padding: 16px; margin: 0 0 23px; }
body[data-page="redeem"] .product-topline { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
body[data-page="redeem"] .product-topline h3 { min-width: 0; overflow-wrap: anywhere; }
body[data-page="redeem"] .mini-label { color: #a4afc8; font-size: 10px; }
body[data-page="redeem"] .verified-mark { color: #a5dfcc; font-size: 10px; }
body[data-page="redeem"] .product-preview h3 { font-size: 15px; margin: 8px 0; }
body[data-page="redeem"] .product-tags { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-page="redeem"] .tag { font-size: 10px; padding: 3px 8px; border: 1px solid #ffffff13; border-radius: 6px; color: #c2cce1; background: #ffffff05; }
body[data-page="redeem"] .order-message { font-size: 12px; line-height: 1.9; color: #bcc5db; overflow-wrap: anywhere; }
body[data-page="redeem"] .input-action { display: flex; gap: 9px; }
body[data-page="redeem"] .input-action input { min-width: 0; flex: 1; }
body[data-page="redeem"] .input-action .button { white-space: nowrap; }
body[data-page="redeem"] .query-card { padding-top: 24px; padding-bottom: 23px; }
body[data-page="redeem"] .query-card .section-heading { margin-bottom: 17px; }
body[data-page="redeem"] .query-card form > .field-help { margin-bottom: 0; }
body[data-page="redeem"] .query-result { margin-top: 19px; padding-top: 17px; border-top: 1px solid var(--border); }
body[data-page="redeem"] .query-result .order-message { margin-top: 11px; }
body[data-page="redeem"] .query-result .order-details { margin-top: 12px; margin-bottom: 0; }
body[data-page="redeem"] .query-result h3 { font-size: 13px; }
body[data-page="redeem"] .notice { color: #c8d4ef; background: #263249cc; border-color: #7386aa3d; font-size: 12px; }
body[data-page="redeem"] .notice-error { color: #ffd0d4; background: #4c2532cc; border-color: #d184973d; }
body[data-page="redeem"] #query-notice { margin: 16px 0 0; }
body[data-page="redeem"] .status-success,
body[data-page="redeem"] .status-unused,
body[data-page="redeem"] .status-available,
body[data-page="redeem"] .status-ready { color: #9de7ca; border-color: #86ddba33; background: #67c8a00e; }
body[data-page="redeem"] .status-locked,
body[data-page="redeem"] .status-failed,
body[data-page="redeem"] .status-unknown { color: #e9c894; border-color: #d4af6c30; background: #d4af6c0d; }
body[data-page="redeem"] .status-processing,
body[data-page="redeem"] .status-dispatching { color: #ccb7fa; border-color: #b99ce340; background: #ae8ce012; }
body[data-page="redeem"] .order-status .badge { font-size: 13px; }
body[data-page="redeem"] .redeem-steps li > span { color: #b9bfd4; background: #151a2b; border-color: #9c94ba32; }
body[data-page="redeem"] .redeem-steps li.active > span { color: #1c1430; background: #b79cec; border-color: #cbb0ff; }
body[data-page="redeem"] .redeem-steps li.done > span { color: #a3e1c7; background: #355b5044; border-color: #84c8b344; }
@media (max-width: 420px) {
  body[data-page="redeem"] .submit-note-row { align-items: flex-start; }
  body[data-page="redeem"] .input-action .button { padding-left: 13px; padding-right: 13px; }
}

/* Stage progress: only a confirmed successful order displays 100%. */
body[data-page="redeem"] .recharge-progress { --progress-from:#9570e8; --progress-to:#8bded9; margin:18px 0 20px; padding:20px; border:1px solid #b9a6eb2e; border-radius:18px; background:linear-gradient(135deg,#b193ef0e,#7ecfc704); }
body[data-page="redeem"] .progress-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:17px; }
body[data-page="redeem"] #order-progress-label { color:#e5ddfa; font-size:13px; font-weight:600; }
body[data-page="redeem"] #order-progress-value { font-size:30px; font-weight:600; letter-spacing:-1px; line-height:1; color:#dfd1ff; font-variant-numeric:tabular-nums; }
body[data-page="redeem"] .progress-track { height:10px; overflow:hidden; border-radius:999px; background:#060b198c; box-shadow:inset 0 1px 3px #0006; }
body[data-page="redeem"] .progress-fill { position:relative; display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--progress-from),var(--progress-to)); transition:width .6s ease; box-shadow:0 0 16px #a3b0ee44; }
body[data-page="redeem"] .progress-dispatching .progress-fill::after,
body[data-page="redeem"] .progress-processing .progress-fill::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 10%,#fff7 48%,transparent 80%); transform:translateX(-110%); animation:recharge-glide 2.2s ease-in-out infinite; }
body[data-page="redeem"] .progress-note { margin:12px 0 0; font-size:10px; color:#a9b3cb; line-height:1.7; }
body[data-page="redeem"] .progress-success { --progress-from:#59baaa; --progress-to:#b2f0c7; border-color:#86d7bb40; }
body[data-page="redeem"] .progress-success #order-progress-value,
body[data-page="redeem"] .progress-success #order-progress-label { color:#adedd1; }
body[data-page="redeem"] .progress-failed { --progress-from:#d36386; --progress-to:#f5a391; border-color:#e08a9d44; background:#b73b5710; }
body[data-page="redeem"] .progress-failed #order-progress-value,
body[data-page="redeem"] .progress-failed #order-progress-label,
body[data-page="redeem"] .status-failed { color:#ffb7c5; }
body[data-page="redeem"] .status-failed { border-color:#e08a9d44; background:#b73b5710; }
body[data-page="redeem"] .progress-unknown { --progress-from:#bf935f; --progress-to:#efd498; border-color:#d9b87940; }
body[data-page="redeem"] .progress-unknown #order-progress-label,
body[data-page="redeem"] .progress-unknown #order-progress-value { color:#efd498; }
@keyframes recharge-glide { to { transform:translateX(110%); } }
body:has(#motion-enabled:not(:checked)) .progress-fill::after { animation:none!important; }
@media (prefers-reduced-motion:reduce) { body[data-page="redeem"] .progress-fill { transition:none; } body[data-page="redeem"] .progress-fill::after { animation:none!important; } }

.email-confirmation { margin: 20px 0; padding: 20px; border: 1px solid rgba(183,153,245,.38); border-radius: 16px; background: rgba(151,115,218,.09); }
.email-confirmation[hidden] { display: none; }
.account-email { display: block; margin: 12px 0; color: #e1d3ff; font-size: 1.15rem; overflow-wrap: anywhere; }
.email-confirmation .consent-label { margin-bottom: 0; }

/* 品牌标 easyai-mark.png 本身就是完整的深色圆形（含透明底），
   不需要再垫一层色块或内边距，否则深色叠深色会糊成一团。 */
img.brand-mark{background:none;padding:0;border-radius:50%;object-fit:contain}

/* 品牌字标：原本是「easy 纯色 750 字重」+「AI 渐变 500 字重」两套处理拼在一起，
   看上去像两种字号。改成整条字一个渐变、一个字重。
   渐变色直接取自图标像素（青 #20d0f0 -> 蓝 #3090f0），字标与图标同色系。 */
.brand-wordmark{
  font-weight:700;
  background:linear-gradient(105deg,#eef8ff 0%,#5ad8f2 42%,#3f9df2 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* 子元素不能自带底色或颜色，否则会盖掉父级裁切出来的渐变 */
.brand-wordmark>span{
  font-weight:inherit;background:none;
  color:transparent;-webkit-text-fill-color:transparent;
}
.brand-wordmark>i{background:#3f9df2;box-shadow:0 0 10px #3f9df255}
/* 副标题跟着进同一色系，8px 偏小，略提一档 */
.brand small{color:#93aac4;font-size:9px;letter-spacing:1.2px}