/* ==========================================================
   RESET
========================================================== */

*{
    box-sizing:border-box;
}

/* ==========================================================
   WORKSPACE
========================================================== */

.qr-workspace{
    padding:40px 0;
}

/* ==========================================================
   3 COLUMN LAYOUT
========================================================== */

.editor-layout{
    display:grid;
    grid-template-columns:1fr 260px 1fr;
    gap:24px;
    align-items:start;
}

@media(max-width:1100px){

    .editor-layout{
        display:flex;
        flex-direction:column;
    }

    .input-panel{order:1;}
    .options-panel{order:2;}
    .result-panel{order:3;}

}

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

.hero-card{

    background:linear-gradient(145deg,#0f172a,#111827);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:20px;

    display:flex;
    flex-direction:column;
    gap:16px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.35);

}

.hero-card h2{

    margin:0;
    color:#fff;
    font-size:18px;

}

/* ==========================================================
   TEXTAREA
========================================================== */

textarea{

    width:100%;
    min-height:240px;

    padding:18px;

    resize:vertical;

    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);

    background:#0b1220;
    color:#fff;

    font-size:14px;
    font-family:Consolas,Monaco,monospace;

    outline:none;

    transition:.2s;

}

textarea:focus{

    border-color:#2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.18);

}

.result-panel textarea{
    min-height:280px;
}

/* ==========================================================
   PLACEHOLDER
========================================================== */

textarea::placeholder{
    color:#64748b;
}

/* ==========================================================
   INPUT ACTIONS
========================================================== */

.upload-area{

    display:flex;
    gap:12px;
    justify-content:flex-end;
    flex-wrap:wrap;

}

/* ==========================================================
   OPTIONS PANEL
========================================================== */

.options-panel{

    display:flex;
    flex-direction:column;
    gap:14px;

}

.options-panel hr{

    border:none;
    border-top:1px solid rgba(255,255,255,.08);
    margin:4px 0;

}

.option-checkbox{

    display:flex;
    align-items:center;
    gap:10px;

    cursor:pointer;

    color:#d1d5db;
    font-size:14px;

    user-select:none;

}

.option-checkbox input{

    width:16px;
    height:16px;

    margin:0;

    accent-color:#2563eb;

}

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

.btn{

    width:100%;

    padding:12px 14px;

    border:none;
    border-radius:10px;

    cursor:pointer;

    background:#2563eb;
    color:#fff;

    font-weight:600;

    transition:.2s;

}

.btn:hover{

    transform:translateY(-2px);
    background:#1d4ed8;

}

.btn.secondary{

    background:#374151;

}

.btn.secondary:hover{

    background:#2d3748;

}

.btn.success{

    background:#22c55e;

}

.btn.success:hover{

    background:#16a34a;

}

.btn.danger{

    background:#dc2626;

}

.btn.danger:hover{

    background:#b91c1c;

}

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

#statusMsg{

    min-height:24px;

    font-size:14px;
    font-weight:500;

}

.status-success{
    color:#22c55e;
}

.status-error{
    color:#ef4444;
}

.status-info{
    color:#60a5fa;
}

/* ==========================================================
   STATISTICS
========================================================== */

.stats-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:16px;

}

.stat-card{

    background:#0b1220;

    border:1px solid rgba(255,255,255,.06);

    border-radius:12px;

    padding:16px;

}

.stat-card strong{

    display:block;

    color:#94a3b8;

    font-size:12px;

    margin-bottom:8px;

    text-transform:uppercase;
    letter-spacing:.5px;

}

.stat-card span{

    color:#fff;

    font-size:15px;

    word-break:break-word;

}

/* ==========================================================
   LOG
========================================================== */

.event-log{

    min-height:220px;

    background:#0b1220;

    border:1px solid rgba(255,255,255,.06);

    border-radius:12px;

    padding:18px;

    overflow:auto;

    font-family:Consolas,Monaco,monospace;

    color:#cbd5e1;

}

.placeholder{

    color:#64748b;

    text-align:center;

    padding:60px 20px;

}

.log-entry{

    padding:10px 12px;

    border-left:4px solid #2563eb;

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

    border-radius:8px;

    margin-bottom:10px;

}

.log-entry.success{

    border-color:#22c55e;

}

.log-entry.error{

    border-color:#ef4444;

}

.log-time{

    color:#64748b;
    font-size:12px;
    margin-bottom:4px;

}

.log-message{

    color:#fff;
    font-size:13px;

}

/* ==========================================================
   DRAG & DROP
========================================================== */

.drag-over{

    border:2px dashed #3b82f6 !important;

    background:#172554 !important;

}

.drag-overlay{

    display:none;
}

.drag-active{

    display:flex;

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

    position:absolute;

    inset:0;

    border-radius:16px;

    background:rgba(37,99,235,.12);

    color:#fff;

    font-size:18px;
    font-weight:700;

}

/* ==========================================================
   SCROLLBAR
========================================================== */

textarea::-webkit-scrollbar,
.event-log::-webkit-scrollbar{

    width:10px;

}

textarea::-webkit-scrollbar-track,
.event-log::-webkit-scrollbar-track{

    background:#111827;

}

textarea::-webkit-scrollbar-thumb,
.event-log::-webkit-scrollbar-thumb{

    background:#334155;
    border-radius:10px;

}

textarea::-webkit-scrollbar-thumb:hover,
.event-log::-webkit-scrollbar-thumb:hover{

    background:#475569;

}

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

@media(max-width:768px){

    textarea{

        min-height:180px;
        font-size:13px;

    }

    .upload-area{

        flex-direction:column;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .btn{

        width:100%;

    }

}

/* ==========================================================
   SMALL ANIMATIONS
========================================================== */

.hero-card,
.btn,
textarea,
.stat-card{

    transition:
        background .2s,
        border-color .2s,
        box-shadow .2s,
        transform .2s;

}

.stat-card:hover{

    transform:translateY(-2px);

    border-color:rgba(96,165,250,.35);

}

.hero-card:hover{

    border-color:rgba(255,255,255,.12);

}

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

.preview-area{

    min-height:220px;

    display:flex;

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

    background:#0b1220;

    border:1px solid rgba(255,255,255,.06);

    border-radius:12px;

    overflow:hidden;

}

.preview-area img{

    max-width:100%;

    max-height:500px;

    object-fit:contain;

}

.preview-area pre{

    width:100%;

    margin:0;

    padding:18px;

    color:#cbd5e1;

    overflow:auto;

}