/* UI/Pages/Subscription/Style.css */
.sing-chip {
    display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 6px;border-radius:99px;font-size:11px;font-weight:500;letter-spacing:.02em;
    color:#e5e5e5;border:1px solid rgba(255,255,255,.17);background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.sing-btn {
    position:relative;isolation:isolate;overflow:hidden;
    background:linear-gradient(100deg,#ffffff 0%,#e5e5e5 45%,#a3a3a3 100%);
    box-shadow:0 0 0 rgba(255,255,255,0);
    transition:filter .35s ease,transform .3s var(--ease),box-shadow .45s ease;
}
/* soft sheen that sweeps across once on hover (no harsh blobs) */
.sing-btn::before {
    content:'';position:absolute;top:0;bottom:0;left:0;width:55%;z-index:-1;pointer-events:none;
    background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.30) 50%,transparent 100%);
    transform:translateX(-130%) skewX(-18deg);opacity:0;
    transition:opacity .3s ease,transform 0s linear .3s;
}
.sing-btn:hover {
    filter:brightness(1.04) saturate(1.04);
    box-shadow:0 6px 24px rgba(255,255,255,.14),0 0 0 1px rgba(229,229,229,.35);
}
.sing-btn:hover::before {
    opacity:1;transform:translateX(280%) skewX(-18deg);
    transition:opacity .2s ease,transform .85s var(--ease);
}
.sing-btn:active { filter:brightness(.97); }

.sing-frame {
    position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.15);
    background:radial-gradient(120% 150% at 0% 0%,rgba(255,255,255,.1),transparent 55%),
               radial-gradient(110% 130% at 100% 100%,rgba(255,255,255,.08),transparent 60%),#0a0a0a;
}
.sing-frame::before {
    content:'';position:absolute;right:-34px;top:50%;width:170px;height:170px;
    transform:translateY(-50%) rotate(-12deg);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23737373'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='3.4' fill='url(%23g)'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.2' transform='rotate(-28 12 12)' fill='none' stroke='url(%23g)' stroke-width='1.2'/%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='url(%23g)' stroke-width='1' opacity='.55'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity:.26;pointer-events:none;transition:transform .8s var(--ease),opacity .4s ease;
}
.sing-frame:hover::before { transform:translateY(-50%) rotate(8deg) scale(1.08);opacity:.34; }
.sing-frame > * { position:relative; }
button.sing-frame:hover { border-color:rgba(255,255,255,.25); }
.sing-title { color:#e5e5e5; }
.sing-sub { color:rgba(229,229,229,.62); }