/* ==========================================================
   CERS DESIGN SYSTEM

   File: creator.css
   Application: CERS Character Engine – CREATOR
   Version: 1.0.0

   Creator-specific interface styling only.
   Shared layouts, typography and responsive rules belong
   to the Design System.

/* ==========================================================
   VARIATION CONTROLS
========================================================== */

.creator-layout .variation-bar{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin:10px 0 14px;
}

.creator-layout .variation-count{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.creator-layout .control-group{
    display:flex;
    align-items:center;
    gap:6px;
}

/* ==========================================================
   TOGGLES
========================================================== */

.creator-layout .variation-toggles{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.creator-layout .variation-toggles label{
    display:flex;
    align-items:center;
    gap:6px;
}

/* ==========================================================
   CHARACTER LIBRARY
========================================================== */

.creator-layout .library-item{
    padding:12px 14px;
    margin-bottom:10px;
    border-radius:8px;
    background:rgba(255,255,255,.03);
    cursor:pointer;
    transition:all .15s ease;
}

.creator-layout .library-item:hover{
    background:rgba(255,255,255,.08);
}

.creator-layout .library-item div:last-child{
    opacity:.75;
    line-height:1.4;
}

.creator-layout .library-title{
    margin-bottom:6px;
    color:rgba(255,255,255,.95);
}

.creator-layout .library-item.active{
    background:rgba(79,70,229,.25);
    border:1px solid rgba(99,102,241,.60);
}

/* ==========================================================
   VARIATION CARDS
========================================================== */

.var-card{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px;
    line-height:1.4;
}

.var-card button{
    align-self:flex-start;
    padding:4px 10px;
}