/* =====================================================================
   In-app TaxPro Subscription page — dark theme matching the landing page
   palette (--tc-dark / --tc-navy / --tc-lime / --tc-teal defined in
   landing.css). All rules scoped under .sub-shell so they don't leak.
   ===================================================================== */

.sub-shell {
    background: var(--tc-dark);
    background-image:
        radial-gradient(ellipse 70% 60% at 50% -10%, rgba(168, 204, 82, .10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 100% 100%, rgba(74, 157, 138, .08) 0%, transparent 60%);
    color: #e2e8f0;
    min-height: 100%;
    overflow: auto;
    padding: 2rem 2rem 4rem;
    font-family: var(--fb);
}

/* TaxProMainLayout adds Lg(p-5) (1.25rem) around the body slot, which leaves
   a light-gray frame of the layout's #eeeef0 bg visible around our dark shell.
   Negate that padding with a matching negative margin so the dark gradient
   bleeds all the way to the sidebar/header edges. */
@media (min-width: 1024px) {
    .sub-shell {
        margin: -1.25rem;
        min-height: calc(100% + 2.5rem);
    }
}

.sub-container { max-width: 1180px; margin: 0 auto; }

.sub-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.sub-page-title {
    font-family: var(--fh);
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
    margin: 0;
}
.sub-page-sub {
    font-size: .82rem;
    color: rgba(255, 255, 255, .5);
    margin: .25rem 0 0;
}

.sub-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border-radius: .55rem;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .04);
    color: #e2e8f0;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}
.sub-btn:hover {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .08);
    transform: translateY(-1px);
}

.sub-btn-lime {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.3rem;
    border-radius: .55rem;
    border: none;
    background: var(--tc-lime);
    color: #0b1f3a;
    font-family: var(--fb);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 8px 24px -10px rgba(168, 204, 82, .55);
}
.sub-btn-lime:hover:not(:disabled) {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px rgba(168, 204, 82, .65);
}
.sub-btn-lime:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* Glass card baseline */
.sub-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    position: relative;
}
.sub-card-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1rem;
}
.sub-card-title {
    font-family: var(--fh);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.sub-card-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #b6e0fb;
}
.sub-card-icon.lime { background: rgba(168, 204, 82, .14); border-color: rgba(168, 204, 82, .35); color: var(--tc-lime); }
.sub-card-icon.teal { background: rgba(74, 157, 138, .14); border-color: rgba(74, 157, 138, .35); color: var(--tc-teal); }

/* ── Plan cards ── */
.sub-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 1024px) { .sub-plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .sub-plan-grid { grid-template-columns: 1fr; } }

.sub-plan {
    position: relative;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1rem;
    padding: 1.6rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.sub-plan:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55); }

