/* ============================================================
   Campaign — AI Marketing hub + draft/review/edit/success
   (routes: #/marketing, #/campaign, #/campaign-edit, #/campaign-success)
   ============================================================ */

/* ── S1 HEADER ── */
#s1 .sb {
    background: linear-gradient(135deg, #b194ff 0%, #9067ff 50%, #703aff 100%)
}

#s1 .sbt { color: var(--surface-white) }

.s1-hdr {
    background: linear-gradient(135deg, #b194ff 0%, #9067ff 50%, #703aff 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 14px;
    flex-shrink: 0
}
.s1-hdr-ttl {
    font-size: 18px;
    font-weight: 700;
    color: var(--surface-white);
    text-align: center;
    flex: 1
}

/* ── S1 SCROLL ── */
.s1-scroll {
    flex: 1;
    overflow-y: auto;
    background: var(--surface-grey);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    -webkit-overflow-scrolling: touch
}
.s1-scroll::-webkit-scrollbar { display: none }

/* ── SECTIONS ── */
.s1-sec {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 12px
}
.s1-wht {
    background: var(--surface-white);
    padding: 16px
}
.s1-prpl {
    background: #f8f5ff;
    padding: 12px;
    gap: 8px
}
.s1-grad {
    background: linear-gradient(180deg, #f2e5ff 0%, #f1f0f4 100%);
    padding: 12px;
    border: 0.5px solid var(--surface-white-warm);
    box-shadow: 0 2px 16px rgba(0,0,0,0.08)
}
.s1-sec-ttl {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-600)
}

/* ── CAMPAIGN CARDS ── */
.qs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}
.qs-card {
    background: var(--surface-white);
    border: 1px solid var(--purple-50);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s
}
.qs-card:active { transform: scale(.97) }
.qs-ico {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}
.qs-cnt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1
}
.qs-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-700);
    line-height: 1.4
}
.qs-desc {
    font-size: 12px;
    color: rgba(61,61,61,0.7);
    line-height: 1.35
}
.qs-tag {
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    width: 100%;
    box-sizing: border-box
}

/* ── RUNNING NOW CARDS ── */
.rc-card {
    background: var(--surface-white);
    border-radius: 8px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px
}
.rc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}
.rc-nm {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-500);
    flex: 1
}
.rc-status-act {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-success-dark);
    flex-shrink: 0
}
.rc-status-done {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: #1c6bea;
    flex-shrink: 0
}
.rc-prog {
    display: flex;
    flex-direction: column;
    gap: 6px
}
.rc-dates {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--ink-300)
}
.rc-bar-bg {
    height: 8px;
    background: rgba(207,207,207,0.5);
    border-radius: 100px;
    overflow: hidden
}
.rc-bar-fill {
    height: 100%;
    border-radius: 100px
}
.rc-hdiv {
    height: 1px;
    background: var(--purple-50);
    width: 100%
}
.rc-info {
    display: flex;
    gap: 12px;
    align-items: stretch
}
.rc-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px
}
.rc-mlbl {
    font-size: 12px;
    color: rgba(61,61,61,0.7)
}
.rc-mval {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-700)
}
.rc-vdiv {
    width: 1px;
    background: #e8e4f8;
    align-self: stretch
}

/* ── DRAFT CARD ── */
.draft-card {
    background: var(--surface-white);
    border: 1px solid var(--purple-100);
    border-radius: 12px;
    overflow: hidden
}
.rrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s
}
.rrow:active { background: #f8f7ff }
.rrow-sep {
    height: 1px;
    background: #f0eef8
}
.rdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0
}
.rrow-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px
}
.rnm {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-500)
}
.rsub {
    font-size: 12px;
    color: rgba(61,61,61,0.7)
}

.fi {
    padding: 10px 16px 20px;
    background: var(--surface-canvas);
    border-top: 0.5px solid var(--purple-05);
    flex-shrink: 0
}

.fi-box {
    background: var(--surface-white);
    border-radius: 26px;
    border: 1px solid var(--purple-75);
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 16px rgba(124, 92, 191, 0.09);
    cursor: pointer
}

.fi-ph {
    flex: 1;
    font-size: 13px;
    color: var(--purple-200)
}

.fi-mic {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-pink), #E88F6E);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.fi-send {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--purple-500);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.cs {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.cs::-webkit-scrollbar {
    display: none
}

