h2{
    margin-top:24px;
    margin-bottom:8px;
}

form{
    --sv-max-table-width:800px;
    --sv-max-table-height:400px;
}
#filter-options{
    margin:12px 0;
}

#filter-options div{
    display:flex;
    align-items:center;
    gap:24px;
}
#found-variables-table{
    display:grid;
    grid-template-columns:1fr auto auto auto; 
    max-width:var(--sv-max-table-width);
    width:100%;
    overflow:auto;
    border:1px solid gray;
    border-radius:8px;
    border-collapse:collapse;
}

#found-variables-table thead,
#found-variables-table tbody,
#found-variables-table tr{
    display:grid;
    grid-template-columns:subgrid;
    grid-column:1 / -1;
}

#found-variables-table tbody{
    min-height:80px;
    height:var(--sv-max-table-height);
    resize:vertical;
    overflow:auto;
    scrollbar-gutter:stable
}

#found-variables-table thead{
    position:sticky;
    top:0;
    z-index:2;
    background-color:#FFF07A;
}

#found-variables-table thead th{
    border-bottom:solid 1px gray;
    text-align:start;
    padding:8px;
    white-space:nowrap;
}

#found-variables-table tbody td{
    padding:8px;
    vertical-align:top;
    align-content:center;
    border-bottom:1px solid #ddd;
    position:relative;
}

#found-variables-table tbody td:first-child{
    min-width:200px;
}

#found-variables-table tbody td:nth-of-type(2){
    max-width:200px;
}

#found-variables-table code{
    border-radius:4px;
}
.svis-scan-color-preview{
    display:inline-block;
    width:20px;
    height:20px;
    border:1px solid #000;
    border-radius:4px;
    vertical-align:middle;
    margin-right:8px;
}
.svis-scan-info-wrapper{
    display:flex;
    align-items:center;
    gap:6px;
}

.svis-scan-info-wrapper span[title]{
    cursor:help;
}

#scan-placeholder-message{
    display:block;
    margin-top:20px;
    padding:15px;
    border:1px solid #ccc;
    background-color:#f9f9f9;
    text-align:center;
    max-width:var(--sv-max-table-width);
    box-sizing:border-box;
}

#filter-options{
    width:100%;
    max-width:var(--sv-max-table-width);
}

#scan-search{
    width:200px;
    margin-left:auto;
}
#color-table{
    display:grid;
    grid-template-columns:auto 1fr auto auto;
    max-width:var(--sv-max-table-width);
    width:100%;
    overflow:auto;
    border:1px solid gray;
    border-radius:8px;
    border-collapse:collapse;
}

#color-table thead, 
#color-table tbody, 
#color-table tr{
    display:grid;
    grid-template-columns:subgrid;
    grid-column:1 / -1;
}

#color-table tbody{
    min-height:80px;
    height:var(--sv-max-table-height);
    resize:vertical;
    overflow:auto;
    scrollbar-gutter:stable
}

#color-table thead{
    position:sticky;
    top:0;
    z-index:2;
    background-color:#90DEFF;
}

#color-table thead th{
    border-bottom:solid 1px gray;
    text-align:start;
    padding:8px;
    white-space:nowrap;
}

#color-table tbody td{
    padding:8px;
    vertical-align:top;
    align-content:center;
    border-bottom:1px solid #ddd;
    position:relative;
}

#color-table tbody td.row-index{
    font-weight:bold;
    color:#666;
    text-align:center;
}

#color-table tbody td:nth-of-type(2){
    font-size:18px;
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:4px;
    min-width:200px;
}

#color-table input.color-key-field{
    width:100%;
}

#color-table .remove-color-row{
    margin:0;
    padding:2px 6px;
}

#color-table button{
    line-height:normal;
}

#color-table .wp-picker-container button{
    margin:0;
}

#color-table .wp-picker-input-wrap,
#color-table .wp-picker-holder{
    position:fixed;
    z-index:9999;
}

#color-table .wp-picker-container .wp-picker-input-wrap{
    margin-left:6px;
}

#color-mapping-actions{
    max-width:var(--sv-max-table-width);
    width:100%;
    margin-top:12px;
    display:flex;
    align-items:center;
    gap:8px;
}

#color-mapping-actions button:nth-of-type(1){
    margin-right:auto;
}
.svis-toggle-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:16px;
}

.svis-toggle-card{
    border:2px solid #ddd;
    border-radius:8px;
    padding:12px;
    cursor:pointer;
    background:#fff;
    transition:border-color .2s, box-shadow .2s;
}

.svis-toggle-card input{
    display:none;
}

.svis-toggle-card img{
    max-width:100%;
    height:auto;
}

.svis-toggle-card:hover{
    border-color:#2271b1;
}

.svis-toggle-card input:checked + .svis-toggle-preview,
.svis-toggle-card input:checked ~ *{
    border-color:#2271b1;
}

.svis-toggle-card input:checked{
    outline:none;
}

.svis-toggle-card:has(input:checked){
    border-color:#2271b1;
    box-shadow:0 0 0 4px rgba(34,113,177,.2);
}

.svis-toggle-preview{
    margin:12px 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}