.sha384-wrap{margin-bottom:2rem;}
.sha384-panels{display:flex;flex-direction:column;gap:1.25rem;}
.sha384-in{background:var(--surface,#fff);border-radius:16px;padding:1.25rem;border:1px solid var(--border,#eee);box-shadow:0 2px 12px rgba(0,0,0,0.04);}
.sha384-in-label{display:block;font-size:0.9375rem;font-weight:600;color:var(--text-main,#1a1a1a);margin-bottom:0.5rem;}
.sha384-textarea{width:100%;min-height:140px;padding:1rem 1.25rem;border:2px solid var(--border,#e5e7eb);border-radius:12px;font-size:1rem;line-height:1.6;resize:vertical;background:var(--surface,#fff);color:var(--text-main,#1a1a1a);transition:border-color 0.2s,box-shadow 0.2s;box-sizing:border-box;}
.sha384-textarea:focus{outline:none;border-color:var(--primary,#0ea5e9);box-shadow:0 0 0 3px rgba(14,165,233,0.12);}
.sha384-textarea::placeholder{color:var(--text-muted,#6b7280);}
.sha384-char-count{font-size:0.8125rem;color:var(--text-muted,#6b7280);margin:0.5rem 0 0;}
.sha384-divider{display:flex;align-items:center;text-align:center;margin:1rem 0;color:var(--text-muted,#9ca3af);font-size:0.8125rem;}
.sha384-divider::before,.sha384-divider::after{content:'';flex:1;border-bottom:1px solid var(--border,#e5e7eb);}
.sha384-divider span{padding:0 0.75rem;}
.sha384-drop{position:relative;padding:1.5rem;border:2px dashed var(--border,#d1d5db);border-radius:12px;text-align:center;cursor:pointer;transition:border-color 0.2s,background 0.2s;background:var(--surface-muted,#f8fafc);}
.sha384-drop:hover,.sha384-drop:focus-visible{border-color:var(--primary,#0ea5e9);background:rgba(14,165,233,0.05);outline:none;}
.sha384-drop.dragover{border-color:var(--primary,#0ea5e9);background:rgba(14,165,233,0.08);border-style:solid;}
.sha384-file-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.sha384-drop-label{font-size:0.9375rem;font-weight:500;color:var(--text-main,#374151);}
.sha384-clear{margin-top:1rem;padding:0.5rem 0;font-size:0.875rem;font-weight:500;color:var(--text-muted,#6b7280);background:none;border:none;cursor:pointer;transition:color 0.2s;}
.sha384-clear:hover{color:var(--primary,#0ea5e9);}
.sha384-out{background:var(--surface,#fff);border-radius:16px;padding:1.25rem;border:1px solid var(--border,#eee);box-shadow:0 2px 12px rgba(0,0,0,0.04);}
.sha384-out-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem;}
.sha384-out-title{font-size:0.9375rem;font-weight:600;color:var(--text-main,#1a1a1a);}
.sha384-copy-btn{display:inline-flex;align-items:center;padding:0.5rem 1rem;border:none;border-radius:10px;font-size:0.875rem;font-weight:500;cursor:pointer;transition:background 0.2s,transform 0.15s;background:var(--primary,#0ea5e9);color:#fff;}
.sha384-copy-btn:hover:not(:disabled){filter:brightness(1.06);}
.sha384-copy-btn:active:not(:disabled){transform:scale(0.98);}
.sha384-copy-btn:disabled{opacity:0.5;cursor:not-allowed;}
.sha384-copy-btn.copied{background:#059669;}
.sha384-result{min-height:120px;padding:1rem 1.25rem;border-radius:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:0.875rem;line-height:1.65;word-break:break-all;white-space:pre-wrap;overflow-wrap:break-word;background:#0c1222;border:1px solid #1a2744;color:#67e8f9;}
.sha384-result.has-hash .sha384-result-placeholder{display:none;}
.sha384-result-placeholder{color:#64748b;font-style:italic;}
.sha384-result-meta{font-size:0.75rem;color:var(--text-muted,#6b7280);margin:0.5rem 0 0;}
@media (min-width:768px){.sha384-panels{flex-direction:row;gap:1.5rem;align-items:stretch;}
.sha384-in{flex:1;min-width:0;}
.sha384-out{flex:1;min-width:0;display:flex;flex-direction:column;}
.sha384-result{flex:1;min-height:160px;}}
@media (max-width:767px){.sha384-in,.sha384-out{padding:1rem;}
.sha384-textarea{min-height:120px;font-size:0.9375rem;}
.sha384-result{min-height:100px;font-size:0.8125rem;}}