:root[data-theme] .site-shell .redemption-product-tabs { display:flex; gap:8px; margin:28px 0 0; padding:0 0 10px; border-bottom:1px solid var(--ui-border); }
:root[data-theme] .site-shell .redemption-product-tab { min-height:44px; padding:10px 26px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--ui-text-muted); font:600 16px var(--xd-sans); cursor:pointer; }
:root[data-theme] .site-shell .redemption-product-tab[aria-selected="true"] { color:var(--ui-primary); background:var(--xd-tint-info); border-color:color-mix(in srgb,var(--ui-primary) 24%,transparent); }
.redemption-product-tab:focus-visible { outline:2px solid var(--ui-primary); outline-offset:3px; }
.redemption-product-panel[hidden], #claudeRedemptionPanel [hidden] { display:none!important; }
#gptRedemptionPanel > .stepper { display:none; }
.claude-redemption-hero { padding:28px 4px 24px; }
.claude-product-label { display:block; margin-bottom:10px; color:var(--ui-primary); font-weight:650; font-size:14px; }
.claude-redemption-hero h1 { margin:0; color:var(--ui-text); font-size:32px; line-height:1.35; letter-spacing:0; }
.claude-redemption-hero p { margin:8px 0 0; color:var(--ui-text-muted); font-size:15px; }
.claude-hero-steps { display:flex; flex-wrap:wrap; gap:24px; list-style:none; padding:0; margin:20px 0 0; }
.claude-hero-steps li { display:flex; gap:9px; align-items:center; color:var(--ui-text-muted); font-size:14px; white-space:nowrap; }
.claude-hero-steps span { display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--ui-border); border-radius:50%; }
.claude-hero-steps li.active { color:var(--ui-text); font-weight:600; }
.claude-hero-steps li.active span { color:white; background:var(--ui-primary); border-color:var(--ui-primary); }
:root[data-theme] .site-shell .claude-redemption-card { padding:var(--xd-pad); margin-bottom:28px; background:var(--ui-surface); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:20px; box-shadow:var(--xd-card-shadow); }
.claude-redemption-card h2 { margin:0 0 2px; font-size:21px; line-height:1.5; }
.claude-card-description { margin:0 0 30px; color:var(--ui-text-muted); }
.claude-form-step { position:relative; padding-left:48px; min-width:0; }
.claude-form-step:first-child { padding-bottom:22px; }
.claude-form-step:first-child::after { content:""; position:absolute; left:16px; top:39px; bottom:5px; width:2px; background:var(--ui-border); }
.claude-step-label { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:32px; margin:0 0 13px; color:var(--ui-text); font-weight:650; font-size:16px; }
.claude-step-label>span { position:absolute; top:0; left:0; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--ui-primary); color:#fff; font-size:16px; }
.claude-step-label small { color:var(--ui-text-muted); font-weight:400; font-size:14px; }
.claude-form-step.is-locked .claude-step-label { color:var(--ui-text-muted); font-weight:400; }
.claude-form-step.is-locked .claude-step-label>span { color:var(--ui-text-muted); border:1px solid var(--ui-border); background:var(--ui-surface); }
:root[data-theme] .site-shell #claudeRedemptionPanel .claude-text-input { display:block; width:100%; min-width:0; min-height:54px; padding:13px 18px; color:var(--ui-text); border:2px solid var(--xd-input-border); border-radius:12px; background:var(--xd-input-fill); box-shadow:none; font-size:16px; line-height:1.4; }
:root[data-theme] .site-shell #claudeRedemptionPanel .claude-text-input:focus { border-color:var(--ui-primary); outline:2px solid color-mix(in srgb,var(--ui-primary) 14%,transparent); outline-offset:1px; }
.claude-text-input::placeholder { color:var(--ui-text-muted); opacity:.8; }
.claude-field-status { margin:8px 0 0; color:var(--ui-text-muted); min-height:22px; font-size:13px; overflow-wrap:anywhere; }
.claude-field-status[data-state="error"] { color:var(--ui-danger); }
.claude-field-status[data-state="ok"] { color:var(--ui-success); }
.claude-session-fields { padding:0; margin:0; border:0; min-width:0; }
.claude-input-help { margin:0 0 10px; color:var(--ui-text-muted); font-size:14px; }
.claude-secret-input { position:relative; }
:root[data-theme] .site-shell #claudeRedemptionPanel #claudeSessionKeyInput { padding-right:72px; }
.claude-secret-input button { position:absolute; right:8px; top:8px; height:38px; width:52px; border:0; background:transparent; color:var(--ui-primary); cursor:pointer; font-size:13px; }
#claudeCheckAccount { margin-top:10px; }
.claude-account-summary { margin-top:14px; padding:12px 14px; border:1px solid var(--ui-border); border-radius:7px; overflow-wrap:anywhere; font-size:14px; }
.claude-account-summary p { margin:8px 0 0; color:var(--ui-text-muted); }
.claude-account-summary select { width:100%; margin-top:8px; }
.claude-submit-row { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:16px; border-top:1px solid var(--ui-border); padding-top:20px; margin-top:24px; }
.claude-submit-row p { color:var(--ui-text-muted); font-size:13px; margin:0; }
.claude-order-card dl>div { display:flex; justify-content:space-between; gap:20px; padding:9px 0; }
.claude-order-card dt { color:var(--ui-text-muted); flex-shrink:0; }
.claude-order-card dd { margin:0; overflow-wrap:anywhere; text-align:right; }
.claude-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.claude-order-heading { display:flex; align-items:center; gap:18px; }
.claude-order-heading>div { min-width:0; }
.claude-order-heading h2 { font-size:22px; line-height:1.4; }
.claude-order-heading p { margin:6px 0 0; font-size:14px; line-height:1.6; color:var(--ui-text-muted); overflow-wrap:anywhere; }
.claude-order-icon { display:grid; place-items:center; flex:0 0 60px; width:60px; height:60px; border-radius:50%; background:var(--xd-tint-info); color:var(--ui-primary); font-size:30px; font-weight:700; }
.claude-order-icon.is-loading::before { content:""; width:30px; height:30px; border:3px solid color-mix(in srgb,var(--ui-primary) 20%,transparent); border-top-color:var(--ui-primary); border-radius:50%; animation:claude-status-spin .9s linear infinite; }
#claudeOrderCard[data-state="success"] .claude-order-icon { background:var(--xd-tint-ok); color:var(--ui-success); }
#claudeOrderCard[data-state="failed"] .claude-order-icon { background:var(--xd-tint-bad); color:var(--ui-danger); }
#claudeOrderCard[data-state="review"] .claude-order-icon { background:color-mix(in srgb,#b7791f 12%,var(--ui-surface)); color:#a16207; }
#claudeOrderCard .customer-order-progress { margin:24px 0 8px; padding:20px 22px 18px; border:0; border-radius:16px; background:var(--xd-tint-info); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-primary) 22%,transparent); }
#claudeOrderCard .customer-order-progress::before { content:none; }
#claudeOrderCard .customer-order-progress-copy>span { font-size:12.5px; font-weight:600; }
#claudeOrderCard .customer-order-progress-copy>strong { color:var(--ui-text); font-size:17px; font-weight:650; line-height:1.45; }
#claudeOrderCard .customer-order-progress-copy>small { color:var(--ui-text-muted); font-size:13.5px; }
#claudeOrderCard .customer-order-progress-track { margin:16px 0 14px; }
#claudeOrderCard .customer-order-progress-steps li>span { border-radius:50%; font-size:12px; font-weight:600; }
#claudeOrderCard .customer-order-progress-steps li>strong { font-size:13px; font-weight:500; }
#claudeOrderCard .customer-order-progress[data-status="success"] { background:var(--xd-tint-ok); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-success) 26%,transparent); }
#claudeOrderCard .customer-order-progress[data-status="failed"] { background:var(--xd-tint-bad); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-danger) 24%,transparent); }
#claudeOrderCard .customer-order-progress[data-status="review"] { background:color-mix(in srgb,#b7791f 8%,var(--ui-surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb,#b7791f 25%,transparent); }
#claudeOrderCard [data-status="review"] .customer-order-progress-track>span { background:#b7791f; }
#claudeOrderCard [data-status="review"] .customer-order-progress-copy>span { color:#a16207; }
#claudeOrderMeta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; margin:8px 0 4px; }
#claudeOrderMeta>div { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; padding:14px 2px; border-bottom:1px solid var(--xd-hair); font-size:14px; }
#claudeOrderMeta dt { font-size:13.5px; }
#claudeOrderMeta dd { text-align:left; font-weight:600; }
#claudeOrderMeta .claude-order-update { grid-column:1/-1; }
.claude-order-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:22px; }
.claude-order-footer>p { margin:0; color:var(--ui-text-muted); font-size:12px; line-height:1.6; }
.claude-order-footer>p[data-state="error"] { color:var(--ui-danger); }
.claude-order-footer .button-row { margin:0; }
#claudeRefreshOrder[aria-busy="true"]::before, #claudeSubmit[aria-busy="true"]::before { content:""; display:inline-block; width:14px; height:14px; margin-right:8px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; animation:claude-status-spin .9s linear infinite; }
@keyframes claude-status-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { #claudeOrderCard *, #claudeOrderCard *::before, #claudeOrderCard *::after, #claudeSubmit::before { animation:none!important; transition:none!important; } }
@media(max-width:600px) { .claude-order-heading { align-items:flex-start; gap:12px; } .claude-order-heading h2 { font-size:20px; } .claude-order-icon { flex-basis:44px; width:44px; height:44px; font-size:24px; } .claude-order-icon.is-loading::before { width:23px; height:23px; } #claudeOrderCard .customer-order-progress { padding:16px; } #claudeOrderMeta { grid-template-columns:minmax(0,1fr); } .claude-order-footer { align-items:stretch; } .claude-order-footer>p,.claude-order-footer .button-row { width:100%; } .claude-order-footer .button-row>button { flex:1; } }
@media(max-width:600px) { :root[data-theme] .site-shell .redemption-product-tabs { margin-top:18px; } :root[data-theme] .site-shell .redemption-product-tab { flex:1; padding:10px 12px; } :root[data-theme] .site-shell .claude-redemption-card { padding:22px 18px; } .claude-form-step { padding-left:40px; } .claude-card-description { margin-bottom:24px; } .claude-submit-row .primary-button { width:100%; } .claude-step-label small { flex-basis:100%; } .claude-redemption-hero h1 { font-size:26px; } }
