.hydrogen-card{font-family:Arial,Helvetica,sans-serif;color:#162330}
.h-head{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start;padding-right:32px}
.h-symbol-box{height:120px;border-radius:14px;background:#b7dc7e;border:1px solid #8fb35e;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;box-shadow:inset 0 1px #fff8}
.h-symbol-box .h-z{position:absolute;left:10px;top:8px;font-size:13px;font-weight:800;opacity:.7}
.h-symbol-box strong{font-size:58px;line-height:1;font-weight:950}
.h-symbol-box>span:last-child{font-size:12px;font-weight:800;margin-top:5px}
.h-kicker{font-size:10px;font-weight:900;letter-spacing:.14em;color:#738392;margin-top:3px}
.h-info h2{font-size:30px;margin:4px 0 3px}
.h-info p{margin:0 0 12px;color:#657786}
.h-info small{display:block;margin-top:7px;color:#788795;font-size:10px}
.h-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.h-stats div{background:#f3f6f8;border:1px solid #e0e6ea;border-radius:9px;padding:8px}
.h-stats b{display:block;font-size:20px}
.h-stats span{font-size:10px;color:#687a89}
.h-model-title{display:flex;justify-content:space-between;align-items:center;margin:22px 0 8px}
.h-model-title b{display:block;font-size:15px}
.h-model-title span{font-size:10px;color:#71808d}
.h-config{font-size:18px;font-weight:900;background:#edf2f5;border-radius:9px;padding:7px 11px}
.hydrogen-stage{height:360px;border-radius:16px;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 44%,#173753,#091521 68%,#050b10);border:1px solid #203d51;touch-action:none}
.hydrogen-stage canvas{display:block;width:100%;height:100%}
.h-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b9d7e9;font-size:12px}
.h-atom-label{position:absolute;pointer-events:none;color:white;font-size:10px;font-weight:800;background:#0d1b27cc;border:1px solid #ffffff30;padding:5px 7px;border-radius:7px;backdrop-filter:blur(4px)}
.h-label-proton{left:50%;top:50%;transform:translate(-50%,-50%)}
.h-label-electron{right:18px;top:48px}
.h-bottom{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:9px}
.h-bottom div{border:1px solid #dfe6ea;background:#f7f9fa;border-radius:9px;padding:8px 9px}
.h-bottom span{display:block;color:#71808d;font-size:9px;min-height:20px}
.h-bottom b{font-size:17px}
@media(max-width:600px){
 .h-head{grid-template-columns:88px 1fr;gap:12px;padding-right:22px}
 .h-symbol-box{height:88px}.h-symbol-box strong{font-size:42px}
 .h-info h2{font-size:24px}
 .h-stats{grid-template-columns:repeat(3,1fr);gap:4px}.h-stats div{padding:6px}
 .hydrogen-stage{height:300px}
 .h-bottom{grid-template-columns:repeat(2,1fr)}
}

.h-properties{margin-top:18px;border-top:1px solid #dfe6ea;padding-top:15px}
.h-properties h3{font-size:17px;margin:0 0 8px}
.h-property{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:15px;align-items:center;padding:9px 2px;border-bottom:1px solid #e8edf0}
.h-property span{font-size:11px;color:#667887}
.h-property b{font-size:12px;color:#172633;text-align:right}
.h-note{margin-top:12px;padding:10px 11px;background:#f3f6f8;border:1px solid #e0e6ea;border-radius:9px;font-size:10px;line-height:1.45;color:#687987}
@media(max-width:600px){
 .h-property{gap:8px}
 .h-property span{font-size:10px}
 .h-property b{font-size:11px}
}


.h-config{max-width:60%;font-size:13px;overflow-wrap:anywhere}.h-property b{max-width:240px;overflow-wrap:anywhere}.h-note a{color:#235f82}.atom-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}.atom-controls button{padding:8px;border:1px solid #cdd2d6;border-radius:8px;background:#eef5fa;cursor:pointer}.atom-controls label{font-size:12px}.atom-controls input{width:80px;padding:6px}.h-model-title{gap:8px}.h-stats span{letter-spacing:0}.h-head{padding-right:20px}@media(max-width:400px){#panel{padding:16px}.h-head{grid-template-columns:70px 1fr;gap:8px}.h-symbol-box{height:80px}.h-info h2{font-size:22px}.h-stats b{font-size:17px}}