/* ==========================================================
   MIDNIGHT STATIC — THE STUDIO
   COMPONENT LIBRARY
   BUILD 7.3A
   ========================================================== */



/* ==========================================================
   STUDIO PANEL
   ========================================================== */

.studio-panel {

    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-large);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        ),
        var(--surface-primary);

    box-shadow: var(--panel-shadow);

}


.studio-panel-header {

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

    gap:20px;

    margin-bottom:24px;

}


.studio-panel-content{

    min-width:0;

}



/* ==========================================================
   STUDIO CARD
   ========================================================== */

.studio-card{

    border:1px solid var(--border-subtle);
    border-radius:var(--radius-medium);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        ),
        var(--surface-primary);

    transition:

        border-color var(--transition-normal),
        transform var(--transition-normal);

}


.studio-card:hover{

    border-color:rgba(200,167,101,.22);

    transform:translateY(-3px);

}



/* ==========================================================
   BUTTONS
   ========================================================== */

.studio-button{

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

    gap:10px;

    min-height:42px;

    padding:0 18px;

    border:1px solid transparent;

    border-radius:var(--radius-small);

    cursor:pointer;

    transition:

        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);

}


.studio-button:hover{

    transform:translateY(-2px);

}


.studio-button-primary{

    color:#17130d;

    background:
        linear-gradient(
            135deg,
            var(--accent-gold-bright),
            var(--accent-gold)
        );

}


.studio-button-secondary{

    color:var(--text-primary);

    border-color:var(--border-medium);

    background:rgba(255,255,255,.03);

}


.studio-button-secondary:hover{

    background:rgba(200,167,101,.08);

    border-color:rgba(200,167,101,.35);

}


.studio-button-ghost{

    color:var(--text-secondary);

    background:transparent;

}


.studio-button-ghost:hover{

    color:var(--text-primary);

    background:rgba(255,255,255,.04);

}



/* ==========================================================
   BADGES
   ========================================================== */

.studio-badge{

    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:0 10px;

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

    border-radius:999px;

    background:rgba(255,255,255,.025);

    color:var(--text-secondary);

    font-size:10px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.studio-chip{

    display:inline-flex;

    align-items:center;

    min-height:24px;

    padding:0 9px;

    border-radius:999px;

    background:var(--accent-gold-soft);

    color:var(--accent-gold-bright);

    font-size:9px;

    font-weight:700;

}



/* ==========================================================
   DIVIDER
   ========================================================== */

.studio-divider{

    height:1px;

    background:var(--border-subtle);

}



/* ==========================================================
   TITLES
   ========================================================== */

.studio-section-title{

    margin:0;

    font-family:Georgia,serif;

    font-size:22px;

    font-weight:400;

}


.studio-section-subtitle{

    margin-top:6px;

    color:var(--text-muted);

    font-size:13px;

    line-height:1.6;

}