/* Kare Plus encyclopedia: scoped styles only */
.mendeleev{max-width:1250px;margin:28px auto 55px;color:#28313d}
.mendeleev .md-intro{font-size:17px;line-height:1.65;margin:0 0 22px}
.mendeleev .md-scroll{overflow-x:auto;padding:5px 2px 14px;overscroll-behavior-x:contain}
.mendeleev .md-grid{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(7,64px) 15px repeat(2,64px);gap:5px;min-width:950px}
.mendeleev .md-element{box-sizing:border-box;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;border-radius:7px;border:1px solid rgba(0,0,0,.09);text-decoration:none!important;transition:transform .16s ease,box-shadow .16s ease;color:#25313c;background:#e6edf2}
.mendeleev .md-metal{background:#dceee3;border-color:#b5d9c4}
.mendeleev .md-metalloid{background:#f4e6c8;border-color:#e6cf9c}
.mendeleev .md-nonmetal{background:#dce9f6;border-color:#bdd4eb}
.mendeleev .md-noble{background:#e8def4;border-color:#d4c1e9}
.mendeleev .md-number{position:absolute;left:6px;top:5px;font-size:10px;line-height:1}
.mendeleev .md-symbol{font-size:23px;font-weight:750;line-height:1}
.mendeleev .md-linked{cursor:pointer;outline-offset:2px}
.mendeleev .md-linked:hover,.mendeleev .md-linked:focus-visible{transform:translateY(-3px);box-shadow:0 5px 15px rgba(0,0,0,.16);z-index:2}
.mendeleev .md-series-label{font-size:12px;align-self:center;color:#65717d}
.mendeleev .md-legend{display:flex;gap:18px;flex-wrap:wrap;margin:17px 0 12px;font-size:13px}
.mendeleev .md-legend span{display:inline-flex;align-items:center;gap:7px}
.mendeleev .md-legend span:before{content:'';width:13px;height:13px;border-radius:3px;border:1px solid rgba(0,0,0,.1);display:inline-block}
.mendeleev .md-legend-metal:before{background:#dceee3}
.mendeleev .md-legend-metalloid:before{background:#f4e6c8}
.mendeleev .md-legend-nonmetal:before{background:#dce9f6}
.mendeleev .md-legend-noble:before{background:#e8def4}
.mendeleev .md-hint{font-size:14px;color:#697582;line-height:1.5}
@media(max-width:700px){.mendeleev{margin:20px auto 35px}.mendeleev .md-grid{grid-template-rows:repeat(7,54px) 12px repeat(2,54px);min-width:850px;gap:4px}.mendeleev .md-symbol{font-size:20px}.mendeleev .md-intro{font-size:15px}}

/* Encyclopedia: elegant desktop element preview and mobile touch card */
.md-tooltip[hidden],.md-mobile-card[hidden]{display:none!important}
.md-tooltip{position:fixed;z-index:99999;pointer-events:none;display:flex;align-items:center;gap:12px;padding:13px 18px;background:#23313c;color:#fff;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.22);white-space:nowrap}
.md-tooltip-number{font-size:12px;color:#aabec9;align-self:flex-start}
.md-tooltip-symbol{font-size:29px;line-height:1.1}
.md-tooltip-name{font-size:16px;font-weight:500}
.mendeleev .md-element:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(0,0,0,.13);z-index:2}
.mendeleev .md-swipe-hint,.mendeleev .md-mobile-card{display:none}
@media(max-width:700px){
 .mendeleev .md-swipe-hint{display:block;font-size:13px;color:#65717d;margin:0 0 10px;text-align:center}
 .mendeleev .md-mobile-card:not([hidden]){display:flex;align-items:center;gap:14px;margin:12px 0 6px;padding:15px 18px;border:1px solid #c8d8d0;background:#f0f7f2;border-radius:12px;color:#243b30}
 .mendeleev .md-mobile-card-number{font-size:13px;color:#65717d;align-self:flex-start}
 .mendeleev .md-mobile-card-symbol{font-size:30px;line-height:1}
 .mendeleev .md-mobile-card-name{font-size:17px;font-weight:600}
 .md-tooltip{display:none!important}
}

.md-tooltip .md-tooltip-symbol {
    color: #ffffff;
}




/* Элемент, для которого создана запись в базе */
.md-element.md-element-ready {
    outline: 2px solid #d4a017;
    outline-offset: -2px;
    box-shadow: 0 0 8px rgba(212, 160, 23, 0.35);
}

/* Выделение при наведении */
.md-element.md-element-ready:hover {
    outline-color: #f0b429;
    box-shadow: 0 0 14px rgba(212, 160, 23, 0.65);
}