.copy-badge{cursor:pointer;z-index:100;background:#f0f0f0;border:1px solid #ccc;border-radius:12px;align-items:center;padding:5px 12px;font-size:13px;display:flex;position:absolute;top:-12px;right:10px}.copy-badge:hover{background:#e3e3e3}.hmac-container{max-width:900px;margin:0 auto;padding:20px}.tool-title{font-size:32px;font-weight:700}.tool-subtitle{color:#555;margin-bottom:20px}.input-box{border:1px solid #ccc;border-radius:8px;width:100%;min-height:120px;margin-bottom:12px;padding:14px;font-family:monospace}.secret-input{border:1px solid #ccc;border-radius:8px;width:100%;margin-bottom:15px;padding:12px}.controls-row{gap:14px;margin-bottom:20px;display:flex}.algo-select{border:1px solid #aaa;border-radius:8px;padding:10px}.btn-generate{color:#fff;cursor:pointer;background:#004aad;border:none;border-radius:8px;padding:10px 16px;font-weight:600}.btn-generate:hover{background:#00398a}.output-wrapper{margin-top:15px;position:relative}.output-pre{color:#fff;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;background:#111;border:1px solid #444;border-radius:8px;padding:16px}.error-box{color:#a30000;background:#ffecec;border-left:4px solid #d8000c;margin-top:16px;padding:12px}.seo-section{background:#f8f9fc;border:1px solid #e3e6ef;border-radius:10px;margin-top:40px;padding:20px}