/* SoundSync 月度创作计划 H5 扩展层 */
#soundsync-subscription-root { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",Arial,sans-serif; }
#soundsync-subscription-root *,#soundsync-subscription-root *::before,#soundsync-subscription-root *::after { box-sizing:border-box; }
.ss-sub-overlay { position:fixed; inset:0; z-index:2147483000; overflow:auto; background:#11192c; color:#fff; }
.ss-sub-shell { width:min(100%,560px); min-height:100%; margin:0 auto; padding:env(safe-area-inset-top) 16px calc(34px + env(safe-area-inset-bottom)); }
.ss-sub-header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:center; min-height:56px; background:rgba(17,25,44,.96); border-bottom:1px solid rgba(255,255,255,.08); }
.ss-sub-header h1 { margin:0; font-size:18px; font-weight:700; }
.ss-sub-back { position:absolute; left:0; top:0; width:52px; height:56px; border:0; background:none; color:#fff; font-size:22px; cursor:pointer; }
.ss-sub-card { margin-top:16px; padding:18px; background:#1b2638; border:1px solid rgba(255,255,255,.08); border-radius:16px; }
.ss-sub-card h2,.ss-sub-card h3 { margin:0 0 12px; }
.ss-sub-muted { color:#8a93a6; font-size:13px; line-height:1.7; }
.ss-sub-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ss-sub-plan { padding:16px; text-align:left; color:#fff; background:#1b2638; border:1px solid rgba(255,255,255,.12); border-radius:14px; cursor:pointer; }
.ss-sub-plan.active { border-color:#3b82f6; box-shadow:0 0 0 1px #3b82f6 inset; background:rgba(59,130,246,.13); }
.ss-sub-plan strong { display:block; font-size:16px; }
.ss-sub-price { margin-top:10px; color:#fff; font-size:22px; font-weight:800; }
.ss-sub-price small { font-size:12px; font-weight:500; color:#8a93a6; }
.ss-sub-points { margin-top:6px; color:#8bd6ff; font-size:13px; }
.ss-sub-row { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:14px; }
.ss-sub-row:last-child { border-bottom:0; }
.ss-sub-row span:first-child { color:#8a93a6; flex:0 0 36%; }
.ss-sub-row span:last-child { text-align:right; }
.ss-sub-record-reason { display:block; margin-top:3px; color:#ffadad; font-size:11px; line-height:1.45; }
.ss-sub-button { width:100%; min-height:46px; margin-top:18px; border:0; border-radius:10px; background:#3b82f6; color:#fff; font-size:16px; font-weight:700; cursor:pointer; }
.ss-sub-button.secondary { background:rgba(59,130,246,.14); color:#8ec5ff; border:1px solid rgba(59,130,246,.5); }
.ss-sub-button.danger { background:#ef4444; }
.ss-sub-button:disabled { opacity:.55; cursor:not-allowed; }
.ss-sub-check { display:flex; gap:10px; align-items:flex-start; margin-top:16px; color:#dbe7f5; font-size:13px; line-height:1.6; }
.ss-sub-check input { width:18px; height:18px; flex:0 0 auto; accent-color:#3b82f6; }
.ss-sub-entry { margin:16px 0; padding:16px; color:#fff; background:linear-gradient(135deg,#1b2638,#172d4c); border:1px solid rgba(59,130,246,.45); border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.ss-sub-entry button { margin-top:12px; width:100%; min-height:42px; border:0; border-radius:10px; background:#3b82f6; color:#fff; font-weight:700; cursor:pointer; }
.ss-sub-kicker { color:#8ec5ff; font-size:12px; letter-spacing:.04em; }
.ss-sub-success { padding:40px 18px 24px; text-align:center; }
.ss-sub-success-icon { width:68px; height:68px; display:grid; place-items:center; margin:0 auto 16px; border-radius:50%; background:rgba(34,197,94,.17); color:#22c55e; font-size:40px; }
.ss-sub-success h2 { margin:0 0 12px; }
.ss-sub-faq { border-bottom:1px solid rgba(255,255,255,.08); }
.ss-sub-faq button { display:flex; justify-content:space-between; gap:12px; width:100%; padding:15px 0; border:0; background:none; color:#fff; text-align:left; font-size:14px; cursor:pointer; }
.ss-sub-faq p { margin:0 0 15px; color:#b7c4d5; font-size:13px; line-height:1.75; }
.ss-sub-link { color:#8ec5ff; text-decoration:none; }
.ss-sub-notice { margin-top:14px; padding:12px; border-radius:10px; background:rgba(59,130,246,.1); color:#b9d9ff; font-size:12px; line-height:1.65; }
.ss-sub-error { margin-top:12px; color:#ff9b9b; font-size:13px; line-height:1.6; }
.ss-sub-modal-mask { position:fixed; inset:0; z-index:2147483640; display:grid; place-items:center; padding:22px; background:rgba(0,0,0,.65); }
.ss-sub-modal { width:min(100%,360px); padding:22px; border-radius:16px; background:#1b2638; color:#fff; box-shadow:0 18px 50px rgba(0,0,0,.4); text-align:center; }
.ss-sub-modal h3 { margin:0 0 12px; font-size:18px; }
.ss-sub-modal p { margin:0; color:#b7c4d5; font-size:14px; line-height:1.75; }
.ss-sub-modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.ss-sub-modal-actions button { min-height:42px; border-radius:9px; border:1px solid rgba(255,255,255,.12); background:#243247; color:#fff; font-size:14px; cursor:pointer; }
.ss-sub-modal-actions button:last-child { border-color:#ef4444; background:#ef4444; }
@media (max-width:390px) { .ss-sub-shell { padding-left:12px; padding-right:12px; } .ss-sub-grid { gap:8px; } .ss-sub-plan { padding:12px; } }