.plan-page{
    min-height:100vh;
    height:auto;
    display:block;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-gutter:stable;
    background:
    radial-gradient(circle at top left,rgba(37,99,235,0.92),#020617 34%),
    linear-gradient(135deg,rgba(22,163,74,0.12),transparent 44%),
    #020617;
}

.plan-page > .sidebar{
    display:none;
}

.plan-header{
    opacity:1;
    animation:none;
}

.plan-page.app-plan-mode{
    height:100vh;
    min-height:100vh;
    display:flex;
    overflow:hidden;
}

.plan-page.app-plan-mode > .sidebar{
    display:flex;
}

.plan-page.app-plan-mode .ambient-motion{
    display:none;
}

.plan-page.app-plan-mode .plan-header{
    display:none;
}

.plan-page.app-plan-mode .plan-hero{
    min-height:auto;
    padding:0 0 22px;
}

.plan-shell{
    width:min(1180px,calc(100% - 36px));
    margin:0 auto 42px;
}

.plan-page.app-plan-mode .plan-shell{
    flex:1;
    min-width:0;
    width:100%;
    max-width:100%;
    height:100vh;
    min-height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    margin:0;
    padding:36px 42px 42px;
}

.plan-page.app-plan-mode .plan-workspace{
    margin-bottom:0;
}

.plan-hero{
    min-height:360px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,0.52fr);
    gap:28px;
    align-items:center;
    padding:54px 0 28px;
}

.plan-hero h1{
    max-width:780px;
    margin:14px 0 18px;
    font-size:clamp(42px,6.4vw,78px);
    line-height:0.98;
    letter-spacing:0;
}

.plan-hero p{
    max-width:720px;
    color:#cbd5e1;
    font-size:18px;
    line-height:1.75;
}

.plan-checklist{
    display:grid;
    gap:14px;
    padding:20px;
    border:1px solid rgba(148,163,184,0.18);
    border-radius:24px;
    background:linear-gradient(180deg,rgba(15,23,42,0.82),rgba(15,23,42,0.58));
    box-shadow:0 24px 80px rgba(0,0,0,0.28);
}

.plan-checklist div{
    display:grid;
    grid-template-columns:42px 1fr;
    column-gap:14px;
    align-items:center;
    padding:14px;
    border:1px solid rgba(255,255,255,0.07);
    border-radius:18px;
    background:rgba(255,255,255,0.04);
}

.plan-checklist span{
    width:42px;
    height:42px;
    grid-row:span 2;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:rgba(34,197,94,0.16);
    border:1px solid rgba(34,197,94,0.3);
}

.plan-checklist span svg{
    width:20px;
    height:20px;
    color:#86efac;
}

.plan-checklist strong{
    color:#f8fafc;
    font-size:16px;
}

.plan-checklist small{
    color:#94a3b8;
    line-height:1.45;
}

.plan-workspace{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(320px,0.92fr);
    gap:18px;
    align-items:start;
}

.plan-panel{
    margin-top:18px;
    padding:22px;
    border:1px solid rgba(148,163,184,0.18);
    border-radius:24px;
    background:
    linear-gradient(180deg,rgba(15,23,42,0.82),rgba(15,23,42,0.58));
    box-shadow:0 24px 80px rgba(0,0,0,0.3);
    backdrop-filter:blur(18px);
}

