/* 「商品和订阅」「兑换码」「付款和订单」三个页面的专属样式（前缀 ucl-），颜色用 uc.css 的 --uc-* 令牌 */
.ucl-plans td { vertical-align: top; }
.ucl-plans td:last-child { white-space: nowrap; }
.ucl-product { font-weight: 600; white-space: nowrap; }
.ucl-detail { color: var(--uc-text-2); min-width: 220px; }

.ucl-form { margin-top: 16px; max-width: 480px; }
.ucl-result-wrap:empty { display: none; }
.ucl-result-wrap { margin-top: 16px; }
.ucl-result {
    padding: 16px;
    border: 1px solid var(--uc-border);
    border-radius: 12px;
    background: var(--uc-ok-soft);
}
.ucl-result-title { font-weight: 600; color: var(--uc-ok); margin-bottom: 8px; }
.ucl-code-row { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0; }
.ucl-code {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--uc-card);
    color: var(--uc-text);
    font-size: 13px;
    line-height: 1.5;
    word-break: break-all;
    user-select: all;
}
.ucl-usage { margin-top: 12px; }

.ucl-records { margin-top: 12px; }
.ucl-history { list-style: none; margin: 0; padding: 0; }
.ucl-history-item { padding: 12px 0; border-bottom: 1px solid var(--uc-divider); }
.ucl-history-item:last-child { border-bottom: 0; }
.ucl-history-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ucl-history-item .uc-card-desc { margin: 4px 0; }

.ucl-orders { display: flex; align-items: center; gap: 24px; margin-top: 12px; }
.ucl-orders-main { margin: 0 0 6px; color: var(--uc-text); }

@media (max-width: 640px) {
    .ucl-orders { flex-direction: column; align-items: stretch; }
    .ucl-code-row { flex-direction: column; align-items: stretch; }
}
.ucl-card { min-width: 0; }