.heraKapcsApp{max-width:470px;margin:0 auto;padding:20px;font-family:Georgia,serif;color:#e6e6e6;background:#000;box-sizing:border-box}
.heraKapcsMacska{max-width:450px;margin:0 auto 20px}
.heraKapcsMacskaCard{position:relative;overflow:hidden;border-radius:6px}
.heraKapcsMacskaImg{width:100%;display:block}
.heraKapcsMacskaTitle{position:absolute;bottom:14px;left:14px;color:#e6e6e6;text-shadow:0 0 6px rgba(0,0,0,.85)}
.heraKapcsMacskaH1{font-size:22px;font-weight:bold;letter-spacing:2px}
.heraKapcsMacskaH2{font-size:13px;letter-spacing:3px;color:#c7d0c7}
.heraKapcsMacskaLine{margin-top:6px;width:40px;border-bottom:2px solid #4F7942}
.heraKapcsMacskaOverlay{position:absolute;inset:0;background:rgba(0,0,0,.85);padding:16px;font-size:12px;line-height:1.6;opacity:0;transition:.4s;overflow:auto;box-sizing:border-box}
.heraKapcsMacskaCard:hover .heraKapcsMacskaOverlay{opacity:1}
.heraKapcsMacskaOverlayText{border-left:3px solid #4F7942;padding-left:10px;text-align:justify}
.heraKapcsMacskaOverlayText p{margin:0 0 10px 0}

.heraKapcsLabel{margin:16px 0 6px;color:#4F7942}
.heraKapcsInput{width:100%;box-sizing:border-box;background:#0b0b0b;color:#e6e6e6;border:1px solid #4F7942;border-radius:6px;padding:10px;font-family:Georgia,serif;font-size:12px}
.heraKapcsTextarea{width:100%;min-height:90px;box-sizing:border-box;background:#0b0b0b;color:#e6e6e6;border:1px solid #4F7942;border-radius:6px;padding:10px;font-family:Georgia,serif;font-size:12px}

.heraKapcsRangeWrap{margin-top:6px}
.heraKapcsRange{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:#1a1a1a;outline:none}
.heraKapcsRange::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#4F7942;cursor:pointer;border:2px solid #0b0b0b}
.heraKapcsRange::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#4F7942;border:none}
.heraKapcsRangeLabel{margin-top:6px;font-size:12px;color:#c7d0c7;text-align:center}

.heraKapcsPreviewWrap{margin:26px auto;padding:16px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.heraKapcsPreviewTitle{font-size:13px;color:#9fd0a3;margin-bottom:10px;text-align:center;letter-spacing:1px}

.heraKapcsCopyBtn{margin-top:16px;padding:10px 14px;background:#4F7942;border:0;border-radius:6px;font-size:12px;cursor:pointer}
.heraKapcsCopyBtn:hover{background:#6aa36a}
.heraKapcsOutput{margin-top:12px;width:100%;min-height:260px;background:#000;color:#9fd0a3;border:1px dashed #4F7942;border-radius:6px;padding:10px;box-sizing:border-box;font-family:monospace;font-size:11px}

/* Preview/snippet stílusok (ugyanaz, mint amit exportálsz) */
.heraKapcsApp .kapcsolat-box{max-width:380px;margin:0 auto;font-family:Georgia,serif}
.heraKapcsApp .kapcsolat-title{font-size:15px;color:#4F7942;font-weight:bold;margin-bottom:8px}
.heraKapcsApp .kapcsolat-content{padding:14px 12px;border:1px solid #4F7942;border-radius:6px;background:linear-gradient(180deg,#0b0b0b 0%,#0f0f0f 100%);color:#e6e6e6;font-size:12px;line-height:1.6;text-align:justify;box-shadow:0 0 8px rgba(0,0,0,0.4)}
.heraKapcsApp .scale-bar{height:6px;background:#222;border-radius:3px;margin-top:10px}
.heraKapcsApp .scale-fill{height:100%;background:#4F7942;border-radius:3px}
.heraKapcsApp .scale-text{margin-top:6px;font-size:11px;color:#c7d0c7;text-align:center}