.panel-title{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.panel-title span,
.summary-grid span,
.recharge-callout span{
    color:#93c5fd;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.panel-title h2{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:5px;
    font-size:26px;
    line-height:1.08;
}

.panel-title h2 svg{
    width:24px;
    height:24px;
    color:#86efac;
    flex:0 0 auto;
}

.panel-title button,
.api-picker-toolbar button,
.quote-form button,
.quote-actions a,
.quote-actions button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:14px;
    padding:0 16px;
    color:white;
    background:linear-gradient(135deg,#2563eb,#16a34a);
    box-shadow:0 14px 34px rgba(37,99,235,0.25);
    font-weight:900;
    cursor:pointer;
    transition:transform 0.2s ease,box-shadow 0.2s ease;
}

.panel-title button svg,
.api-picker-toolbar button svg,
.quote-form button svg,
.quote-actions a svg,
.quote-actions button svg,
.category-add svg{
    width:17px;
    height:17px;
    flex:0 0 auto;
}

.panel-title button:hover,
.api-picker-toolbar button:hover,
.quote-form button:hover,
.quote-actions a:hover,
.quote-actions button:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 44px rgba(37,99,235,0.36);
}

.api-picker-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:end;
}

.api-search-box,
.quote-form label{
    display:grid;
    gap:8px;
    color:#cbd5e1;
    font-weight:800;
}

.api-search-box span{
    color:#93c5fd;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.bulk-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.filter-drawer-button{
    border:1px solid rgba(96,165,250,0.24) !important;
    background:rgba(37,99,235,0.13) !important;
    box-shadow:none !important;
}

.filter-drawer-button span{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    margin-left:8px;
    padding:0 8px;
    border-radius:999px;
    background:rgba(2,6,23,0.38);
    color:#bbf7d0;
    font-size:12px;
}

.bulk-actions button:last-child{
    border:1px solid rgba(148,163,184,0.22);
    background:rgba(255,255,255,0.06);
    box-shadow:none;
}

.api-search-box input,
.quote-form input,
.selected-api-card input{
    width:100%;
    min-height:46px;
    border:1px solid rgba(148,163,184,0.24);
    background:rgba(2,6,23,0.72);
    color:white;
    border-radius:14px;
    padding:0 14px;
    outline:none;
}

.api-search-box input:focus,
.quote-form input:focus,
.selected-api-card input:focus{
    border-color:rgba(96,165,250,0.56);
    box-shadow:0 0 0 3px rgba(59,130,246,0.14);
}

.picker-status-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:14px;
    padding:12px 14px;
    border:1px solid rgba(148,163,184,0.12);
    border-radius:16px;
    background:rgba(2,6,23,0.28);
}

.picker-status-row span,
.picker-status-row strong{
    color:#93c5fd;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.picker-status-row strong{
    color:#bbf7d0;
}

.category-filters{
    display:grid;
    gap:10px;
    min-height:0;
    overflow-y:auto;
    padding:2px 4px 2px 0;
    scrollbar-width:thin;
    scrollbar-color:rgba(96,165,250,0.5) transparent;
}

.category-filters::-webkit-scrollbar,
.api-checklist::-webkit-scrollbar,
.selected-api-list::-webkit-scrollbar{
    width:8px;
}

.category-filters::-webkit-scrollbar-track,
.api-checklist::-webkit-scrollbar-track,
.selected-api-list::-webkit-scrollbar-track{
    border-radius:999px;
    background:rgba(15,23,42,0.18);
}

.category-filters::-webkit-scrollbar-thumb,
.api-checklist::-webkit-scrollbar-thumb,
.selected-api-list::-webkit-scrollbar-thumb{
    border:2px solid rgba(15,23,42,0.18);
    border-radius:999px;
    background:linear-gradient(135deg,#60a5fa,#22c55e);
}

.category-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    gap:8px;
    border:1px solid rgba(148,163,184,0.18);
    border-radius:16px;
    padding:8px;
    background:rgba(255,255,255,0.045);
}

.category-row.active{
    border-color:rgba(34,197,94,0.38);
    background:rgba(22,163,74,0.16);
}

.category-row button{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:0;
    border-radius:12px;
    padding:0 12px;
    background:transparent;
    color:#dbeafe;
    font-weight:900;
    cursor:pointer;
    text-align:left;
}

.category-row button:first-child{
    min-width:0;
}

.category-row strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.category-row span{
    color:#94a3b8;
    font-size:12px;
}

