/* ==========================================
   COLOR CONVERTER
========================================== */

.color-block{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.color-type{
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:6px 12px;
    border-radius:999px;
    font-size:.85rem;
    font-weight:600;
    background:rgba(59,130,246,.12);
    color:#2563eb;
    min-height:34px;
}

.input-error{
    min-height:20px;
    font-size:.9rem;
    color:#ef4444;
}

.preview-box{
    width:100%;
    height:180px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
    position:relative;
    transition: box-shadow .25s ease, border-color .25s ease;
    background:
        linear-gradient(45deg,#e5e7eb 25%,transparent 25%),
        linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,#e5e7eb 75%),
        linear-gradient(-45deg,transparent 75%,#e5e7eb 75%);
    background-size:22px 22px;
    background-position:0 0,0 11px,11px -11px,-11px 0;
}

.preview-box::after{
    content:"";
    position:absolute;
    inset:0;
    background:inherit;
}

.preview-box:hover{
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    border-color: rgba(59,130,246,.4);
}

/* ==========================================
   RESULT PANEL
========================================== */

.result-panel{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.result-item{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.result-item label{
    font-size:.9rem;
    font-weight:600;
    opacity:.75;
}

.result-row{
    display:flex;
    gap:10px;
    align-items:center;
}

.result-row input{
    flex:1;
    padding:12px 15px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.08);
    background:#111827;
    color:#fff;
    font-size:.95rem;
    font-family:Consolas,monospace;
}

.result-row button{
    flex-shrink:0;
    min-width:82px;
}

/* ==========================================
   INFO TABLE
========================================== */

.info-table{
    margin-top:25px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.info-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 15px;
    border-radius:10px;
    background:rgba(255,255,255,.03);
}

.info-row span{
    opacity:.75;
}

.info-row strong{
    font-weight:700;
}

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

#largePreview{

    width:100%;
    height:280px;

    border-radius:18px;

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

    position:relative;
    overflow:hidden;

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

    background:
        linear-gradient(45deg,#e5e7eb 25%,transparent 25%),
        linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,#e5e7eb 75%),
        linear-gradient(-45deg,transparent 75%,#e5e7eb 75%);

    background-size:24px 24px;
    background-position:0 0,0 12px,12px -12px,-12px 0;

}

#largePreview::after{

    content:"";
    position:absolute;
    inset:0;
    background:inherit;

}

#previewLabel{

    position:relative;
    z-index:2;

    background:rgba(0,0,0,.45);

    color:#fff;

    padding:12px 22px;

    border-radius:999px;

    backdrop-filter:blur(10px);

    font-weight:600;

}

/* ==========================================
   PALETTE
========================================== */

.palette-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(90px,1fr));

    gap:16px;

    margin-top:25px;

}

.palette-color{

    display:flex;

    flex-direction:column;

    gap:10px;

    align-items:center;

}

.palette-swatch{

    width:100%;

    aspect-ratio:1;

    border-radius:14px;

    cursor:pointer;

    transition:.25s;

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

}

.palette-swatch:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 30px rgba(0,0,0,.2);

}

.palette-label{

    font-size:.82rem;

    text-align:center;

    word-break:break-word;

}

/* ==========================================
   HARMONIES
========================================== */

.harmony-grid{

    display:grid;

    gap:28px;

}

.harmony-group h3{

    margin-bottom:14px;

}

.palette-row{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.harmony-color{

    width:78px;
    height:78px;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

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

}

.harmony-color:hover{

    transform:scale(1.06);

}

/* ==========================================
   VALIDATION
========================================== */

.valid{

    border-color:#22c55e !important;

}

.invalid{

    border-color:#ef4444 !important;

}

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

.contrast-pass{

    color:#16a34a;
    font-weight:700;

}

.contrast-fail{

    color:#dc2626;
    font-weight:700;

}

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

.copy-flash{

    animation:copyFlash .35s ease;

}

@keyframes copyFlash{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

/* ==========================================
   STICKY OUTPUT
========================================== */

@media (min-width:1100px){

.hero-card:last-child{

    position:sticky;

    top:100px;

    align-self:start;

}

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

.result-row{

    flex-direction:column;

    align-items:stretch;

}

.result-row button{

    width:100%;

}

#largePreview{

    height:220px;

}

.palette-grid{

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

}

.palette-row{

    justify-content:center;

}

}

#largePreview{
    cursor:pointer;
}

.copy-toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #111;
            color: white;
            padding: 10px 14px;
            border-radius: 999px;
            opacity: 0;
            transition: 0.25s ease;
        }

        .copy-toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(-6px);
        }