*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;justify-content:center;align-items:center}#app{width:100%;max-width:600px;padding:20px}header{text-align:center;color:#fff;margin-bottom:30px}header h1{font-size:2.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.2)}header p{font-size:1.2rem;opacity:.9}.card{background:white;border-radius:20px;padding:2rem;box-shadow:0 10px 30px #0003}.card h2{color:#333;margin-bottom:10px}.card p{color:#666;margin-bottom:20px}.buttons{display:flex;gap:10px;flex-wrap:wrap}button{flex:1;padding:12px 20px;border:none;border-radius:8px;font-size:1rem;cursor:pointer;color:#fff;font-weight:700;transition:all .3s;min-width:120px}button:first-child{background:#68a063}button:first-child:hover{background:#5a8f55;transform:scale(1.05)}button:last-child{background:#3776AB}button:last-child:hover{background:#2c5f8a;transform:scale(1.05)}.response{margin-top:20px;padding:15px;background:#f8f9fa;border-radius:8px;border:1px solid #e0e0e0}.response pre{margin:0;white-space:pre-wrap;word-break:break-all;font-size:.9rem}footer{text-align:center;color:#fff;margin-top:30px;opacity:.8}