.category-row.active strong{
    color:#bbf7d0;
}

.category-row .category-add{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid rgba(96,165,250,0.2);
    background:rgba(37,99,235,0.12);
    color:#bfdbfe;
    white-space:nowrap;
}

.drawer-backdrop{
    position:fixed;
    inset:0;
    z-index:60;
    background:rgba(2,6,23,0.64);
    backdrop-filter:blur(6px);
}

.category-drawer{
    position:fixed;
    top:0;
    right:0;
    z-index:61;
    width:min(420px,calc(100vw - 28px));
    height:100vh;
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    gap:16px;
    padding:22px;
    border-left:1px solid rgba(96,165,250,0.22);
    background:rgba(8,15,30,0.98);
    box-shadow:-28px 0 90px rgba(0,0,0,0.44);
    visibility:hidden;
    pointer-events:none;
    transform:translateX(110%);
    transition:transform 0.2s ease,visibility 0s linear 0.2s;
}

.category-drawer[aria-hidden="false"]{
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0);
    transition:transform 0.2s ease;
}

body.drawer-open{
    overflow:hidden;
}

.drawer-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.drawer-head span{
    color:#93c5fd;
    font-size:12px;
    font-weight:900;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.drawer-head h3{
    margin-top:6px;
    color:#f8fafc;
    font-size:26px;
}

.drawer-head button{
    width:42px;
    min-width:42px;
    height:42px;
    border:1px solid rgba(148,163,184,0.18);
    border-radius:14px;
    background:rgba(255,255,255,0.06);
    color:#cbd5e1;
    font-size:22px;
    font-weight:900;
    cursor:pointer;
}

.drawer-head button svg,
.selected-api-card button svg{
    width:18px;
    height:18px;
}

.api-checklist{
    max-height:420px;
    display:grid;
    gap:10px;
    margin-top:14px;
    padding-right:6px;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:rgba(96,165,250,0.5) transparent;
}

.api-check-card{
    min-height:74px;
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:12px;
    align-items:center;
    padding:12px;
    border:1px solid rgba(148,163,184,0.15);
    border-radius:18px;
    background:rgba(2,6,23,0.44);
    cursor:pointer;
    transition:border-color 0.18s ease,background 0.18s ease,transform 0.18s ease;
}

.api-check-card:hover{
    transform:translateY(-2px);
    border-color:rgba(96,165,250,0.32);
    background:rgba(30,64,175,0.18);
}

.api-check-card.selected{
    border-color:rgba(34,197,94,0.36);
    background:linear-gradient(135deg,rgba(22,163,74,0.17),rgba(37,99,235,0.12));
}

.api-check-card input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.api-check-mark{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid rgba(96,165,250,0.24);
    border-radius:16px;
    background:
    linear-gradient(180deg,rgba(15,23,42,0.84),rgba(15,23,42,0.54));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04);
    transition:border-color 0.18s ease,background 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease;
}

.api-check-mark svg{
    width:18px;
    height:18px;
    color:#60a5fa;
    transition:color 0.18s ease,transform 0.18s ease;
}

.api-check-card:hover .api-check-mark{
    border-color:rgba(96,165,250,0.48);
    transform:translateY(-1px);
}

.api-check-card.selected .api-check-mark{
    border-color:rgba(34,197,94,0.58);
    background:linear-gradient(135deg,rgba(34,197,94,0.34),rgba(37,99,235,0.22));
    box-shadow:0 12px 28px rgba(34,197,94,0.16),inset 0 0 0 1px rgba(255,255,255,0.08);
}

.api-check-card.selected .api-check-mark svg{
    color:#86efac;
    transform:scale(1.08);
}

.api-check-copy{
    min-width:0;
}

.api-check-copy strong,
.api-check-copy small{
    display:block;
}

.api-check-copy strong{
    color:#f8fafc;
    line-height:1.28;
    overflow-wrap:anywhere;
}