.br {
    display: flex;
    gap: 8px;
    align-items: flex-start
}

.br.u {
    justify-content: flex-end
}

.bav {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-pink), var(--purple-400));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px
}

.b {
    padding: 11px 14px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.55
}

.b.ai {
    background: var(--surface-white);
    color: var(--ink-900);
    border-radius: 18px 18px 18px 5px;
    border: 0.5px solid var(--purple-75);
    max-width: 84%
}

.b.usr {
    background: linear-gradient(135deg, var(--color-accent-pink), #E88F6E);
    color: var(--surface-white);
    border-radius: 18px 18px 5px 18px;
    max-width: 78%
}

.sc-card {
    background: var(--surface-white);
    border-radius: 16px;
    border: 0.5px solid var(--purple-75);
    overflow: hidden;
    max-width: 88%
}

.sc-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 13px;
    border-bottom: 0.5px solid var(--purple-25)
}

.sc-ct {
    font-size: 12px;
    font-weight: 600;
    color: var(--purple-500)
}

.sc-ta {
    font-size: 12px;
    font-weight: 600;
    color: var(--purple-500);
    cursor: pointer
}

.so {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    cursor: pointer;
    border-bottom: 0.5px solid var(--purple-25);
    transition: background .15s;
    -webkit-tap-highlight-color: transparent
}

.so:last-of-type {
    border-bottom: none
}

.so.sel {
    background: var(--purple-15)
}

.si {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.snm {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-900)
}

.sadr {
    font-size: 11px;
    color: var(--ink-250);
    margin-top: 2px
}

.chk {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #DDD9F8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .2s
}

.chk.on {
    background: var(--purple-500);
    border-color: var(--purple-500)
}

.cbtn {
    display: block;
    width: calc(100% - 26px);
    margin: 10px 13px 13px;
    padding: 14px;
    background: var(--purple-500);
    color: var(--surface-white);
    border-radius: 13px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: opacity .15s
}

.cbtn:active {
    opacity: .8
}

/* STORE PICKER (SCALABLE) */

.chips-clear.show {
    display: block
}

.chip.on {
    background: var(--purple-500);
    color: var(--surface-white);
    border-color: var(--purple-500)
}

.chip.on .chk-ico {
    opacity: 1
}

.confirm-strip.open {
    height: 50px
}

.inp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 18px
}

.ci {
    flex: 1;
    background: var(--surface-white);
    border: 0.5px solid var(--purple-75);
    border-radius: 22px;
    padding: 10px 15px;
    font-size: 13px;
    color: var(--ink-900);
    font-family: inherit;
    outline: none;
    transition: border-color .2s
}

.ci:focus {
    border-color: var(--purple-400)
}

.ci::placeholder {
    color: var(--purple-200)
}

.mic-b {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-pink), #E88F6E);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    cursor: pointer
}

.snd-b {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--purple-500);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    cursor: pointer
}

.snd-b:active {
    opacity: .7
}

.shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
    background-size: 200%;
    animation: shine 2.8s ease-in-out infinite
}

@keyframes shine {
    0% {
        background-position: 200%
    }

    65% {
        background-position: -100%
    }

    100% {
        background-position: -100%
    }
}

@keyframes regen-spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

/* REVIEW */
.topnav {
    background: var(--surface-white);
    padding: 10px 16px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 0.5px solid var(--purple-05);
    flex-shrink: 0
}

.back {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--purple-25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s
}

.back:active {
    background: var(--purple-75)
}

.topnav-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-900)
}
.topnav-badge {
    font-size: 9px;
    padding: 2px 7px;
    gap: 3px
}

.rv-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 16px;
    -webkit-overflow-scrolling: touch
}

.rv-scroll::-webkit-scrollbar {
    display: none
}

.rv-scroll>* {
    margin-bottom: 10px
}

.rv-scroll>*:last-child {
    margin-bottom: 0
}

.camp-header {
    background: linear-gradient(135deg, #F0EEFF, #EAE6FD);
    border-radius: 18px;
    padding: 12px 14px;
    border: 0.5px solid #DDD9F8;
    margin-bottom: 16px
}

.camp-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px
}

.ready-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-success);
    color: var(--surface-white);
    border-radius: 20px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0
}

.camp-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-900);
    letter-spacing: -.2px
}

.camp-desc {
    font-size: 12px;
    color: #7070A0;
    line-height: 1.5;
    margin-bottom: 0
}