.sub-plan-top {
    height: 3px;
    border-radius: 2px;
    margin: -1.6rem -1.5rem 1.1rem -1.5rem;
}
.sub-plan.monthly .sub-plan-top { background: linear-gradient(90deg, var(--tc-teal), #3d7a6e); }
.sub-plan.annual {
    border-color: rgba(168, 204, 82, .4);
    background: linear-gradient(160deg, rgba(168, 204, 82, .06) 0%, rgba(255, 255, 255, .03) 100%);
}
.sub-plan.annual .sub-plan-top { background: linear-gradient(90deg, var(--tc-lime), #c3df6e); }

/* Pro ("Taxflows") tier — premium lime treatment like annual, plus a distinct
   blue Taxflows badge so it reads as the top, feature-rich tier. */
.sub-plan.pro {
    border-color: rgba(168, 204, 82, .4);
    background: linear-gradient(160deg, rgba(168, 204, 82, .06) 0%, rgba(255, 255, 255, .03) 100%);
}
.sub-plan.pro .sub-plan-top { background: linear-gradient(90deg, var(--tc-lime), #c3df6e); }
.sub-plan.pro .sub-plan-caps {
    background: rgba(168, 204, 82, .07);
    border-color: rgba(168, 204, 82, .22);
}
.sub-plan.pro .sub-plan-caps-grid strong { color: var(--tc-lime); }
.sub-plan.pro .sub-plan-features li::before { background: var(--tc-lime); }
.sub-plan.pro .sub-plan-cta {
    background: var(--tc-lime);
    border-color: var(--tc-lime);
    color: #0b1f3a;
    box-shadow: 0 10px 24px -10px rgba(168, 204, 82, .5);
}
.sub-plan.pro .sub-plan-cta:hover { filter: brightness(1.08); }

.sub-plan-badge {
    position: absolute;
    top: 14px; right: 14px;
    background: rgba(168, 204, 82, .15);
    border: 1px solid rgba(168, 204, 82, .35);
    color: var(--tc-lime);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .65rem;
    border-radius: 999px;
}
/* Blue Taxflows badge for the Pro tier. */
.sub-plan-badge.taxflows {
    background: rgba(96, 165, 250, .15);
    border-color: rgba(96, 165, 250, .4);
    color: #93c5fd;
}

/* Secondary "or bill monthly" CTA shown under the Pro card's primary annual CTA. */
.sub-plan-cta-secondary {
    width: 100%;
    margin-top: .55rem;
    padding: .5rem 1rem;
    border-radius: .6rem;
    border: 1px solid rgba(255, 255, 255, .15);
    background: transparent;
    color: rgba(255, 255, 255, .8);
    font-family: var(--fb);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.sub-plan-cta-secondary:hover { background: rgba(255, 255, 255, .08); transform: translateY(-1px); }

.sub-plan-eyebrow {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .55);
    font-weight: 700;
    margin-bottom: .3rem;
}
.sub-plan-price {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin-bottom: .15rem;
}
.sub-plan-price-amt {
    font-family: var(--fh);
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -.02em;
}
.sub-plan-price-per { color: rgba(255, 255, 255, .5); font-size: .8rem; }
.sub-plan-tag       { color: rgba(255, 255, 255, .5); font-size: .75rem; margin-bottom: 1.1rem; }

.sub-plan-caps {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: .65rem;
    padding: .9rem 1rem;
    margin-bottom: 1.1rem;
}
.sub-plan.annual .sub-plan-caps {
    background: rgba(168, 204, 82, .07);
    border-color: rgba(168, 204, 82, .22);
}
.sub-plan-caps-title {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: .55rem;
}
.sub-plan-caps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem .85rem;
}
.sub-plan-caps-grid > div { display: flex; flex-direction: column; line-height: 1.15; }
.sub-plan-caps-grid strong { font-family: var(--fh); font-size: 1.05rem; font-weight: 800; color: #fff; }
.sub-plan.annual .sub-plan-caps-grid strong { color: var(--tc-lime); }
.sub-plan-caps-grid span { font-size: .7rem; color: rgba(255, 255, 255, .5); margin-top: .1rem; }

.sub-plan-features {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
}
.sub-plan-features li {
    font-size: .78rem;
    color: rgba(255, 255, 255, .75);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sub-plan-features li::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--tc-teal);
    flex-shrink: 0;
}
.sub-plan.annual .sub-plan-features li::before { background: var(--tc-lime); }

.sub-plan-cta {
    width: 100%;
    padding: .75rem 1rem;
    border-radius: .6rem;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-family: var(--fb);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s, transform .15s, box-shadow .15s, background .15s;
}
.sub-plan-cta:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-1px);
}
.sub-plan.annual .sub-plan-cta {
    background: var(--tc-lime);
    border-color: var(--tc-lime);
    color: #0b1f3a;
    box-shadow: 0 10px 24px -10px rgba(168, 204, 82, .5);
}
.sub-plan.annual .sub-plan-cta:hover {
    filter: brightness(1.08);
    box-shadow: 0 14px 28px -10px rgba(168, 204, 82, .6);
}

/* ── Resource usage tiles ── */
.sub-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .75rem;
}

.sub-usage-tile {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: .75rem;
    padding: 1rem;
}
.sub-usage-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .35rem;
}
.sub-usage-tile-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: rgba(255, 255, 255, .55);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.sub-usage-tile-pct { font-size: .65rem; font-weight: 700; color: rgba(255, 255, 255, .55); }
.sub-usage-tile-value {
    font-family: var(--fh);
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.sub-usage-tile-of { font-size: .7rem; color: rgba(255, 255, 255, .45); margin-top: .15rem; }
.sub-usage-tile-bar {
    margin-top: .55rem;
    background: rgba(255, 255, 255, .06);
    border-radius: 100px;
    height: 5px;
    overflow: hidden;
}
.sub-usage-tile-bar > div {
    height: 100%;
    border-radius: 100px;
    transition: width .3s ease;
}

.sub-usage-tile.tokens .sub-usage-tile-bar > div { background: linear-gradient(90deg, var(--tc-lime), #c3df6e); }
.sub-usage-tile.tokens .sub-usage-tile-label,
.sub-usage-tile.tokens .sub-usage-tile-pct { color: var(--tc-lime); }
.sub-usage-tile.sms .sub-usage-tile-bar > div     { background: linear-gradient(90deg, #58a6ff, #79c0ff); }
.sub-usage-tile.email .sub-usage-tile-bar > div   { background: linear-gradient(90deg, #a78bfa, #c4b5fd); }
.sub-usage-tile.video .sub-usage-tile-bar > div   { background: linear-gradient(90deg, var(--tc-teal), #79c4b5); }
.sub-usage-tile.storage .sub-usage-tile-bar > div { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

/* ── Token balance hero ── */
.sub-token-hero {
    background: linear-gradient(160deg, rgba(168, 204, 82, .10) 0%, rgba(74, 157, 138, .08) 50%, rgba(255, 255, 255, .03) 100%);
    border: 1px solid rgba(168, 204, 82, .25);
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}
.sub-token-hero::before {
    content: '';
    position: absolute;
    top: -40%; right: -10%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(168, 204, 82, .25), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}
.sub-token-hero-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
    position: relative;
}
@media (max-width: 720px) { .sub-token-hero-grid { grid-template-columns: 1fr; } }

.sub-token-hero-amt {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    line-height: 1;
}
.sub-token-hero-amt strong {
    font-family: var(--fh);
    font-size: 2.6rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
}
.sub-token-hero-amt span { font-size: .9rem; color: rgba(255, 255, 255, .6); }
.sub-token-hero-bar {
    margin-top: .85rem;
    background: rgba(255, 255, 255, .08);
    border-radius: 100px;
    height: 8px;
    overflow: hidden;
}
.sub-token-hero-bar > div {
    height: 100%;
    background: linear-gradient(90deg, var(--tc-lime), var(--tc-teal));
    border-radius: 100px;
    transition: width .3s ease;
}
.sub-token-hero-meta {
    display: flex;
    justify-content: space-between;
    margin-top: .45rem;
    font-size: .72rem;
    color: rgba(255, 255, 255, .55);
}

/* ── Token-pack purchase row ── */
.sub-tokenpack {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.sub-tokenpack-info {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.sub-tokenpack-info .sub-card-icon { width: 38px; height: 38px; }
.sub-tokenpack-info h2 {
    font-family: var(--fh);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.sub-tokenpack-info p {
    font-size: .72rem;
    color: rgba(255, 255, 255, .55);
    margin: .15rem 0 0;
}

.sub-tokenpack-controls {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.sub-stepper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: .55rem;
    overflow: hidden;
}
.sub-stepper button {
    background: none;
    border: none;
    padding: .4rem .75rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .7);
    line-height: 1;
}
.sub-stepper button:not(:disabled):hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}
.sub-stepper button:disabled {
    color: rgba(255, 255, 255, .25);
    cursor: not-allowed;
}
.sub-stepper-val {
    padding: .4rem .55rem;
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    min-width: 1.75rem;
    text-align: center;
}

.sub-tokenpack-total { text-align: right; min-width: 96px; }
.sub-tokenpack-total .price {
    font-family: var(--fh);
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
}
.sub-tokenpack-total .qty {
    font-size: .68rem;
    color: rgba(255, 255, 255, .5);
    margin-top: .1rem;
}

/* ── Token catalog grid ── */
.sub-cat-section + .sub-cat-section { margin-top: 1rem; }
.sub-cat-eyebrow {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .45);
    font-weight: 700;
    margin-bottom: .5rem;
}
.sub-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .55rem;
}
.sub-cat-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .85rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: .65rem;
    transition: border-color .15s;
}
.sub-cat-item:hover { border-color: rgba(255, 255, 255, .2); }
.sub-cat-item-icon {
    width: 32px; height: 32px;
    border-radius: 7px;
    background: rgba(168, 204, 82, .12);
    border: 1px solid rgba(168, 204, 82, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .9rem;
}
.sub-cat-item-body { flex: 1; min-width: 0; }
.sub-cat-item-name { font-size: .78rem; font-weight: 600; color: #f1f5f9; }
.sub-cat-item-desc {
    font-size: .65rem;
    color: rgba(255, 255, 255, .5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sub-cat-item-cost { text-align: right; flex-shrink: 0; }
.sub-cat-item-cost .num {
    font-family: var(--fh);
    font-size: 1rem;
    font-weight: 800;
    color: var(--tc-lime);
    line-height: 1;
}
.sub-cat-item-cost .lbl {
    font-size: .55rem;
    color: rgba(255, 255, 255, .45);
    font-weight: 500;
}

/* ── Active subscriptions + transactions list rows ── */
.sub-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: .65rem;
    margin-bottom: .45rem;
}
.sub-row-title { font-size: .82rem; font-weight: 600; color: #f1f5f9; }
.sub-row-meta  { font-size: .68rem; color: rgba(255, 255, 255, .5); margin-top: .1rem; }
.sub-row-side  { display: flex; align-items: center; gap: .75rem; }
.sub-row-amount { font-family: var(--fh); font-size: .95rem; font-weight: 800; color: #fff; }
.sub-row-bullets {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    margin-top: .25rem;
    font-size: .62rem;
    color: rgba(255, 255, 255, .45);
}

.sub-pill {
    background: rgba(63, 185, 80, .15);
    color: #6cd180;
    border: 1px solid rgba(63, 185, 80, .35);
    font-size: .62rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.sub-pill.muted {
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .55);
    border-color: rgba(255, 255, 255, .12);
}

.sub-empty {
    text-align: center;
    padding: 1.75rem 1rem;
    color: rgba(255, 255, 255, .4);
    font-size: .82rem;
}

.sub-link-soft {
    font-size: .72rem;
    color: var(--tc-lime);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
}
.sub-link-soft:hover { color: #c3df6e; text-decoration: underline; }

/* ── Tier pill (replaces the exact token-cost number on customer-facing UI) ── */
.sub-tier-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tier-c) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--tier-c) 35%, transparent);
    color: var(--tier-c);
    font-family: var(--fh);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Token-to-capacity top-up rows ── */
.sub-topup-grid {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.sub-topup-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 1rem;
    align-items: center;
    padding: .85rem 1rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: .65rem;
}

@media (max-width: 720px) {
    .sub-topup-row {
        grid-template-columns: 1fr auto;
        row-gap: .65rem;
    }
}

.sub-topup-row-label {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}
.sub-topup-row-name {
    font-size: .85rem;
    font-weight: 600;
    color: #f1f5f9;
}
.sub-topup-row-hint {
    font-size: .68rem;
    color: rgba(255, 255, 255, .45);
    margin-top: .1rem;
}

.sub-topup-cost {
    text-align: right;
    line-height: 1.1;
}
.sub-topup-cost strong {
    font-family: var(--fh);
    font-size: 1rem;
    font-weight: 800;
    color: var(--tc-lime);
}
.sub-topup-cost span {
    display: block;
    font-size: .62rem;
    color: rgba(255, 255, 255, .45);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin-top: .1rem;
}

/* ── Token-pack tier chooser (4-card grid) ── */
.sub-pack-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}
@media (max-width: 980px) { .sub-pack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sub-pack-grid { grid-template-columns: 1fr; } }

.sub-pack-card {
    position: relative;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .85rem;
    padding: 1.1rem 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.sub-pack-card:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 204, 82, .35);
    box-shadow: 0 14px 32px -16px rgba(168, 204, 82, .35);
}
.sub-pack-card.featured {
    border-color: rgba(168, 204, 82, .55);
    background: linear-gradient(160deg, rgba(168, 204, 82, .10) 0%, rgba(255, 255, 255, .03) 100%);
    box-shadow: 0 12px 32px -14px rgba(168, 204, 82, .35);
}

.sub-pack-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tc-lime);
    color: #0b1f3a;
    font-family: var(--fh);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .25rem .65rem;
    border-radius: 999px;
    box-shadow: 0 6px 14px -6px rgba(168, 204, 82, .55);
}

.sub-pack-save {
    align-self: flex-start;
    background: rgba(168, 204, 82, .12);
    color: var(--tc-lime);
    border: 1px solid rgba(168, 204, 82, .3);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .15rem .5rem;
    border-radius: 999px;
    margin-bottom: .25rem;
}

.sub-pack-name {
    font-family: var(--fh);
    font-size: .8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .55);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.sub-pack-tokens {
    font-family: var(--fh);
    font-size: 1.55rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-top: .15rem;
}
.sub-pack-tokens span {
    font-size: .8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .5);
    margin-left: .2rem;
}
.sub-pack-price {
    font-family: var(--fh);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--tc-lime);
    line-height: 1;
    margin-top: .25rem;
}

.sub-pack-cta {
    margin-top: auto;
    padding: .65rem .9rem;
    border-radius: .55rem;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-family: var(--fb);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s, transform .15s, background .15s;
}
.sub-pack-cta:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-1px);
}
.sub-pack-card.featured .sub-pack-cta {
    background: var(--tc-lime);
    border-color: var(--tc-lime);
    color: #0b1f3a;
    box-shadow: 0 8px 18px -10px rgba(168, 204, 82, .55);
}
.sub-pack-card.featured .sub-pack-cta:hover { filter: brightness(1.08); }

/* New usage-tile color variants for KBA + Data Extractions */
.sub-usage-tile.kba .sub-usage-tile-bar > div        { background: linear-gradient(90deg, #f87171, #fca5a5); }
.sub-usage-tile.extraction .sub-usage-tile-bar > div { background: linear-gradient(90deg, #c084fc, #d8b4fe); }

/* ── Active-plan management card (replaces plan-purchase grid for subscribed users) ── */
.sub-active-plan {
    background: linear-gradient(160deg, rgba(168, 204, 82, .08) 0%, rgba(74, 157, 138, .06) 50%, rgba(255, 255, 255, .03) 100%);
    border: 1px solid rgba(168, 204, 82, .28);
    box-shadow: 0 18px 40px -22px rgba(168, 204, 82, .25);
}

.sub-active-plan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.sub-active-plan-eyebrow {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--tc-lime);
    margin-bottom: .25rem;
}
.sub-active-plan-name {
    font-family: var(--fh);
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin-bottom: .35rem;
}
.sub-active-plan-meta {
    font-size: .82rem;
    color: rgba(255, 255, 255, .6);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}
.sub-active-plan-meta strong { color: #f1f5f9; }
.sub-active-plan-meta .dot { color: rgba(255, 255, 255, .35); }

.sub-active-plan-actions {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.sub-active-plan-note {
    font-size: .78rem;
    color: rgba(255, 255, 255, .55);
    line-height: 1.55;
    padding-top: .85rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* Soft-danger button — for the Cancel action.  We want it visible but not loud
   so it doesn't compete with the upgrade CTA. */
.sub-btn-danger {
    color: #fca5a5 !important;
    border-color: rgba(248, 81, 73, .32) !important;
    background: rgba(248, 81, 73, .08) !important;
}
.sub-btn-danger:hover {
    color: #fecaca !important;
    border-color: rgba(248, 81, 73, .55) !important;
    background: rgba(248, 81, 73, .15) !important;
}