#page-purchase .xp-monthly-subtabs { display:flex; gap:0; width:240px; max-width:100%; height:40px; box-sizing:border-box; margin:16px 0 8px; padding:4px; background:#f3f4f6; border-radius:8px; }
#page-purchase .xp-monthly-subtabs button { display:flex; flex:1 1 50%; align-items:center; justify-content:center; min-width:0; height:32px; box-sizing:border-box; border:1px solid transparent; border-radius:6px; padding:0 14px; background:transparent; color:#666b76; font-family:inherit; font-size:13px; line-height:20px; font-weight:400; cursor:pointer; transition:color .15s,background-color .15s,border-color .15s,box-shadow .15s; }
#page-purchase .xp-monthly-subtabs button[aria-selected="true"] { background:#fff; border-color:transparent; color:var(--purple); font-weight:600; box-shadow:0 1px 3px rgba(31,36,48,.08); }
#page-purchase .xp-monthly-subtabs button:not([aria-selected="true"]):hover { color:#30323c; }
#page-purchase .xp-renewal { color:#30323c; }
#page-purchase .xp-renewal h2 { margin:0 0 14px; font-size:14px; line-height:22px; font-weight:600; }
#page-purchase .xp-renew-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
#page-purchase .xp-renew-section-head>span { color:#7e8293; font-size:11px; }
#page-purchase .xp-renew-device-picker { min-width:0; padding:16px; border-radius:10px; background:#f7f8fa; }
#page-purchase .xp-renew-filters { display:flex; gap:12px; margin-bottom:14px; }
#page-purchase .xp-renew-filters input,#page-purchase .xp-renew-filters select { min-width:0; height:38px; padding:0 12px; border:1px solid #e1e3ed; border-radius:7px; background:#fff; color:#30323c; font:inherit; font-size:12px; }
#page-purchase .xp-renew-filters input { flex:1; }
#page-purchase .xp-renew-filters select { width:180px; }
#page-purchase .xp-renew-selection-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:12px; }
#page-purchase .xp-renew-selection-bar label,#page-purchase .xp-renew-group-head label { display:flex; align-items:center; gap:9px; cursor:pointer; }
#page-purchase .xp-renew-selection-bar>span { color:#009bb9; }
#page-purchase .xp-renewal input[type="checkbox"] { width:15px; height:15px; margin:0; accent-color:#00afcf; flex-shrink:0; }
#page-purchase .xp-renew-device-picker input[type="checkbox"] { appearance:none; -webkit-appearance:none; display:inline-grid; place-content:center; box-sizing:border-box; padding:0; border:1px solid #b9bfc9; border-radius:3px; background:#fff; cursor:pointer; }
#page-purchase .xp-renew-device-picker input[type="checkbox"]:is(:checked,:indeterminate) { background:var(--purple); border-color:var(--purple); }
#page-purchase .xp-renew-device-picker input[type="checkbox"]:checked::before { content:""; width:4px; height:7px; border:solid #fff; border-width:0 1.5px 1.5px 0; transform:translateY(-1px) rotate(45deg); }
#page-purchase .xp-renew-device-picker input[type="checkbox"]:indeterminate::before { content:""; width:7px; height:2px; border:0; border-radius:1px; background:#fff; transform:none; }
#page-purchase .xp-renew-device-picker input[type="checkbox"]:disabled { opacity:.45; cursor:default; }
#page-purchase .xp-renew-devices { max-height:460px; overflow-y:auto; scrollbar-gutter:stable; }
#page-purchase .xp-renew-devices:empty { display:none; }
#page-purchase .xp-renew-group-head { display:flex; align-items:center; gap:10px; padding:8px 12px; margin-bottom:4px; background:transparent; font-size:12px; }
#page-purchase .xp-renew-device-group+.xp-renew-device-group { margin-top:16px; }
#page-purchase .xp-renew-device-group:has([data-renew-group-toggle][aria-expanded="false"]) .xp-renew-group-head { padding-top:4px; padding-bottom:4px; margin-bottom:0; }
#page-purchase .xp-renew-device-group:has([data-renew-group-toggle][aria-expanded="false"])+.xp-renew-device-group { margin-top:4px; }
#page-purchase .xp-renew-group-head button { margin-left:auto; }
#page-purchase .xp-renew-group-count { color:var(--muted); font-weight:400; }
#page-purchase .xp-renew-urgency-badge { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:3px 8px; border:0; border-radius:6px; background:#fff8e3; color:#787568; font-size:11px; line-height:18px; font-weight:500; white-space:nowrap; }
#page-purchase .xp-renew-urgency-badge::before { content:""; flex:none; width:13px; height:13px; background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffbf00'/%3E%3Cpath d='M8 4v5M8 11.5v.1' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
#page-purchase .xp-renew-group-head button { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; }
#page-purchase .xp-renew-group-head button:hover { color:#30323c; background:#f3f5f7; }
#page-purchase .xp-renew-group-head button svg { width:14px; height:14px; transition:transform .15s ease; }
#page-purchase .xp-renew-group-head button[aria-expanded="false"] svg { transform:rotate(-90deg); }
#page-purchase .xp-renew-device-group>div[id^="xpRenewDeviceRows-"] { border-radius:8px; background:#fff; }
#page-purchase .xp-renew-device { position:relative; display:flex; align-items:center; gap:12px; min-height:46px; box-sizing:border-box; padding:10px 12px; background:#fff; cursor:pointer; }
#page-purchase .xp-renew-device:first-child { border-top-left-radius:8px; border-top-right-radius:8px; }
#page-purchase .xp-renew-device:last-child { border-bottom-left-radius:8px; border-bottom-right-radius:8px; }
#page-purchase .xp-renew-device:not(:last-child)::after { content:""; position:absolute; right:12px; bottom:0; left:12px; height:1px; background:#f0f2f5; pointer-events:none; }
#page-purchase .xp-renew-device:has(input:checked) { background:#f1fbfd; }
#page-purchase .xp-renew-device-copy { flex:1; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; font-size:12px; line-height:18px; }
#page-purchase .xp-renew-device-model { border-radius:4px; background:#f1f2f6; color:#666b76; padding:0 7px; font-size:11px; line-height:18px; }
#page-purchase .xp-renew-device-copy strong { font-weight:500; }
#page-purchase .xp-renew-device-copy small { font-size:11px; color:#7e8293; }
#page-purchase .xp-renew-remaining { flex:none; text-align:right; font-size:12px; line-height:18px; font-weight:500; font-variant-numeric:tabular-nums; }
#page-purchase .xp-renew-remaining.expired { color:#f16b73; }
#page-purchase .xp-renew-remaining:is(.urgent,.soon) { color:#ee963f; }
#page-purchase .xp-renew-remaining.other { color:#7e8293; }
#page-purchase .xp-renew-empty { padding:40px 16px; text-align:center; border-radius:8px; background:#f7f8fa; color:#7e8293; font-size:12px; }
#page-purchase .xp-renew-plan-section { margin-top:24px; }
#page-purchase .xp-renew-plans { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
#page-purchase .xp-renew-plan { position:relative; display:flex; flex-direction:column; justify-content:center; gap:10px; min-width:0; min-height:108px; padding:12px 14px; text-align:left; border:1px solid #e5e7ee; border-radius:8px; background:#fff; color:#30323c; font-family:inherit; cursor:pointer; overflow:hidden; }
#page-purchase .xp-renew-plan.active { border-color:#00b3d5; background:#f2fbfd; }
#page-purchase .xp-renew-plan-heading { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#page-purchase .xp-renew-plan-heading strong { font-size:14px; font-weight:600; }
#page-purchase .xp-renew-plan em { display:inline-flex; align-items:center; justify-content:center; min-height:20px; padding:1px 6px; border-radius:5px; background:linear-gradient(135deg,#ff9a3d,#f47b20); color:white; font-size:11px; line-height:18px; font-weight:600; font-style:normal; }
#page-purchase .xp-renew-plan-pricing { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
#page-purchase .xp-renew-plan-pricing b { color:#00afcf; font-size:22px; line-height:28px; font-weight:700; }
#page-purchase .xp-renew-plan-pricing s { color:#9b9eaa; font-size:10px; }
#page-purchase .xp-renew-plan>small { color:#7e8293; font-size:12px; }
#page-purchase .xp-renew-plan:not(.active) .source-plan-check { display:none; }
#page-purchase .xp-renew-plan .source-plan-check { display:none; }
#page-purchase .xp-renew-auto.cloud-renew-row { display:flex; align-items:center; justify-content:flex-start; width:fit-content; max-width:100%; gap:12px; margin:var(--purchase-title-option-gap) 0 0; padding:0; border:0; border-radius:0; background:transparent; }
#page-purchase .xp-renew-auto .cloud-switch { flex:none; }
#page-purchase .xp-renew-order { display:grid; gap:16px; margin:20px 0; font-size:12px; }
#page-purchase .xp-renew-order>div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#page-purchase .xp-renew-order dt { color:#7e8293; }
#page-purchase .xp-renew-order dd { margin:0; color:#30323c; font-weight:500; }
#page-purchase .xp-renew-order .xp-renew-order-separator,#page-purchase .xp-renew-order .xp-renew-total { border-top:1px solid #e7e8ef; padding-top:18px; margin-top:4px; }
#page-purchase .xp-renew-order .xp-renew-total dt { color:#30323c; font-size:14px; font-weight:600; }
#page-purchase .xp-renew-order .xp-renew-total dd { color:#00afcf; font-size:24px; line-height:32px; font-weight:700; }
#page-purchase .xp-renew-checkout-hint { color:#7e8293; font-size:12px; margin:0 0 14px; }
#page-purchase #xpRenewBuy { width:100%; }
#page-purchase.is-renewal #cloudMonthlyCheckout { display:none!important; }
#page-purchase #xpMonthlyNewPanel[hidden],#page-purchase #xpMonthlyRenewPanel[hidden],#page-purchase #xpRenewCheckout[hidden] { display:none!important; }
#page-purchase .xp-renewal :is(button,input,select):focus-visible,#page-purchase .xp-monthly-subtabs button:focus-visible { outline:2px solid #00afcf; outline-offset:3px; }
/* Match existing purchase controls and order typography. */
#page-purchase .xp-renewal h2 { color:var(--text); font-weight:700; margin-bottom:10px; }
#page-purchase .xp-renew-filters input { height:40px; border-color:#dfe2e9; border-radius:8px; color:#30323c; }
#page-purchase .xp-renew-filters input:focus { border-color:var(--purple); }
#page-purchase .xp-renew-filters #xpRenewExpiryTrigger { width:180px; flex:none; }
#page-purchase .xp-renew-filters select[hidden] { display:none!important; }
#page-purchase .xp-renewal input[type="checkbox"] { accent-color:var(--purple); }
#page-purchase .xp-renew-device:has(input:checked) { background:var(--purchase-selected-bg); }
#page-purchase .xp-renew-device-copy strong { font-weight:600; }
#page-purchase .xp-renew-selection-bar>span { color:var(--purple); }
#page-purchase .xp-renew-plan em { min-height:0; }
#page-purchase .xp-renew-order { gap:8px; margin:0 0 14px; font-size:var(--order-label-size); line-height:var(--order-line-height); }
#page-purchase .xp-renew-order>div { min-height:22px; }
#page-purchase .xp-renew-order dt { color:var(--muted); }
#page-purchase .xp-renew-order dd { font-size:var(--order-value-size); color:var(--text); font-variant-numeric:tabular-nums; }
#page-purchase .xp-renew-order :is(#xpRenewPrice,#xpRenewSaving) { font-size:14px; font-weight:600; }
#page-purchase .xp-renew-order .xp-renew-order-separator,#page-purchase .xp-renew-order .xp-renew-total { border-color:var(--line); padding-top:14px; margin-top:6px; }
#page-purchase .xp-renew-order .xp-renew-total dd { color:var(--purple); font-size:var(--order-total-size); }
#page-purchase #xpRenewBuy { height:44px; font-size:14px; font-weight:600; line-height:20px; }
@media(max-width:640px) { #page-purchase .xp-renew-filters #xpRenewExpiryTrigger { width:100%; } }
@container (max-width:540px) { #page-purchase .xp-renew-device { flex-wrap:wrap; gap:6px 10px; } #page-purchase .xp-renew-device-copy { flex-basis:calc(100% - 30px); } #page-purchase .xp-renew-remaining { margin-left:25px; text-align:left; } #page-purchase .xp-renew-urgency-badge { font-size:10px; } }
@media (max-width:640px) { #page-purchase .xp-renew-plans { grid-template-columns:repeat(2,minmax(0,1fr)); } #page-purchase .xp-renew-section-head { align-items:flex-start; flex-direction:column; gap:0; margin-bottom:12px; } #page-purchase .xp-renew-section-head h2 { margin-bottom:4px; } #page-purchase .xp-renew-filters { flex-wrap:wrap; } #page-purchase .xp-renew-filters select { width:100%; } #page-purchase .xp-renew-device-copy>span:first-child { align-items:flex-start; flex-direction:column; gap:2px; } }