.api-check-copy small{
    margin-top:5px;
    color:#93c5fd;
    line-height:1.4;
}

.selected-api-list{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:16px;
    max-height:min(520px,62vh);
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:6px;
    scrollbar-width:thin;
    scrollbar-color:rgba(96,165,250,0.5) transparent;
}

.selected-api-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) 132px 42px;
    gap:12px;
    align-items:start;
    padding:14px;
    border:1px solid rgba(148,163,184,0.16);
    border-radius:18px;
    background:rgba(2,6,23,0.46);
}

.selected-api-card strong{
    display:block;
    color:#f8fafc;
    line-height:1.3;
    overflow-wrap:break-word;
}

.selected-api-card span{
    display:block;
    margin-top:5px;
    color:#93c5fd;
    font-size:13px;
    line-height:1.4;
}

.selected-rate-message{
    margin:10px 0 0;
    color:#cbd5e1;
    font-size:14px;
    font-weight:800;
    line-height:1.55;
    overflow-wrap:break-word;
}

.selected-price-strip{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:12px;
}

.selected-price-strip div{
    min-width:0;
    padding:10px;
    border:1px solid rgba(148,163,184,0.14);
    border-radius:14px;
    background:rgba(255,255,255,0.04);
}

.selected-price-strip span,
.selected-price-strip small{
    display:block;
    margin:0;
    color:#94a3b8;
    font-size:11px;
    font-weight:900;
    line-height:1.35;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.selected-price-strip strong{
    margin-top:6px;
    color:#f8fafc;
    font-size:15px;
}

.selected-price-strip div:nth-child(2){
    border-color:rgba(34,197,94,0.26);
    background:rgba(22,163,74,0.1);
}

.selected-price-strip div:nth-child(2) strong{
    color:#bbf7d0;
}

.calls-input{
    display:grid;
    gap:6px;
}

.calls-input span{
    margin:0;
    color:#94a3b8;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.06em;
}

.selected-api-card button{
    width:42px;
    min-width:42px;
    height:42px;
    border:1px solid rgba(248,113,113,0.35);
    border-radius:14px;
    background:rgba(127,29,29,0.2);
    color:#fecaca;
    font-size:22px;
    font-weight:900;
    display:grid;
    place-items:center;
    cursor:pointer;
}

.empty-state{
    padding:22px;
    border:1px dashed rgba(148,163,184,0.25);
    border-radius:18px;
    background:rgba(2,6,23,0.34);
    color:#94a3b8;
    text-align:center;
    font-weight:800;
}

.summary-panel{
    position:sticky;
    top:18px;
}

.plan-message{
    margin-bottom:14px;
    padding:16px;
    border:1px solid rgba(96,165,250,0.2);
    border-radius:18px;
    background:linear-gradient(135deg,rgba(37,99,235,0.18),rgba(15,23,42,0.42));
    color:#dbeafe;
    font-size:15px;
    font-weight:850;
    line-height:1.6;
}

.summary-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}

.summary-grid div,
.recharge-callout{
    min-height:auto;
    padding:15px;
    border:1px solid rgba(148,163,184,0.16);
    border-radius:18px;
    background:rgba(2,6,23,0.45);
}

.summary-grid div{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
}

.summary-grid strong{
    display:block;
    margin-top:0;
    color:#f8fafc;
    font-size:22px;
    line-height:1.1;
    overflow-wrap:anywhere;
    text-align:right;
}

.summary-grid small{
    grid-column:1 / -1;
    color:#86efac;
    font-size:12px;
    font-weight:900;
}

.recharge-callout{
    min-height:auto;
    margin-top:14px;
    border-color:rgba(34,197,94,0.35);
    background:linear-gradient(135deg,rgba(20,83,45,0.3),rgba(2,6,23,0.42));
}

.recharge-callout strong{
    display:block;
    margin:10px 0;
    color:#86efac;
    font-size:32px;
    line-height:1.05;
}

