/* AUTORENEW-20261110: Subscription › Auto-renew card. VEX Violet Edge colors; dark is the default, html[data-theme="light"] for light. */
#arCard{--ar-accent:var(--vex-accent,#9945FF);--ar-ink:var(--vex-accent-ink,#B57BFF);--ar-text:var(--txt,var(--vex-text,#F5F5F7));--ar-mut:var(--mut,var(--vex-muted,rgba(245,245,247,.72)));--ar-line:var(--line2,var(--vex-line,rgba(196,170,255,.14)));--ar-track:rgba(255,255,255,.16);--ar-ok:var(--vex-up,#2EE6A6);--ar-warn:var(--vex-warn,#FFC24B);--ar-chip:rgba(255,255,255,.05)}
html[data-theme="light"] #arCard{--ar-ink:#7B2FE0;--ar-text:#121018;--ar-mut:rgba(18,16,24,.74);--ar-line:rgba(18,16,24,.10);--ar-track:rgba(18,16,24,.18);--ar-ok:#0F7A55;--ar-warn:#8A5A00;--ar-chip:rgba(18,16,24,.04)}
#arCard>*{position:relative;z-index:1} /* keep text above the .glass::before sheen (light mode washes it out otherwise) */
#arCard .arhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
#arCard .arhead h2{margin:0;color:var(--ar-mut)}
#arCard .arsw{display:inline-flex;align-items:center;gap:10px;cursor:pointer;position:relative;user-select:none;-webkit-tap-highlight-color:transparent}
#arCard .arsw input{position:absolute;opacity:0;width:52px;height:30px;margin:0;cursor:pointer}
#arCard .artrack{width:52px;height:30px;border-radius:999px;background:var(--ar-track);border:1px solid var(--ar-line);position:relative;transition:background .2s,border-color .2s;flex:none}
#arCard .arknob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
#arCard .arsw input:checked+.artrack{background:var(--vex-grad,linear-gradient(120deg,#9945FF 0%,#C13CF0 50%,#FF3CAC 100%));border-color:transparent}
#arCard .arsw input:checked+.artrack .arknob{transform:translateX(22px)}
#arCard .arsw input:focus-visible+.artrack{outline:2px solid var(--ar-accent);outline-offset:2px}
#arCard .arsw input:disabled+.artrack{opacity:.6}
#arCard .arsl{font-weight:600;min-width:2.2em;color:var(--ar-text)}
#arCard .arkv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
#arCard .arkv>div{background:var(--ar-chip);border:1px solid var(--ar-line);border-radius:14px;padding:10px 12px;min-width:0}
#arCard .arkv .k{display:block;font-size:12px;color:var(--ar-mut);margin-bottom:2px}
#arCard .arkv b{color:var(--ar-text);font-size:15px;overflow-wrap:anywhere}
#arCard .arstatus{margin-top:12px;padding:10px 12px;border-radius:14px;font-size:14px;line-height:1.4;color:var(--ar-text);background:var(--ar-chip);border:1px solid var(--ar-line)}
#arCard .arstatus[hidden]{display:none}
#arCard .ar-ok{border-color:color-mix(in srgb,var(--ar-ok) 45%,transparent);background:color-mix(in srgb,var(--ar-ok) 12%,transparent)}
#arCard .ar-warn{border-color:color-mix(in srgb,var(--ar-warn) 55%,transparent);background:color-mix(in srgb,var(--ar-warn) 14%,transparent)}
#arCard .ar-muted{color:var(--ar-mut)}
#arCard .arack{color:var(--ar-text)}
html[data-theme="light"] #arCard .arack{background:rgba(18,16,24,.04);border-color:rgba(18,16,24,.12)}
#arCard .arack input{accent-color:var(--ar-accent)}
#arCard .arhow{margin:10px 0 0;color:var(--ar-mut)}
@media (max-width:380px){#arCard .arkv{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#arCard .artrack,#arCard .arknob{transition:none}}