.kvpt-wrap{
    max-width:1280px;
    margin:0 auto;
    padding:20px;
    background:#fcfcfc;
    font-family:Arial, Helvetica, sans-serif;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.kvpt-title{
    text-align:center;
    font-size:52px;
    line-height:1.1;
    margin:10px 0 26px;
    color:#0e2741;
    font-weight:700;
}

.kvpt-legend-top{
    display:flex;
    gap:20px;
    align-items:flex-start;
    flex-wrap:wrap;
    margin:0 0 18px;
}

.kvpt-state{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
}

.state-box{
    width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #333;
    background:#fff;
    font-weight:700;
    font-size:13px;
}

.state-box.liquid{ color:#1f33d6; }
.state-box.gas{ color:#b22727; }
.state-box.unknown{ color:#666; }

.kvpt-category-panel{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    gap:4px;
    margin:0 0 14px;
}

.kvpt-filter{
    border:1px solid rgba(0,0,0,.18);
    padding:10px 12px;
    font-size:13px;
    line-height:1.1;
    cursor:pointer;
    user-select:none;
    transition:all .2s ease;
    color:#555;
    background:#fff;
}

.kvpt-filter:hover,
.kvpt-filter.is-hovered{
    outline:2px solid #444;
    outline-offset:-1px;
    color:#222;
}

.kvpt-filter-main{
    min-width:140px;
    text-align:center;
    font-weight:700;
    background:#efefef;
}

.kvpt-filter-vertical{
    writing-mode:vertical-rl;
    text-orientation:mixed;
    min-height:92px;
    text-align:center;
    background:#8bd0c1;
}

.kvpt-filter.sub{
    min-height:92px;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    padding:8px 6px;
}

.kvpt-filter.alkali-metal{ background:#dfca5c; }
.kvpt-filter.alkaline-earth{ background:#dfe45a; }
.kvpt-filter.lanthanoid{ background:#e7cb95; }
.kvpt-filter.actinoid{ background:#e7bfd0; }
.kvpt-filter.transition-metal{ background:#e5c5c4; }
.kvpt-filter.post-transition{ background:#9dc9d6; }
.kvpt-filter.reactive-nonmetal{ background:#81d97f; }
.kvpt-filter.noble-gas{ background:#d6b1d8; }

.kvpt-grid{
    display:grid;
    grid-template-columns:40px repeat(18, minmax(52px, 1fr));
    grid-template-rows:34px repeat(7, 74px) 14px 74px 74px;
    gap:2px;
    background:#efefef;
    padding:8px;
    border:1px solid #cfcfcf;
    transition:all .2s ease;
}

.kvpt-group,
.kvpt-period{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    color:#26445d;
}

.kvpt-el{
    position:relative;
    min-height:74px;
    padding:4px 5px;
    border:1px solid rgba(0,0,0,.08);
    overflow:hidden;
    transition:opacity .22s ease, transform .22s ease, box-shadow .22s ease;
}

.kvpt-el .num{
    display:block;
    font-size:10px;
    line-height:1;
}
.kvpt-el .sym{
    display:block;
    font-size:26px;
    line-height:1.05;
    font-weight:700;
    margin-top:2px;
}
.kvpt-el .name{
    display:block;
    font-size:10px;
    line-height:1.08;
    margin-top:2px;
}
.kvpt-el .wt{
    display:block;
    font-size:10px;
    line-height:1.08;
    margin-top:1px;
}

.kvpt-el.alkali-metal{ background:#dfca5c; }
.kvpt-el.alkaline-earth{ background:#dfe45a; }
.kvpt-el.transition-metal{ background:#e5c5c4; }
.kvpt-el.post-transition{ background:#9dc9d6; }
.kvpt-el.metalloid{ background:#8bd0c1; }
.kvpt-el.reactive-nonmetal{ background:#81d97f; }
.kvpt-el.noble-gas{ background:#d6b1d8; }
.kvpt-el.lanthanoid{ background:#e7cb95; }
.kvpt-el.actinoid{ background:#e7bfd0; }

.kvpt-gap{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    color:#666;
    background:#b8cfdd;
    border:2px solid #91abc2;
}

.kvpt-grid.is-filtering .kvpt-el{
    opacity:.18;
    transform:scale(.98);
}

.kvpt-grid.is-filtering .kvpt-el.is-active{
    opacity:1;
    transform:scale(1);
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.18);
    z-index:2;
}

@media (max-width: 1100px){
    .kvpt-wrap{
        overflow-x:auto;
    }

    .kvpt-grid{
        min-width:1120px;
    }

    .kvpt-category-panel{
        min-width:900px;
    }

    .kvpt-title{
        font-size:34px;
    }
}