/* ==========================================================
   KUCHU AI Studio - Workspace UI Components
   ========================================================== */

.hidden{
    display:none !important;
}

/* ==========================================================
   MODAL
   ========================================================== */

.modal-overlay{

    position:fixed;
    inset:0;

    /* display:none; */

    justify-content:center;
    align-items:center;

    background:rgba(8,12,20,.55);
    backdrop-filter:blur(8px);

    padding:32px;

    z-index:9999;

    opacity:0;

    transition:opacity .18s ease;

    visibility:hidden;

    pointer-events:none;

    display:flex;



}

.modal-overlay:not(.hidden){

    /* display:flex;
    opacity:1; */

    opacity:1;
    visibility:visible;
    pointer-events:auto;

}

.modal-card,
.plan-dialog{

    width:560px;
    max-width:95%;

    background:var(--os-surface-elevated);

    color:var(--os-text-primary);

    /* border:1px solid var(--os-border); */
    border:1px solid
    color-mix(
        in srgb,
        var(--os-border) 85%,
        transparent
    );

    border-radius:20px;

    padding:30px;

    box-shadow:
        0 10px 24px rgba(0,0,0,.10),
        0 24px 60px rgba(0,0,0,.20);

    transform:translateY(18px) scale(.98);

    opacity:0;

    transition:
        transform .22s ease,
        opacity .22s ease,
        box-shadow .22s ease;

}

.modal-overlay:not(.hidden) .modal-card,
.modal-overlay:not(.hidden) .plan-dialog{
    transform:translateY(0);
    opacity:1;
}

/* Large pricing dialog */

.plan-upgrade-dialog{

    width:980px;
    max-width:96%;

}

/* ==========================================================
   HEADER
   ========================================================== */

.modal-header{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:20px;

}

.modal-icon-wrapper{

    width:56px;
    height:56px;

    border-radius:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:color-mix(in srgb,
    var(--os-primary) 12%,
    transparent);

    flex-shrink:0;

}

.modal-icon{

    font-size:26px;

}

.modal-title{

    flex:1;

}

.modal-caption{

    font-size:12px;

    letter-spacing:.08em;

    text-transform:uppercase;

    /* color:#6b7280; */
    color:var(--os-text-secondary);

    margin-bottom:6px;

}

.modal-title h3{

    margin:0;

    font-size:24px;

    font-weight:700;

}

.modal-body{

    margin-top:10px;

    line-height:1.65;

    /* color:#4b5563; */
    color:var(--os-text-secondary);

}

/* ==========================================================
   BENEFITS
   ========================================================== */

.helper-benefits{

    margin-top:24px;

    padding:18px;

    border-radius:16px;

    background:var(--os-surface-2);

    border:1px solid var(--os-border);

}

.benefit-title{

    font-size:13px;

    font-weight:600;

    margin-bottom:12px;

    /* color:#374151; */
    color:var(--os-text-primary);

}

.helper-benefits ul{

    list-style:none;

    padding:0;

    margin:0;

}

.helper-benefits li{

    display:flex;

    gap:10px;

    align-items:center;

    margin-bottom:10px;

    font-size:14px;

}

.helper-benefits li span{
    /* color:#4f46e5;*/
    color: var(--os-primary);
    font-weight:700; 
}

/* ==========================================================
   PLAN MODAL
   ========================================================== */

.plan-header{

    text-align:center;

    margin-bottom:36px;

}

.plan-badge{
    display:inline-block;
    padding:6px 12px;
    border-radius:999px;
    background:var(--os-surface-2);
    /* color:#4f46e5; */
    color: var(--os-primary);
    font-size:12px;
    font-weight:600;
    margin-bottom:18px;
}

.plan-header h2{
    margin:0;
    font-size:34px;
}

.plan-header p{

    margin-top:14px;

    /* color:#6b7280; */
    color: var(--os-text-secondary);

    max-width:620px;

    margin-left:auto;

    margin-right:auto;

}

.plan-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}

