*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%;overflow-x:hidden;overflow-y:auto}
body{font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top,#2a574a 0%,#112720 42%,#07120f 100%);color:#fff8df;display:flex;align-items:center;justify-content:center;padding:18px;min-height:100svh}
.page{width:min(100%,980px);min-height:min(650px,calc(100svh - 36px));height:auto;position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:24px;border:1px solid rgba(255,213,87,.22);border-radius:30px;background:rgba(8,24,20,.82);box-shadow:0 28px 95px rgba(0,0,0,.48);padding:34px;overflow:visible}
.page:before{content:"";position:absolute;right:-120px;top:-130px;width:360px;height:360px;border-radius:50%;background:rgba(255,211,77,.1);pointer-events:none}
.hero,.panel,footer{position:relative;z-index:1}
.hero{display:flex;flex-direction:column;justify-content:center}
.pill{display:inline-flex;width:max-content;padding:8px 14px;border-radius:999px;background:rgba(255,211,77,.14);color:#ffd96a;font-size:14px;font-weight:800;margin-bottom:20px}
h1{font-size:clamp(42px,7vw,76px);line-height:.92;letter-spacing:-2.5px;margin-bottom:18px}
h1 span{color:#ffd34d}
.intro{font-size:clamp(17px,2vw,23px);line-height:1.42;color:#f6edd0;max-width:620px;margin-bottom:18px}
.tagline{font-size:18px;color:#ffd96a;font-weight:900;margin-bottom:22px}
.live-box{display:flex;align-items:center;gap:13px;max-width:500px;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(255,255,255,.07)}
.live-box.online{border-color:rgba(90,255,151,.45);background:rgba(90,255,151,.08)}
.live-box.unknown{border-color:rgba(255,211,77,.42);background:rgba(255,211,77,.08)}
.dot{width:14px;height:14px;border-radius:999px;background:#777;box-shadow:0 0 0 5px rgba(255,255,255,.05);flex:0 0 auto}
.dot.online{background:#54ff91;box-shadow:0 0 18px rgba(84,255,145,.9)}
.dot.unknown{background:#ffd34d;box-shadow:0 0 18px rgba(255,211,77,.65)}
.live-box strong{display:block;font-size:17px;margin-bottom:3px}
.live-box small{display:block;color:#d7cfb2;font-size:13px;line-height:1.3}
.panel{display:flex;flex-direction:column;justify-content:center;gap:14px}
.card{border:1px solid rgba(255,255,255,.13);border-radius:24px;background:rgba(255,255,255,.065);backdrop-filter:blur(10px);padding:19px}
.primary-card{background:rgba(255,211,77,.075)}
.card h2{font-size:22px;color:#ffd34d;margin-bottom:8px}
.card p{font-size:14px;line-height:1.38;color:#ded5ba;margin-bottom:13px}
.buttons{display:grid;gap:10px}
.btn{display:flex;align-items:center;justify-content:center;text-align:center;min-height:47px;border-radius:16px;text-decoration:none;font-weight:900;padding:12px 14px;transition:transform .15s ease,opacity .15s ease}
.btn:hover{transform:translateY(-1px);opacity:.92}
.kick{background:#53fc18;color:#08120f}
.youtube{background:#ff2f2f;color:white}
.iban{font-size:clamp(15px,1.7vw,19px);font-weight:900;letter-spacing:.4px;color:white;background:rgba(0,0,0,.24);border-radius:15px;padding:12px;word-break:break-all;margin-bottom:10px}
.copy{width:100%;min-height:40px;border:0;border-radius:14px;background:#ffd34d;color:#10211d;font-weight:900;cursor:pointer;margin-bottom:11px}
.qr{height:105px;border:1px dashed rgba(255,211,77,.48);border-radius:17px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.qr img{width:100%;height:100%;object-fit:contain;background:white}
.qr-empty{text-align:center;color:#ffd96a;font-size:13px;line-height:1.35}
footer{position:absolute;left:34px;bottom:23px;color:rgba(255,248,223,.55);font-size:13px}

@media(max-width:760px){
  body{padding:10px;align-items:flex-start;justify-content:center}
  .page{width:100%;min-height:calc(100svh - 20px);height:auto;grid-template-columns:1fr;gap:11px;padding:22px;border-radius:23px}
  h1{font-size:42px;margin-bottom:12px}
  .pill{margin-bottom:12px}
  .intro{font-size:16px;line-height:1.34;margin-bottom:10px}
  .tagline{font-size:15px;margin-bottom:10px}
  .hero{justify-content:start}
  .live-box{padding:11px 12px}
  .live-box strong{font-size:15px}
  .live-box small{font-size:12px}
  .panel{justify-content:start;gap:10px}
  .card{padding:13px;border-radius:19px}
  .card h2{font-size:18px;margin-bottom:5px}
  .card p{font-size:12px;margin-bottom:8px}
  .btn{min-height:40px;font-size:14px}
  .iban{font-size:11px;padding:8px}
  .copy{min-height:30px}
  .qr{height:95px}
  footer{display:none}
}

@media(max-height:560px){
  body{align-items:flex-start}
  .page{min-height:calc(100svh - 36px);height:auto;padding:18px}
  .pill{margin-bottom:10px}
  h1{font-size:38px;margin-bottom:9px}
  .intro{font-size:15px;margin-bottom:8px}
  .tagline{margin-bottom:8px}
  .card{padding:12px}
  .qr{height:80px}
}