/* Menu → Subscription (subscription.js): the apps' SubscriptionScreen sections. */

.sb-section { margin-top: 20px; }
#dc-sub-plan > .sb-section:first-child { margin-top: 0; }
.sb-head {
    margin: 0 0 8px 2px; font-size: 12px; font-weight: 700; letter-spacing: .6px;
    color: rgba(255,255,255,.5); text-transform: uppercase;
}
.sb-card { background: rgba(255,255,255,.05); border-radius: 12px; }
.sb-plan { padding: 16px; }
.sb-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .5px; }
.sb-badge.free { background: #FF9500; color: #fff; }
.sb-badge.plus { background: #007AFF; color: #fff; }
.sb-badge.pro { background: #FFCC00; color: #1a1a1a; }
.sb-sub { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.7); }
.sb-bullets { margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: #fff; }
.sb-bullets li { display: flex; gap: 8px; align-items: baseline; }
.sb-bullets li::before { content: "✓"; color: #34C759; font-weight: 800; }
.sb-row { padding: 14px 16px; }
.sb-row + .sb-row { border-top: 1px solid rgba(255,255,255,.07); }
.sb-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: #fff; }
.sb-row b, .sb-row-top b { font-weight: 600; }
.sb-row-top span { color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-bar { margin-top: 8px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.sb-bar i { display: block; height: 100%; border-radius: 2px; }
.sb-credits { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #fff; }
.sb-credits small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.5); }
.sb-n { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sb-tier { overflow: hidden; }
.sb-tier + .sb-tier { margin-top: 12px; }
.sb-stripe { height: 4px; }
.sb-tier-body { padding: 16px; }
.sb-tier-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sb-tier-name { font-size: 17px; font-weight: 800; color: #fff; }
.sb-tier-name span { color: #FF8504; }
.sb-price { font-size: 13px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.sb-upgrade {
    display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 14px; padding: 12px 16px;
    box-sizing: border-box; border: 0; border-radius: 10px; background: #FF8504; color: #fff;
    font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer;
}
.sb-upgrade:hover { background: #ff9426; }
.sb-note { margin: 10px 2px 0; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.45); }
.sb-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; font-size: 14px; color: #fff; text-decoration: none; }
.sb-link:hover { background: rgba(255,255,255,.03); }
.sb-link + .sb-link { border-top: 1px solid rgba(255,255,255,.07); }
.sb-link > span { color: rgba(255,255,255,.35); }
.sb-link small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.5); }
.sb-hist summary { cursor: pointer; list-style: none; display: inline-block; }
.sb-hist summary::-webkit-details-marker { display: none; }
.sb-hist summary::after { content: " ▸"; }
.sb-hist[open] summary::after { content: " ▾"; }