/* Drop zone */
.drop-zone {
  border: 2px dashed #cfe0f0;
  border-radius: 10px;
  background: #f8fbff;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.drop-zone:hover, .drop-zone:focus, .drop-zone.dragging {
  border-color: #0078d4;
  background: #eef6ff;
}
.drop-icon { font-size: 30px; line-height: 1; }
.drop-text { margin-top: 10px; font-size: 15px; color: #333; font-weight: 600; }
.drop-link { color: #0078d4; text-decoration: underline; }
.drop-note { margin-top: 6px; font-size: 12px; color: #999; }

.file-info {
  display: none;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #0078d4;
  word-break: break-all;
}

/* Algorithm choices */
.algo-title {
  margin-top: 20px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
}
.algo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.algo-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
.algo-item input[type=checkbox] { accent-color: #0078d4; cursor: pointer; }

/* Verify */
.verify-row { margin-top: 20px; }
.verify-row label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; }
.verify-opt { color: #999; font-weight: 400; }
#expected {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: 'Consolas', 'D2Coding', monospace;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
#expected:focus { border-color: #0078d4; }

.verify-banner {
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  word-break: break-word;
}
.verify-banner.ok  { background: #eaf7ea; border: 1px solid #b6e0b6; color: #107c10; }
.verify-banner.bad { background: #fdecea; border: 1px solid #f5c6c0; color: #c0392b; }

/* Results */
.results { margin-top: 16px; }
.hash-hint { font-size: 13px; color: #888; padding: 6px 0; }
.hash-error { color: #c0392b; }

.hash-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 6px;
  background: #fafafa;
  margin-bottom: 8px;
}
.hash-row.match {
  border-color: #b6e0b6;
  background: #f2fbf2;
}
.hash-algo {
  flex-shrink: 0;
  width: 74px;
  font-size: 12px;
  font-weight: 700;
  color: #0078d4;
}
.hash-value {
  flex: 1;
  font-family: 'Consolas', 'D2Coding', monospace;
  font-size: 13px;
  color: #1a1a1a;
  word-break: break-all;
}
.btn-copy {
  flex-shrink: 0;
  padding: 6px 12px;
  background: #0078d4;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

@media (max-width: 480px) {
  .hash-row { flex-wrap: wrap; }
  .hash-algo { width: auto; }
  .hash-value { flex-basis: 100%; order: 3; }
}