.recharge-callout p{
    color:#cbd5e1;
    line-height:1.6;
}

.rate-card-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.rate-card{
    min-height:0;
    display:grid;
    gap:14px;
    padding:18px;
    border:1px solid rgba(148,163,184,0.16);
    border-radius:20px;
    background:rgba(2,6,23,0.44);
}

.rate-card h3{
    color:#f8fafc;
    font-size:18px;
    line-height:1.3;
}

.rate-card small{
    color:#94a3b8;
    line-height:1.45;
}

.rate-card-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.rate-card-grid div{
    padding:10px;
    border-radius:14px;
    background:rgba(255,255,255,0.045);
}

.rate-card-grid span{
    display:block;
    color:#94a3b8;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.06em;
}

.rate-card-grid strong{
    display:block;
    margin-top:6px;
    color:#dbeafe;
    font-size:16px;
    overflow-wrap:anywhere;
}

.rate-card-highlight{
    padding:12px;
    border:1px solid rgba(34,197,94,0.28);
    border-radius:16px;
    background:rgba(22,163,74,0.12);
    color:#bbf7d0;
    font-weight:900;
}

.quote-form{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.quote-form button{
    grid-column:1 / -1;
}

.quote-result{
    margin-top:16px;
    padding:18px;
    border:1px solid rgba(34,197,94,0.34);
    border-radius:18px;
    background:rgba(20,83,45,0.16);
}

.quote-result h3{
    margin-bottom:8px;
}

.quote-result p{
    color:#cbd5e1;
    line-height:1.6;
}

.quote-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

.skeleton-stack{
    display:grid;
    gap:10px;
}

.skeleton-stack span,
.rate-card-skeleton span{
    display:block;
    min-height:66px;
    border-radius:18px;
    background:linear-gradient(90deg,rgba(148,163,184,0.08),rgba(96,165,250,0.16),rgba(148,163,184,0.08));
    background-size:220% 100%;
    animation:skeletonShift 1.2s ease-in-out infinite;
}

.drawer-skeleton span{
    min-height:58px;
}

.rate-card-skeleton span:first-child{
    width:76%;
    min-height:24px;
}

.rate-card-skeleton span:nth-child(2){
    width:52%;
    min-height:18px;
}

.rate-card-skeleton span:nth-child(3),
.rate-card-skeleton span:nth-child(4){
    min-height:74px;
}

@keyframes skeletonShift{
    0%{background-position:100% 0}
    100%{background-position:-100% 0}
}

@media (max-width:980px){
    .plan-hero,
    .plan-workspace,
    .quote-form,
    .rate-card-list{
        grid-template-columns:1fr;
    }

    .summary-panel{
        position:static;
    }
}

@media (max-width:900px){
    .plan-page.app-plan-mode{
        display:block;
        height:auto;
        min-height:100vh;
        overflow:auto;
    }

    .plan-page.app-plan-mode .plan-shell{
        height:auto;
        min-height:calc(100vh - 72px);
        overflow:visible;
        padding:28px 18px 34px;
    }
}

@media (max-width:640px){
    .plan-shell{
        width:min(100% - 28px,1180px);
    }

    .plan-hero{
        min-height:auto;
        padding:34px 0 16px;
    }

    .plan-hero h1{
        font-size:clamp(38px,13vw,52px);
    }

    .plan-panel,
    .plan-checklist{
        border-radius:20px;
        padding:18px;
    }

    .panel-title,
    .api-picker-toolbar,
    .selected-api-card{
        grid-template-columns:1fr;
    }

    .panel-title{
        flex-direction:column;
    }

    .panel-title button,
    .api-picker-toolbar button,
    .bulk-actions{
        width:100%;
    }

    .bulk-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .api-check-card{
        grid-template-columns:40px minmax(0,1fr);
    }

    .summary-grid,
    .rate-card-grid,
    .selected-price-strip{
        grid-template-columns:1fr;
    }
}