.camp-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 0.5px solid rgba(124, 92, 191, .15)
}

.tip-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--purple-200);
    color: var(--purple-900);
    font-size: 7px;
    font-weight: 700;
    cursor: pointer;
    font-style: normal;
    margin-left: 2px;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1
}

.stat-tip {
    position: absolute;
    background: var(--ink-900);
    color: var(--surface-white);
    border-radius: 9px;
    padding: 7px 11px;
    font-size: 11px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s;
    z-index: 99;
    max-width: 190px;
    line-height: 1.45;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3)
}

.camp-stat-lbl {
    font-size: 9px;
    font-weight: 600;
    color: #A09AC0;
    letter-spacing: .08em;
    margin-bottom: 2px
}

.camp-stat-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-900)
}

.camp-stat-sub {
    font-size: 10px;
    color: var(--ink-200);
    font-weight: 500;
    margin-top: 1px
}

.why-card {
    background: #1E1346;
    border-radius: 18px;
    padding: 16px;
    position: relative;
    overflow: hidden
}

.why-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(167, 139, 250, 0.12)
}

.why-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px
}

.why-sparkle {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(167, 139, 250, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.why-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--purple-400);
    letter-spacing: .08em
}

.why-items {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.why-item {
    display: flex;
    align-items: flex-start;
    gap: 10px
}

.why-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(167, 139, 250, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px
}

.why-text {
    font-size: 13px;
    color: #E0D9FF;
    line-height: 1.5;
    flex: 1
}

.why-text strong {
    color: var(--surface-white);
    font-weight: 600
}

/* DETAILS */
.det-card {
    background: var(--surface-white);
    border-radius: 18px;
    border: 0.5px solid var(--purple-75);
    overflow: hidden
}

.det-hd {
    padding: 13px 16px 11px;
    border-bottom: 0.5px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .25s
}

.det-hd.open {
    border-bottom-color: var(--purple-25)
}

.det-hd-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-200);
    letter-spacing: .08em
}

.det-chevron {
    transition: transform .25s;
    flex-shrink: 0
}

.det-chevron.open {
    transform: rotate(180deg)
}

.det-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease
}

.det-body.open {
    max-height: 300px
}

.obj-row {
    padding: 13px 16px 12px;
    border-bottom: 0.5px solid var(--purple-25);
    background: var(--purple-15)
}

.obj-lbl {
    font-size: 10px;
    font-weight: 600;
    color: var(--purple-400);
    letter-spacing: .07em;
    margin-bottom: 4px
}

.obj-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 3px
}

.obj-sub {
    font-size: 12px;
    color: #8080A0;
    line-height: 1.45
}

.irow {
    display: flex;
    align-items: center;
    padding: 11px 16px;
    border-bottom: 0.5px solid var(--purple-25);
    gap: 10px
}

.irow:last-child {
    border-bottom: none
}

.irow-ico {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0
}

.irow-lbl {
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-200);
    width: 68px;
    flex-shrink: 0
}

.irow-right {
    flex: 1;
    text-align: right
}

.irow-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-900)
}

.irow-sub {
    font-size: 11px;
    color: var(--ink-250);
    margin-top: 1px
}

.spills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end
}

.spill {
    font-size: 11px;
    font-weight: 500;
    color: var(--purple-900);
    background: var(--purple-75);
    padding: 3px 8px;
    border-radius: 8px
}

.cta-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--purple-500);
    text-align: right
}

.cta-sub {
    font-size: 11px;
    color: var(--ink-200);
    margin-top: 1px;
    text-align: right
}

/* MESSAGE */
.msg-card {
    background: var(--surface-white);
    border-radius: 12px;
    border: 0.5px solid var(--purple-75);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.msg-hd {
    padding: 11px 16px 10px;
    border-bottom: 0.5px solid var(--purple-25);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.msg-hd-row {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.msg-hd-lbl {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-500);
    letter-spacing: 0
}

.msg-hd-right {
    display: flex;
    align-items: center;
    gap: 7px
}

.msg-hd-badge {
    font-size: 11px;
    font-weight: 500;
    color: var(--purple-500);
    background: var(--purple-10);
    padding: 3px 9px;
    border-radius: 10px
}

.btn-regen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--surface-white);
    background: linear-gradient(to right, #f27aa9, #6732e6);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 200px;
    padding: 7px 20px;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s;
    -webkit-tap-highlight-color: transparent;
    align-self: flex-start
}

.btn-regen:active {
    opacity: .7
}

.btn-regen svg {
    transition: transform .4s;
    flex-shrink: 0
}

.btn-regen.spinning svg {
    animation: regen-spin .5s linear
}

.msg-body {
    padding: 12px 16px
}

.mctabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px
}

