/* sha256 demo */

/* ── SHA-256 ─────────────────────────────────────── */

.hash-panel {
    width: 760px;
    max-width: 100%;
    margin: 1rem auto 0;
    padding: 1rem 1.2rem;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    text-align: left;
}

.hash-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #8b949e;
}

.hash-panel textarea {
    width: 100%;
    padding: 0.5rem 0.7rem;
    background: #0d1117;
    color: #c9d1d9;
    border: 1px solid #30363d;
    border-radius: 6px;
    font: inherit;
    resize: vertical;
}

.hash-panel textarea:focus { outline: none; border-color: #58a6ff; }

.hash-out,
.hash-result code {
    display: block;
    margin-top: 0.5rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.8rem;
    color: #ffa657;
    word-break: break-all;
}

.hash-drop {
    position: relative;
    padding: 1.4rem 1rem;
    border: 2px dashed #30363d;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.hash-drop.drag-over { border-color: #f0883e; background: rgba(240, 136, 62, 0.05); }

@media (hover: hover) {
    .hash-drop:hover { border-color: #f0883e; background: rgba(240, 136, 62, 0.05); }
}

.hash-drop input { display: none; }

.hash-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 0.8rem;
}

.hash-progress {
    height: 4px;
    margin-top: 0.8rem;
    background: #21262d;
    border-radius: 2px;
    overflow: hidden;
}

.hash-progress i {
    display: block;
    height: 100%;
    background: #f0883e;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.15s linear;
}

.hash-result > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
    margin-top: 0.6rem;
    font-size: 0.85rem;
}

.hash-result span { min-width: 5.5em; color: #8b949e; font-size: 0.78rem; }
.hash-result code { margin-top: 0; flex: 1 1 100%; }
.hash-result em { font-style: normal; font-size: 0.78rem; color: #8b949e; }
.hash-result .ok { color: #3fb950; }
.hash-result .fail { color: #f85149; }

@media (prefers-reduced-motion: reduce) {
    .hash-progress i { transition: none; }
}