.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.search-bar{
    width:100%;
    padding:12px 16px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--card);
    color:var(--text);
    margin-bottom:20px;
}

/* reusable grids */

.card-grid,
.sweep-grid{
    display:grid;
    gap:20px;
}

.card-grid{
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}

.sweep-grid{
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

/* reusable cards */

.library-card,
.template-card,
.history-card,
.compare-card,
.sweep-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:18px;
    transition:0.3s;
}

.library-card:hover,
.template-card:hover,
.history-card:hover,
.compare-card:hover,
.sweep-card:hover{
    transform:translateY(-3px);
}

.library-card h3,
.template-card h3,
.history-card h3{
    margin-bottom:10px;
}

.library-card p,
.template-card p,
.history-card p{
    font-size:14px;
    color:var(--text-light);
    margin-bottom:8px;
}

.badge{
    display:inline-block;
    background:var(--primary);
    color:white;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    margin-bottom:10px;
}

.card-actions{
    display:flex;
    gap:10px;
    margin-top:14px;
}

.card-actions button{
    flex:1;
}

/* comparison */

.comparison-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.comparison-output{
    min-height:250px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--bg-light);
    overflow-y:auto;
    white-space:pre-wrap;
}

.sweep-metrics{
    margin-top:10px;
    font-size:13px;
    color:var(--text-light);
}

/* table */

.table-container{
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:12px;
}

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    padding:14px;
    text-align:left;
    border-bottom:1px solid var(--border);
}

th{
    background:var(--bg-light);
}

/* empty */

.empty-state{
    padding:40px 20px;
    text-align:center;
    border:2px dashed var(--border);
    border-radius:12px;
    color:var(--text-light);
}

/* loader */

.loader{
    width:40px;
    height:40px;
    border:4px solid var(--border);
    border-top:4px solid var(--primary);
    border-radius:50%;
    margin:40px auto;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

/* modal */

.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    pointer-events:none;
    transition:.3s;
}

.modal.active{
    opacity:1;
    pointer-events:auto;
}

.modal-content{
    width:90%;
    max-width:700px;
    background:var(--card);
    padding:24px;
    border-radius:12px;
}

/* code */

pre{
    padding:16px;
    overflow-x:auto;
    border-radius:12px;
}

code{
    font-size:14px;
}