.hmac-workspace{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:2rem;}
@media (min-width:992px){.hmac-workspace{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch;}}
.hmac-card{background:var(--bs-body-bg,#fff);border:1px solid var(--bs-border-color,#e9ecef);border-radius:1rem;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,0.06);display:flex;flex-direction:column;}
.hmac-algo-row{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1.25rem;}
.hmac-algo-label{font-size:0.8125rem;font-weight:600;color:var(--text-muted,#6b7280);text-transform:uppercase;letter-spacing:0.04em;}
.hmac-algo-strip{display:flex;flex-wrap:wrap;gap:0.5rem;}
.hmac-algo-chip{appearance:none;border:1px solid var(--bs-border-color,#e2e8f0);border-radius:999px;padding:0.5rem 1rem;font-size:0.8125rem;font-weight:600;background:var(--bs-body-bg,#fff);color:var(--bs-body-color,#334155);cursor:pointer;transition:border-color 0.2s,background 0.2s,color 0.2s;}
.hmac-algo-chip:hover{border-color:var(--bs-primary,#0d6efd);color:var(--bs-primary,#0d6efd);}
.hmac-algo-chip.is-active{background:var(--bs-primary,#0d6efd);border-color:var(--bs-primary,#0d6efd);color:#fff;}
.hmac-field{margin-bottom:1.25rem;}
.hmac-label{display:block;font-size:0.875rem;font-weight:600;color:var(--bs-body-color,#1e293b);margin-bottom:0.375rem;}
.hmac-textarea{width:100%;min-height:auto;padding:0.75rem 1rem;font-size:0.9375rem;line-height:1.5;border:1px solid var(--bs-border-color,#e2e8f0);border-radius:0.5rem;background:var(--bs-body-bg,#fff);color:var(--bs-body-color,#1e293b);resize:vertical;transition:border-color 0.2s,box-shadow 0.2s;}
.hmac-textarea::placeholder{color:var(--text-muted,#94a3b8);}
.hmac-textarea:focus{outline:0;border-color:var(--bs-primary,#0d6efd);box-shadow:0 0 0 3px rgba(13,110,253,0.15);}
.hmac-key-input{min-height:4.5rem;}
.hmac-message-input{min-height:8rem;}
.hmac-drop-wrap{margin-bottom:1.25rem;}
.hmac-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:7rem;padding:1.25rem;border:2px dashed var(--bs-border-color,#cbd5e1);border-radius:0.75rem;background:var(--bs-body-bg,#fff);cursor:pointer;transition:border-color 0.2s,background 0.2s;}
.hmac-dropzone:hover,.hmac-dropzone.is-dragover{border-color:var(--bs-primary,#0d6efd);background:rgba(13,110,253,0.04);}
.hmac-drop-icon{width:2.5rem;height:2.5rem;margin-bottom:0.5rem;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0.5;}
.hmac-drop-text{font-size:0.875rem;color:var(--text-muted,#64748b);margin:0;}
.hmac-file-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none;}
.hmac-actions{margin-top:0.25rem;}
.hmac-btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 1.5rem;font-size:0.9375rem;font-weight:600;color:#fff;background:var(--bs-primary,#0d6efd);border:0;border-radius:0.5rem;cursor:pointer;transition:background 0.2s,transform 0.1s;}
.hmac-btn-primary:hover{background:var(--bs-primary-dark,#0b5ed7);}
.hmac-btn-primary:active{transform:scale(0.98);}
.hmac-result-card{background:var(--bs-body-bg,#fff);border:1px solid var(--bs-border-color,#e9ecef);border-radius:1rem;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,0.06);display:flex;flex-direction:column;min-height:0;}
.hmac-result-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.5rem;margin-bottom:0.75rem;}
.hmac-result-title{font-size:0.9375rem;font-weight:600;color:var(--bs-body-color,#1e293b);}
.hmac-btn-copy{padding:0.375rem 0.75rem;font-size:0.8125rem;font-weight:600;color:var(--bs-primary,#0d6efd);background:transparent;border:1px solid var(--bs-primary,#0d6efd);border-radius:0.375rem;cursor:pointer;transition:background 0.2s,color 0.2s;}
.hmac-btn-copy:hover{background:var(--bs-primary,#0d6efd);color:#fff;}
.hmac-result-code{flex:1;min-height:4rem;padding:1rem;font-family:ui-monospace,monospace;font-size:0.8125rem;line-height:1.6;word-break:break-all;white-space:pre-wrap;background:#0f172a;color:#94a3b8;border-radius:0.5rem;}
@media (min-width:992px){.hmac-result-code{min-height:8rem;}}
.hmac-meta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem;font-size:0.8125rem;color:var(--text-muted,#64748b);}
.hmac-meta-item strong{color:var(--bs-body-color,#334155);}
@media (min-width:768px){.hmac-workspace{gap:1.5rem;}.hmac-card,.hmac-result-card{padding:1.5rem;}.hmac-algo-row{flex-direction:row;align-items:center;}.hmac-algo-strip{flex:1;}}