.plan-card{

    position:relative;

    display:flex;
    flex-direction:column;

    border-radius:18px;

    padding:24px;

    background:var(--os-surface-elevated);

    border:1px solid var(--os-border);

    box-shadow:

        0 2px 6px rgba(0,0,0,.05),

        0 10px 20px rgba(0,0,0,.05);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.plan-card:hover{

    transform:translateY(-4px);

    border-color:var(--os-primary);

    box-shadow:

        0 18px 45px rgba(0,0,0,.16);

}

.current-plan{

    border:2px solid var(--os-border);

    background:var(--os-surface-2);

}

.recommended-plan{

    box-shadow:

    0 0 0 1px
    color-mix(
        in srgb,
        var(--os-primary) 35%,
        transparent
    ),

    0 16px 36px rgba(0,0,0,.10);

    background:
    color-mix(
        in srgb,
        var(--os-primary) 8%,
        var(--os-surface-elevated)
    );
}

.recommended-tag{

    position:absolute;

    top:-12px;

    left:50%;

    transform:translateX(-50%);

    /* background:#4f46e5; */
    background: var(--os-primary);

    color:white;

    font-size:11px;

    font-weight:700;

    padding:5px 12px;

    border-radius:999px;

    box-shadow:
        0 8px 18px rgba(0,0,0,.18);

}

.plan-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.plan-name{

    font-size:22px;

    font-weight:700;

}

.plan-status{

    font-size:11px;

    padding:4px 10px;

    border-radius:999px;

    background:var(--os-surface-2);

    /* color:#4f46e5; */
    color: var(--os-primary);

}

.plan-price{

    margin:20px 0;

    font-size:38px;

    font-weight:700;

}

.plan-price span{

    font-size:14px;

    /* color:#6b7280; */
    color: var(--os-text-secondary);

    font-weight:500;

}

.plan-features{

    list-style:none;

    padding:0;

    margin:0 0 26px;

}

.plan-features li{
    padding:8px 0;
    /* color:#374151; */
    color: var(--os-text-primary);
}

.plan-btn{

    width:100%;

    margin-top:auto;

    min-height:46px;

}

.plan-footer{

    margin-top:36px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.plan-note{
    font-size:13px;
    /* color:#6b7280; */
    color: var(--os-text-secondary);
}

/* ==========================================================
   FOOTER
   ========================================================== */

.modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:14px;

    margin-top:30px;

    /* color:var(--os-on-primary,#fff); */

}

/* ==========================================================
   TOAST
   ========================================================== */

.toast{

    opacity:0;

    transform:

        translateY(18px);

    transition:

        opacity .25s ease,

        transform .25s ease;

}

.toast:not(.hidden){

    opacity:1;

    transform:

        translateY(0);

}



.toast-container{

    position:fixed;

    top:76px;

    right:28px;

    z-index:99999;

}

.toast-card{

    min-width:320px;
    max-width:420px;

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:16px 18px;

    border-radius:16px;

    background:var(--os-surface-glass);

    border:1px solid var(--os-border);
    /* border:1px solid
    color-mix(
        in srgb,
        var(--os-border) 85%,
        transparent
    ); */

    backdrop-filter:blur(18px);

    box-shadow:0 18px 40px rgba(0,0,0,.16);

    animation:toastIn .25s ease;

}

.toast-icon{

    width:38px;
    height:38px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(34,197,94,.12);

    font-size:18px;

    flex-shrink:0;

}

.toast-content{

    flex:1;

}

.toast-title{

    font-size:13px;

    font-weight:700;

    margin-bottom:4px;

}

.toast-message{

    font-size:14px;

    color:var(--os-text-secondary);

    line-height:1.5;

}

.toast-meta{

    font-size:11px;

    color:#9ca3af;

    white-space:nowrap;

}

/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes modalEnter{

    from{

        opacity:0;

        transform:translateY(12px) scale(.98);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes toastIn{

    from{

        opacity:0;

        transform:translateX(30px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.btn{

    min-width:140px;
    height:42px;

    padding:0 20px;

    border-radius:10px;

    border:none;

    font-size:.95rem;
    font-weight:600;

    cursor:pointer;

    transition:
        background .18s ease,
        transform .15s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.btn:hover{

    transform:translateY(-1px);

}

.btn:active{

    transform:translateY(0);

}

.btn-primary{

    background:var(--os-primary);

    color:#ffffff !important;

    border:1px solid
        color-mix(
            in srgb,
            var(--os-primary) 80%,
            black
        );

    box-shadow:
        0 10px 20px
        color-mix(
            in srgb,
            var(--os-primary) 28%,
            transparent
        );


    font-weight:600;

    box-shadow:
    0 8px 18px rgba(0,0,0,.18);

}

.btn-primary:hover{

    background:var(--os-primary-hover);

}

.btn-secondary{

    background:var(--os-surface-2);

    border:1px solid var(--os-border);

    color:var(--os-text-primary);

}

.btn-outline{

    background:transparent;

    border:1px solid var(--os-border);

    color:var(--os-text-primary);

}

.btn-danger{

    background:#c73a3a;
    color:white;

}