.mctab {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    border: 0.5px solid var(--purple-75);
    color: var(--ink-250);
    background: var(--surface-canvas);
    -webkit-tap-highlight-color: transparent
}

.mctab.on {
    background: var(--purple-500);
    color: var(--surface-white);
    border-color: var(--purple-500)
}

.msg-bubble {
    background: var(--surface-white);
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid var(--purple-100);
    border-left: 3px solid #f27aa9
}

.msg-tag {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: 0;
    margin-bottom: 8px
}

.msg-txt {
    font-size: 14px;
    color: var(--ink-500);
    line-height: 1.45
}

.msg-hl {
    color: var(--color-primary);
    font-weight: 600
}

.msg-footer {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.msg-cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--purple-75);
    border-radius: 10px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 600;
    color: var(--purple-900)
}

.msg-note {
    font-size: 11px;
    color: var(--purple-200);
    display: flex;
    align-items: center;
    gap: 4px
}

/* ACTIONS BAR */
.actions-bar {
    background: var(--surface-white);
    border-top: 0.5px solid var(--purple-05);
    padding: 10px 16px 20px;
    flex-shrink: 0
}

/* SUCCESS */
.sw {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding: 12px 16px 24px;
    background: var(--surface-white)
}

.sw-top {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    flex: 1
}

.sw-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center
}

.s-ico {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px
}

.s-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--ink-600);
    line-height: 1.33
}

.s-sub {
    font-size: 14px;
    color: rgba(61,61,61,0.7);
    line-height: 1.45
}

.s-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin-bottom: 32px
}

.stat {
    background: var(--surface-white);
    border-radius: 16px;
    padding: 16px 10px;
    border: 0.5px solid var(--purple-75);
    text-align: center
}

.stat-v {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-900)
}

.stat-l {
    font-size: 10px;
    color: var(--ink-250);
    margin-top: 4px
}

.btn-done { width: 100%; flex-shrink: 0 }

.s-ico-v2 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-success);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(34, 197, 94, .2)
}

.apv-income {
    background: linear-gradient(145deg, #0D3D2C, #1A5C3E);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 14px;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box
}

.apv-income::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .12);
    pointer-events: none
}

.apv-inc-lbl {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, .4);
    letter-spacing: .1em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 1
}

.apv-inc-amt {
    font-size: 26px;
    font-weight: 800;
    color: var(--surface-white);
    letter-spacing: -.5px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1
}

.apv-inc-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1
}

.apv-inc-pill {
    background: rgba(255, 255, 255, .1);
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 10px;
    color: rgba(255, 255, 255, .55);
    font-weight: 500
}

.apv-inc-pill span {
    color: #4ADE80;
    font-weight: 700
}

.apv-card {
    background: linear-gradient(to bottom, var(--surface-white-warm), #f0eaff);
    border-radius: 12px;
    border: 1px solid var(--purple-300);
    width: 100%;
    text-align: left;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.1)
}

.apv-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px
}

.apv-ico {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--purple-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.apv-divider {
    height: 1px;
    background: var(--purple-300)
}

.apv-hd-lbl {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-600)
}

.apv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--purple-50);
    background: var(--surface-white)
}

.apv-row.last {
    border-bottom: none
}

.apv-lbl {
    font-size: 14px;
    color: rgba(61,61,61,0.7)
}

.apv-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-700);
    text-align: right
}

.apv-val.green {
    color: var(--color-success-dark)
}

.why-sug {
    background: var(--surface-white);
    border-radius: 16px;
    border: 0.5px solid var(--purple-75);
    padding: 12px 16px
}

.why-sug-lbl {
    font-size: 9px;
    font-weight: 600;
    color: var(--ink-200);
    letter-spacing: .1em;
    margin-bottom: 9px
}

.why-sug-row {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.why-sug-row+.why-sug-row {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 0.5px solid var(--purple-25)
}

.why-sug-key {
    font-size: 12px;
    color: var(--ink-250)
}

.why-sug-val {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-900)
}

.why-sug-val.green {
    color: var(--color-success)
}