/* Shared Coding Plan presentation for the desktop and mobile panels. */
.cp-status, .cp-card {
    --cp-accent: #6366f1;
    --cp-rgb: 99, 102, 241;
}
.cp-status[data-plan="goat"], .cp-card[data-plan="goat"] { --cp-accent: #07849a; --cp-rgb: 7, 132, 154; }
.cp-status[data-plan="pro"], .cp-card[data-plan="pro"] { --cp-accent: #5046e5; --cp-rgb: 80, 70, 229; }
.cp-status[data-plan="pro_plus"], .cp-card[data-plan="pro_plus"] { --cp-accent: #8b45cf; --cp-rgb: 139, 69, 207; }
.cp-status[data-plan="max"], .cp-card[data-plan="max"] { --cp-accent: #ad6b17; --cp-rgb: 173, 107, 23; }

.cp-badge {
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease, box-shadow .2s ease;
}
.cp-badge:hover, .cp-badge:focus-visible { background: #e0e7ff; box-shadow: 0 0 0 3px #6366f11a; }
.cp-none { color: #6366a0; background: #f4f3ff; border-color: #e2dffc; }
.cp-pro, .cp-pro_plus { background: #f3eaff; color: #7c3aed; border-color: #d8bdf9; }
.cp-max { background: #fff7e7; color: #99621c; border-color: #eed6a6; }
.cp-avatar-wrap { position: relative; flex-shrink: 0; }
.cp-avatar-badge { position: absolute; z-index: 2; right: -4px; bottom: -9px; max-width: 65px; overflow: hidden; text-overflow: ellipsis; padding: 1px 4px; font-size: 8px; line-height: 13px; }

/* The account summary uses a violet brand surface, never the default grey fill. */
.cp-status {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    border: 1px solid #dedbff;
    border-radius: 20px;
    background: linear-gradient(112deg, #eeecff 0%, #f8f7ff 58%, #edf4ff 100%);
    padding: 28px 30px;
    margin: 0 0 24px;
    box-shadow: 0 6px 24px #6256c407;
}
.cp-status::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    border: 1px solid #8275dd14;
    border-radius: 50%;
    right: 88px;
    top: -150px;
    box-shadow: 0 0 0 36px #8275dd05, 0 0 0 72px #8275dd04;
    pointer-events: none;
}
.cp-status-active {
    border-color: rgba(var(--cp-rgb), .22);
    background: linear-gradient(112deg, rgba(var(--cp-rgb), .12), rgba(var(--cp-rgb), .035) 60%, #f2f8ff);
}
.cp-status-content { position: relative; z-index: 1; }
.cp-status-heading { display: flex; align-items: center; gap: 12px; }
.cp-eyebrow { font-size: 10px; line-height: 1.5; letter-spacing: 2px; font-weight: 700; color: #8373b5; }
.cp-status .cp-eyebrow { color: var(--cp-accent); }
.cp-status h3 { font-size: 25px; letter-spacing: -.65px; font-weight: 650; margin: 10px 0 8px; color: #292343; }
.cp-status p { font-size: 13px; line-height: 1.8; margin: 4px 0; color: #706789; }
.cp-status-benefits strong { font-size: 18px; color: var(--cp-accent); font-weight: 650; }
.cp-status-separator { padding: 0 14px; color: #beb5d3; }
.cp-status small { display: block; margin-top: 8px; font-size: 11px; line-height: 1.7; color: #8b829f; }
.cp-status-label { font-size: 10px; line-height: 1.6; padding: 2px 8px; color: var(--cp-accent); background: rgba(var(--cp-rgb), .09); border: 1px solid rgba(var(--cp-rgb), .13); border-radius: 999px; }
.cp-status-art { position: absolute; right: 220px; top: 50%; transform: translateY(-50%) rotate(-8deg); color: rgba(var(--cp-rgb), .08); font: 700 94px/1 ui-monospace, monospace; letter-spacing: -12px; pointer-events: none; }
.cp-status .cp-status-action {
    position: relative;
    flex-shrink: 0;
    height: 40px;
    padding: 0 20px;
    border-radius: 11px;
    --el-button-bg-color: #6454d9;
    --el-button-border-color: #6454d9;
    --el-button-hover-bg-color: #5342cc;
    --el-button-hover-border-color: #5342cc;
    --el-button-active-bg-color: #4c3cbe;
    --el-button-active-border-color: #4c3cbe;
    box-shadow: 0 5px 13px #6454d922;
    transition: box-shadow .2s ease, transform .2s ease;
}
.cp-status-action span[aria-hidden] { margin-left: 14px; font-size: 17px; }
.cp-status-action:hover { transform: translateY(-1px); box-shadow: 0 7px 18px #6454d932; }
.cp-status-readonly { padding: 20px 24px; margin-bottom: 26px; }
.cp-status-readonly .cp-status-art { right: 48px; font-size: 82px; }
.cp-status-readonly h3 { font-size: 22px; }

.cp-dialog {
    display: flex;
    flex-direction: column;
    max-width: 1340px;
    max-height: calc(100dvh - 40px);
    border: 1px solid #ece9f5;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 30px 110px #1b153638;
    padding: 24px !important;
}
.cp-dialog .el-dialog__header { flex-shrink: 0; padding-bottom: 0; margin-right: 22px; }
.cp-dialog .el-dialog__body { overflow-y: auto; min-height: 0; padding: 0 4px 4px; }
.cp-dialog-heading { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 32px; color: #6b657c; }
.cp-dialog-heading strong { color: #312840; font-weight: 650; }
.cp-dialog-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #7865c9; background: #f0ecff; font: 600 13px/1 ui-monospace, monospace; letter-spacing: -2px; }
.cp-intro { text-align: center; padding: 28px 0 32px; }
.cp-intro .cp-eyebrow { font-size: 9px; letter-spacing: 2.5px; }
.cp-intro h2 { font-size: 30px; letter-spacing: -1px; line-height: 1.4; font-weight: 650; color: #292337; margin: 12px 0 10px; }
.cp-intro p { font-size: 13px; line-height: 1.7; color: #96909f; margin: 0; }
.cp-intro-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; font-size: 11px; color: #8c809f; }
.cp-intro-meta i { width: 3px; height: 3px; background: #c4bad6; border-radius: 50%; }
.cp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; min-height: 120px; padding: 8px 3px 14px; }
.cp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    border-radius: 18px;
    padding: 22px 18px 18px;
    background: #faf9fd;
    box-shadow: 0 0 0 1px #f0edf6;
    transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.cp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 24px; }
.cp-card-label { font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: 1px; color: var(--cp-accent); white-space: nowrap; }
.cp-current-tag { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: 999px; background: var(--cp-accent); color: #fff; font-size: 10px; line-height: 1.4; font-weight: 600; white-space: nowrap; }
.cp-current-tag svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp-card h3 { font-size: 28px; line-height: 1.2; font-weight: 650; letter-spacing: -.8px; color: #342c43; margin: 17px 0 20px; }
.cp-price { font-size: 34px; line-height: 1.25; font-weight: 650; letter-spacing: -1.1px; white-space: nowrap; color: #30283f; }
.cp-price small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: #a09aa9; margin-left: 3px; }
.cp-subtitle { font-size: 12px; color: #81758e; line-height: 1.8; min-height: 44px; margin: 11px 0 0; }
.cp-card .cp-buy { width: 100%; height: 37px; margin: 18px 0 22px !important; border-radius: 10px; font-size: 12px; font-weight: 550; --el-button-border-color: #e2ddeb; --el-button-text-color: #746780; --el-button-bg-color: #fff; --el-button-hover-border-color: var(--cp-accent); --el-button-hover-text-color: #fff; --el-button-hover-bg-color: var(--cp-accent); transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.cp-card .cp-buy:focus-visible:not(.is-disabled) { background-color: var(--cp-accent); border-color: var(--cp-accent); color: #fff; }
.cp-card .cp-buy.is-disabled { opacity: .68; --el-button-disabled-bg-color: #f1eef6; --el-button-disabled-border-color: #e8e3ef; --el-button-disabled-text-color: #aaa0b7; }
.cp-card ul { padding: 0; margin: 0; list-style: none; font-size: 12px; line-height: 1.8; color: #7a7087; }
.cp-card li { position: relative; padding: 10px 0 10px 16px; border-top: 1px solid #efebf5; }
.cp-card li::before { content: ''; position: absolute; left: 1px; top: 17px; width: 6px; height: 3px; border-left: 1.4px solid var(--cp-accent); border-bottom: 1.4px solid var(--cp-accent); transform: rotate(-45deg); opacity: .7; }
.cp-card li b { color: #504359; font-weight: 600; }
.cp-card:focus-within { border-color: var(--cp-accent); background: #fff; box-shadow: 0 10px 26px rgba(var(--cp-rgb), .09); }
.cp-card.cp-current {
    border-color: var(--cp-accent);
    background: linear-gradient(165deg, rgba(var(--cp-rgb), .09), rgba(var(--cp-rgb), .025) 45%, #fff);
    box-shadow: 0 0 0 3px rgba(var(--cp-rgb), .075), 0 10px 26px rgba(var(--cp-rgb), .08);
}
.cp-current h3 { color: var(--cp-accent); }
.cp-terms { font-size: 11px; color: #867a95; line-height: 1.9; padding: 16px 4px 0; }
.cp-terms p { margin: 5px 0; }
.cp-admin { margin-top: 20px; border-top-color: #efebf5; border-bottom-color: #efebf5; }
.cp-admin .el-collapse-item__header { font-size: 12px; color: #8e829d; }
.cp-error { text-align: center; padding: 20px; }

@media (hover: hover) and (pointer: fine) {
    .cp-card:hover { border-color: var(--cp-accent); background: #fff; box-shadow: 0 14px 32px rgba(var(--cp-rgb), .12); transform: translateY(-5px); }
    .cp-card.cp-current:hover { border-color: var(--cp-accent); background: linear-gradient(165deg, rgba(var(--cp-rgb), .11), rgba(var(--cp-rgb), .025) 45%, #fff); box-shadow: 0 0 0 3px rgba(var(--cp-rgb), .09), 0 14px 32px rgba(var(--cp-rgb), .12); transform: translateY(-2px); }
    .cp-card:hover .cp-buy:not(.is-disabled) { background-color: var(--cp-accent); border-color: var(--cp-accent); color: #fff; }
}

html.dark .cp-status { border-color: #3a305c; background: linear-gradient(112deg, #28213e, #211d32 60%, #20263e); box-shadow: none; }
html.dark .cp-status h3, html.dark .cp-dialog-heading strong, html.dark .cp-intro h2, html.dark .cp-card h3, html.dark .cp-price { color: #eee7fc; }
html.dark .cp-status p { color: #b2a7cb; }
html.dark .cp-status small { color: #9689ae; }
html.dark .cp-status-art { color: #9e83ff15; }
html.dark .cp-status-label { color: #c3afff; background: #9e83ff12; border-color: #9e83ff25; }
html.dark .cp-status .cp-eyebrow, html.dark .cp-card-label, html.dark .cp-status-benefits strong, html.dark .cp-current h3 { color: #c1a5fb; }
html.dark .cp-dialog { background: #1c1927 !important; border-color: #373043; }
html.dark .cp-dialog-heading { color: #b5a6c8; }
html.dark .cp-dialog-icon { color: #baa0f2; background: #322746; }
html.dark .cp-card { background: #25202f; box-shadow: 0 0 0 1px #342b41; }
html.dark .cp-card:focus-within { background: #2c253a; }
html.dark .cp-card.cp-current { background: linear-gradient(165deg, rgba(var(--cp-rgb), .2), #272032); box-shadow: 0 0 0 3px rgba(var(--cp-rgb), .12), 0 10px 26px #0002; }
html.dark .cp-card li { border-color: #372e42; }
html.dark .cp-card li b { color: #d7c8e4; }
html.dark .cp-card ul { color: #aa9bb9; }
html.dark .cp-subtitle { color: #a797b8; }
html.dark .cp-card .cp-buy { --el-button-bg-color: #2e263b; --el-button-text-color: #c3afd9; --el-button-border-color: #4c3d61; }
html.dark .cp-card .cp-buy.is-disabled { --el-button-disabled-bg-color: #2a2335; --el-button-disabled-border-color: #3d304e; --el-button-disabled-text-color: #80708f; }
html.dark .cp-none { color: #b3a3d3; background: #30283f; border-color: #493a62; }
html.dark .cp-pro, html.dark .cp-pro_plus { color: #d4bcff; background: #37234e; border-color: #64458b; }
html.dark .cp-max { color: #e7c084; background: #392d20; border-color: #665031; }
@media (hover: hover) and (pointer: fine) {
    html.dark .cp-card:hover { background: #2c253a; }
    html.dark .cp-card.cp-current:hover { background: linear-gradient(165deg, rgba(var(--cp-rgb), .25), #272032); }
}
@media (max-width: 1120px) { .cp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 681px) and (max-width: 850px) { .cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
    .cp-grid { grid-template-columns: 1fr; gap: 16px; }
    .cp-dialog { padding: 18px 14px !important; margin-top: 16px !important; margin-bottom: 16px !important; max-height: calc(100dvh - 32px); border-radius: 20px !important; }
    .cp-dialog-heading { font-size: 14px; gap: 8px; }
    .cp-intro { padding: 28px 0 25px; }
    .cp-intro h2 { font-size: 22px; letter-spacing: -.7px; }
    .cp-intro p { font-size: 12px; }
    .cp-intro-meta { gap: 8px; font-size: 10px; margin-top: 16px; }
    .cp-status { align-items: flex-start; flex-direction: column; padding: 22px; gap: 18px; }
    .cp-status h3 { font-size: 22px; }
    .cp-status-art { right: 20px; top: 40%; font-size: 70px; }
    .cp-status p { max-width: 280px; font-size: 12px; }
    .cp-status-readonly { padding: 18px; margin-bottom: 18px; }
    .cp-status-readonly .cp-status-art { right: 20px; font-size: 68px; }
    .cp-status-benefits strong { font-size: 16px; }
    .cp-status-separator { padding: 0 9px; }
    .cp-card { padding: 23px; }
    .cp-subtitle { min-height: 0; }
    .cp-card ul { font-size: 12px; }
    .cp-card h3 { margin: 12px 0 15px; }
    .cp-price { font-size: 33px; }
    .cp-card .cp-buy { height: 40px; margin-bottom: 20px !important; }
    .cp-badge { font-size: 10px; }
    .cp-avatar-badge { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .cp-card, .cp-badge, .cp-status-action { transition: none !important; }
    .cp-card:hover, .cp-card.cp-current:hover, .cp-status-action:hover { transform: none; }
}