/* ==========================================================
   AI Tradecraft Studio
   ========================================================== */

:root {

    --primary: #2563eb;
    --primary-dark: #1d4ed8;

    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;

    --border: #dbe3ea;

    --bg: #f6f8fb;
    --card: #ffffff;

    --text: #1f2937;
    --muted: #6b7280;

    --shadow:
        0 2px 8px rgba(0,0,0,.05);

}


/* ==========================================================
   PAGE
   ========================================================== */

.studio-page{

    max-width:1400px;

    margin:40px auto;

    padding:0 20px;

}


.studio-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:32px;

    gap:20px;

}

.studio-header h1{

    margin:0;

    font-size:2.2rem;

    color:var(--text);

}

.studio-header p{

    margin-top:8px;

    color:var(--muted);

}


/* ==========================================================
   GRID
   ========================================================== */

.studio-grid{

    display:grid;

    grid-template-columns:

        420px
        1fr;

    gap:28px;

}


.preview-card{

    grid-column:1 / span 2;

}


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

.studio-card{

    background:var(--card);

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

    border-radius:12px;

    padding:28px;

    box-shadow:var(--shadow);

}


.studio-card h2{

    margin-top:0;

    margin-bottom:24px;

    font-size:1.35rem;

    color:var(--text);

}


/* ==========================================================
   FORM
   ========================================================== */

.form-group{

    margin-bottom:26px;

}


.form-group label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    color:var(--text);

}


select{

    width:100%;

    padding:12px;

    border-radius:8px;

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

    background:white;

    font-size:15px;

}


textarea{

    width:100%;

    min-height:420px;

    resize:vertical;

    padding:14px;

    border-radius:10px;

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

    font-size:15px;

    font-family:inherit;

    line-height:1.55;

    box-sizing:border-box;

}


textarea:focus,
select:focus{

    outline:none;

    border-color:var(--primary);

}


/* ==========================================================
   UPLOAD
   ========================================================== */

.upload-row{

    display:flex;

    gap:14px;

    align-items:center;

}


input[type=file]{

    flex:1;

    font-size:14px;

}


.filename{

    margin-top:12px;

    color:var(--muted);

    font-size:.95rem;

}


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

button,
.primary-button{

    border:none;

    cursor:pointer;

    border-radius:8px;

    padding:12px 22px;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    transition:.2s;

}


.primary-button{

    background:var(--primary);

    color:white;

}


.primary-button:hover{

    background:var(--primary-dark);

}


.secondary-button{

    background:white;

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

    color:var(--text);

}


.secondary-button:hover{

    background:#f5f5f5;

}


.generate-button{

    width:100%;

    padding:16px;

    background:var(--success);

    color:white;

    font-size:17px;

}


.generate-button:hover{

    background:#15803d;

}


button:disabled{

    opacity:.5;

    cursor:not-allowed;

}


/* ==========================================================
   STATUS
   ========================================================== */

.status-panel{

    display:flex;

    flex-direction:column;

    gap:18px;

}


.status-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.status-label{

    font-weight:600;

}


.status-value{

    font-weight:700;

}


.pending{

    color:var(--warning);

}


.success{

    color:var(--success);

}


.failed{

    color:var(--danger);

}


/* ==========================================================
   PROGRESS
   ========================================================== */

.progress-container{

    margin-top:30px;

    width:100%;

    height:14px;

    background:#e6ebf2;

    border-radius:999px;

    overflow:hidden;

}


.progress-bar{

    width:0;

    height:100%;

    background:var(--primary);

    transition:width .3s;

}


.status-message{

    margin-top:20px;

    color:var(--muted);

}


/* ==========================================================
   PREVIEW
   ========================================================== */

.preview-placeholder{

    height:520px;

    border:2px dashed var(--border);

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--muted);

    background:#fafafa;

    margin-bottom:22px;

}


.download-row{

    display:flex;

    justify-content:flex-end;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:1100px){

    .studio-grid{

        grid-template-columns:1fr;

    }

    .preview-card{

        grid-column:auto;

    }

}


@media (max-width:700px){

    .studio-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .upload-row{

        flex-direction:column;

        align-items:stretch;

    }

    textarea{

        min-height:260px;

    }

}